JavaScript 省略号

JavaScript省略号（也称为扩展/剩余操作符）用三个点（…）表示。它可用于各种任务，例如将数组元素展开为单个值，或将多个值收集到一个数组或对象中。它简化了数据操作和函数参数处理。

我们将通过示例来探讨扩展/剩余操作符的基本实现。

扩展操作符

JavaScript扩展操作符（三个点…）用于将数组、对象或函数参数中的元素展开，并将它们传播到新的上下文或结构中。

语法

let varName = [ ...value ];

示例1： 在这个示例中，扩展运算符将数组arr1和arr2有效地合并，将它们的元素连接到结果数组中。

Javascript

// Concatinating two arrays 
// using Spread Operator 
let arr1 = [ 4, 5 ]; 
let arr2 = [ 8, 9, 10 ] 
  
arr = [ ...arr1, ...arr2 ]; 
console.log(arr);

输出

[ 4, 5, 8, 9, 10 ]

示例2： 在此示例中，使用扩展操作符来克隆一个对象（originalObject）并添加/修改属性以创建一个新对象。这里，我们通过克隆obj1并添加city属性来创建一个新对象copiedObject。

Javascript

const obj1 = { name: "Amit", age: 22 }; 
const newObject = { ...obj1, city: "Uttarakhand" }; 
  
console.log(newObject);

输出

{ name: 'Amit', age: 22, city: 'Uttarakhand' }

Rest参数

JavaScript的Rest参数(…)允许函数接受一个任意数量的参数作为数组，简化了对可变长度参数列表的处理。

语法

// Triple Dots (...) is the Rest Parameter  
function functionname( ...parameters ) {  
    statement;  
};

例子 1: 在这个例子中，sumFunction接收任意数量的参数，并使用rest参数计算它们的和。

Javascript

function sumFunction(...numbers) { 
    return numbers.reduce((total, num) => total + num, 0); 
} 
  
console.log(sumFunction(1, 2, 3, 4, 5));

输出

例子2：

在这个例子中，我们使用剩余参数进行数组解构，将给定数组的第一个元素分配为1，第二个元素分配为2，剩下的元素分配为[3, 4, 5]。然后打印出这些值。

Javascript

let [first, second, ...rest] = [1, 2, 3, 4, 5]; 
  
// Output: 1 
console.log(first); 
  
// Output: 2 
console.log(second); 
  
// Output: [3, 4, 5] 
console.log(rest);

输出