【Wechat_MiniProgram_JS】拓展运算符—

【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 作为参数传递给foofoo.apply(null, args)
}
// ES6 时代
function foo(...args) { // 搜集参数到 argsargs.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 }