最新消息: 电脑我帮您提供丰富的电脑知识,编程学习,软件下载,win7系统下载。

ES6(二)解构赋值

IT培训 admin 4浏览 0评论

ES6(二)解构赋值

目录

前言

一、解构赋值

原理:(以数组为例)

语法:

举个栗子~

现在来验证一下结果~

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

 基本类型

可嵌套类型

可忽略类型

不完全解构

剩余运算符

解构默认值

三、对象解构

原理:

语法:

举个栗子~

结果验证      

 四、对象解构第二种写法

原理:

语法:

举个栗子~

 结果验证   

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

基本类型

可嵌套类型

忽略类型

不完全解构类型

剩余运算符类型

解构默认值

结束语


前言

      在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(二)解构赋值

目录

前言

一、解构赋值

原理:(以数组为例)

语法:

举个栗子~

现在来验证一下结果~

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

 基本类型

可嵌套类型

可忽略类型

不完全解构

剩余运算符

解构默认值

三、对象解构

原理:

语法:

举个栗子~

结果验证      

 四、对象解构第二种写法

原理:

语法:

举个栗子~

 结果验证   

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

基本类型

可嵌套类型

忽略类型

不完全解构类型

剩余运算符类型

解构默认值

结束语


前言

      在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}

结束语

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

11136

与本文相关的文章

发布评论

评论列表 (0)

  1. 暂无评论