第四章 JavaScript基础

站长

2023年06月11日 22:18 · 阅读数 20

第四章 JavaScript基础

4.1 JavaScript的发展历程

JavaScript 是一种广泛使用的编程语言，可用于构建 Web 应用程序和服务端应用程序。它的历史可以追溯到上世纪 90 年代初期，以下是 JavaScript 的发展历程：

1.1995 年，Netscape 公司的 Brendan Eich 在十天之内开发了 JavaScript，最初被称为 Mocha，随后更名为 LiveScript，最终命名为 JavaScript。
2.1996 年，微软推出了自己的 JavaScript 实现，命名为 JScript。在接下来的几年里，Netscape 和微软的 JavaScript 实现都在不断发展。
3.1997 年，欧洲计算机制造商协会(ECMA) 推出了一份名为“ECMAScript”的标准，这个标准是为了规范 JavaScript 和 JScript 实现而制定的。ECMAScript 定义了一套基本的语言结构，包括数据类型、控制结构、函数等。
4.2002 年，ECMAScript 4.0 被提出，但由于各种原因，该版本最终被放弃。
5.2009 年，ECMAScript 5.0 发布，增加了一些新特性，如严格模式、JSON 对象、Object.create() 方法等。
6.2015 年，ECMAScript 6.0（也称为 ECMAScript 2015）发布，引入了许多新特性，如类、箭头函数、let 和 const 关键字、解构赋值等。ECMAScript 6.0 是 JavaScript 史上最重要的版本之一，也被认为是一种全新的语言。
7.随着 JavaScript 的发展，出现了一些流行的框架和库，如 jQuery、Angular、React 和 Vue.js 等，这些框架和库使得 JavaScript 开发变得更加容易。
8.目前，ECMAScript 的最新版本是 ECMAScript 2022，其中包括一些新特性，如字符串方法、Promise.any() 方法、数值分隔符等。通过上面的介绍我们可以了解到JavaScript 是一种实现了 ECMAScript 标准的脚本语言。ECMAScript 是一种由 Ecma 国际组织标准化的脚本语言规范，旨在为不同平台提供一致的脚本语言实现。 JavaScript 是一种基于 ECMAScript 标准实现的脚本语言，是最为常见的 ECMAScript 实现之一。除了 ECMAScript 标准规定的语法和内置对象之外，JavaScript 还包含了一些非标准的语法和对象，例如 DOM 和 BOM 等浏览器环境提供的对象和方法，这些对象和方法并不在 ECMAScript 标准中定义。因此，JavaScript 通常可以被认为是 ECMAScript 标准的一种实现。但是，由于 JavaScript 包含了一些非标准的特性，因此它并不是 ECMAScript 标准的唯一实现。还有一些其他的 ECMAScript 实现，例如 Adobe ActionScript 和 Microsoft JScript 等，它们都是基于 ECMAScript 标准实现的脚本语言。 JavaScript 的发展过程可以总结为一系列的版本迭代和标准化，它已成为 Web 开发中不可或缺的一部分。

JavaScript的作用 JavaScript 在前端开发中具有非常重要的作用，它可以使网页变得更加动态、交互性强，同时也可以使网页功能更加丰富。

下面是 JavaScript 在前端开发中的重要性和举例说明：

实现动态效果：通过 JavaScript，可以实现网页中的动态效果，如菜单的弹出、图片的滚动、元素的隐藏/显示等。这些效果可以增加网页的趣味性和视觉效果，提升用户的体验感。
实现交互效果：JavaScript 可以捕捉用户的操作，例如鼠标的点击、键盘的输入等，从而实现网页的交互效果。例如，当用户点击一个按钮时，可以弹出一个对话框，提示用户是否确定操作。这种交互效果可以增加网页的可用性和用户体验。
提高用户体验：JavaScript 可以让网页更加智能，例如实现搜索框的自动补全、表单验证、数据的动态加载等功能，可以提高用户的使用体验和满意度。
改善性能：JavaScript 可以减少网页的服务器请求次数，例如通过 Ajax 技术实现动态加载数据，减少页面的刷新次数，从而提高网页的性能。
实现富媒体内容：JavaScript 可以实现图表的展示、视频的播放、音频的播放等富媒体内容，可以使网页内容更加丰富和多样化。
实现响应式设计：JavaScript 可以实现响应式设计，使网页在不同屏幕尺寸和分辨率下自适应布局，从而提高网页的兼容性和可用性。此外，JavaScript 作为一门语言的发展已经不仅仅局限于前端开发，它可以用于各种领域的开发，包括服务端开发、客户端开发、桌面应用程序开发等。在服务端开发方面，Node.js 是目前最流行的基于 JavaScript 的开发平台，它使用了 V8 引擎，使得 JavaScript 可以在服务器端运行，实现了 JavaScript 的后端开发。使用 Node.js，可以方便地编写高性能、高并发、易于扩展的服务器程序。同时，Node.js 还支持众多的第三方库和框架，使得开发者可以更加便捷地进行开发。在客户端开发方面，JavaScript 也可以使用 Electron 等技术来编写桌面应用程序。Electron 使用了 Chromium 和 Node.js，使得开发者可以使用 JavaScript、HTML 和 CSS 来开发桌面应用程序，同时支持跨平台。除此之外，JavaScript 还可以用于编写游戏、移动应用程序等各种应用领域，其应用范围越来越广泛。 JavaScript 作为一门语言的发展已经越来越多地脱离了浏览器，其强大的功能和广泛的应用场景使得它成为了一个非常重要的编程语言之一。

4.2 JavaScript的引入

JavaScript 可以嵌入到 HTML 文档中的 head 或 body 标签中，或者作为外部文件引入到 HTML 中。在 head 或body标签中嵌入 JavaScript，可以使用 script 标签，例如：

<!DOCTYPE html>
<html>
<head>
    <title>JavaScript in HTML</title>
    <script>
        // JavaScript 代码
    </script>
</head>
<body>
  <script>
    // JavaScript 代码
  </script>
    <!-- 页面内容 -->
</body>
</html>

除了直接嵌入 JavaScript 代码，还可以通过 script 标签的 src 属性引入外部 JavaScript 文件，例如：

<!DOCTYPE html>
<html>
<head>
    <title>JavaScript in HTML</title>
    <script src="path/to/your/script.js"></script>
</head>
<body>
    <!-- 页面内容 -->
</body>
</html>

这样，页面加载时就会从指定的路径加载 JavaScript 文件，并执行其中的代码。在实际开发中，通常会把 JavaScript 单独作为一个文件来管理，以便于维护和管理。将 JavaScript 代码单独放在一个 .js 文件中，然后通过 script 标签的 src 属性引入该文件，这样可以让 HTML 文件的结构更加简洁明了。例如，我们可以创建一个名为 script.js 的文件，其中包含以下代码： alert("Hello, World!");

然后，在 HTML 文件中引入这个 JavaScript 文件：

<!DOCTYPE html>
<html>
<head>
    <title>JavaScript in HTML</title>
    <script src="path/to/your/script.js"></script>
</head>
<body>
    <!-- 页面内容 -->
</body>
</html>

这样，在加载 HTML 文件时，浏览器会自动加载并执行 script.js 文件中的代码。需要注意的是，为了确保 JavaScript 代码能够正确地执行，应该将 script 标签放在 body 标签的最后，因为在 HTML 文件中，浏览器会按照顺序解析文档，如果 JavaScript 代码在 HTML 元素未加载时就被执行，可能会导致错误。所以，一般将 JavaScript 文件放在 body 标签的最后，确保所有 HTML 元素都已经加载完毕再执行 JavaScript 代码。

4.3 JavaScript语法基础

变量

JavaScript 中的变量是用于存储数据的容器，可以在程序中反复使用。变量可以存储各种类型的数据，包括数字、字符串、布尔值、数组、对象等等。声明变量时需要指定变量名，然后可以给变量赋初值，也可以在后续的程序中给变量赋值。使用变量可以实现程序的灵活性和可扩展性。JavaScript 中的变量可以使用 var、let 或 const 关键字来声明，他们有以下不同：

1.变量作用域不同：使用 var 声明的变量是函数作用域的，即在函数内声明的变量在函数外无法访问；而使用 let 和 const 声明的变量是块级作用域的，即在代码块内部声明的变量只能在该代码块内部访问，外部无法访问。
2.变量提升不同：使用 var 声明的变量会被提升到函数作用域或全局作用域的顶部，即变量在声明前就可以使用，但其值为 undefined；而使用 let 和 const 声明的变量不存在变量提升，即只有在声明后才能使用。
3.变量的可修改性不同：使用 var 和 let 声明的变量可以修改其值，而使用 const 声明的变量是常量，其值在声明后不能再被修改。举个例子：


function example() {
  var a = 1;
  if (true) {
    var b = 2;
    let c = 3;
    const d = 4;
  }
  console.log(a); // 1
  console.log(b); // 2
  console.log(c); // ReferenceError: c is not defined
  console.log(d); // ReferenceError: d is not defined
}

example();

在上面的例子中，变量 a 在函数作用域内声明，因此在函数内部的任何位置都可以访问。变量 b 使用 var 声明，在代码块内部声明，但在代码块外部也可以访问。变量 c 使用 let 声明，只能在代码块内部访问。变量 d 使用 const 声明，也只能在代码块内部访问，且不能修改其值。

基本数据类型

JavaScript 中有六种基本的数据类型包括：数字（Number）、字符串（String）、布尔值（Boolean）、空值（Null）、未定义（Undefined）和 ES6 中新增的 Symbol 类型。其中，数字类型表示数值，可以是整数或小数。字符串类型表示文本数据，用引号（单引号或双引号）括起来。布尔值类型表示真或假，只有两个值：true 和 false。空值类型表示一个空值，只有一个值：null。未定义类型表示变量没有被定义，只有一个值：undefined。Symbol 类型表示一种唯一的标识符，每个 Symbol 值都是唯一的。Symbol不常用，会在后面提高章节再详细讲解。

基本数据类型 Number

在 JavaScript 中，Number是一种基本数据类型，用于表示数字。number类型的值可以是整数或浮点数。Number类型在 JavaScript 中是一种原始值，也就是说，它们是不可变的。在 JavaScript 中创建 Number类型的值有两种方式：一种是字面量，另一种是使用 Number() 构造函数。例如，以下代码演示了如何使用字面量创建 Number类型的值： let num1 = 42; // 整数 let num2 = 3.1415926; // 浮点数在上面的代码中，num1 和 num2 分别使用整数和浮点数字面量初始化。JavaScript 会自动推断出变量的类型是 Number。以下是使用 Number() 构造函数创建 Number类型的值的示例： let num1 = Number('42'); // 整数 let num2 = Number('3.1415926'); // 浮点数在上面的代码中，Number() 构造函数将字符串参数转换为对应的 Number类型的值。除了常规的数值之外，JavaScript 还支持几种特殊的 Number值，包括 Infinity、-Infinity 和 NaN。 Infinity 表示正无穷大，-Infinity 表示负无穷大，而 NaN 表示非数值。这些特殊值通常是由一些特定的操作返回的，例如除以 0 和将非数字字符串转换为数字。

基本数据类型 String

在JavaScript中，字符串是一种基本数据类型。它是由一系列字符组成的，可以用单引号（'）或双引号（"）括起来。例如： let str1 = 'Hello'; let str2 = "World"; 字符串也可以使用模板字符串的形式定义，使用反引号（）括起来，并且可以在字符串中插入变量或表达式。例如： let name = 'John'; let age = 30; let str = My name is nameandIam{name} and I am nameandIam{age} years old.`; 在JavaScript中，字符串是不可变的，这意味着一旦字符串被创建，它的值就不能被改变。如果要对字符串进行修改，需要创建一个新的字符串并将其赋值给变量。 JavaScript中还提供了一些内置的字符串方法，例如length属性可以获取字符串的长度，charAt()方法可以获取字符串中指定位置的字符，indexOf()方法可以查找字符串中指定字符或子字符串的位置等等。这些方法可以用于处理和操作字符串。

基本数据类型 Boolean

JavaScript 中的基本数据类型 Boolean表示真（true）或假（false），它是 JavaScript 最简单的数据类型之一。Boolean类型的变量只有两种值：true 和 false。 Boolean 值通常用于条件测试，例如 if 语句中的条件判断，以及逻辑运算符（&&、|| 和 !）的操作数。以下是一些 Boolean 类型的示例：

var a = true;
var b = false;
console.log(typeof a); // "boolean"
console.log(typeof b); // "boolean"

在条件测试中，下列值被视为 false：

1.false
2.undefined
3.null
4.0
5.NaN
6.空字符串（""）除此之外的所有值都被视为 true。

基本数据类型 Null

在 JavaScript 中，null 是一个特殊的值，表示 "空" 或 "无值"。可以将 null 分配给一个变量来清空该变量的值。null 是一个原始值，而非对象。 null 表示的是一种值的缺失，比如：

let a = null;
console.log(a); // null

在该例中，变量 a 被明确的赋值为 null，表示 a 这个变量缺少一个值。

基本数据类型 Undefined

JavaScript 中的基本数据类型 Undefined 表示一个未定义的值。如果一个变量被声明但未赋值，那么它的值就是 undefined。在函数中没有返回值时，也会默认返回 undefined。例如：

let a;
console.log(a); // 输出 undefined

function test() {
  console.log("hello");
}

const result = test();
console.log(result); // 输出 undefined

在上面的代码中，变量 a 被声明但没有赋值，因此它的值是 undefined。函数 test 没有返回值，因此在调用 test 函数时，result 变量的值被赋为 undefined。 Null和Undefined的区别在 JavaScript 中，null 和 undefined 都代表着无值，但是它们的含义是不同的。 null 表示一个被赋值了空值的对象，它是一个表示空对象指针的特殊值，它所代表的是一个空对象引用，比如： var obj = null; // obj 被赋值为空对象 undefined 表示一个未被赋值的变量，也就是说它没有被声明，或者虽然声明了，但还没有被赋值，比如： var x; // x 被声明，但是没有被赋值，因此 x 的值为 undefined 另外，在函数中，如果没有返回值，函数返回的值也是 undefined。总的来说，null 表示已定义但是为空的值，而 undefined 表示根本没有定义过。

typeof运算符

typeof 是 JavaScript 中的一种运算符，用于判断一个变量或表达式的数据类型，并返回对应的字符串值。例如：

typeof 42  // 返回 "number"
typeof "hello"  // 返回 "string"
typeof true  // 返回 "boolean"
typeof {}  // 返回 "object"
typeof null  // 返回 "object"
typeof undefined  // 返回 "undefined"
typeof function() {}  // 返回 "function"

需要注意的是，typeof null 返回的是 "object"，而不是 "null"，这是 JavaScript 设计上的一个历史遗留问题。

显式类型转换

在 JavaScript 中，有三种常见的显式类型转换方式：

1.使用全局函数进行类型转换：JavaScript 提供了全局函数 Number()、String()、Boolean() 等来进行类型转换。例如，可以使用 Number() 函数将一个值转换为数字类型，使用 String() 函数将一个值转换为字符串类型，使用 Boolean() 函数将一个值转换为布尔类型。
2.使用类型转换方法进行类型转换：JavaScript 中的许多内置对象都提供了类型转换方法，例如，数字对象的 toString() 方法可以将数字对象转换为字符串类型，数组对象的 join() 方法可以将数组转换为字符串类型。
3.使用运算符进行类型转换：JavaScript 中的一些运算符（例如加号、减号等）会根据操作数的类型进行隐式类型转换，但是在进行显式类型转换时，可以使用一些特定的运算符来进行转换，例如，使用一元加号运算符 + 可以将一个值转换为数字类型，使用双重取反运算符 !! 可以将一个值转换为布尔类型。以下是一些常见的转换例子：
1.将字符串转换为数字：使用全局函数 Number() 或 parseInt()。

let str = "123";
let num1 = Number(str);
let num2 = parseInt(str);
console.log(typeof num1, num1); // number 123
console.log(typeof num2, num2); // number 123

上面的代码中，变量 str 是字符串类型，它被使用全局函数 Number() 或 parseInt() 进行了显式的数字类型转换。在将字符串转换为数字时，如果字符串中的字符不能表示一个数字，则转换结果为 NaN。

2.将数字转换为字符串：使用 String() 函数或数字的 toString() 方法。

let num = 123;
let str1 = String(num);
let str2 = num.toString();
console.log(typeof str1, str1); // string "123"
console.log(typeof str2, str2); // string "123"

上面的代码中，变量 num 是数字类型，它被使用全局函数 String() 或数字的 toString() 方法进行了显式的字符串类型转换。

3.将值转换为布尔类型：使用 Boolean() 函数。

let val1 = 1;
let val2 = "";
let bool1 = Boolean(val1);
let bool2 = Boolean(val2);
console.log(typeof bool1, bool1); // boolean true
console.log(typeof bool2, bool2); // boolean false

上面的代码中，变量 val1 的值为 1，它被使用全局函数 Boolean() 进行了显式的布尔类型转换，结果为 true。变量 val2 的值为空字符串，它被转换为布尔类型时被视为 falsy 值，因此转换结果为 false。在将其他值转换为Boolean值时，只有以下6个值会转成false，false、undefined、null、0、NaN和空字符串（""）,除此之外的所有值都会被转成 true。下面是使用运算符进行类型转换的例子

1.字符串类型转数字类型：使用一元加号运算符 +。

let str = "123";
let num = +str;
console.log(typeof num, num); // number 123

上面的代码中，字符串类型的变量 str 被转换为数字类型的变量 num，转换过程中使用了一元加号运算符 +。

7.布尔类型转数字类型：使用一元加号运算符 +。

let bool = true;
let num = +bool;
console.log(typeof num, num); // number 1

上面的代码中，布尔类型的变量 bool 被转换为数字类型的变量 num，转换过程中使用了一元加号运算符 +。

8.数字类型转布尔类型：使用双重取反运算符 !!。

let num = 123;
let bool = !!num;
console.log(typeof bool, bool); // boolean true

上面的代码中，数字类型的变量 num 被转换为布尔类型的变量 bool，转换过程中使用了双重取反运算符 !!。

隐式类型转换

在 JavaScript 中，有些运算符和操作会自动将变量的数据类型转换为另一种类型，这种转换就是隐式类型转换。比如：

1.数字 + 字符串：将数字转换为字符串，然后将两个字符串拼接在一起。
2.字符串 - 数字：将字符串转换为数字，然后进行减法运算。
3.数字 +/- 布尔值：将不二之转换为数字，然后进行加法或则会减法运算。
4.if 语句：将非布尔型变量转换为布尔型。下面举例说明：
1.数字和字符串的加法运算符 +：

let x = 10;
let y = "20";
let z = x + y;
console.log(z); // "1020"

上面的代码中，变量 x 是数字类型，变量 y 是字符串类型。在将它们相加时，JavaScript 将数字类型的 x 隐式地转换为字符串类型，然后将两个字符串拼接在一起得到了结果 "1020"。

2.数字和字符串的减法运算符 -：

let str = "10";
let num = 5;
let result = str - num;
console.log(result); // 5

上面的代码中，变量 str 是字符串类型，变量 num 是数字类型。在将它们相减时，JavaScript 首先将字符串 str 隐式地转换为数字类型，其中字符串 "10" 被转换为数字 10，然后进行减法运算，得到结果 5。需要注意的是，如果字符串无法被转换为数字类型，那么该运算会返回 NaN（Not a Number），例如：

let str = "test";
let num = 5;
let result = str - num;
console.log(result); // NaN

上面的代码中，变量 str 是字符串类型，但它包含的是非数字字符，因此无法被转换为数字类型。在将它和数字相减时，JavaScript 返回 NaN，表示该运算结果不是一个数字。- 3数字和布尔值的加法运算符 +：

let a = 10;
let b = true;
let c = a + b;
console.log(c); // 11

上面的代码中，变量 a 是数字类型，变量 b 是布尔类型。在将它们相加时，JavaScript 将布尔类型的 b 隐式地转换为数字类型，其中 true 被转换为数字 1，然后进行加法运算得到了结果 11。- 4对象和字符串的相等比较 ==：

let obj = {};
let str = "test";
console.log(obj == str); // false

上面的代码中，变量 obj 是一个空对象，变量 str 是字符串类型。在将它们相等比较时，JavaScript 隐式地将对象 obj 转换为字符串类型，其中空对象被转换为字符串 "[object Object]"，然后与字符串 str 进行比较。由于它们不相等，所以结果为 false。

常见的运算符

运算符是编程语言中非常重要的组成部分之一，它用于对变量、常量、表达式等进行各种类型的操作，以完成所需的计算或操作。运算符通常用于算术、比较、逻辑、位等方面的操作，并允许开发人员在程序中进行复杂的计算和逻辑操作。运算符可以出现在表达式中，表达式是编程语言中最基本的计算单元，它可以由运算符、操作数和其他表达式组成。表达式的值可以是变量、常量或运算结果等。运算符的位置取决于所在的表达式和运算符的优先级和结合性。下面介绍JavaScript中常见的运算符。

1.算术运算符 JavaScript 中的算术运算符用于对数值进行算术操作，包括加、减、乘、除、模（取余数）和自增自减。

var x = 5;
var y = 2;
var z = x + y;      // 加
var z = x - y;      // 减
var z = x * y;      // 乘
var z = x / y;      // 除
var z = x % y;      // 模
var a = x++;        // 自增
var b = y--;        // 自减

2.比较运算符比较运算符用于比较两个值，返回一个布尔值。常见的比较运算符包括大于、小于、等于、大于等于、小于等于和不等于。

var x = 5;
var y = 2;
var z = x > y;      // 大于
var z = x < y;      // 小于
var z = x == y;     // 等于
var z = x >= y;     // 大于等于
var z = x <= y;     // 小于等于
var z = x != y;     // 不等于

3.逻辑运算符逻辑运算符用于对布尔值进行逻辑操作，包括逻辑与、逻辑或和逻辑非。

var x = true;
var y = false;
var z = x && y;     // 逻辑与
var z = x || y;     // 逻辑或
var z = !x;         // 逻辑非

4.条件运算符条件运算符也叫三元运算符，语法是条件 ? 表达式1 : 表达式2。如果条件为真，则返回表达式1的值，否则返回表达式2的值。

var x = 5;
var y = 2;
var z = x > y ? "x大于y" : "x小于等于y";

5.赋值运算符赋值运算符用于给变量赋值。常见的赋值运算符包括等于、加等于、减等于、乘等于、除等于和模等于。

var x = 5;
x = 10;             // 等于
x += 5;             // 加等于
x -= 5;             // 减等于
x *= 5;             // 乘等于
x /= 5;             // 除等于
x %= 5;             // 模等于

条件语句

条件语句是编程语言中非常重要的控制结构之一，它允许开发人员根据不同的条件执行不同的操作或代码块。条件语句通常使用if语句、switch语句、三元运算符等方式实现。在程序执行过程中，条件语句可以帮助开发人员根据不同的条件或情况做出不同的决策，以便程序能够根据特定的需求或输入进行相应的操作和处理 If语句 if 语句的语法格式如下：

if (condition) {
  // code block to be executed if condition is true
}

其中，condition 是一个条件表达式，如果它的值为真（即非零），那么执行花括号内的代码块。如果 condition 的值为假（即零），那么跳过代码块并继续执行下一条语句。 if 语句还可以使用 else 关键字添加一个默认代码块，如果 condition 的值为假，则执行 else 代码块中的代码。语法格式如下：

if (condition) {
  // code block to be executed if condition is true
} else {
  // code block to be executed if condition is false
}

除了 if 和 else，还有 else if 关键字可以用于在 if 语句中添加多个条件。语法格式如下：

if (condition1) {
  // code block to be executed if condition1 is true
} else if (condition2) {
  // code block to be executed if condition2 is true
} else {
  // code block to be executed if both condition1 and condition2 are false
}

需要注意的是，如果有多个 else if 语句，只有第一个为真的条件代码块将被执行，后面的条件将被忽略。以下是一个使用 if 和 else 的示例，用于检查一个数字是否为偶数：

let num = 4;

if (num % 2 == 0) {
  console.log("The number is even.");
} else {
  console.log("The number is odd.");
}

输出结果为：The number is even. Switch语句在JavaScript中，switch语句是一种常用的控制语句，用于根据不同的条件执行不同的代码块。它的基本语法如下：

switch(expression) {
  case value1:
    // 当expression的值等于value1时执行的代码
    break;
  case value2:
    // 当expression的值等于value2时执行的代码
    break;
  default:
    // 当expression的值不等于任何一个case时执行的代码
}

其中，expression通常是一个变量或表达式的值，case后面跟的是某个具体的值，如果expression的值等于某个case后面跟的值，就执行该case对应的代码块，如果没有匹配到任何一个case，就会执行default代码块。以下是一个简单的例子，演示如何使用switch语句：

var day = new Date().getDay();
var dayName;

switch (day) {
  case 0:
    dayName = 'Sunday';
    break;
  case 1:
    dayName = 'Monday';
    break;
  case 2:
    dayName = 'Tuesday';
    break;
  case 3:
    dayName = 'Wednesday';
    break;
  case 4:
    dayName = 'Thursday';
    break;
  case 5:
    dayName = 'Friday';
    break;
  case 6:
    dayName = 'Saturday';
    break;
  default:
    dayName = 'Unknown';
}

console.log('Today is ' + dayName);

上述代码根据当前的日期获取对应的星期几，然后使用switch语句根据星期几的值来确定相应的名称，并将名称输出到控制台。注意：在使用 JavaScript 中的 switch 语句时，通常需要在每个 case 语句块的末尾添加一个 break 关键字。这是因为在不加 break 的情况下，如果一个 case 语句块匹配成功，它之后的所有 case 语句块都将被执行，而不仅仅是匹配成功的那个语句块。例如，假设有以下代码：

let fruit = 'apple';

switch (fruit) {
  case 'apple':
    console.log('This is an apple.');
  case 'banana':
    console.log('This is a banana.');
  case 'orange':
    console.log('This is an orange.');
  default:
    console.log('I do not know what fruit this is.');
}

如果 fruit 的值是 apple，那么输出结果将是： This is an apple. This is a banana. This is an orange. I do not know what fruit this is. 这是因为在 case 'apple': 语句块的末尾没有加上 break，导致下一个语句块也被执行了。如果想要只执行匹配成功的语句块，需要在每个语句块的末尾加上 break。因此，正确的代码应该是：

let fruit = 'apple';

switch (fruit) {
  case 'apple':
    console.log('This is an apple.');
    break;
  case 'banana':
    console.log('This is a banana.');
    break;
  case 'orange':
    console.log('This is an orange.');
    break;
  default:
    console.log('I do not know what fruit this is.');
}

这样，如果 fruit 的值是 apple，那么输出结果就只是 This is an apple.

循环语句

在 JavaScript 中，循环语句用于重复执行一段代码，直到满足某个条件为止。JavaScript 提供了多种循环语句，包括 for、while 和 do-while 循环。

for循环

for 循环是 JavaScript 中最常用的循环语句之一，它可以用于指定次数的循环和遍历数组等集合。 for 循环语法如下：

for (initialization; condition; increment) {
  // code block to be executed
}

其中：

1.initialization：可选，设置循环计数器的初始值。该语句只会在循环开始时执行一次。
2.condition：必选，设置循环终止的条件。每次循环开始时，都会检查该条件是否为真。如果为真，继续循环；如果为假，则退出循环。
3.increment：可选，设置每次循环后计数器的增量。该语句会在每次循环结束时执行一次。下面是一个使用 for 循环遍历数组的例子：

const arr = [1, 2, 3, 4, 5];

for (let i = 0; i < arr.length; i++) {
  console.log(arr[i]);
}

该代码会输出数组 arr 中的每一个元素。循环计数器 i 初始值为 0，每次循环后递增 1，直到循环计数器 i 的值大于等于数组 arr 的长度时，循环终止。在 for 循环中，break 语句用于退出循环，continue 语句用于跳过当前循环，继续执行下一次循环。例如：

const arr = [1, 2, 3, 4, 5];

for (let i = 0; i < arr.length; i++) {
  console.log(arr[i]);
}

for (let i = 0; i < 10; i++) {
  if (i === 5) {
    continue; // 跳过 i = 5 的循环
  }
  if (i === 8) {
    break; // 退出循环
  }
  console.log(i);
}

该代码会输出 0、1、2、3、4、6、7，但不会输出 5 和 8。

while循环语句

在JavaScript中，while语句也是一种基本的循环结构，它允许我们多次执行一个语句块，只要指定的条件为真。以下是while循环的基本语法：

while (condition) {
  // code block to be executed
}

在while循环中，condition是一个表达式，用于测试是否继续执行循环。如果condition的值为true，则执行代码块；如果condition的值为false，则跳过代码块，并继续执行程序。以下是一个简单的例子，演示如何使用while循环输出数字0到4：

var i = 0;
while (i < 5) {
  console.log(i);
  i++;
}

在这个例子中，我们使用一个变量i来计数，当i的值小于5时，while循环会一直执行。在每次循环中，我们将i的值输出到控制台，并递增i的值，直到i的值等于5，循环终止。需要注意的是，如果condition一开始就为false，那么代码块将不会被执行，例如：

var i = 5;
while (i < 5) {
  console.log(i);
  i++;
}

在这个例子中，condition一开始就为false，因此代码块将不会被执行，控制台也不会有任何输出。使用while循环时一定要确保有终止条件，否则会导致程序陷入死循环。如果程序陷入死循环，就会一直执行循环体内的代码，无法继续执行后面的代码，甚至会导致浏览器崩溃。因此，在使用while循环时，一定要小心谨慎，确保有终止条件。

do while 循环语句

在 JavaScript 中，do while 循环是一种迭代语句，它先执行一次循环体，然后在每次循环迭代之前检查循环条件是否为 true。如果条件为 true，循环将继续执行，否则循环终止。其语法如下：

do {
  // 循环体语句
} while (条件);

do while 循环与 while 循环的区别在于 do while 循环至少会执行一次循环体，即使条件一开始就为 false。下面是一个简单的示例，它使用 do while 循环输出 0 到 9 之间的整数：

let i = 0;
do {
  console.log(i);
  i++;
} while (i < 5);

输出结果如下：

需要注意的是，do while 循环中的循环体至少会被执行一次，因此在循环体中应该要做好判断和控制，以避免不必要的执行。

注释

在JavaScript中，注释是一种用于解释代码的方式，可以使代码更易于理解和维护。注释是不会被执行的，可以分为两种类型：单行注释和多行注释。

1.单行注释单行注释以两个斜杠（//）开头，在斜杠后面跟着注释内容。例如： // 这是一个单行注释 单行注释只能注释一行，注释内容在斜杠后面，直到该行结束。
2.多行注释多行注释以斜杠加星号（/）开头，以星号加斜杠（/）结尾。例如：

/*
这是一个多行注释
可以跨越多行
*/

多行注释可以注释多行代码，注释内容在开头和结尾的斜杠加星号和星号加斜杠之间。注释的作用在于：

1.帮助其他开发者理解代码，提高代码的可读性和可维护性。
2.在调试代码时，可以用注释来暂时禁用代码块，方便调试。
3.在代码修改时，可以用注释来记录修改的时间、原因等信息，方便后续的维护和升级

字面量对象

在 JavaScript 中，字面量对象是一种创建对象的简单方式，通过在花括号中定义属性和方法来创建一个对象。字面量对象可以包含属性和方法，每个属性由属性名和对应的值组成，属性名可以是字符串或符号类型。字面量对象的方法定义时也需要一个函数，函数可以带有参数，并且可以使用 this 关键字引用当前对象的属性。下面是一个简单的字面量对象的例子：

const person = {
  name: "Alice",
  age: 25,
  sayHi: function() {
    console.log("Hi, my name is " + this.name + " and I am " + this.age + " years old.");
  }
};

在这个例子中，我们创建了一个 person 对象，它有 name、age 两个属性和一个 sayHi 方法。sayHi 方法使用 this 关键字引用了 person 对象的 name 和 age 属性，并在控制台输出了一条消息。使用字面量对象创建对象的好处是非常方便和简单，并且可以直接使用点语法访问属性和方法。字面量对象可以通过两种方式访问其属性：点表示法和方括号表示法。使用点表示法，可以通过在对象名称后跟一个句点，然后跟着属性名称来访问属性。例如，如果有一个名为person的对象，它有一个属性名为name，则可以使用以下代码访问该属性： person.name 使用方括号表示法，可以通过在对象名称后跟一个方括号，然后在方括号内写上属性名称的字符串来访问属性。例如，可以使用以下代码访问上面示例中person对象的name属性： person['name'] 这两种方式都可以用来读取或设置属性值。需要注意的是，在使用方括号表示法时，属性名必须用字符串形式表示，而在使用点表示法时，属性名可以是一个标识符或字符串。字面量对象的属性名还可以是变量，只需要使用方括号访问对象的属性即可。例如：

let propertyName = "foo";
let obj = {
  [propertyName]: "bar"
};

console.log(obj.foo); // 输出 "bar" 在这个例子中，propertyName 变量的值被用作 obj 对象的属性名，它的属性值为 "bar"。使用方括号访问属性时，需要把属性名放在方括号内，这样 JavaScript 引擎才会把它作为变量来处理。

函数

JavaScript中的函数是一段可重复使用的代码块，它接受输入（参数），并在其中执行特定的任务，并返回结果。函数可作为值来使用，也可作为其他函数的参数传递，也可以从函数中返回另一个函数。函数在JavaScript中是一等公民，这意味着函数可以像其他值一样被传递、存储和使用。因此，函数对于实现可重用代码和模块化编程非常重要。 JavaScript中的函数有两种定义方式：函数声明和函数表达式。函数声明：

function functionName(parameters) {
  // Function code
}

函数表达式：

const functionName = function(parameters) {
  // Function code
};

函数可以有零个或多个参数，它们由逗号分隔，并放在括号内。函数还可以有一个可选的返回值，用关键字 return 来返回一个值。

function add(a, b) {
  return a + b;
}

let result = add(2, 3);
console.log(result); // 5

函数可以使用 arguments 对象访问传递给函数的所有参数。还可以使用 this 关键字来引用函数调用的当前对象。函数可以作为变量传递，也可以作为对象属性使用。

// 函数作为变量使用
const add = function(a, b) {
  return a + b;
};

const sum = add(2, 3);
console.log(sum); // 5
// 函数作为对象属性使用
const person = {
  firstName: 'John',
  lastName: 'Doe',
  fullName: function() {
    return this.firstName + ' ' + this.lastName;
  }
};

console.log(person.fullName()); // John Doe

在ES6中，还引入了箭头函数的概念，可以使用更简洁的语法定义函数。
const add = (a, b) => a + b;

let result = add(2, 3);
console.log(result); // 5

作用域

在 JavaScript 中，作用域是指变量、函数等的可访问性范围。JavaScript 中的作用域可以分为全局作用域和局部作用域。全局作用域：定义在最外层代码块（非函数内）中的变量和函数，其作用域是整个 JavaScript 程序，即在整个程序中都可以访问它们。举例：

var globalVar = "I am a global variable";

function globalFunction() {
  console.log("I am a global function");
  console.log(globalVar); // 输出：I am a global variable
}

console.log(globalVar); // 输出：I am a global variable
globalFunction(); // 输出：I am a global function

在这个例子中，我们定义了一个全局变量globalVar，它的值为字符串"I'm a global variable!"，接着我们定义了一个函数globalFunction，它打印出了全局变量globalVar的值。由于全局变量在整个程序中都可以访问，因此在调用globalFunction函数时，它可以访问到全局变量globalVar的值，并打印出"I'm a global function"和"I'm a global variable "。局部作用域：定义在函数内部的变量和函数，其作用域仅限于函数内部，在函数外部无法访问。举例：

function localScope() {
  var localVar = "I am a local variable";
  function localFunction() {
    console.log("I am a local function");
  }
  console.log(localVar); // 输出：I am a local variable
  localFunction(); // 输出：I am a local function
}

localScope();
console.log(localVar); // 报错：localVar is not defined
localFunction(); // 报错：localFunction is not defined

作用域链：当在某个作用域内访问一个变量或函数时，JavaScript 引擎会首先在该作用域内查找，如果找不到，则会沿着作用域链往外查找，直到找到为止。作用域链的形成是由函数嵌套形成的，内部函数可以访问外部函数的变量和函数，而外部函数不能访问内部函数的变量和函数。举例：

var globalVar = "I am a global variable";
function outerFunction() {
  var outerVar = "I am a outer variable";
  function innerFunction() {
    var innerVar = "I am a inner variable";
    console.log(globalVar); // 输出：I am a global variable
    console.log(outerVar); // 输出：I am a outer variable
    console.log(innerVar); // 输出：I am a inner variable
  }
  innerFunction();
}

outerFunction();
console.log(outerVar); // 报错：outerVar is not defined
console.log(innerVar); // 报错：innerVar is not defined

在上面的例子中，innerFunction 内部可以访问到全局变量 globalVar、外部函数变量 outerVar 和内部函数变量 innerVar，但是外部函数和全局作用域中无法访问内部函数变量 innerVar 和外部函数变量 outerVar。

转载自:https://juejin.cn/post/7243203041872543803