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

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

使用解构语法交换变量

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

在大多数编程语言中,你需要通过设置中间变量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);
相关推荐
RadiumAg10 分钟前
记一道有趣的面试题
前端·javascript
yangzhi_emo14 分钟前
ES6笔记2
开发语言·前端·javascript
yanlele30 分钟前
我用爬虫抓取了 25 年 5 月掘金热门面试文章
前端·javascript·面试
中微子2 小时前
React状态管理最佳实践
前端
烛阴2 小时前
void 0 的奥秘:解锁 JavaScript 中 undefined 的正确打开方式
前端·javascript
中微子2 小时前
JavaScript 事件与 React 合成事件完全指南:从入门到精通
前端
Hexene...2 小时前
【前端Vue】如何实现echarts图表根据父元素宽度自适应大小
前端·vue.js·echarts
初遇你时动了情2 小时前
腾讯地图 vue3 使用 封装 地图组件
javascript·vue.js·腾讯地图
dssxyz2 小时前
uniapp打包微信小程序主包过大问题_uniapp 微信小程序时主包太大和vendor.js过大
javascript·微信小程序·uni-app
天天扭码3 小时前
《很全面的前端面试题》——HTML篇
前端·面试·html