JavaScript展开操作符详解：数组对象字符串合并克隆与函数传参

展开操作符概述

展开操作符（Spread Operator）由三个连续的点（…）构成，主要功能是将可迭代对象转换为用逗号分隔的参数序列，这可以视为rest参数的逆运算。利用该操作符，你可以轻松扩展数组、对象以及字符串。

数组中的应用

在数组中的应用

以数组为例，首先我们需要定义一个初始数组，


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

此时可以非常便捷地完成数组的赋值操作：


const c = [...a] // [1,2,3]

此外，该操作符还能帮助我们将两个数组轻松拼接在一起：


const d = [...a，...b] // [1,2,3,4,5,6]

或者采用如下方式进行拼接：


const d = [...a,4, 5, 6] // [1,2,3,4,5,6]

若需将数组b的所有元素插入到数组a的末尾（且不生成新数组），可执行以下操作：


const a = [1,2,3];
a.push(...b);

若需将数组b的所有元素插入到数组a的前端（且不生成新数组），可执行以下操作：


const a = [1,2,3];
a. unshift(...b);

类数组对象转数组

将类数组对象转换为数组

利用展开运算符，我们可以将类数组对象转换为真正的数组：


var list=document.getElementsByTagName('a');
var arr=[..list];

对象中的应用

在对象中的应用

展开操作符同样适用于对象，通过以下方式可以实现对象的克隆：


const newObj = { ...oldObj }

需要注意的是，如果属性值本身是一个对象，展开运算符仅会生成指向该对象的引用，而不会进行深度拷贝。这意味着该运算符不会递归地深度拷贝所有属性。此外，只有可枚举属性会被拷贝，原型链上的属性不会被拷贝。

该操作符还可用于合并两个对象。


const obj1 = { a: 111, b: 222 };
const obj2 = { c: 333, d: 444 };
const merged = { ...obj1, ...obj2 };
console.log(merged); // -> { a: 111, b: 222, c: 333, d: 444 }

当然，它也适用于以下场景：


const others = {third: 3, fourth: 4, fifth: 5}
const items = { first:1, second:1, ...others }
items //{ first: 1, second: 2, third: 3, fourth: 4, fifth: 5 }

当合并的多个对象包含相同属性时，后出现的对象属性会覆盖前面的属性。例如：


const obj1 = { a: 111, b: 222 };
const obj2 = { b: 333, d: 444 };
const merged = { ...obj1, ...obj2 };
console.log(merged); // -> { a: 111, b: 333, d: 444 }

const obj1 = {a:111,b:222}
const merged = {a:222,...obj1}; 
console.log(merged); // -> { a: 111, b: 333 }

const obj1 = {a:111,b:222}
const merged = {...obj1,a:222}; 
console.log(merged); // -> { a: 222, b: 333 }

字符串中的应用

在字符串中的应用

通过展开操作符，可以将一个字符串分解为一个字符数组，其效果等同于


const hey = 'hey'
const arrayized = [...hey] // ['h', 'e', 'y']

上述代码的效果相当于：


const hey = 'hey'
const arrayized = hey.split('') // ['h', 'e', 'y']

函数传参中的应用

在函数传参中的应用

利用展开操作符，可以通过数组向函数传递参数：


const f = (foo, bar) => {}
const a = [1, 2]
f(...a)

const numbers = [1, 2, 3, 4, 5]
const sum = (a, b, c, d, e) => a + b + c + d + e
const sum = sum(...numbers)

Iterator接口对象的应用

在具有Iterator接口的对象中的应用

对于具备Iterator接口的对象，如Map和Set结构，以及Generator函数，均可以使用展开操作符，例如：


var s = new Set();
s.add(1);
s.add(2);
var arr = [...s]// [1,2]


function * gen() {
  yield 1;
  yield 2;
  yield 3;
}

var arr = [...gen()] // 1，2，3

如果是Map对象，展开操作符会将每个key和value转换为一个数组：


var m = new Map();
m.set(1,1)
m.set(2,2)
var arr = [...m] // [[1,1],[2,2]]

注意，以下代码会报错，因为obj不是一个Iterator对象：


var obj = {'key1': 'value1'};
var array = [...obj]; // TypeError: obj is not iterable

以上即为展开操作符的相关知识点，感谢阅读与支持。

JavaScript展开操作符（Spread Operator）详解：数组、对象与字符串应用