【Wechat_MiniProgram_JS】拓展运算符——`...`JavaScript运算符？

拓展运算符...

**… 运算符，是 ES6 里一个新引入的运算符，也叫展开运算符，**我们每天都要和它打交道。
简而言之就是，… 运算符可以展开一个可迭代对象中的所有项。
可迭代的对象一般是指可以被循环的，包括：string, array, set 等等。

基础用法

基础用法：展开

 const a = [2, 3, 4]
 const b = [1, ...a, 5]
 b; // [1, 2, 3, 4, 5]

基础用法：收集

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

如果没有命名参数的话，… 就会收集所有的参数：

function foo(...args) {
    console.log(args)     
}
foo(1, 2, 3, 4, 5); // [1, 2, 3, 4, 5]

这个运算符一定是在最后一个参数的位置，也很好理解，就是“收集前面剩下的参数”。
如果不在最后一位，会报错。
不得不感叹，这个运算符设计的真的是妙，可展开，可收集，收放自如，当真好用。

基础用法：把类数组转换为数组

什么是类数组？
类数组和数组非常接近，都可以拥有一系列元素，也有length 属性，最大的不同是：
类数组不具备数组的一系列方法。
举个栗子:

const nodeList = document.getElementsByClassName("test");
const array = [...nodeList];

console.log(nodeList); //Result: HTMLCollection [ div.test, div.test ]
console.log(array); //Result: Array [ div.test, div.test ]

使用 … 就可以实现类数组到数组的转换，转换之后，就可以使用数组的各种方法了。
你还记得在这个操作符出来之前是如何转换的吗？
这个问题还是头条的一个前端面试题。
例如:

// ES5 时代
function bar() {
  var args = Array.prototype.slice.call(arguments);
   // 调用push 加几个元素
  args.push(1, 2, 3);
  // 把args 作为参数传递给foo
  foo.apply(null, args)
}
// ES6 时代
function foo(...args) { // 搜集参数到 args
  args.push(4, 5, 6)
  console.log(...args) // 展开args
}
bar(0); // 0 1 2 3 4 5 6

基础用法：增加元素或属性

1 为数组新增成员

const pokemon = ['KK', 'Peter'];
const charmander = '郑伊健';
const pokedex = [...pokemon, charmander];
console.log(pokedex); 

输出结果为[ 'KK', 'Peter', '郑伊健' ]

2 为对象新增属性

const basicSquirtle = { name: 'Squirtle', type: 'Water' };
const fullSquirtle = {
  ...basicSquirtle,
  species: 'Tiny Turtle',
  evolution: 'Wartortle'
};
console.log(fullSquirtle); 

输出结果为{ name: 'Squirtle', type: 'Water', species: 'Tiny Turtle', evolution: 'Wartortle' }

6.基础用法：合并数组/对象

1 合并数组

const pokemon = ['Squirtle', 'Bulbasur', 'Charmander'];
const morePokemon = ['Totodile', 'Chikorita', 'Cyndaquil'];
const pokedex = [...pokemon, ...morePokemon];
console.log(pokedex);   
//  ['Squirtle', 'Bulbasur', 'Charmander', 'Totodile', 'Chikorita', 'Cyndaquil']

输出结果为[ 'Squirtle', 'Bulbasur', 'Charmander', 'Totodile', 'Chikorita', 'Cyndaquil' ]
对象数组也一样：

const pokemon = [
  { name: 'Squirtle', type: 'Water' },
  { name: 'Bulbasur', type: 'Plant' }
];
const morePokemon = [{ name: 'Charmander', type: 'Fire' }];
const pokedex = [...pokemon, ...morePokemon];
console.log(pokedex); 

输出结果为 [ { name: 'Squirtle', type: 'Water' }, { name: 'Bulbasur', type: 'Plant' }, { name: 'Charmander', type: 'Fire' } ]

作者：前端辉羽 来源：简书链接：

2 合并对象

const baseSquirtle = {
  name: 'Squirtle',
  type: 'Water'
};
const squirtleDetails = {
  species: 'Tiny Turtle Pokemon',
  evolution: 'Wartortle'
};
const squirtle = { ...baseSquirtle, ...squirtleDetails };
console.log(squirtle); 
//{ name: 'Squirtle', type: 'Water', species: 'Tiny Turtle Pokemon', evolution: 'Wartortle' }

拓展运算符...进阶用法地址：拓展运算符详解 https://www.jianshu.com/p/c207e2601159

应用场景

• 合并数组
• 与解构赋值结合
• 函数返回值
• 字符串（ 扩展运算符还可以将字符串转为真正的数组）

---

• 拷贝数组对象

• 合并数组

• 参数传递

• 数组去重

• 字符串转字符数组

• NodeList转数组

• 解构变量

• 打印日志（打印迭代对象）

  其他使用说明其他应用场景使用说明

·合并数组

const halfMonths1 = [1, 2, 3, 4, 5, 6]; 
const halfMonths2 = [7, 8, 9, 10, 11, 12];

const allMonths = [...halfMonths1, ...halfMonths2];   //  合并数组操作-拓展运算符
console.log(allMonths); // [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12 ]

合并对象，在合并对象时，如果一个键已经存在，它会被具有相同键的最后一个对象给替换。

const time1 = {
    month: 7,
    day: {
        value: 1,
    },
};
const time2 = {
    year: 2021,
    month: 8,
    day: {
        value: 10,
    },
};
const time = { ...time1, ...time2 };
console.log(time); // { month: 8, day: { value: 10 }, year: 2021 }