扩展运算符与 rest 参数达成的效果真好相反

扩展运算符

把数组或者类数组展开成用逗号隔开的值

与解构赋值相结合

扩展运算符与 函数参数 的 解构赋值相结合

  1. let arr = [1, 2, 3];
  3. function foo(a,b,c) {
  4.   console.log(a, b, c);
  5. }
  7. foo(...arr) // 1 2 3

合并数组

ES5中的方法 Array.prototype.push.apply()

  1. let arr1 = [1, 2, 3];
  2. let arr2 = [4, 5, 6];
  3. Array.prototype.push.apply(arr1, arr2);
  4. console.log('arr1: ', arr1);
  5. // arr1:  (6) [1, 2, 3, 4, 5, 6]

ES6中的做法 使用 扩展运算符

  1. let arr1 = [1, 2, 3];
  2. let arr2 = [4, 5, 6];
  3. arr1.push(...arr2)
  4. console.log('es6 的 arr1: ', arr1);
  5. // es6 的 arr1:  (6) [1, 2, 3, 4, 5, 6]

拆分字符串

  1. let str1 = 'imooc'
  2. let str2 = '学习es6语法'
  3. const arr1 = [...str1]
  4. const arr2 = [...str2]
  5. console.log('arr imooc', arr1)
  6. console.log('arr 学习', arr2);
  7. // arr imooc (5) ["i", "m", "o", "o", "c"]
  8. // arr 学习 (7) ["学", "习", "e", "s", "6", "语", "法"]

默认将字符串中的每个字符拆分，然后用逗号分隔成数组， 并且 兼容 数字，字母，汉字

rest 参数/ 剩余运算符

把逗号隔开的值组合成一个数组，

不定参数的求和

ES5 的方式

这里的 argument 代表的就是方法的形参，这是一个伪数组

  1. function foo(x, y,z) {
  2.   let sum = 0
  3.   Array.prototype.forEach.call(arguments, function (item) {
  4.     sum += item
  5.   })
  6.   return sum
  7. }
  9. console.log(foo(1, 2));  // 3
  10. console.log(foo(1, 2, 3));  // 6

ES6 处理 伪数组的方式
使用 Array.from() 的方式将 伪数组 转化成正常数组 ，然后遍历

  1. function foo(x, y, z) {
  2.   let sum = 0
  3.   Array.from(arguments).forEach(item => {
  4.     sum += item
  5.   });
  6.   return sum
  7. }
  8. console.log(foo(1, 2));  // 3
  9. console.log(foo(1, 2, 3));  // 6

ES6 的 rest参数方式， 处理求和

首先了解 rest参数具体是什么

  1. function foo(...args) {
  2.   console.log(args)
  3. }
  5. foo(1, 2, 3, 4);
  6. foo(11, 22, 33, 44);

image.png
由此可知，rest 参数，会自动将传入的参数转化成一个数组，由此求和就简单了很多

function foo(...args) {
  let sum = 0
  args.forEach(value => {
    sum += value
  });
  return sum
}

console.log(foo(1, 2, 3, 4)); // 10
console.log(foo(11, 22, 33, 44)); // 110

剩余运算符的应用

function foo(x, ...y) {
  console.log('x: ', x);
  console.log('y: ', y)
}

foo(1, 2, 3, 4);

image.png

与解构赋值相结合

let [x, ...y] = [1, 2, 3, 4];
console.log('x: ', x);
console.log('y: ', y);

image.png