前言

一、解构赋值

原理：(以数组为例)

语法：

举个栗子~

现在来验证一下结果~

二、数组解构赋值的常见类型

基本类型

可嵌套类型

可忽略类型

不完全解构

剩余运算符

解构默认值

三、对象解构

原理：

语法：

举个栗子~

结果验证

四、对象解构第二种写法

原理：

语法：

举个栗子~

结果验证

五、对象解构赋值的常见类型

基本类型

可嵌套类型

忽略类型

不完全解构类型

剩余运算符类型

解构默认值

结束语

前言

在ES5（也就是我们之前所学的javascript基础）中，在数组取值的时候我们如果要取全部（n个）值，就相对应的要声明n个变量，看以下代码：

 {let array = [1,2,3];console.log(array[0]);console.log(array[1]);console.log(array[2]);    //声明三次变量才可以取出来}

这样看起来是不是很！麻！烦！？能不能一条语句解决呢？于是，ES6给我们带来了“解构赋值”

一、解构赋值

原理：(以数组为例)

数组解构允许我们按照一一对应的关系从数组中提取值，赋值给变量。

语法：

let关键字＋[ ]（中括号：关键符号，代表解构，里面存放变量）= 数组（也可以是数组名）；

举个栗子~

let array = [1,2,3];  //一个数组
let [a,b,c] = array;//解构符号内声明三个变量，对应array数组中的三个值

要点注意！！一定要用let关键字！！

现在来验证一下结果~

 {let array = [1,2,3];  //一个数组let [a,b,c] = array;  //解构符号内声明三个变量，对应array数组中的三个值console.log(a);console.log(b);console.log(c);}

二、数组解构赋值的常见类型

基本类型

上面例子就是啦~

可嵌套类型

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

可忽略类型

      let [a, , b] = [1, 2, 3];// a = 1// b = 3

不完全解构

      let [a , b] = [1];// a = 1//b = undefined

剩余运算符

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

解构默认值

     let [a = 2] = [undefined]; // a = 2 其中2为默认值，只有当解构模式有匹配结果，//且匹配结果是 undefined 时，才会触发默认值作为返回结果

三、对象解构

原理：

对象解构允许我们使用变量名匹配对象的属性，匹配成功，将把对象属性值赋值给变量。
通俗理解：实际上就是对象的属性匹配，如果对象中的属性与解构符号中的
变量名匹配，则将属性值赋值给变量，也是一一对应的关系。

语法：

let关键字＋{变量名1}（大括号：关键符号，代表解构，里面存放变量）= {属性名1：属性值}（也可以是对象名）;

举个栗子~

let obj = {name: '凤求凰'，age: '未知', sex: '男'}；
//对象及对象中的三个属性
let {name, age, sex} = obj；
//三个解构变量与obj对象中的三个属性名一一匹配

要点注意！！一定要用let关键字！！

结果验证

{let obj = {name: '凤求凰', age: '未知', sex: '男'};//对象及对象中的三个属性let {name, age, sex} = obj;//三个解构变量与obj对象中的三个属性名一一匹配console.log(name);console.log(age);console.log(sex);}

四、对象解构第二种写法

原理：

对象解构允许我们用书写对象属性的方式书写解构变量，其属性值就是变量名

语法：

let关键字＋{属性名：变量名}= 对象{属性名：属性值}（也可以是对象名）

要注意！解构符号里的属性名一定要绝对匹配于对象中的属性名！！！！！！！

举个栗子~

结果验证

 {let obj = {name: '凤求凰', age: '未知', sex: '男'};let {name: MyName, age: MyAge, sex:TheSex} = obj;console.log(MyName);console.log(MyAge);console.log(TheSex);}

五、对象解构赋值的常见类型

基本类型

上面例子就是~

可嵌套类型

语法同基本类型相似，记住嵌套部分依旧用中括号，对象属性用大括号包裹

 {let obj = {name: ['凤求凰', {age: '未知', sex: '男'}]};let {name:[Myname, {age}, {sex}]} = obj;//Myname = 凤求凰//age = 未知//sex = 男}

忽略类型

 {let obj = {name: ['凤求凰', {age: '未知'}]};let {name:[Myname, { }]} = obj;//Myname = 凤求凰}

不完全解构类型

 {let obj = {name: ['凤求凰', {age: '未知'}]};let {name:[Myname, {age}, add]} = obj;//Myname = 凤求凰//age = 未知//add = undefined}

剩余运算符类型

 {let {name, ...ect} = {name: '凤求凰', age: '未知', sex: '男'};//Myname = 凤求凰//age: "未知",sex: "男"[[Prototype]]: Object}

解构默认值

 {let {name: Myname = '凤凰于飞', age :MyAge = 20''} = {name: '凤求凰'};//Myname = 凤求凰//MyAge = 20}

结束语

希望本篇文章可以帮到求知若渴的众多同学吖~
若能帮到也欢迎点赞、收藏、关注我，后续也会持续发布新文章，祝大家学有所成！
欢迎各位前端大佬留言讨论指教！小糖谢谢各位啦~❤ ❤ ❤ ❤

ES6（二）解构赋值相关推荐

ES6 的解构赋值前每次都创建一个对象吗？会加重 GC 的负担吗？
本文来源于知乎上的一个提问. 为了程序的易读性,我们会使用 ES6 的解构赋值: function f({a,b}){} f({a:1,b:2}); 这个例子的函数调用中,会真的产生一个对象吗?如果会 ...
ES6常用解构赋值有哪几种？
ES6常用解构赋值有哪几种? a.数组的解构赋值 //数组解析赋值,模式匹配 {let [a, b, c] = [1, 2, 3];console.log("模式匹配");cons ...
ES6语法~解构赋值、箭头函数、class类继承及属性方法、map、set、symbol、rest、new.target、 Object.entries......
2015年6月17日 ECMAScript 6发布正式版本前面介绍基本语法, 后面为class用法及属性方法.set.symbol.rest等语法. 一.基本语法: 1. 定义变 ...
ES6：解构赋值及对象方法
解构赋值对象解构起别名:通过:来进行取名 //对象解构赋值 var obj = { uname: "张三", age: 21, sex: "男" } // ...
es6学习 -- 解构赋值
ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring). 以前,为变量赋值,只能直接指定值. let a = 1; let b = 2; let c ...
ES6中解构赋值深入解读
ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构 1.数组的解构赋值 let [head, ...tail] = [1, 2, 3, 4]; head // 1 tail ...
ES6语法---解构赋值
解构赋值概念按照一定的模式,从数组和对象中提取值,对变量进行赋值,就被称为解构. 目的是为了提高效率,使用起来更加方便. 以下的各个说明,我会类比着ES5去解释,希望能帮到小伙伴们. 数组解构正常 ...
前端面试不用怕！一分钟带你了解es6的解构赋值
解构赋值(★★★)!!!!! ES6中允许从数组中提取值,按照对应位置,对变量赋值,对象也可以实现解构 <script>var stus=['李钟硕','刘诗诗','易烊千玺']//访问数 ...
【ES6】变量的解构赋值
[ES6]变量的解构赋值一.什么叫解构赋值? 二.解构赋值有哪些分类?写法? 1)对数组的解构赋值 2)对对象的解构赋值 3)对字符串的解构赋值 4)对数值和布尔值的解构赋值 5)对函数参数的解构赋 ...
es6 - 解构赋值
一我们为什么要使用解构在学习ES6新的特性解构赋值之前,我们先来看看为什么要使用解构,以前如果我们需要获取对象或者数组里面的数据,并且把它们存入数组,需要写很多代码.如下 const person ...

ES6（二）解构赋值

前言

一、解构赋值

原理：(以数组为例)

语法：

举个栗子~

现在来验证一下结果~

二、数组解构赋值的常见类型

基本类型

可嵌套类型

可忽略类型

不完全解构

剩余运算符

解构默认值

三、对象解构

原理：

语法：

举个栗子~

结果验证

四、对象解构第二种写法

原理：

语法：

举个栗子~

结果验证

五、对象解构赋值的常见类型

基本类型

可嵌套类型

忽略类型

不完全解构类型

剩余运算符类型

解构默认值

结束语

ES6（二）解构赋值相关推荐

最新文章

热门文章