ES6扩展运算符

2023-05-22 11:47:41 浏览数 (1)

在ES6(ECMAScript 2015)中,引入了扩展运算符(Spread Operator),它使用三个点(...)语法来展开一个可迭代对象(如数组或字符串)或将对象转换为参数序列。扩展运算符提供了一种简洁和灵活的方式来展开和组合数据。

展开数组:

扩展运算符可以用于展开数组,将一个数组展开为逗号分隔的值序列。

示例:

代码语言:javascript复制
// 展开数组
let numbers = [1, 2, 3];
let expandedNumbers = [...numbers, 4, 5];

console.log(expandedNumbers);
// 输出:
//   [1, 2, 3, 4, 5]

在上面的示例中,我们使用扩展运算符将数组numbers展开为逗号分隔的值序列,并与额外的值45组合成一个新的数组expandedNumbers

展开字符串:

扩展运算符还可以用于展开字符串,将一个字符串展开为字符序列。

示例:

代码语言:javascript复制
// 展开字符串
let str = 'Hello';
let expandedStr = [...str];

console.log(expandedStr);
// 输出:
//   ['H', 'e', 'l', 'l', 'o']

在上面的示例中,我们使用扩展运算符将字符串str展开为字符序列,并将每个字符作为数组的元素。

合并数组:

扩展运算符可以用于合并多个数组。

示例:

代码语言:javascript复制
// 合并数组
let arr1 = [1, 2, 3];
let arr2 = [4, 5, 6];
let mergedArray = [...arr1, ...arr2];

console.log(mergedArray);
// 输出:
//   [1, 2, 3, 4, 5, 6]

在上面的示例中,我们使用扩展运算符将数组arr1arr2展开,并将它们合并为一个新的数组mergedArray

复制数组和对象:

使用扩展运算符可以非常方便地复制数组和对象。

示例:

代码语言:javascript复制
// 复制数组和对象
let originalArray = [1, 2, 3];
let copiedArray = [...originalArray];

console.log(copiedArray);
// 输出:
//   [1, 2, 3]

let originalObject = { name: 'John', age: 30 };
let copiedObject = { ...originalObject };

console.log(copiedObject);
// 输出:
//   { name: 'John', age: 30 }

在上面的示例中,我们使用扩展运算符将原始数组originalArray和对象originalObject展开,并将它们复制到新的数组copiedArray和对象copiedObject中。

应用于函数调用:

扩展运算符还可以应用于函数调用,将一个数组作为参数传递给函数。

示例:

代码语言:javascript复制
// 应用于函数调用
function sum(a, b, c) {
  return a   b   c;
}

let numbers = [1, 2, 3];
let result = sum(...numbers);

console.log(result);
// 输出:
//   6

在上面的示例中,我们使用扩展运算符将数组numbers展开,并将展开后的值作为参数传递给函数sum

注意事项:

  • 扩展运算符只能用于可迭代对象(如数组和字符串)和可转换为对象的对象(如类数组对象)。
  • 当应用于对象时,扩展运算符只复制对象的可枚举属性。
  • 使用扩展运算符展开可变参数时,必须放在参数列表的最后。

0 人点赞