ES6提供了解构赋值的方式，这样子在赋值多个变量或者进行注释时可以方便很多，不同场景下也有很多新的应用，个人常使用的有数组的解构赋值，对象的解构赋值和函数参数的解构赋值，函数参数的解构赋值之前总结过，这里写下数组的和对象的简单总结吧
函数参数的解构赋值总结点击这里

一、数组的解构赋值

先来个最简单的

let [a, b] = [1, 2];
a;//输出1
b;//输出2

这种模式就容易为多个变量赋值，因为等号右边是数组，所以有需要获取数组元素时，如下使用更为方便

let array = [1,2,3];
let [a, b, c] = array;
a;//输出1
b;//输出2
c;//输出3

当然，数组中的元素是不限类型的

let [a, array, c] = [1, [2,3], 4];
a;//输出1
array;//输出[2,3]
c;//输出4

另外，可将剩余元素赋值给一个变量

let [a, ...b] = [1,2,3,4];
a;//输出1
b;//输出[2, 3, 4]

其实只要等号右边具有Iterator接口均可使用解构赋值

二、对象的解构赋值

先给个最简单的例子

let {name, sex} = {name:"Jonithan", sex:"male"}
name;//"Jonithan"
sex;//"male"

这里的赋值是变量名对应属性名赋值，如果变量名与属性名没有对应上的话，则会赋值失败，如下所示

let {name, gender} = {name:"Jonithan", sex:"male"}
name;//"Jonithan"
gender;//undefined，因为没有对应属性名

其实以上写法只是如下写法的简写

let {name:name, sex:sex} = {name:"Jonithan", sex:"male"}
name;//"Jonithan"
sex;//"male"

所以其实是把对应的属性名提取出来给一个变量，所以可以这样使用

let {name:username, sex:gender} = {name:"Jonithan", sex:"male"}
username;//"Jonithan"
gender;//"male"

以上仅列出了较为简单的情况，更多具体情况查询MDN吧，或者翻看阮老师的《ES6标准入门》

ES6解构赋值学习总结相关推荐

ES6 解构赋值学习
学习博客:ES6-变量的解构赋值-阮一峰核心:按照一定模式 ,从数组和对象中提取值数组的解构赋值,根据索引位置进行赋值 // 根据位置进行赋值 let [a, b, c] = [1, 2, 3]; ...
前端学习必备之ES6解构赋值的常见用法
1.解构赋值可以轻松获取对象或者数组中的数据 var jsonData = {data: "111",data2: ["test","test2&qu ...
ES6 解构赋值的用法笔记
1.概念:解构赋值可以理解为对赋值运算符的一种扩展.它主要针对数组或者对象进行模式匹配,然后对模式中的变量进行赋值. 2.特性:采用ES6解构赋值的方式可以代码的可读性更高.代码书写更加简洁.清晰. ...
ES6解构赋值原理详解
ES6解构赋值 ES6变量的解构赋值本质上是"模式匹配",只要等号两边的模式相同,左边的变量就会被赋予匹配的右边的值,如果匹配不成功变量的值就等于undefined 数组的解构赋值 ...
[OHIF-Viewers]医疗数字阅片-医学影像-es6解构赋值-const{}=-let{}=
[OHIF-Viewers]医疗数字阅片-医学影像-es6解构赋值-const{}=-let{}= 解构赋值语法是一种 Javascript 表达式.通过解构赋值, 可以将属性/值从对象/数组中取出, ...
ES6解构赋值: ES6...转为ES5的写法
es6的特性,主要用于数组和对象的析构直接上问题: 因为chrome低版本(用的55版本)不支持es6...的下面这种写法, 需要转为es5写法 function calcLinePaths() ...
js之删除对象中的属性——delete、es6解构赋值、自执行匿名函数
js之删除对象中的属性--delete.es6解构赋值.自执行匿名函数实例 const person = {name: '李世民',gender: 'male',age: 24 };// 删除目标对 ...
ES6阮一峰-----变量的解构赋值学习
1.数组的解构赋值 ES6允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring). 以前,为变量赋值,只能直接指定值. let a = 1; let b = ...
es6 - 解构赋值
一我们为什么要使用解构在学习ES6新的特性解构赋值之前,我们先来看看为什么要使用解构,以前如果我们需要获取对象或者数组里面的数据,并且把它们存入数组,需要写很多代码.如下 const person ...

ES6解构赋值学习总结

一、数组的解构赋值

二、对象的解构赋值

ES6解构赋值学习总结相关推荐

最新文章

热门文章