ES2015 解构 Destructuring

最新推荐文章于 2024-04-18 05:00:00 发布

喝着绿茶的猫

最新推荐文章于 2024-04-18 05:00:00 发布

阅读量415

点赞数

分类专栏： ES2015

本文链接：https://blog.csdn.net/luyu13141314/article/details/109513183

版权

ES2015 专栏收录该内容

13 篇文章

订阅专栏

本文介绍了ES2015引入的解构赋值特性，包括数组和对象的解构。在数组解构中，通过简单语法能方便地提取元素，避免了传统方式的繁琐。对象解构则是根据属性名进行赋值，提供了一种简洁的获取对象属性的方法。解构赋值使得代码更加简洁易读。

摘要由CSDN通过智能技术生成

ES2015 新增了一种从数组/对象中获取指定元素的方法，叫解构。

一般来说，所有新增方法都是为了弥补过去版本的不完美，正是因为遇到了问题，才出现了新的解决方案。

一、数组的解构

在过去，如果我们想提取一个数组的元素，方法如下：


const arr = [100,200,300]

const item1 = arr[0]
const item2 = arr[1]
const item3 = arr[2]

console.log(item1,item2,item3) //  100 200 300

是不是很麻烦？

而ES2015新增的数组解构一行代码就可以帮我们解决这个问题
在这里插入图片描述

数组的解构是根据数组下标位置来解构的

const arr = [100,200,300]

const [,,item3] = arr
console.log(item3)//300

const [item] = arr
console.log(item)100

const [a1,a2,a3,a4] = arr
console.log(a4)//undefined  如果取不到是undefined

除此之外，我们可以在解构变量名之前添加...，表示提取从当前位置开始往后的所有成员。

注意：... 只能在解构位置的最后一个成员使用

const arr = [100,200,300]

const [item,...rest] = arr
console.log(rest)//[200,300]

如果没见过...，可以看这篇文章《 …操作符的2种用法》

二、对象的解构

数组是根据数组下标位置去解构
对象是根据属性名去解构

const obj = {name:'luyu',age:18}

// 提取了obj对象中属性为name的值，放到了一个变量name当中
const {name} = obj

// 如果想给变量重命名
const {name:objName} = obj

// 如果想给变量重命名后给默认值;在对象obj中找不到该属性才会使用这个默认值
const {name:objName = 'jack'} = obj