展开运算符（...）

news2025/1/23 21:20:28

假如我们有一个数组：

const arr = [7,8,9];

● 我们如果想要数组中的元素，我们必须一个一个手动的去获取，如下：

const arr = [7,8,9];
const badNewArr = [5, 6, arr[0], arr[1],arr[2]];
console.log(badNewArr);

在这里插入图片描述

● 但是通过展开运算符就非常的方便

const arr = [7,8,9];
const badNewArr = [5, 6, arr[0], arr[1],arr[2]];
console.log(badNewArr);

const newArr = [5,6,...arr];
console.log(newArr);

在这里插入图片描述

● 当然，我们也可以通过展开运算符提取数组中的所有数据

console.log(...newArr);

在这里插入图片描述

● 还记得我们之前的对象么，如下所示

const restaurant = {
  name: 'Classico Italiano',
  location: 'Via Angelo Tavanti 23, Firenze, Italy',
  categories: ['Italian', 'Pizzeria', 'Vegetarian', 'Organic'],
  starterMenu: ['Focaccia', 'Bruschetta', 'Garlic Bread', 'Caprese Salad'],
  mainMenu: ['Pizza', 'Pasta', 'Risotto'],

  order: function (starterIndex, mainIndex) {
    return [
      restaurant.starterMenu[starterIndex],
      restaurant.mainMenu[mainIndex],
    ];
  },

  oderDelivery: function({starterIndex = 1, mainIndex = 0, time='20:00',address,}) {
    console.log(`Order received! ${this.starterMenu[starterIndex]} and ${this.mainMenu[mainIndex]} will be delivered to ${address} at ${time}`);
  },
};

● 例如现在我们现在菜单有所改变，我们在原来的基础上新增一个菜

const newMenu = [...restaurant.mainMenu, 'Gnocci'];
console.log(newMenu);

在这里插入图片描述

这样看起来展开运算符和解构是不是非常的相似；
解构和展开运算符是JavaScript中两种常用的操作符，它们在使用方式和功能上有一些区别。

用法不同：
○ 解构：解构语法可以从数组或对象中提取值，并将其赋给变量。解构通常用于从复杂的数据结构中提取所需的值。
○ 展开运算符：展开运算符则是用于将可迭代对象（如数组或字符串）展开为单独的元素，在创建新数组、合并对象属性或传递参数时非常有用。
应用场景不同：
○ 解构：解构经常用于从数组或对象中提取特定的值，使代码更简洁易读。例如，解构可以用于获取函数的参数，提取对象的属性等。
○ 展开运算符：展开运算符主要用于复制或合并数组和对象，创建新的数据结构。例如，展开运算符可以用于快速复制或合并数组，将多个对象的属性合并为一个新对象等。
语法使用不同：
○ 解构：解构使用花括号 {} 或方括号 [] 来指定提取的目标变量名，声明变量并将相应的值赋给它们。
○ 展开运算符：展开运算符使用三个连续的点 … 来表示，并放置在可迭代对象前面。
综上所述，解构和展开运算符虽然在某些方面有一些相似之处，但它们的使用方式和应用场景是不同的。解构主要用于提取特定的值，而展开运算符则用于复制或合并数据。

应用场景

浅拷贝数组

const mainMenuCopy = [...restaurant.mainMenu];

合并2个数组

  const menu = [...restaurant.starterMenu,...restaurant.mainMenu];
  console.log(menu);

可迭代对象、字符串、数组、maps、stes，NOT objects

 const str = 'Jonas';
  const letters = [...str, ' ', 'S.'];
  console.log(letters);

在这里插入图片描述

● 例如我们在对象中添加一段函数来读取意大利面的配料

 orderPasta: function(ing1,ing2,ing3) {
    console.log(`Here is your declicious pasta with ${ing1},${ing2},${ing3}`);
  }

● 接着我们来通过弹窗的方式来获取配料

const ingredients = [
    prompt("Let's make pasta! Ingredient 1?"),
    prompt('Ingredient 2?'),
    prompt('Ingredient 3?'),
  ];

  console.log(ingredients);

● 然后我们可以通过展开运算符来传参数到函数中

  restaurant.orderPasta(...ingredients)

在这里插入图片描述

● 对象的浅拷贝

 const newRestaurant = { foundedIn: 1998, ...restaurant, founder: 'Guiseppe'};
  console.log(newRestaurant);

在这里插入图片描述

● 但是这种拷贝是浅拷贝，不是深度拷贝

  const restaurantCopy = { ...restaurant};
  restaurantCopy.name = 'Ristorante Roma';
  console.log(restaurant.name);
  console.log(restaurantCopy.name);