ES6 扩展运算符

Posted 2023-03-08

参考技术A 总结：

扩展运算符由三个点 (...) 表示。

扩展运算符将可迭代对象（如数组、集合和映射）的元素解包到列表中。

其余参数也用三个点 (…) 表示。但是，它将函数的剩余参数打包到一个数组中。

扩展运算符可用于克隆可迭代对象或将可迭代对象合并为一个。

ES6 提供了一个名为扩展运算符的新运算符，它由三个点 (...) 组成。扩展运算符允许扩展可迭代对象的元素，例如数组、映射或集合。例如：

const odd = [1,3,5];

const combined = [2,4,6, ...odd];

console.log(combined);

输出：

[2,4,6,1,3,5]

ES6 还具有三个点 (...)，它是一个将函数的所有剩余参数收集到一个数组中的剩余参数。

function f(a, b, ...args)   

      console.log(args);



f(1, 2, 3, 4, 5);

输出：

[ 3, 4, 5 ]

主要区别：

扩展运算符 (...) 解包可迭代对象的元素。

其余参数 (...) 将元素打包到一个数组中。

其余参数必须是函数的最后一个参数。但是，展开运算符可以在任何地方。

使用 Array 的 push() 方法示例的更好方法

数组对象的 push() 方法允许向数组添加一个或多个元素。如果要将数组传递给 push() 方法，则需要使用 apply() 方法

let  rivers = ['Nile','Ganges','Yangte'];

let  moreRivers = ['Danube','Amazon'];

rivers.push(...moreRivers);

javascript 扩展运算符和数组操作

1) 构造数组字面量

扩展运算符允许在使用文字形式构造数组时将另一个数组插入到初始化的数组中。示例：

let initialChars = ['A', 'B'];

let chars = [...initialChars, 'C', 'D'];

console.log(chars); // ["A", "B", "C", "D"]

2) 连接数组

此外，可以使用扩展运算符连接两个或多个数组：

let numbers = [1, 2];

let moreNumbers = [3, 4];

let allNumbers = [...numbers, ...moreNumbers];

console.log(allNumbers); // [1, 2, 3, 4]

3) 复制数组

此外，可以使用扩展运算符复制数组实例：

letscores = [80,70,90];

letcopiedScores = [...scores];

console.log(copiedScores);// [80, 70, 90]

扩展运算符仅将数组本身复制到新数组，而不是元素。这意味着副本是浅的，而不是深的。

JavaScript 扩展运算符和字符串

示例：

letchars = ['A', ...'BC','D'];

console.log(chars); // ["A","B","C","D"]

在此示例中，从单个字符串构造了 chars 数组。将扩展运算符应用于“BC”字符串时，它将字符串“BC”的每个单独的字符展开为单独的字符。