扩展运算符
 
扩展运算符 (…) 允许一个表达式在原地展开，当需要多个参数（比如函数调用时）或者多个值（比如字面量数组）。
 
console,log(...[1,2,3]); // 1 2 3
console,log(1, ...[2,3,4],5); // 1 2 3 4 5
 
扩展运算符主要用于函数调用的参数（形参与实参）。
 
function f(x,y,z){
    closole.log(x+y+z); // 3
}
var args = [0,1,2];
f(...args);
 
替代 apply() 方法
 
由于扩展运算符可以展开数组所以不再需要 apply() 方法将数组转为函数的参数。
 
function f(x,y,z){}
var args = [0,1,2];

f.apply(null, args); // ES5的写法
f(...args); // ES6的写法
 
扩展运算符的应用
 
 
复制数组
 
// 扩展运算符复制数组 - 深复制
// let arr2 = [...arr1];
let [...arr2] = arr1;
console.log(arr2);
arr2[2] = 6;
console.log(arr2, arr1);
 
 
合并数组
 
let arr1 = [1, 2, 3];
let arr2 = [4, 5, 6];
// ES5合并数组的方法
console.log(arr1.concat(arr2)); // [ 1, 2, 3, 4, 5, 6 ]
// ES6合并数组的方法(利用扩展运算符)
console.log([...arr1, ...arr2]); // [ 1, 2, 3, 4, 5, 6 ]
 
 
与解构赋值结合
 
const list = [1,2,3,4,5];
// ES5
console.log(a = list[0], rest = list.slice(1));
// ES6
console.log([a, ...rest] = list)
 
如果将扩展运算符用于数组赋值，只能放在参数的最后一位，否则会报错。
 
 
字符串转换为数组
 
console.log([..."hello"]); // [ 'h', 'e', 'l', 'l', 'o' ]
 

1、对象的扩展运算符(…)用于取出参数对象的所有可遍历属性，拷贝到当前对象之中
 
let z = {a:3,b:4};
let n = {...z};
console.log(n);//{a:3,b:4}
 
2、 由于数组是特殊的对象，所以对象的扩展运算符也可以用于数组
 
let foo = {...['a','b','c']}
console.log(foo);//{ '0': 'a', '1': 'b', '2': 'c' }
 
3、如果扩展运算符后面是一个空的对象，则没有任何效果
 
console.log({...{},a:1});//{a:1}
 
4、 如果扩展运算符后面是一个字符串，它会自动转成一个类数组对象，因此返回的不是空对象
 
console.log({...'hello'});//{ '0': 'h', '1': 'e', '2': 'l', '3': 'l', '4': 'o' }
 
5、如果扩展运算符后面不是对象，则会自动将其转为对象。由于该对象没有自身属性，所以返回一个空对象。
 
console.log({...1});//{}
console.log({...true});//{}
console.log({...undefined});//{}
console.log({...null});//{}
 
6、对象的扩展运算符等同于使用Object.assign()函数
 
let a = {
     name:'lisi',
     age:22
}
console.log({height:12,...a});//{ height: 12, name: 'lisi', age: 22 }
console.log(Object.assign({height:12},a));//{ height: 12, name: 'lisi', age: 22 }
 
7、 扩展运算符可以用于合并两个对象相当于Object.assign()函数
 
let a = {name:'lisi'}
let b = {age:23}
console.log({...a,...b});//{ name: 'lisi', age: 23 }
// 等同于
console.log(Object.assign({},a,b));//{ name: 'lisi', age: 23 }
 
8、如果用户自定义的属性，放在扩展运算符后面，则扩展运算符内部的同名属性会被覆盖掉
 
let a = {x:3,y:4}
console.log({...a,x:1,y:2});//{ x: 1, y: 2 }
console.log({...a,...{x:1,y:2}});//{ x: 1, y: 2 }
let x = 1, y = 2
console.log({...a,x,y});//{ x: 1, y: 2 }
console.log(Object.assign({},a,{x:1,y:2}));//{ x: 1, y: 2 }
 
9、如果把用户自定义的属性放在扩展运算符前面，就变成了设置新对象的默认属性值
 
let a ={name:'lisi',age:12}
console.log({x:1,y:2,...a});//{ x: 1, y: 2, name: 'lisi', age: 12 }
console.log(Object.assign({},{x:1,y:2},a));//{ x: 1, y: 2, name: 'lisi', age: 12 }
console.log(Object.assign({x:1,y:2},a));//{ x: 1, y: 2, name: 'lisi', age: 12 }
 
10、对象的扩展运算符后面可以跟着表达式
 
const obj={
     ...(8>1?{a:1}:{}),
     b:2
}
console.log(obj);//{a:1,b:2}
 
11、扩展运算符的参数对象之中，如果有取值函数get，这个函数是会执行的
 
 let a = {
     get x() {
     //   throw new Error('not throw yet');
     console.log('hello');
    }
   }
  
let aWithXGetter = { ...a }; // 报错

 
 
点击上方 前端Q，关注公众号

 
回复加群，加入前端Q技术交流群
 
... 作用
 
扩展运算符（spread）是三个点（...），用于取出参数对象中的所有可遍历属性，浅拷贝到当前对象之中。
 
常见用法
 
浅拷贝数组
 
const a1 = ['test1', 'test2'];
const a2 = [...a1];

a2[0] = 'test2';
a2 // ['test2', 'test2']

 
合并数据
 
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' ]

 
解构赋值
 
const [first, ...rest] = [1, 2, 3, 4, 5];
first // 1
rest  // [2, 3, 4, 5]

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

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

 
字符串/类数组转为真正的数组
 
因为任何定义了遍历器（Iterator）接口的对象，都可以用扩展运算符转为真正的数组。
 
[...'test']
// [ "t", "e", "s", "t"]

[...document.querySelectorAll('div')]
// [<div>, <div>, <div>]

 
基本实现原理
 
如果不用 ...，如何实现一样的功能？由上面的用法，可以知道。扩展运算符主要就是浅拷贝可遍历对象属性，那么我们可以用es5的写法实现如下：
 
// 简单版实现
function _spread() {
    for (var ar = [], i = 0; i < arguments.length; i++){
        ar = ar.concat(arguments[i]);
    }
    return ar;
};

 
用上面的例子测试一下，结果如下：
 
const a1 = ['test1', 'test2'];
const a2 = _spread(a1);

a2[0] = 'test2';
a2 // ['test2', 'test2']

 
显然，上面的例子，我们没有考虑到属性的可遍历性判断，那么需要进一步优化。
 
严谨实现
 
其实这里分几种情况来考虑就好：
 
判断是否为数组，数组一定可迭代，则直接复制数组后返回结果即可。
判断是否为实现了遍历器（Iterator）接口的对象，若实现了则转为数组。
如果没有实现遍历器（Iterator）接口的对象，则判断是否为普通字符串/Map/Set等。
均不满足以上条件的话，则抛错。
 
所以，最后实现为：
 
function _toConsumableArray(arr) {
  return (
    _arrayWithoutHoles(arr) || //  判断是否为数组
    _iterableToArray(arr) || //  判断是否为实现了遍历器（Iterator）接口的对象
    _unsupportedIterableToArray(arr) || // 判断是否为普调字符串/Map/Set等
    _nonIterableSpread() // 则抛错
  );
}

function _nonIterableSpread() {
  throw new TypeError(
    "Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."
  );
}

function _unsupportedIterableToArray(o, minLen) {
  if (!o) return;
  if (typeof o === "string") return _arrayLikeToArray(o, minLen);
  var n = Object.prototype.toString.call(o).slice(8, -1);
  if (n === "Object" && o.constructor) n = o.constructor.name;
  if (n === "Map" || n === "Set") return Array.from(o);
  if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))
    return _arrayLikeToArray(o, minLen);
}

function _iterableToArray(iter) {
  if (
    (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null) ||
    iter["@@iterator"] != null
  )
    return Array.from(iter);
}

function _arrayWithoutHoles(arr) {
  if (Array.isArray(arr)) return _arrayLikeToArray(arr);
}

function _arrayLikeToArray(arr, len) {
  if (len == null || len > arr.length) len = arr.length;
  for (var i = 0, arr2 = new Array(len); i < len; i++) {
    arr2[i] = arr[i];
  }
  return arr2;
}

 
更多原理探究
 
我们平时在想一些 es6 的实现的时候，如果想知道其实现原理，那么可以考虑它的 es5 实现，而如果想知道它的严谨实现的话。可以直接去看 babel 编译后的 es5 代码长什么样即可。babel 在线编译网址：https://www.babeljs.cn/repl
 
如图：
 

 

最后
 

 
你好，我是winty，末流本科软件工程专业出身，目前就职于腾讯微信，掘金LV5作者。
 
技术上主导过服务端框架设计，是可视化搭建平台的核心开发，主导过基础库平台搭建/前端性能sdk开发等，接触过包括但不限于服务端、移动端、PC端、小程序等，目前主要专注于高级前端进阶方向的学习。
 
我偏爱理财，喜欢折腾技术；靠自己的努力已经在广州房车齐全，正在努力奋斗人生中的第一个千万。上方关注后可以加我私信，点击蓝字查看我的奋斗之路。
 

 
文章目录
 
一、扩展运算符(...)
二、数组扩展运算符的应用
1、合并数组
2、与解构赋值结合
3、字符串转数组
4、实现了 Iterator 接口的对象
5、Map 和 Set 结构， Generator 函数
6、替代数组的 apply 方法
  
  
三、对象扩展运算符的应用

 
一、扩展运算符(…)
 
扩展运算符（ spread ）是三个点（…）.功能是把数组或类数组对象展开成一系列用逗号隔开的参数序列，与rest运算符刚好相反。
 主要一下作用：
 
抛弃apply来转换数组为参数序列的方法
复制数组 arr_new=[…arr_old] (浅拷贝)
合并数组 [1, 2, …more]
将字符串转为真正的数组 […‘hello’] // [ “h”, “e”, “l”, “l”, “o” ]
Array.form() 将类数组和可遍历对象（set和map）转为数组
 
console.log(...[1, 2, 3])
// 1 2 3
console.log(1, ...[2, 3, 4], 5)
// 1 2 3 4 5
 
二、数组扩展运算符的应用
 
1、合并数组
 
// ES5
[1, 2].concat(more)

// ES6
[1, 2, ...more]
var arr1 = ['a', 'b'];
var arr2 = ['c'];
var arr3 = ['d', 'e'];

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

// ES6 的合并数组
[...arr1, ...arr2, ...arr3]
// [ 'a', 'b', 'c', 'd', 'e' ]
 
2、与解构赋值结合
 
扩展运算符可以与解构赋值结合起来，用于生成数组。
 
// ES5
a = list[0], rest = list.slice(1)
// ES6
[a, ...rest] = list

//下面是另外一些例子。
const [first, ...rest] = [1, 2, 3, 4, 5];
first // 1
rest // [2, 3, 4, 5]
const [first, ...rest] = [];
first // undefined
rest // []:
const [first, ...rest] = ["foo"];
first // "foo"
rest // []
 
如果将扩展运算符用于数组赋值，只能放在参数的最后一位，否则会报错。
 
 
3、字符串转数组
 
[...'hello']
// [ "h", "e", "l", "l", "o" ]
 
上面的写法，有一个重要的好处，那就是能够正确识别 32 位的 Unicode 字符。
 
'x\uD83D\uDE80y'.length // 4
[...'x\uD83D\uDE80y'].length // 3
 
凡是涉及到操作 32 位 Unicode 字符的函数，都有这个问题。因此，最好都用扩展运算符改写。
 
let str = 'x\uD83D\uDE80y';
str.split('').reverse().join('')
// 'y\uDE80\uD83Dx'
[...str].reverse().join('')
// 'y\uD83D\uDE80x'
 
上面代码中，如果不用扩展运算符，字符串的reverse操作就不正确。
 
4、实现了 Iterator 接口的对象
 
 
遍历器（Iterator）是一种接口，为各种不同的数据结构提供统一的访问机制。任何数据结构只要部署Iterator接口，就可以完成遍历操作（即依次处理该数据结构的所有成员）。
 
 
Iterator的作用有三个：一是为各种数据结构，提供一个统一的、简便的访问接口；二是使得数据结构的成员能够按某种次序排列；三是ES6创造了一种新的遍历命令for…of循环，Iterator接口主要供for…of消费。
 
 
在ES6中，有些数据结构原生具备Iterator接口（比如数组），即不用任何处理，就可以被for…of循环遍历，有些就不行（比如对象）。原因在于，这些数据结构原生部署了Symbol.iterator属性（详见下文），另外一些数据结构没有。凡是部署了Symbol.iterator属性的数据结构，就称为部署了遍历器接口。调用这个接口，就会返回一个遍历器对象。
 
 
有三类数据结构原生具备Iterator接口：数组、某些类似数组的对象、Set和Map结构。
 
 
Iterator 接口参考链接：https://www.cnblogs.com/zczhangcui/p/6502836.html
 
var nodeList = document.querySelectorAll('div');
var array = [...nodeList];
 
上面代码中，querySelectorAll方法返回的是一个nodeList对象。它不是数组，而是一个类似数组的对象。这时，扩展运算符可以将其转为真正的数组，原因就在于NodeList对象实现了 Iterator 接口。
 
对于那些没有部署 Iterator 接口的类似数组的对象，扩展运算符就无法将其转为真正的数组。
 
let arrayLike = {
'0': 'a',
'1': 'b',
'2': 'c',
length: 3
};
// TypeError: Cannot spread non-iterable object.
let arr = [...arrayLike];
 
上面代码中，arrayLike是一个类似数组的对象，但是没有部署 Iterator 接口，扩展运算符就会报错。如下：
 
 这时，可以改为使用Array.from方法将arrayLike转为真正的数组。或者
 为该类数组对象部署 Iterator 接口，[Symbol.iterator]: Array.prototype[Symbol.iterator] 。如下图：
 
 
5、Map 和 Set 结构， Generator 函数
 
扩展运算符内部调用的是数据结构的 Iterator 接口，因此只要具有 Iterator 接口的对象，都可以使用扩展运算符，比如 Map 结构。
 
let map = new Map([
[1, 'one'],
[2, 'two'],
[3, 'three'],
]);
let arr = [...map.keys()]; // [1, 2, 3]
 
Generator 函数运行后，返回一个遍历器对象，因此也可以使用扩展运算符。
 Generator 函数？
 
var go = function*(){
yield 1;
yield 2;
yield 3;
};
[...go()] // [1, 2, 3]
 
上面代码中，变量go是一个 Generator 函数，执行后返回的是一个遍历器对象，对这个遍历器对象执行扩展运算符，就会将内部遍历得到的值，转为一个数组。
 
如果对没有iterator接口的对象，使用扩展运算符，将会报错。
 
var obj = {a: 1, b: 2};
let arr = [...obj]; // TypeError: Cannot spread non-iterable object
 
6、替代数组的 apply 方法
 
由于扩展运算符可以展开数组，所以不再需要apply方法，将数组转为函数的参数了。
 
// ES5 的写法
function f(x, y, z) {
// ...
}
var args = [0, 1, 2];
f.apply(null, args);

// ES6 的写法
function f(x, y, z) {
// ...
}
var args = [0, 1, 2];
f(...args);
 
下面是扩展运算符取代apply方法的一个实际的例子，应用Math.max方法，简化求出一个数组最大元素的写法。
 
// ES5 的写法
Math.max.apply(null, [14, 3, 77])
// ES6 的写法
Math.max(...[14, 3, 77])
//  等同于
Math.max(14, 3, 77);
 
上面代码表示，由于 JavaScript 不提供求数组最大元素的函数，所以只能套用Math.max函数，将数组转为一个参数序列，然后求最大值。有了扩展运算符以后，就可以直接用Math.max了。
 
另一个例子是通过push函数，将一个数组添加到另一个数组的尾部。
 
// ES5 的写法
var arr1 = [0, 1, 2];
var arr2 = [3, 4, 5];
Array.prototype.push.apply(arr1, arr2);
// ES6 的写法
var arr1 = [0, 1, 2];
var arr2 = [3, 4, 5];
arr1.push(...arr2);
 
上面代码的 ES5 写法中，push方法的参数不能是数组，所以只好通过apply方法变通使用push方法。有了扩展运算符，就可以直接将数组传入push方法。
 下面是另外一个例子。
 
// ES5
new (Date.bind.apply(Date, [null, 2015, 1, 1]))
// ES6
new Date(...[2015, 1, 1]);

 
三、对象扩展运算符的应用
 
对象中的扩展运算符(…)，用于取出参数对象中的所有可遍历属性，拷贝到当前对象之中。
 
let bar = { a: 1, b: 2 };
let baz = { ...bar }; // { a: 1, b: 2 }
 
上述方法实际上等价于:
 
let bar = { a: 1, b: 2 };
let baz = Object.assign({}, bar); // { a: 1, b: 2 }
 
 
Object.assign方法用于对象的合并，将源对象（source）的所有可枚举属性，复制到目标对象（target）。
Object.assign方法的第一个参数是目标对象，后面的参数都是源对象。(如果目标对象与源对象有同名属性，或多个源对象有同名属性，则后面的属性会覆盖前面的属性)。
 
同样，如果用户自定义的属性，放在扩展运算符后面，则扩展运算符内部的同名属性会被覆盖掉。
 
let bar = {a: 1, b: 2};
let baz = {...bar, ...{a:2, b: 4}};  // {a: 2, b: 4}
 

 利用上述特性就可以很方便的修改对象的部分属性。在redux中的reducer函数规定必须是一个纯函数（如果不是很清楚什么是纯函数的可以参考这里），reducer中的state对象要求不能直接修改，可以通过扩展运算符把修改路径的对象都复制一遍，然后产生一个新的对象返回。
 
这里有点需要注意的是扩展运算符对对象实例的拷贝属于一种浅拷贝。肯定有人要问什么是浅拷贝？
 
我们知道javascript中有两种数据类型，分别是基础数据类型和引用数据类型。基础数据类型是按值访问的，常见的基础数据类型有Number、String、Boolean、Null、Undefined，这类变量的拷贝的时候会完整的复制一份；引用数据类型比如Array，在拷贝的时候拷贝的是对象的引用，当原对象发生变化的时候，拷贝对象也跟着变化，比如：
 
let obj1 = { a: 1, b: 2};
let obj2 = { ...obj1, b: '2-edited'};
console.log(obj1); // {a: 1, b: 2}
console.log(obj2); //  {a: 1, b: "2-edited"}
 
上面这个例子扩展运算符拷贝的对象是基础数据类型，因此对obj2的修改并不会影响obj1，如果改成这样：
 
let obj1 = { a: 1, b: 2, c: {nickName: 'd'}};
let obj2 = { ...obj1};
obj2.c.nickName = 'd-edited';
console.log(obj1); // {a: 1, b: 2, c: {nickName: 'd-edited'}}
console.log(obj2); // {a: 1, b: 2, c: {nickName: 'd-edited'}}
 
这里可以看到，对obj2的修改影响到了被拷贝对象obj1，原因上面已经说了，因为obj1中的对象c是一个引用数据类型，拷贝的时候拷贝的是对象的引用。