JavaScript解构对象

news2024/11/26 22:26:12

之前介绍了数组解构，本文来介绍一下对象如何解构；

前言

现在我们有这样的一个数组：

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],
    ];
  },

  openingHours: {
    thu: {
      open: 12,
      close: 22,
    },
    fri: {
      open: 11,
      close: 23,
    },
    sat: {
      open: 0, // Open 24 hours
      close: 24,
    },
  },
};

基本解构

const {name,openingHours,categories} = restaurant;
console.log(name,openingHours,categories);

在这里插入图片描述

除此之外，我们也可以将解构出来的数组赋予不同的变量名称

const {name: restaurantName, openingHours: hours, categories:tags} = restaurant;
console.log(restaurantName,hours,tags);

在这里插入图片描述

赋予默认值

当我们解构对象中不存在的一个方法时，我们最好给与一个默认值，否则会变成未定义的；

const {menu = [], starterMenu: starter = [] } = restaurant;
console.log(menu,starter);

在这里插入图片描述

当不存在时候会输入你所给的默认值，当存在时就输出对象中存在的方法；

修改变量

let a = 111;
let b = 999;
const obj = {a: 23, b: 44, c: 91};
{a , b} = obj;

在这里插入图片描述

在 JavaScript 中，当使用解构赋值语法时，如果想要将属性值从对象中提取并赋给已经声明的变量，需要使用括号将整个解构表达式包裹起来。正确的如下：

let a = 111;
let b = 999;
const obj = {a: 23, b: 44, c: 91};
({a , b} = obj);
console.log(a,b);

在这里插入图片描述

解构嵌套数组

例如刚刚开始的那个对象，对象中有关于饭店开门关门的时间，就是一个对象中嵌套另一个对象，如果我们想知道周五开门和关门时间，如果将其从数组中解构出来呢？

const {fri: {open: o, close: c},} = openingHours;
console.log(o,c);

在这里插入图片描述

技巧：通过函数，直接通过参数解构

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}`);
  },
};

restaurant.oderDelivery (
  {
    time: '22:30',
    address: "Via del Sole, 21",
    mainIndex: 2,
    starterIndex: 2,
  }
)

在这里插入图片描述

上面的代码是 restaurant 对象中的 oderDelivery 方法的实现部分。该方法接受一个对象作为参数，使用解构语法从该参数对象中提取需要的属性值。
具体来说，oderDelivery 方法接受一个对象作为参数，并从该对象中解构出以下属性：
● starterIndex：默认值为 1，表示前菜索引，默认为 1。
● mainIndex：默认值为 0，表示主菜索引，默认为 0。
● time：表示送餐时间，默认为 ‘20:00’。
● address：表示送餐地址。
然后，在方法内部，它使用解构出的属性值打印一条消息，表示订单已接收并将会在指定时间送到指定地址：

javascriptCopy Codeconsole.log(`Order received! ${this.starterMenu[starterIndex]} and ${this.mainMenu[mainIndex]} will be delivered to ${address} at ${time}`);