ES6-展开运算符 ...

思考：
let arr1 = [11, 22, 33]; let arr2=[‘one’, ‘two’, ‘three’] 合并成一个新数组

展开运算符（spread operator）允许一个表达式在某处展开。展开运算符在多个参数（用于函数调用）或多个元素（用于数组字面量）或者多个变量（用于解构赋值）的地方可以使用

作用：
1-展开数组
2-展开对象

const arr = [1, 2, 3]
console.log(...arr)//[1,2,3]

const arr = [1, 2, 3]
const arr2 = [4, 5, 6]
const newArr = [...arr, ...arr2, 5, 6, 7, ...arr]
console.log(newArr)//[1,2,3,4,5,6,5,6,7,1,2,3]

const obj = {
  name: 'zs',
  age: 18,
  gender: '男'
}

const obj1 = {
  money: 100,
  house: '房子'
}

const obj2 = {
  ...obj,
  ...obj1,
  sayHi() {
    console.log('哈哈')
  }
}
console.log(obj2)//{name: "zs", age: 18, gender: "男", money: 100, house: "房子", …}

‘剩余参数’(…theArgs)

展开运算符在函数形参中的应用

• 如果函数的最后一个命名参数以…为前缀，则它将成为一个由剩余参数组成的真数组，其中从0（包括）到theArgs.length（排除）的元素由传递给函数的实际参数提供。
• 剩余参数语法允许我们将一个不定数量的参数表示为一个数组。
  语法

function(a, b, ...theArgs) {
  // ...
}
//theArgs将收集该函数的第三个参数,
//（因为第一个参数被映射到a，而第二个参数映射到b）和所有后续参数。

剩余参数和 arguments对象的区别:

• 剩余参数只包含那些没有对应形参的实参，而 arguments 对象包含了传给函数的所有实参。
• arguments对象不是一个真正的数组，而剩余参数是真正的 Array实例，也就是说你能够在它上面直接使用所有的数组方法，比如 sort，map，forEach或pop。
• arguments对象还有一些附加的属性 （如callee属性）。

解构剩余参数:

剩余参数可以被解构，这意味着他们的数据可以被结构赋值到不同的变量中。

function f(...[a, b, c]) {
  return a + b + c;
}

f(1)          // NaN (b and c are undefined)
f(1, 2, 3)    // 6
f(1, 2, 3, 4) // 6 (the fourth parameter is not destructured)

例1：求函数的第一个实参乘以后面是实参的结果

function multiply(multiplier, ...theArgs) {
  return theArgs.map(function (element) {
    return multiplier * element;
  });
}

var arr = multiply(2, 1, 2, 3); 
console.log(arr);  // [2, 4, 6]

例2：函数参数排序

function sortRestArgs(...theArgs) {
  var sortedArgs = theArgs.sort();
  return sortedArgs;
}
 
alert(sortRestArgs(5,3,7,1)); // 弹出 1,3,5,7
 
function sortArguments() {
  var sortedArgs = arguments.sort();
  return sortedArgs; // 不会执行到这里
} 
alert(sortArguments(5,3,7,1)); // 抛出TypeError异常:arguments.sort is not a function
//结论：‘剩余参数’可以在剩余参数上使用任意的数组方法，而arguments对象不可以