es6整理笔记2018.10

- 扩展运算符 - 扩展运算符（spread）是三个点（...）。它好比 rest 参数的逆运算，将一个数组转为用逗号分隔的参数序列。 ``` console.log(...[1, 2, 3]) // 1 2 3 console.log(1, ...[2, 3, 4], 5) // 1 2 3 4 5 [...document.querySelectorAll('div')] // [<div>, <div>, <div>] ``` ### ES6中的扩展运算符与数组相关特性详解 #### 一、扩展运算符（Spread Operator） **定义**：扩展运算符在ES6中被引入，它由三个点（`...`）组成，主要功能是将数组或其他可迭代对象展开成一系列逗号分隔的值。 **基本使用**： - 展开数组：`console.log(...[1, 2, 3]); // 输出: 1 2 3` - 在函数调用中混合使用：`console.log(1, ...[2, 3, 4], 5); // 输出: 1 2 3 4 5` **应用场景**： 1. **复制数组**： - 写法一：`const a2 = [...a1];` - 写法二：使用解构赋值 `const [a2] = a1;` 2. **合并数组**： - ES5：`const merged = arr1.concat(arr2, arr3);` - ES6：`const merged = [...arr1, ...arr2, ...arr3];` - 这两种方法都执行浅拷贝。 3. **与解构赋值结合**： - ES5：`let a = list[0], rest = list.slice(1);` - ES6：`let [a, ...rest] = list;` 4. **字符串转数组**： - `let arr = [...'hello']; // ["h", "e", "l", "l", "o"]` 5. **实现 Iterator 接口的对象转数组**： - `let nodeList = document.querySelectorAll('div');` - `let array = [...nodeList];` **注意事项**： - 扩展运算符不能在参数中间使用，只能位于参数列表的最后。 - 如果扩展运算符后跟的是空数组，则不会产生任何效果。 **示例代码**： ```javascript function f(v, w, x, y, z) {} const args = [0, 1]; f(-1, ...args, 2, [3]); const arr = [ ...(x > 0 ? ['a'] : []), 'b', ]; console.log([...[], 1]); // 输出: [1] ``` #### 二、替代函数的apply方法 **传统方式**： - 使用 `Math.max.apply(null, [14, 3, 77]);` **ES6方式**： - 直接使用 `Math.max(...[14, 3, 77]);` **合并数组**： - ES5：`Array.prototype.push.apply(arr1, arr2);` - ES6：`arr1.push(...arr2);` #### 三、Array.from() **定义**：`Array.from()` 方法创建一个新的数组实例，从一个类数组对象或可迭代对象转换而来。 **基本用法**： - 将类数组对象转换为数组：`let arr2 = Array.from(arrayLike);` - 对每个元素进行处理：`Array.from(arrayLike, (x) => x * x);` **示例代码**： ```javascript let arrLike = { length: 3, 0: 'a', 1: 'b', 2: 'c' }; let arr = Array.from(arrLike); // ["a", "b", "c"] let squares = Array.from({ length: 3 }, (x, i) => i * i); // [0, 1, 4] ``` #### 四、Array.of() **定义**：`Array.of()` 方法用于将一组值转换为数组。 **基本用法**： - `let arr = Array.of(3, 11, 8); // [3, 11, 8]` - `let single = Array.of(3); // [3]` **特点**： - 不受参数数量的影响，始终返回数组。 - 行为非常一致。 **示例代码**： ```javascript let arr = Array.of(3, 11, 8); // [3, 11, 8] let single = Array.of(3); // [3] ``` ### 总结 扩展运算符是ES6中引入的重要特性之一，极大地简化了数组的操作。无论是复制、合并数组还是处理字符串、实现 Iterator 接口的对象，扩展运算符都提供了简洁有效的解决方案。此外，`Array.from()` 和 `Array.of()` 的引入也进一步增强了JavaScript处理数组的能力，使得数组操作更加灵活多样。这些新特性不仅提高了代码的可读性，也降低了出错的可能性。