剩余参数

剩余参数是什么

  1.       // 1.认识剩余参数
  2.       // const add = (x, y, z, ...args) => {};
  4.       // 2.剩余参数的本质
  5.       const add = (x, y, ...args) => {
  6.         console.log(x, y, args);
  7.       };
  8.       // add();
  9.       // add(1);
  10.       // add(1, 2);
  11.       add(1, 2, 3, 4, 5);
  13.       // 剩余参数永远是个数组，即使没有值，也是空数组
  15.       // 3, 4, 5->[3, 4, 5]

剩余参数的注意事项

  1.       // 1.箭头函数的剩余参数
  2.       // 箭头函数的参数部分即使只有一个剩余参数，也不能省略圆括号
  3.       // const add = (...args) => {};
  5.       // 2.使用剩余参数替代 arguments 获取实际参数
  6.       // const add = function () {
  7.       //   console.log(arguments);
  8.       // };
  9.       // const add = (...args) => {
  10.       //   console.log(args);
  11.       // };
  12.       // add(1, 2);
  14.       // 3.剩余参数的位置
  15.       // 剩余参数只能是最后一个参数，之后不能再有其他参数，否则会报错
  16.       const add = (x, y, ...args) => {
  17.         console.log(args);
  18.       };
  19.       add(1,2,2);

剩余参数的应用

  1.       // 1.完成 add 函数
  2.       // const add = (...args) => {
  3.       //   let sum = 0;
  5.       //   for (let i = 0; i < args.length; i++) {
  6.       //     sum += args[i];
  7.       //   }
  9.       //   // reduce
  11.       //   return sum;
  12.       // };
  13.       // // console.log(add());
  14.       // // console.log(add(1, 1));
  15.       // console.log(add(1, 2, 3));
  17.       // 2.与解构赋值结合使用
  18.       // 剩余参数不一定非要作为函数参数使用
  19.       // const [num, ...args] = [1, 2, 3, 4];
  20.       // 必须是最后一个
  21.       // const [...args,num] = [1, 2, 3, 4];
  22.       // console.log(num, args);
  24.       // const func = ([num, ...args]) => {};
  25.       // func([1, 2, 3]);
  27.       // const { x, y, ...z } = { a: 3, x: 1, y: 2, b: 4 };
  28.       // // 必须是最后一个
  29.       // // const { x, ...z, y } = { a: 3, x: 1, y: 2, b: 4 };
  30.       // console.log(x, y, z);
  32.       // const func = ({ x, y, ...z }) => {console.log(z)};
  33.       // func({ a: 3, x: 1, y: 2, b: 4 });

数组的展开运算符

数组展开运算符的基本用法

  1.       // 1.认识展开运算符
  2.       // [3, 1, 2];
  3.       // Math.min
  5.       // console.log(Math.min([3, 1, 2]));
  6.       // console.log(Math.min(3, 1, 2));
  8.       // [3, 1, 2]->3, 1, 2
  10.       // 2.数组展开运算符的基本用法
  11.       // console.log(Math.min(...[3, 1, 2]));
  12.       // 相当于
  13.       // console.log(Math.min(3, 1, 2));

区分剩余参数和展开运算符

…+参数 剩余参数
…+数组 展开运算符

  1.       // 1.根本区别
  2.       // 展开运算符
  3.       // [3,1,2]->3,1,2
  5.       // 剩余参数
  6.       // 3,1,2->[3,1,2]
  8.       // 2.区分剩余参数和展开运算符
  10.       // 剩余参数
  11.       // const add = (...args) => {
  12.       //   // console.log(args);
  14.       //   // 展开运算符
  15.       //   // console.log(...args);
  16.       //   // console.log(...[1, 2, 3]);
  17.       //   console.log(1, 2, 3);
  18.       // };
  19.       // add(1, 2, 3);
  21.       console.log([...[1, 2, 3], 4]);
  22.       // [1, 2, 3]->1,2,3

数组展开运算符的应用

复制数组

  1.       const a = [1, 2];
  2.       // // const b = a;
  3.       // // a[0] = 3;
  4.       // // console.log(b);
  6.       const c = [...a];
  7.       // // const c = [1, 2];
  8.       a[0] = 3;
  9.       console.log(a);
  10.       console.log(c);

合并数组

  1.       const a = [1, 2];
  2.       const b = [3];
  3.       const c = [4, 5];
  5.       console.log([...a, ...b, ...c]);
  6.       console.log([...b, ...a, ...c]);
  7.       console.log([1, ...b, 2, ...a, ...c, 3]);

字符串转为数组

  1.       // 字符串可以按照数组的形式展开
  2.       console.log(...'alex');
  3.       console.log('a', 'l', 'e', 'x');
  4.       console.log([...'alex']);
  5.       console.log('alex'.split(''));
  6.       // reverse

常见的类数组转化为数组

  1.       // arguments
  2.       function func() {
  3.         console.log(arguments.push);
  4.         console.log([...arguments]);
  5.       }
  6.       func(1, 2);
  8.       // NodeList
  9.       console.log(document.querySelectorAll('p'));
  10.       console.log([...document.querySelectorAll('p')].push);

对象的展开运算符

对象展开运算符的基本用法

  1.       // 1.展开对象
  2.       // 对象不能直接展开，必须在 {} 中展开
  3.       // const apple = {
  4.       //   color: '红色',
  5.       //   shape: '球形',
  6.       //   taste: '甜'
  7.       // };
  8.       // // console.log(...apple);
  9.       // // console.log([...apple]);
  11.       // // 对象的展开：把属性罗列出来，用逗号分隔，放到一个 {} 中，构成新对象
  12.       // console.log({ ...apple });
  13.       // console.log({ ...apple } === apple);
  15.       // 2.合并对象
  16.       const apple = {
  17.         color: '红色',
  18.         shape: '球形',
  19.         taste: '甜'
  20.       };
  21.       const pen = {
  22.         color: '黑色',
  23.         shape: '圆柱形',
  24.         use: '写字'
  25.       };
  26.       console.log({ ...pen });
  27.       console.log({ ...apple, ...pen });
  29.       // // 新对象拥有全部属性，相同属性，后者覆盖前者
  30.       // // console.log({ ...pen, ...apple });
  31.       // // 相当于
  32.       // // console.log({
  33.       // //   use: '写字',
  34.       // //   color: '红色',
  35.       // //   shape: '球形',
  36.       // //   taste: '甜'
  37.       // // });
  39.       console.log({ pen, apple });
  40.       console.log({ ...pen, apple });

对象展开运算符的注意事项

  1.       // 1.空对象的展开
  2.       // 如果展开一个空对象，则没有任何效果
  3.       // console.log({ ...{} });
  4.       // console.log({ ...{}, a: 1 });
  6.       // 2.非对象的展开
  7.       // 如果展开的不是对象，则会自动将其转为对象，再将其属性罗列出来
  8.       // console.log({ ...1 });
  9.       // console.log(new Object(1));
  10.       // console.log({ ...undefined });
  11.       // console.log({ ...null });
  12.       // console.log({ ...true });
  14.       // 如果展开运算符后面是字符串，它会自动转成一个类似数组的对象，因此返回的不是空对象
  15.       // console.log({ ...'alex' });
  16.       // console.log([...'alex']);
  17.       // console.log(...'alex');
  19.       // console.log({ ...[1, 2, 3] });
  21.       // 3.对象中对象属性的展开
  22.       // 不会展开对象中的对象属性
  23.       const apple = {
  24.         feature: {
  25.           taste: '甜'
  26.         }
  27.       };
  28.       const pen = {
  29.         feature: {
  30.           color: '黑色',
  31.           shape: '圆柱形'
  32.         },
  33.         use: '写字'
  34.       };
  35.       console.log({ ...apple });
  36.       console.log({ ...apple, ...pen });
  37.       // // 相当于
  38.       // console.log({
  39.       //   feature: {
  40.       //     color: '黑色',
  41.       //     shape: '圆柱形'
  42.       //   },
  43.       //   use: '写字'
  44.       // });

对象展开运算符的应用