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);
相关推荐
gnip2 分钟前
SSE技术介绍
前端·javascript
yinke小琪16 分钟前
JavaScript DOM节点操作(增删改)常用方法
前端·javascript
枣把儿20 分钟前
Vercel 收购 NuxtLabs!Nuxt UI Pro 即将免费!
前端·vue.js·nuxt.js
望获linux21 分钟前
【Linux基础知识系列】第四十三篇 - 基础正则表达式与 grep/sed
linux·运维·服务器·开发语言·前端·操作系统·嵌入式软件
爱编程的喵23 分钟前
从XMLHttpRequest到Fetch:前端异步请求的演进之路
前端·javascript
喜欢吃豆25 分钟前
深入企业内部的MCP知识(三):FastMCP工具转换(Tool Transformation)全解析:从适配到增强的工具进化指南
java·前端·人工智能·大模型·github·mcp
豆苗学前端29 分钟前
手把手实现支持百万级数据量、高可用和可扩展性的穿梭框组件
前端·javascript·面试
不见_29 分钟前
不想再写周报了?来看看这个吧!
前端·命令行
yinke小琪31 分钟前
JavaScript 事件冒泡与事件捕获
前端·javascript
pany32 分钟前
写代码的节奏,正在被 AI 改写
前端·人工智能·aigc