ES6 - 扩展运算符（Spread）

扩展运算符（Spread）

1. 含义：扩展运算符用（…）表示，它会将一个数组转化为用逗号分隔的参数序列。
   嗯?这个含义？？？？？？？话不多说，上例子！（要学就认真理解内容，请认真看并理解例子3分钟）

2. 举些栗子

   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>]
   

   看这几个例子就明白了吧！是不是超简单？看下面几个扩展

   [...[1, 2, 3]]  						// 输出结果为：[1,2,3]
   [...[], 1]  							// 输出结果为：[1] --如果扩展运算符后面是一个空数组，则不产生任何效果。
   new Date(...[2015, 1, 1])    			// 输出结果为：Sun Feb 01 2015 00:00:00 GMT+0800 (中国标准时间)
   // 对象的扩展
   console.log({...{a:1}, b:2})			// 输出结果为：{a:1,b:2}
   console.log({...{a:1}, ...{b:2}})  		// 输出结果为：{a:1, b:2}
   // 字符串的扩展
   [...[1, 2, 3],..."qqq"]  				//[1, 2, 3, "q", "q", "q"]
   

3. 应用场景

   • – 函数

     官方例子1
     function add(x, y) {
     	return x + y
     }
     const number = [12, 8]
     add(...number)				// 输出结果为：20
     

     官方例子2
     function push(array, ...items) {
       array.push(...items)
     }
     

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

     function f(v, w, x, y, z) { 
     	return v+w+x+y+z
     }
     const args = [0, 1]
     f(-1, ...args, 2, ...[3])    // 输出结果为：5
     

     扩展运算符还可以与表达式一起使用

     const x = 10
     const arr = [...(x>0?['a']:[]), 'b']
     console.log(arr)    		// 输出结果：['a', 'b']   (如果x小于0，输出['b'])
     

     注：只有函数调用时，扩展运算符才可以放在圆括号中，否则报错。如：(...[1, 2]) console.log((...[1, 2])) 均会报：Uncaught SyntaxError: Unexpected number

• – 复制数组
  数字是复合的数据类型，直接复制，只是复制了指向底部的指针，而不是克隆一个全新的数组。比如经常使用：

  const a = [1, 2]
  const b = a
  a[0] = 2
  console.log(b)				// 输出结果为：[2, 2] --修改a，b会发生改变
  

  ES5中，只能用concat方法复制数组，看下面！

  const a1 = [1, 2];
  const a2 = a1.concat();
  a2[0] = 2;
  a1 						   // 输出结果为：[1, 2]
  

  一个字，繁，来看看扩展运算符的神操作！

  const a1 = [1, 2];			// 要复制的值
  // 方式 1
  const a2 = [...a1];
  // 方式 2
  const [...a2] = a1;
  

• – 合并数组

  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' ]
  

  注：这两种方式，都是浅拷贝。。。即新数组都是队员数组的引用，如果修改了指向的值，则新数组的值也将随之改变。