JavaScript ES6 解构语法对数组和对象的操作

JavaScript 每日一篇，记录自学JavaScript语言的点点滴滴。

利用ES6的解构语法来解构数组

利用ES6的新特性，在获取数组中每个元素时，不必声明用来接收每个元素的变量。可以利用解构语法中的数组结构功能将数组整体赋值给解构数组中。然后就可以使用console.log()方法打印解构数组中每个变量存储的值。

例如我们声明了一个arr数组，将x, y, z三个变量分别传入一个数组中，将他们用const关键字进行声明。之后就可以使用这三个变量输出arr数组中三个元素的内容。

ini 复制代码

const arr = [2, 3, 4];

const [x, y, z] = arr;  /* 数组解构，解构数组内部的内容 */
console.log(x, y, z);
console.log(arr);

即便在一个对象内，你也可以使用此方法获取对象内数组的元素。

sql 复制代码

const restaurant = {
  name: '意大利🇮🇹经典',
  location: 'Via Angelo Tavanti 23, 佛罗伦萨, 意大利',
  categories: ['意大利', '比萨店', '素食', '有机'],
  starterMenu: ['佛卡夏', '意式烤面包', '大蒜面包', '卡普雷塞沙'],
  mainMenu: ['披萨', '意大利面', '烩饭'],
};
const [first, second, third] = restaurant.categories;
console.log(first, second, third);	// 意大利 比萨店 素食

⚠️注意：解构数组中的变量以 "逗号" 为分隔符，也就是即便你不在数组内声明获取目标数组元素的变量，但你使用了逗号分隔，他也会获取目标数组中对应索引的元素。例如下面这段代码：

css 复制代码

const restaurant = {
  name: '意大利🇮🇹经典',
  location: 'Via Angelo Tavanti 23, 佛罗伦萨, 意大利',
  categories: ['意大利', '比萨店', '素食', '有机'],
  starterMenu: ['佛卡夏', '意式烤面包', '大蒜面包', '卡普雷塞沙'],
  mainMenu: ['披萨', '意大利面', '烩饭'],
};
let [main, , secondary] = restaurant.categories;
console.log(main, secondary);

即便没有在main和secondary中声明任何变量，但解构数组仍然获取到了目标数组对应索引的元素内容。但是解构语法到底对数组有什么作用，它是如何提高我们在实际应用中的开发效率？接下来，我想用一个最简单的案例来表示解构语法在数组中的实际应用。

使用解构语法交换变量

使用传统方法------换杯子🍺

在大多数编程语言中，你需要通过设置中间变量temp来交换两个变量之间的值和内容。就像下面这样。

ini 复制代码

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

// swap 换杯子🍺，交换变量内容  => 交换变量的传统方式
const temp = main;
main = secondary;
secondary = temp;
console.log('使用中间变量方法：', main, secondary);

使用解构语法方法

使用解构语法方法就简单多了，只需将刚刚解构语法得到的数组变量分别调换顺序即可，因此原本需要四五行完成的事情两行代码就可以完成。是不是很精妙！～

less 复制代码

// 利用解构数组的方法交换变量内容 => 不需要中间变量
[main, secondary] = [secondary, main]
console.log('使用解构数组方法：', main, secondary);

控制对象内部的方法

利用解构语法同样可以控制对象内部的属性和值。

javascript 复制代码

const restaurant = {
  name: '意大利🇮🇹经典',
  location: 'Via Angelo Tavanti 23, 佛罗伦萨, 意大利',
  categories: ['意大利', '比萨店', '素食', '有机'],
  starterMenu: ['佛卡夏', '意式烤面包', '大蒜面包', '卡普雷塞沙'],
  mainMenu: ['披萨', '意大利面', '烩饭'],

  order: function (starterIndex, mainIndex) {
    return [this.starterMenu[starterIndex], this.mainMenu[mainIndex]];
  },
};
console.log(restaurant.order(2, 0));

使用解构语法：

ini 复制代码

const [starter, mainCourse] = restaurant.order(2, 0);
console.log(starter, mainCourse);

获取嵌套数组内部的元素

ini 复制代码

const nested = [2, 4, [5, 6]];
const [i, , [j,k]] = nested;
console.log(i, j, k);	// 2 5 6

为获取到的数组元素设置默认值

css 复制代码

// Default values
const [p, q, r] = [8, 9];
console.log(p, q, r);

在解构语法对数组的操作中，如果遇到了目标数组上不存在的元素，控制台会对未找到元素的变量返回undefined。

为了避免这种异常的发生，你可以为数组中的每个元素设置默认值,这样即便读取到不存在的元素也会返回设置好的默认值，不会返回undefined。

css 复制代码

// Default values
const [p = 1, q = 1, r = 1] = [8,];
console.log(p, q, r);