JS学习 st10

ES6

ES6 的一些主要特性：

1. let 和 const 声明：引入了 let 和 const 关键字用于声明变量，并且具有块级作用域。

2. 箭头函数：提供了更简洁的函数声明语法，使函数的书写更加简洁和直观。

3. 模板字符串：支持使用反引号 (`) 来定义字符串模板，可以插入变量和换行符，使字符串的拼接更加方便。

4. 解构赋值：可以通过解构赋值的方式将数组或对象的属性赋值给变量，简化了代码的书写。

5. 类和继承：引入了 class 关键字用于定义类和 extends 关键字用于实现类的继承，使得面向对象编程更加直观和易用。

6. 模块化：提供了 import 和 export 关键字，用于模块的导入和导出，使得代码可以更好地组织和管理。

ES6中引入了箭头函数，它们是一种更简洁的书写函数的方式，以下是箭头函数的基本用法和注意要点：

1. 基本语法

2. 使用箭头函数时，可以省略function关键字，并且参数和箭头（=>）之间不需要括号。
3. • 如果只有一个参数，可以省略参数的括号；如果没有参数，则使用空括号。
   • 如果箭头函数只有一条语句作为函数体，可以省略大括号和return关键字。

    // 传统函数
function add(a, b) {
    return a + b;
}

   // 箭头函数
const add = (a, b) => a + b;

1. this 的指向：

   • 箭头函数没有自己的 this，它会捕获所在上下文的 this 值。这意味着在箭头函数中，this 的值与外部的上下文保持一致，不会因为箭头函数的调用方式而改变。
   • 这种特性使箭头函数特别适合于回调函数和处理事件处理程序等很多场景，避免了传统函数中 this 指向的混乱问题。

// 传统函数
const obj = {
    value: 42,
    getValue: function() {
        return this.value;
    }
};

// 箭头函数
const obj = {
    value: 42,
    getValue: () => this.value
};
 

1. 不适合作为构造函数：

   • 箭头函数不能用作构造函数，不能使用 new 关键字实例化对象。
   • 否则会抛出错误，因为箭头函数没有自己的 this 绑定，无法创建新的对象。

2. 注意事项：

   • 避免在需要动态绑定 this 的情况下使用箭头函数，因为箭头函数的 this 是固定的。
   • 尽量保持箭头函数简单和明确，避免过度使用箭头函数导致代码难以理解。

解构赋值是 ES6 中引入的一种便利的写法，可以在声明或赋值操作中，将数组或对象中的元素解构到变量中。解构赋值可以让我们从数组或对象中快速提取值，并赋给多个变量，以及定义默认值，简化代码的书写。以下是解构赋值的作用和用法：

作用：

1. 快速提取数组和对象中的值：可以方便地从数组和对象中提取值，赋给变量。
2. 定义默认值：在解构赋值语法中，可以为变量设置默认值，当提取的值为 undefined 时会使用默认值。

用法：

1. 解构数组：

// 基本用法
let [a, b] = [1, 2]; // a = 1, b = 2

// 交换变量值
let a = 1, b = 2;
[a, b] = [b, a]; // a = 2, b = 1

// 忽略元素
let [c, , d] = [3, 4, 5]; // c = 3, d = 5

// 设置默认值
let [e, f = 10] = [6]; // e = 6, f = 10
 

2. 解构对象：

// 基本用法
let { name, age } = { name: 'Alice', age: 25 }; // name = 'Alice', age = 25

// 使用不同的变量名
let { name: userName, age: userAge } = { name: 'Bob', age: 30 }; // userName = 'Bob', userAge = 30

// 设置默认值
let { city = 'Paris' } = {}; // city = 'Paris'
 

3. 嵌套结构：

// 解构嵌套数组
let [a, [b, c]] = [1, [2, 3]]; // a = 1, b = 2, c = 3

// 解构嵌套对象
let { name, info: { age } } = { name: 'Tom', info: { age: 28 } }; // name = 'Tom', age = 28
 

4. 剩余参数：

// 剩余参数（Rest）
let [first, ...rest] = [1, 2, 3, 4]; // first = 1, rest = [2, 3, 4]

在 JavaScript 中，可以使用 forEach() 方法来遍历数组中的每一个元素，并对每个元素执行指定的操作。forEach() 方法接受一个回调函数作为参数，在遍历数组时会依次将数组中的元素传递给回调函数进行处理。以下是使用 forEach() 方法遍历数组的基本语法和示例：

基本语法：

array.forEach(function(currentValue, index, array) {
    // 执行操作，可以在回调函数中对当前元素进行处理
});
 

• currentValue：当前遍历到的元素的值
• index：当前遍历到的元素的索引
• array：正在遍历的数组本身

示例：

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

numbers.forEach(function(number, index) {
    console.log(`第 ${index + 1} 个数字是: ${number}`);
});
 

forEach() 方法的优点：

1. 简洁明了：forEach() 方法提供了一种简单且直观的方式来遍历数组，只需传入一个回调函数即可完成遍历操作。

2. 避免手动管理索引：通过 forEach() 方法，无需手动创建循环并管理索引，它会在每次迭代时自动传入当前元素的值和索引，简化了操作。

3. 函数式编程：使用 forEach() 方法符合函数式编程的风格，可以更加灵活地处理数组元素，使代码更加易读和易维护。

4. 不会改变原数组：forEach() 方法只是遍历数组，并不会改变原数组的元素，这点与一些改变原数组的方法（如 push()、pop() 等）不同。