frontLearn

Appearance

扩展运算符 ​

目录：

一、介绍

二、二、扩展运算符的应用

1、函数调用

2、替代函数的 apply() 方法

3、复制数组

4、合并数组

5、与解构赋值结合

6、字符串

7、实现了 Iterator 接口的对象

8、Map 和 Set 结构，Generator 函数

字数：大约1500字

一、介绍 ​

扩展运算符（spread）是三个点（...）。它好比 rest 参数的逆运算，将一个数组转为用逗号分隔的参数序列。

js
// 123
console.log(...[1, 2, 3])
// 12345
console.log(1, ...[2, 3, 4], 5)

二、扩展运算符的应用 ​

（1）函数调用 ​

js
function add(x, y) {
  return x + y;
}

const numbers = [4, 38];
add(...numbers) // 42

add(...numbers)是函数的调用，使用了扩展运算符。该运算符将一个数组，变为参数序列。

扩展运算符与正常的函数参数可以结合使用，非常灵活。

js
function f(v, w, x, y, z) { 
v:-1
w:0 
x:1 
y:2 
z:3
}
const args = [0, 1];
f(-1, ...args, 2, ...[3]);

扩展运算符后面还可以放置表达式。

js
const arr = [
  ...(x > 0 ? ['a'] : []),
  'b',
];

注意，只有函数调用时，扩展运算符才可以放在圆括号中，否则会报错。

js
(...[1, 2])
// Uncaught SyntaxError: Unexpected number

console.log((...[1, 2]))
// Uncaught SyntaxError: Unexpected number

console.log(...[1, 2])

(2)替代函数的 apply() 方法 ​

由于扩展运算符可以展开数组，所以不再需要apply()方法将数组转为函数的参数了。

js
// ES5 的写法
function f(x, y, z) {
  // ...
}
var args = [0, 1, 2];
f.apply(null, args);

// ES6 的写法
function f(x, y, z) {
  // ...
}
let args = [0, 1, 2];
f(...args);

（3）复制数组 ​

数组是复合的数据类型，直接复制的话，只是复制了指向底层数据结构的指针，而不是克隆一个全新的数组。

js
const a1 = [false, 2, 3];
const a2 = a1
a2[0] = true;
// a1  [true, 2, 3]
// a2  [true, 2, 3]

上面代码中，a2并不是a1的克隆，而是指向同一份数据的另一个指针。修改a1，会直接导致a2的变化。

ES5

js
const a1 = [false, 2, 3];
const a2 = a1.concat()
a1[0] = true;
// a1 [true, 2, 3]
// a2 [false, 2, 3]

ES5扩展符

js
const a1 = [false, 2, 3];
const a2 = [...a1]
a1[0] = true;
// a1 [true, 2, 3]
// a2 [false, 2, 3]

（4）合并数组 ​

js
const arr1 = ['a', 'b'];
const arr2 = ['c'];
const arr3 = ['d', 'e'];
// ES5 的合并数组
arr1.concat(arr2, arr3);
// [ 'a', 'b', 'c', 'd', 'e' ]
// ES6 的合并数组
[...arr1, ...arr2, ...arr3]
// [ 'a', 'b', 'c', 'd', 'e' ]

这两种方法都是浅拷贝，使用的时候需要注意。

js
const o1 = [
  {
    name: 'apple',
    data:{
      size: 12
    }
  }
]
const o2 = o1.concat();
const o3 = [...o1]
o1[0].name = "orange"

// o1、o2、o3
[
  {
    name: 'apple',
    data:{
      size: 12
    }
  }
]

上面代码中，o2和o3是用两种不同方法合并而成的新数组，但是它们的成员都是对原数组成员的引用，这就是浅拷贝。如果修改了引用指向的值，会同步反映到新数组。

（5）与解构赋值结合 ​

扩展运算符可以与解构赋值结合起来，用于生成数组。

js
const list = [0,1,2]
// ES5
const a = list[0], rest = list.slice(1)

// ES6
const [a, ...rest] = list

下面是另外一些例子。

js
const [first, ...rest] = [];
first // undefined
rest  // []

const [first, ...rest] = ["foo"];
first  // "foo"
rest   // []

如果将扩展运算符用于数组赋值，只能放在参数的最后一位，否则会报错。

js
const [...butLast, last] = [1, 2, 3, 4, 5];
// 报错

const [first, ...middle, last] = [1, 2, 3, 4, 5];
// 报错

（6）字符串 ​

扩展运算符可以将字符串转为真正的数组。

js
[...'hello']
// [ "h", "e", "l", "l", "o" ]

（7）实现了 Iterator 接口的对象 ​

任何定义了遍历器（Iterator）接口的对象（参阅 Iterator 一章），都可以用扩展运算符转为真正的数组。

js
let nodeList = document.querySelectorAll('div');
let array = [...nodeList];

对于那些没有部署 Iterator 接口的类似数组的对象，扩展运算符就无法将其转为真正的数组。

js
let arrayLike = {
  '0': 'a',
  '1': 'b',
  '2': 'c',
  length: 3
};

// TypeError: Cannot spread non-iterable object.
let arr = [...arrayLike];

上面代码中，arrayLike是一个类似数组的对象，但是没有部署 Iterator 接口，扩展运算符就会报错。这时，可以改为使用Array.from方法将arrayLike转为真正的数组。

（8）Map 和 Set 结构，Generator 函数 ​

扩展运算符内部调用的是数据结构的 Iterator 接口，因此只要具有 Iterator 接口的对象，都可以使用扩展运算符，比如 Map 结构。

js
let map = new Map([
  [1, 'apple'],
  [2, 'orange'],
  [3, 'banana'],
]);

let arr = [...map.keys()]; // [1, 2, 3]

Generator 函数运行后，返回一个遍历器对象，因此也可以使用扩展运算符。

js
const go = function*(){
  yield 1;
  yield 2;
  yield 3;
};

[...go()] // [1, 2, 3]

上面代码中，变量go是一个 Generator 函数，执行后返回的是一个遍历器对象，对这个遍历器对象执行扩展运算符，就会将内部遍历得到的值，转为一个数组。

如果对没有 Iterator 接口的对象，使用扩展运算符，将会报错。

js
const obj = {a: 1, b: 2};
let arr = [...obj]; // TypeError: Cannot spread non-iterable object