ECMA Script6新特性(下)

ES6（ECMAScript 2015）引入了许多新特性，极大地提升了开发者的开发效率，使得代码的维护性和可读性也更高，提升了 JavaScript 的表达能力和开发效率，以下是一些主要的新特性：

1. 模块化（import 和 export）

ES6 引入了原生的模块化机制，允许开发者将代码分割成多个模块，提高代码的可维护性和复用性。通过 export 关键字可以导出模块中的变量、函数、类等，使用 import 关键字可以导入其他模块导出的内容。

示例代码：

• 导出模块（math.js）

// 导出常量
export const PI = 3.14159;

// 导出函数
export function add(a, b) {
    return a + b;
}

// 导出类
export class Calculator {
    constructor() {}
    multiply(a, b) {
        return a * b;
    }
}

• 导入模块（main.js）

// 导入单个导出项
import { PI } from './math.js';
console.log(PI);

// 导入多个导出项
import { add, Calculator } from './math.js';
console.log(add(2, 3));
const calc = new Calculator();
console.log(calc.multiply(2, 3));

// 导入整个模块
import * as math from './math.js';
console.log(math.PI);
console.log(math.add(2, 3));

2. 函数参数的剩余参数（Rest Parameters）

剩余参数允许我们将一个不定数量的参数表示为一个数组。在函数定义时，使用 ... 语法在参数名前，可将剩余的参数收集到一个数组中。

示例代码：

function sum(...numbers) {
    return numbers.reduce((total, num) => total + num, 0);
}

console.log(sum(1, 2, 3)); // 输出 6
console.log(sum(1, 2, 3, 4, 5)); // 输出 15

3. 函数参数的展开语法（Spread Syntax）

展开语法可以将数组或类数组对象展开为单独的元素，常用于函数调用时传递参数。

示例代码：

const numbers = [1, 2, 3];
function add(a, b, c) {
    return a + b + c;
}

// 使用展开语法传递数组元素作为函数参数
console.log(add(...numbers)); // 输出 6

4. 字符串的 includes()、startsWith() 和 endsWith() 方法

• includes()：用于判断一个字符串是否包含另一个字符串，返回布尔值。
• startsWith()：用于判断一个字符串是否以指定的字符串开头，返回布尔值。
• endsWith()：用于判断一个字符串是否以指定的字符串结尾，返回布尔值。

示例代码：

const str = 'Hello, world!';

console.log(str.includes('world')); // 输出 true
console.log(str.startsWith('Hello')); // 输出 true
console.log(str.endsWith('!')); // 输出 true

5. 数组的 find() 和 findIndex() 方法

• find()：用于查找数组中满足指定条件的第一个元素，如果找到则返回该元素，否则返回 undefined。
• findIndex()：用于查找数组中满足指定条件的第一个元素的索引，如果找到则返回该元素的索引，否则返回 -1。

示例代码：

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

const found = numbers.find(num => num > 3);
console.log(found); // 输出 4

const foundIndex = numbers.findIndex(num => num > 3);
console.log(foundIndex); // 输出 3

6. 数组的 fill() 方法

fill() 方法用于用一个固定值填充数组从起始索引到结束索引的所有元素。

示例代码：

const arr = new Array(5);
arr.fill(1);
console.log(arr); // 输出 [1, 1, 1, 1, 1]

const arr2 = [1, 2, 3, 4, 5];
arr2.fill(0, 1, 3);
console.log(arr2); // 输出 [1, 0, 0, 4, 5]

7. 数组的 entries()、keys() 和 values() 方法

• entries()：返回一个新的 Array Iterator 对象，包含数组中每个索引的键值对。
• keys()：返回一个新的 Array Iterator 对象，包含数组中每个索引的键。
• values()：返回一个新的 Array Iterator 对象，包含数组中每个索引的值。

示例代码：

const arr = ['a', 'b', 'c'];

// 使用 entries() 方法
const entries = arr.entries();
for (const [index, value] of entries) {
    console.log(index, value);
}
// 输出 0 'a'
// 输出 1 'b'
// 输出 2 'c'

// 使用 keys() 方法
const keys = arr.keys();
for (const key of keys) {
    console.log(key);
}
// 输出 0
// 输出 1
// 输出 2

// 使用 values() 方法
const values = arr.values();
for (const value of values) {
    console.log(value);
}
// 输出 'a'
// 输出 'b'
// 输出 'c'

8. Object.assign() 方法

Object.assign() 方法用于将一个或多个源对象的所有可枚举属性复制到目标对象，返回目标对象。

示例代码：

const target = { a: 1 };
const source1 = { b: 2 };
const source2 = { c: 3 };

const result = Object.assign(target, source1, source2);
console.log(result); // 输出 { a: 1, b: 2, c: 3 }

9. Object.is() 方法

Object.is() 方法用于比较两个值是否严格相等，与 === 类似，但在处理 NaN 和 -0 时有所不同。

示例代码：

console.log(Object.is(NaN, NaN)); // 输出 true
console.log(NaN === NaN); // 输出 false

console.log(Object.is(0, -0)); // 输出 false
console.log(0 === -0); // 输出 true

10. 二进制和八进制字面量

ES6 引入了二进制和八进制字面量的表示方法，分别使用 0b 或 0B 表示二进制，使用 0o 或 0O 表示八进制。

示例代码：

const binary = 0b1010;
console.log(binary); // 输出 10

const octal = 0o77;
console.log(octal); // 输出 63

这些只是 ES6 引入的部分常用的新特性，另外一篇详见本博客的上一篇 ECMA Script6新特性(上), 这些新特性让 JavaScript 语言更加便捷和强大。