ES2015 解构 Destructuring

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)//300const [item] = arr
console.log(item)100const [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

ES2015 解构 Destructuring相关推荐

ES6新特性之解构表达式
解构表达式什么是解构? -- ES6中允许按照一定模式从数组和对象中提取值,然后对变量进行赋值,这被称为解构 (Destructuring). 数组解构比如有一个数组: let arr = [1, ...
ES6（一）——字面量的增强、解构、let/const、块级作用域、暂时性死区
一.字面量的增强 ES6中对对象字面量进行了增强,称之为 Enhanced object literals(增强对象字面量). 字面量的增强主要包括下面几部分: 属性的简写:Property Sh ...
TypeScript笔记 5--变量声明(解构和展开)
解构是什么解构(destructuring assignment)是一种表达式,将数组或者对象中的数据赋给另一变量. 在开发过程中,我们经常遇到这样问题,需要将对象某个属性的值赋给其它两个变量.代码 ...
javascript语法_了解JavaScript中的解构，剩余参数和传播语法
javascript语法 The author selected the COVID-19 Relief Fund to receive a donation as part of the Write ...
JavaScript学习之ES6 ES2015学记笔记（五）-解构（destructuring）
本文主要介绍ES6中的结构赋值什么是解构赋值? 解构赋值允许你使用类似数组或对象字面量的语法将数组和对象的属性赋给各种变量.这种赋值语法极度简洁,同时还比传统的属性访问方法更为清晰.传统访问数组如下 ...
JS之解构（ Destructuring）
这阵子因为要学习React Native ,而RN必备的知识就是JS,所以开始学习起来了Js,在此声明写博客就是为了更好的学习,总结一些我学习过程中知识点,有不同意见的请尽情发表! 1 什么是解构赋值 ...
解构赋值(Destructuring)
解构赋值(Destructuring) ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring). 数组的解构赋值以前,为变量赋值,只能直接指定值. ...
TypeScript Parameter Destructuring 语法 - 参数解构
您可以使用参数解构方便地将作为参数提供的对象解包到函数体中的一个或多个局部变量中. function sum({ a, b, c }: { a: number; b: number; c: numbe ...
前端笔记之ES678WebpackBabel（上）初识ES678Babellet和const解构语法
一.ES版本简介和调试运行方法 1.1 ECMAScript简介 MDN手册:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript JavaS ...
如何在 JavaScript 中使用对象解构
对象解构是一个有用的 JavaScript 功能,用于从对象中提取属性并将其绑定到变量. 更好的是,对象解构可以在一个语句中提取多个属性,可以从嵌套对象访问属性,并且可以在属性不存在时设置默认值. 在 ...

ES2015 解构 Destructuring

一、数组的解构

二、对象的解构

ES2015 解构 Destructuring相关推荐

最新文章

热门文章