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'],

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

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

1. 获取解构数组：

1.1 按照顺序获取原数组元素

let [main, secondary] = restaurant.categories;
console.log(main, secondary);

输出结果：Italian Pizzeria
输出了restaurant.categories的第一项与第二项，可以看到新的数组（解构数组）会按顺序截取了原数组的前几项

1.2 可以使用空格来跳过元素

let [main, , secondary] = restaurant.categories;
console.log(main, secondary);

输出结果：Italian Vegetarian
输出了restaurant.categories的第一项与第三项

1.3 超出数组范围，返回undefined

let [main, , , , secondary] = restaurant.categories;
console.log(main, secondary);

输出结果：Italian undefined
输出了第一项与未定义项，说明若选择输出的元素超出了数组下标，则输出undefined

---

2. 数组元素交换：

2.1 传统交换方法，使用temp作为交换中间量

const temp = secondary;
secondary = main;
main = temp;
console.log(main, secondary);

输出结果：Pizzeria Italian ，交换成功

2.2 ☆js中便捷的交换技巧☆

[secondary, main] = [main, secondary];
console.log(main, secondary);

输出结果：Pizzeria Italian ，交换成功

---

3. 嵌套数组：

const nested = [1, 2, [3, 4]];
let [main, , secondary] = nested;
console.log(main, secondary);

输出结果：1 [3, 4]
输出结果中的secondary为nested的第三项，为数组 [3,4]

---

4. 默认值数组：

let [p = 1, q = 1, r = 1] = [8, 9];
console.log(p, q, r);

输出结果：8 9 1
解构数组的元素在声明时便赋默认值，若元素未被赋新值，则使用其默认值

5. 获取解构对象数组（使用{}，与解构数组[]不同）：

5.1 解构对象获取成员变量与成员变量在对象中的先后顺序无关

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

输出结果：
Classico Italiano
(4) [‘Italian’, ‘Pizzeria’, ‘Vegetarian’, ‘Organic’]
{thu: {…}, fri: {…}, sat: {…}}
通过对象中的成员变量的名称，解构对象，获取相对应的成员变量（只需名称正确，可按任意顺序排列）

5.2 为解构对象获取的对象重命名

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

输出结果：
Classico Italiano
(4) [‘Italian’, ‘Pizzeria’, ‘Vegetarian’, ‘Organic’]
{thu: {…}, fri: {…}, sat: {…}}
可以使用 成员变量名：新变量名 ，来把解构获取到的成员变量赋值给新的变量，统一为你需要的命名
ps：在处理第三方数据时很有用

---

6. 默认值解构对象数组：

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

输出结果：[ ] (4) [‘Focaccia’, ‘Bruschetta’, ‘Garlic Bread’, ‘Caprese Salad’]
对象restaurant中，mealsMenu与starters默认值为[ ]，获取restaurant中名为menu和starterMenu的成员变量
① restaurant有同名的starterMenu，获取数据成功，赋值给starters
② 但是restaurant中没有名为menu的成员变量，故mealsMenu保持默认值[ ]

---

7. 分配代码块：

7.1 错误写法：

let a = 999;
let b = 111;
const obj = { a: 12, b: 13 };
{ a, b } = obj;
console.log(a, b);

输出结果：Uncaught SyntaxError: Unexpected token ‘=’ (at script.js:67:10)

7.2 正确写法：

let a = 999;
let b = 111;
const obj = { a: 12, b: 13 };
({ a, b } = obj);
console.log(a, b);

输出结果：12 13
正确写法将{ a, b } = obj;用（）包裹起来，为其分配代码块，否则报错

---

8. 解构嵌套对象：

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

输出结果：11 23
获取到的成员变量也为对象时，可以使用 对象：{ 成员变量 } 进一步解构
故可以将代码进一步压缩为：

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

---

9. ☆函数参数与解构☆：

const restaurant = {
……

  orderdelivery: function ({ starterIndex, mainIndex, time='12:00', address }) {
    console.log(
      `接收到订单！${this.starterMenu[starterIndex]}和${this.mainMenu[mainIndex]}
      将会在${time}配送到${address}`
    );
  },
};

const obj = {
  starterIndex: 2,
  mainIndex: 0,
  time: '17:30',
  address: 'JNU',
};
restaurant.orderdelivery(obj);

输出结果：接收到订单！Garlic Bread和Pizza将会在17:30配送到JNU

orderdelivery: function ({ starterIndex, mainIndex, time=‘12:00’, address })，将解构对象数组作为函数参数
① 在对象obj作为参数传入restaurant的函数orderdelivery时自动完成了解构，获取了obj中的成员变量starterIndex，mainIndex，time和address，便可在函数中调用这些变量
② time=‘12:00’为传入的对象设置了默认值，若传入的对象没有设置time，则保持默认值’12:00’