当前位置：首页 > 文章列表 > 文章 > 前端 > Javascript 中的展开和休息运算符及其示例

Javascript 中的展开和休息运算符及其示例

来源：dev.to 2024-09-04 18:57:46 0浏览收藏

本篇文章给大家分享《Javascript 中的展开和休息运算符及其示例》，覆盖了文章的常见基础知识，其实一个语言的全部知识点一篇文章是不可能说完的，但希望通过这些问题，让读者对自己的掌握程度有一定的认识(B 数)，从而弥补自己的不足，更好的掌握它。

剩余和扩展运算符是 javascript 中强大的功能，允许您更有效地处理数组、对象和函数参数。它们都使用相同的语法 (...)，但用途不同。

休息操作员 (...)

剩余运算符用于将所有剩余元素收集到数组中。它通常用在函数参数中来处理可变数量的参数。

休息运算符示例：


function sum(...numbers) {
    return numbers.reduce((acc, curr) => acc + curr, 0);
}

console.log(sum(1, 2, 3, 4)); // output: 10

这里，...numbers 将传递给 sum 函数的所有参数收集到一个名为 number 的数组中，然后可以对其进行处理。

扩展运算符 (...)

扩展运算符用于将数组或对象的元素扩展为单个元素或属性。

扩展运算符示例：


const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];

const combinedarray = [...arr1, ...arr2];
console.log(combinedarray); // output: [1, 2, 3, 4, 5, 6]

在此示例中，...arr1 和 ...arr2 将 arr1 和 arr2 的元素扩展为新的组合数组。

概括

剩余运算符：将所有剩余元素收集到数组中。
扩展运算符：将数组或对象的元素扩展为单个元素或属性。

这些运算符对于以干净简洁的方式处理数组、对象和函数参数非常有用。

.
.
.
.
.

更多关于 spread 和 rest 运算符
.
.
.
.
.

当然！让我们更深入地了解其余和展开运算符，通过更详细的解释和示例探索它们的概念和各种用例。

休息操作员 (...)

剩余运算符允许您收集多个元素并将它们捆绑到一个数组中。它通常在函数中用于处理可变数量的参数或在解构数组或对象时收集“其余”元素。

使用案例

处理多个函数参数：当您事先不知道函数将接收多少个参数时，通常会使用剩余运算符。

   function multiply(factor, ...numbers) {
       return numbers.map(number => number * factor);
   }

   console.log(multiply(2, 1, 2, 3, 4)); 
   // output: [2, 4, 6, 8]

说明：

factor 是第一个参数。
...numbers 将剩余参数收集到数组 [1, 2, 3, 4] 中。
然后，map 函数将每个数字乘以因子 (2)。

解构数组：解构数组时，可以使用剩余运算符来收集剩余元素。

   const [first, second, ...rest] = [10, 20, 30, 40, 50];

   console.log(first);  // output: 10
   console.log(second); // output: 20
   console.log(rest);   // output: [30, 40, 50]

说明：

首先获取值 10。
第二个获取值 20。
...rest 将剩余元素 [30, 40, 50] 收集到一个数组中。

解构对象：类似地，剩余运算符可用于捕获对象中的剩余属性。

   const {a, b, ...rest} = {a: 1, b: 2, c: 3, d: 4};

   console.log(a);    // output: 1
   console.log(b);    // output: 2
   console.log(rest); // output: {c: 3, d: 4}

说明：

a和b直接提取出来。
...rest 将剩余属性（c: 3 和 d: 4）捕获到一个新对象中。

扩展运算符 (...)

扩展运算符用于将数组、对象或可迭代对象的元素扩展为单个元素或属性。它与剩余运算符相反，对于合并、复制和传递元素非常有用。

使用案例

组合数组：扩展运算符可用于组合或连接数组。

   const arr1 = [1, 2];
   const arr2 = [3, 4];
   const arr3 = [5, 6];

   const combined = [...arr1, ...arr2, ...arr3];
   console.log(combined); 
   // output: [1, 2, 3, 4, 5, 6]

说明：

...arr1、...arr2 和 ...arr3 将它们的元素分散到组合数组中。

复制数组：您可以使用扩展运算符创建数组的浅表副本。

   const original = [1, 2, 3];
   const copy = [...original];

   console.log(copy);    // output: [1, 2, 3]
   console.log(copy === original); // output: false (different references)

说明：

...original 将original 的元素传播到新的数组副本中，创建浅副本。

合并对象：扩展运算符对于合并对象或向现有对象添加属性非常有用。

   const obj1 = {x: 1, y: 2};
   const obj2 = {y: 3, z: 4};

   const merged = {...obj1, ...obj2};

   console.log(merged); // output: {x: 1, y: 3, z: 4}

说明：

...obj1 将 obj1 的属性传播到新对象中。
...obj2 然后将其属性传播到新对象中，覆盖 obj1 中的 y 属性。

函数参数：扩展运算符还可用于将数组的元素作为单独的参数传递给函数。

   function add(a, b, c) {
       return a + b + c;
   }

   const numbers = [1, 2, 3];

   console.log(add(...numbers)); // output: 6

说明：

...numbers 将numbers 数组的元素分散到各个参数中（a、b、c）。

概括

休息运算符 (...):
- 将多个元素收集到一个数组或对象中。
- 常用于函数参数、数组解构或对象解构。
扩展运算符 (...):
- 扩展或传播数组、对象或可迭代对象中的元素。
- 对于以简洁的方式合并、复制和传递元素很有用。

这两个运算符都通过减少样板代码并提供更灵活的方法来处理数据结构来增强代码的可读性和可维护性。
.
.
.
.
.
.
现实世界示例
.
.
.
.

让我们考虑一个现实场景，其中剩余和扩展运算符特别有用。想象一下，您正在构建一个电子商务平台，您需要管理购物车并处理用户订单。以下是在这种情况下如何使用剩余和展开运算符：

rest operator：管理购物车

假设您有一个将商品添加到用户购物车的功能。该函数应该接受必需的项目，然后接受任意数量的可选附加项目。您可以使用剩余运算符来处理此问题：

function addtocart(mainitem, ...additionalitems) {
    const cart = [mainitem, ...additionalitems];
    console.log(`items in your cart: ${cart.join(', ')}`);
    return cart;
}

// user adds a laptop to the cart, followed by a mouse and keyboard
const usercart = addtocart('laptop', 'mouse', 'keyboard');

// output: items in your cart: laptop, mouse, keyboard

说明：

mainitem 是必需参数，在本例中是“笔记本电脑”。
...additionalitems 将传递给函数的其余项目（“鼠标”和“键盘”）收集到一个数组中。
购物车数组然后组合所有这些项目，并将它们记录并作为用户的购物车返回。

价差运算符：处理订单

现在，假设您想要处理订单并将用户的购物车商品及其运输详细信息发送到最终确定订单的函数。扩展运算符可用于将购物车商品与运输详细信息合并到单个订单对象中。

const shippingdetails = {
    name: 'john doe',
    address: '1234 elm street',
    city: 'metropolis',
    postalcode: '12345'
};

function finalizeorder(cart, shipping) {
    const order = {
        items: [...cart],
        ...shipping,
        orderdate: new date().toisostring()
    };
    console.log('order details:', order);
    return order;
}

// finalizing the order with the user's cart and shipping details
const userorder = finalizeorder(usercart, shippingdetails);

// output: 
// order details: {
//     items: ['laptop', 'mouse', 'keyboard'],
//     name: 'john doe',
//     address: '1234 elm street',
//     city: 'metropolis',
//     postalcode: '12345',
//     orderdate: '2024-09-01t12:00:00.000z'
// }

说明：

...cart 将 cart 数组中的商品分散到订单对象内的 items 数组中。
...shipping 将 shippingdetails 对象的属性传播到订单对象中。
添加 orderdate 属性以捕获订单何时完成。

组合两个运算符

假设您想要添加一个功能，用户可以将多个商品添加到购物车，并且第一个商品被视为具有折扣的“特色”商品。其余运算符可以处理附加项目，而扩展运算符可用于创建包含更新的特色项目的新购物车：

function additemswithdiscount(featureditem, ...otheritems) {
    const discounteditem = { ...featureditem, price: featureditem.price * 0.9 }; // 10% discount
    return [discounteditem, ...otheritems];
}

const laptop = { name: 'laptop', price: 1000 };
const mouse = { name: 'mouse', price: 50 };
const keyboard = { name: 'keyboard', price: 70 };

const updatedcart = additemswithdiscount(laptop, mouse, keyboard);

console.log(updatedcart);
// output: 
// [
//     { name: 'laptop', price: 900 }, 
//     { name: 'mouse', price: 50 }, 
//     { name: 'keyboard', price: 70 }
// ]

说明：

featureditem（笔记本电脑）通过使用传播运算符创建一个新对象来获得 10% 的折扣，该对象复制所有属性，然后修改价格。
...otheritems 将附加项目（鼠标和键盘）收集到一个数组中。
最终的 updatedcart 数组使用展开运算符将打折的特色商品与其他商品组合起来。

现实世界总结

rest operator：用于管理动态输入，例如将多个商品添加到购物车。它将剩余的参数或属性收集到数组或对象中。
扩展运算符：可用于处理和转换数据，例如合并数组、复制对象以及通过将商品详细信息与用户信息相结合来完成订单。

这些示例演示了剩余和扩展运算符如何在管理购物车和处理电子商务订单等现实场景中简化代码并提高可读性。

以下是代码中发生的情况的详细说明：

const [first, second, third, ...rest] = [10, 20, 30, 40, 50];

console.log(first);  // Output: 10
console.log(second); // Output: 20
console.log(third);  // Output: 30
console.log(rest);   // Output: [40, 50]