【ES6】变量的解构赋值

简介: 【ES6】变量的解构赋值
ES6,全称为ECMAScript6。ES6与js的关系是:前者是后者的规格,后者是前者的实现。换句话说,ES是js的国际化版本,js是ES的子集。

一、什么叫解构赋值?


 ES6允许按照一定的模式,从数组或者对象中提取值,对变量进行赋值,这被称为解构(Destructuring)

       而解构赋值的写法大多采用模式匹配,只要等号两边的模式相同,左边的变量就会被赋予对应的  ES6允许按照一定的模式,从数组或者对象中提取值,对变量进行赋值,这被称为解构(Destructuring)

       而解构赋值的写法大多采用模式匹配,只要等号两边的模式相同,左边的变量就会被赋予对应的值。


大家不要怕,下面我们用通俗易懂的方式来说:先看例子

//普通赋值
var a=1;
var b=2;
var c=3;
//ES6的解构赋值
var [a,b,c]=[1,2,3];
//输出都是:
console.log(a);//1
console.log(b);//2
console.log(c);//3

模式匹配就是说,等号两边的格式要相同,它才可以赋值。

       解构的意思是,对数组或者json格式的变量里面的内容进行分解,然后再赋值。类似于提取里面的值。

二、解构赋值有哪些分类?写法?


【1】对数组的解构赋值

【2】对对象的解构赋值

【3】对字符串的解构赋值

【4】对数值和布尔值的解构赋值

【5】对函数参数的解构赋值

下面一一讲解每个类型的用法和写法:


1)对数组的解构赋值

/******************标准写法格式******************/
var [a,b,c]=[1,2,3];
//输出:
console.log(a);//1
console.log(b);//2
console.log(c);//3
/******************嵌套数组写法格式******************/
var [a,[b,c]]=[1,[2,3]];
//输出:
console.log(a);//1
console.log(b);//2
console.log(c);//3
/******************含定义数组写法格式******************/
var [a,...b]=[1,2,3,4];
//输出:
console.log(a);//1
console.log(b);//[2,3,4]
/******************不完全解构写法格式******************/
var [x,y]=[1,2,3];
//输出:
console.log(x);//1
console.log(y);//2
let [a,[b],d]=[1,[2,3],4];
//输出:
console.log(a);//1
console.log(b);//2
console.log(d);//4
/******************解构失败写法示例******************/
var [x]=[];
//输出:
console.log(x);//undefined
var [a,b]=[1];
//输出:
console.log(a);//1
console.log(b);//undefined

【注】:上例中x、b解构失败,即x、b在模式匹配中未匹配到值,所以它们的值为undefined。

2)对对象的解构赋值

【注】:在对象解构赋值中,左边式中的变量的顺序不需要按照右边属性的排列顺序。

标准写法:

let {id:a,val:b}={id:"ko33",val:2};
//输出:
console.log(a);//"ko33"
console.log(b);//2
//解释:这里是对变量a、b赋值。
//首先,左右两边先按照模式匹配来取指,然后左边取得的值分别赋给a、b

简单写法:

let {id,val}={id:"ko33",val:2};
//输出:
console.log(id);//"ko33"
console.log(val);//2

下面的例子中,id是模式,a才是变量:

var {id:a}={id:"ko33",val:2};
//输出:
console.log(a);//"ko33"
console.log(id);//SyntaxError:Duplicate delaration "id"

下面的例子中,同一变量不能被let定义两次,var可以(参考let的用法):

//错误
let id;
let {id}={id:"ko33"};
//正确
var id;
var {id}={id:"ko33"};
//正确
var id;
({id}={id:"ko33"});
//正确
var a;
var {id:a}={id:"ko33"};

还可以将js已定义的对象中的属性提取出来:

let {log,sin,cos}=Math;
//Math是js自带的对象

3)对字符串的解构赋值

这里字符串被转化成为了对象。

const [a,b,c,d]="eggs";
//输出:
console.log(a);//"e"
console.log(b);//"g"
console.log(c);//"g"
console.log(d);//"s"

这里字符串被转化成了对象,js的字符串对象含有属性length。

let {length:len}="eggs";
//输出:
console.log(len);//4

4)对数值和布尔值的解构赋值

let {toString:s}=123;
let {toString:s}=true;

5)对函数参数的解构赋值

【注】:先解释一下默认值问题

默认值的标准形式:

var [x=1,y=x]=[1,2];

输出是x=1;y=2

解释: 首先,看左边的式子,x的默认值为1,y的默认值为x。只有当x、y在右边对应的模式为undefined的时候,才会取默认值。

取指流程: 先看x对应的右边的模式为1,所以x=1,左边的默认值不去管它,再看y对应的右边的模式为2,所以y=2,左边y的默认值不去管它。

函数参数的解构赋值分为3种:

(1)普通类型:

function add([x,y]){
  return x+y;
}
add([1,2]);//3

(2)指定函数变量的默认值类型:

function move({ x = 0 , y = 0 }= {} ){
  return [x,y];
}
move({x:3,y:8});// [3,8]
move({x:3});// [3,0]
move({});// [0,0]
move();// [0,0]

(3)指定函数形参的默认值类型:

function move({x,y}= {x:0 , y:0} ){
  return [x,y];
}
move({x:3,y:8});// [3,8]
move({x:3});// [3,undefined]
move({});// [undefined,undefined]
move();// [0,0]

三、解构赋值的应用


【1】😮 交换两个变量的值

通常情况下,交换变量a、b的值,需要三句代码:

tmp=a;

a=b;

b=tmp;

现在ES6的语法只需要:

[a,b]=[b,a];

【2】😮 函数返回多个值

返回数组:

function test(){
  return [1,2,3];
}
var [a,b,c]=test();

返回数组:

function test(){
  return {
    id:"hcq",
    val:"lxz"
};
var {id,val}=test();

【3】😮 提取JSON数据

【注】😒 这里的变量data属于模式,不会被提取 😮

var jsonData= {
  id: 23,
  status: "alright",
  data:[596,69]
}
let {id,status,data:num}=jsonData;

查看更多ES6教学文章:


1. 【ES6】let与const 详解

2. 【ES6】变量的解构赋值

3. 【ES6】字符串的拓展

4. 【ES6】正则表达式的拓展

5. 【ES6】数值的拓展

6. 【ES6】数组的拓展

7. 【ES6】函数的拓展

8. 【ES6】对象的拓展

9. 【ES6】JS第7种数据类型:Symbol

10. 【ES6】Proxy对象

11. 【ES6】JS的Set和Map数据结构

12. 【ES6】Generator函数详解

13. 【ES6】Promise对象详解

14. 【ES6】异步操作和async函数

15. 【ES6】JS类的用法class

16. 【ES6】Module模块详解

17. 【ES6】ES6编程规范 编程风格

参考文献


阮一峰 《ES6标准入门(第2版)》

相关文章
|
6月前
|
JavaScript
ES6之变量的解构赋值
ES6之变量的解构赋值
|
6月前
|
JSON JavaScript 前端开发
ES6 变量的解构赋值
ES6 变量的解构赋值
|
7天前
es6变量声明与解构赋值
ES6的变量声明与解构赋值特性使得代码更加简洁、清晰,提高了开发效率和代码的可读性,在实际开发中被广泛应用。
|
2月前
ES6解构赋值
本文介绍了ES6中解构赋值的用法,包括对象和数组的解构,展示了如何从复杂数据结构中提取需要的变量,以及使用重命名和嵌套解构来简化代码。
33 0
ES6解构赋值
|
5月前
|
JSON JavaScript 前端开发
ES6 解构赋值详解
ES6是JavaScript语言的一次重大更新,引入了许多新特性和语法改进,其中解构赋值是一个非常实用和灵活的语法特性。它可以让我们从数组或对象中提取值,并赋给对应的变量,让代码变得更加简洁和易读。本文将深入探讨ES6解构赋值的语法、用法及其在实际开发中的应用。
191 58
ES6 解构赋值详解
|
3月前
es6 的解构赋值
【8月更文挑战第22天】
20 3
|
4月前
ES6 解构赋值【详解】
ES6 解构赋值【详解】
27 0
|
JavaScript 前端开发 网络架构
ES6 解构赋值
ES6 解构赋值
85 0
|
11月前
ES6学习(二)—变量的解构赋值
ES6学习(二)—变量的解构赋值
Es6解构赋值
例如现在有一个本地存储里面存的是用户信息,然后需要拿到里面的id,名称等等非常麻烦