JavaScript解构对象

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

前言

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

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

这段代码的作用是在控制台打印出一条包含订单信息的消息,其中包括了所选的前菜和主菜以及送餐地址和时间。

  • 27
    点赞
  • 15
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值