Loading [MathJax]/jax/output/CommonHTML/config.js
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >ECMAScript6基础学习教程(三)变量的解构赋值

ECMAScript6基础学习教程(三)变量的解构赋值

作者头像
娜姐
发布于 2022-05-13 06:30:33
发布于 2022-05-13 06:30:33
38300
代码可运行
举报
文章被收录于专栏:娜姐聊前端娜姐聊前端
运行总次数:0
代码可运行

“解构赋值”是ES6亮点之一,其简化了对数组和对象的部分属性赋值操作。

解构赋值分为两种:数组和对象。

1.数组的解构赋值

ES中,如果取某个数组部分值进行赋值,必须写成如下方式:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
var array = [1,2,3];
var a = array[0];  // 1
var b = array[1];  // 2
...

有些啰嗦,不是吗?在ES6中,可以简写成:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
var [a, b, c] = [1, 2, 3]; // a===1; b===2; c===3
//也可以只取部分值
var [, b, ,] = [1, 2, 3]; // b === 2
// rest参数:可以利用...取剩余值
var [a, ...b] = [1, 2, 3]; // b === [2,3]
// 注意:余值必须是数组变量的最后一个元素值
var [a, ...b, c] = [1, 2, 3]; // SyntaxError: Rest element must be last element in array

从上面例子可以看出,如果做数组的解构赋值,需要将变量也声明为数组,并且,变量的取值由它的位置决定。第一个变量对应数组下标为0的值,第二个变量对应数组下标为1的值...以此类推。

并且,可以用rest参数...取余值。

(1) 指定默认值

解构赋值运行指定默认值(用全等运算符? === undefined判断一个位置是否有值)。例如:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
var [a=4] = []; // a===4
// 等号右边数组的第三个元素值为undefined,命中“空值”条件
var [a, b, c ='str'] = [1, 2, undefined]; // c ==='str'
// 等号右边数组的第三个元素值为null,不属于“空值”
var [a, b, c ='str'] = [1, 2, null]; // c ===null

默认值也可以是变量。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
var [a=1, b=a+1] = []; // a===1; b ===2
(2) 注意事项
  1. 如果解构不成功,但是等号右边值为数组类型,则变量赋值为undefined
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
var [a] = []; // a===undefined
  1. 如果等号右边值不是数组类型,那么解构失败。
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
var [a] = false; // TypeError: undefined is not a function
2.对象的解构赋值

和数组不同,对象的解构赋值与对象属性顺序无关,而是根据变量和属性名一一对应,从而取得正确的值。例子如下:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
var {a, b} = {a: 1, b:2}; // a===1; b===2;
var {b, a} = {a: 1, b:2}; // a===1; b===2;
// 给变量取别名
var {a:x, b:y} = {a: 1, b: 2}; // x===1; y ===2
// rest参数:利用...取对象属性余值
var {a, b, ...c} = { a:1, b:2, x: 3, y:4}; // c === {x: 3, y:4}

对象解构赋值的内部机制,是先找到同名属性,然后再赋值给相应的变量。也就是说,var {a, b} = {a: 1, b:2};的完整写法应该是var {a:a, b:b} = {a: 1, b:2};

同样,对象的解构赋值也支持rest参数...(此特性属于ES7范畴,但是babel已经支持此功能)。

(1) 指定默认值

对象的解构赋值也可以指定默认值,用法和数组解构类似(用undefined全等判断空值)。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
var {x=3} = {}; // x===3;
(2) 注意事项

如果将一个已经声明的变量用于对象解构,那么,需要在解构赋值语句外面加()

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
var x; 
{x} = {x:123}; //SyntaxError: Unexpected token =
({x} = {x:123}); // x === 123

不加()之所以会报错,是因为JavaScript引擎会将{x}解析为一个代码块,所以执行到=时,无法找到赋值对象,从而报错。为了避免将大括号{}解析为代码块,我们可以将赋值语句放在小括号()中。

3. 小结
(1) 函数参数的解构赋值

解构赋值常用应用场景是函数参数赋值。利用解构赋值,可以简化参数取值。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
// 场景一:解析对象属性值
function test({a, b, c}) {
    return a+b+c;
}
test({a:1, b:2, c:3}); // 6
// 场景二:解析数组元素值
var total = [[1,2], [3,4]].map(function ([a, b]) {
    return a+b;
}); // [3, 7]
(2) rest参数

数组和对象解构都支持rest参数...,要注意,rest参数是浅复制,并且,不能复制继承对象的原型属性。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
let obj = {a: {b:1}};
let {...x} = obj; // x==={a: {b:1}}
obj.a.b = 2; // x ==={a: {b:2}}

下一节:ECMAScript6基础学习教程(四)函数

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2022-05-13,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
ECMAScript 6笔记(let,const 和 变量的解构赋值)
版权声明:本文为吴孔云博客原创文章,转载请注明出处并带上链接,谢谢。 https://blog.csdn.net/wkyseo/article/details/51328994
空空云
2018/09/27
8390
ECMAScript6基础学习教程(四)函数
ES6在函数方面有很多扩展,其中最为大众所知的就是箭头函数。除此之外,还有很多其他新特性,比如,参数默认值,Rest参数和扩展运算符......下面将一一介绍。
娜姐
2022/05/13
3300
ES6 的解构赋值
将等号右边的数据进行解构,然后赋值给左边。可以分为数组的解构赋值、对象的解构赋值。
小小范
2021/12/07
4370
ES6入门之变量的解构赋值
值得注意的是,等式两边的值要对等,这样左边的变量才会被赋上右边对应的值,如果不对等左边的值将会出现undefined,如下写法:
执行上下文
2022/07/26
4480
ES6入门之变量的解构赋值
ECMAScript 6入门 - 变量的解构赋值
定义 ES6允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring)。 解构赋值不仅适用于var命令,也适用于let和const命令。 解构赋值的规则是,只要等号右边的值不是对象,就先将其转为对象。 数组的解构赋值 基本用法 'use strict' var [a, b, c] = [1, 2, 3]; a // 1 b // 2 c // 3 嵌套数组解构 'use strict' let [foo, [[bar], baz]] = [1, [[2], 3]];
laixiangran
2018/04/11
2.5K0
ECMAScript6 解构赋值
在 ES6 中,关于解构的含义为:允许按照一定模式,从数组和对象中提取值,对变量进行赋值,而数组、对象和字符串,都能通过这种方式进行赋值
Nian糕
2018/08/21
4520
ECMAScript6 解构赋值
ECMAScript 6之变量的解构赋值
1,数组的解构赋值 基本用法 ES6允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring)。 以前,为变量赋值,只能直接指定值。 var a = 1; var b = 2; var c = 3; ES6允许写成下面这样。 var [a, b, c] = [1, 2, 3]; 上面代码表示,可以从数组中提取值,按照对应位置,对变量赋值。 本质上,这种写法属于“模式匹配”,只要等号两边的模式相同,左边的变量就会被赋予对应的值。下面是一些使用嵌套数组进行解构的例子。 l
xiangzhihong
2018/02/05
3.4K0
前端基础-ECMAScript解构(拆包)
在ES6中,可以使用解构从数组和对象提取值并赋值给独特的变量,即将数组或对象中的值,拆成一个一个变量。
cwl_java
2020/03/26
5680
ES6基础-变量的解构赋值
数组的解构赋值,对象的解构赋值,字符串的解构赋值,数值与布尔值的解构赋值,函数参数的解构赋值。
达达前端
2019/11/28
8690
ES6之变量的解构赋值
ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构。解构赋值在一些场景下还是很有用的。
wade
2020/04/24
5820
ES6学习之路2----变量的解构赋值
1.只要等号两边的模式相同,左边的变量就会被赋予对应的值。 2.如果解构不成功,变量的值就等于undefined。 实例:
Rattenking
2021/01/30
4860
ES6语法学习(变量的解构赋值)
另一种情况是不完全解构:就是等号左边的模式只匹配一部分等号右边的数组,这样解构依然可以成功
帅的一麻皮
2020/06/22
5820
ES6 解构赋值详解
由于 ES6 内部使用严格相等运算符(===),判断一个位置是否有值。所以,如果一个数组成员不严格等于 undefined,默认值是不会生效的。
Leophen
2019/08/23
8750
ECMAScript 6 学习笔记
IMWeb前端团队
2017/12/29
9430
ES6笔记(3)-- 解构赋值
其实,解构赋值内部的实现方式使用到了ES6的Iterator迭代器,通过层层遍历,保证了相应值的获取
书童小二
2018/09/03
7960
es6语法需要注意的部分
由于无符号右移运算的结果是一个 32 位的正数,所以负数的无符号右移运算得到的总是一个非常大的数字。例如,如果把 -64 右移 5 位,将得到 134217726。如何得到这种结果的呢?
lin_zone
2018/08/15
8610
ECMAScript6介绍及环境搭建
ECMAScript 6.0(以下简称 ES6)是 JavaScript 语言的下一代标准,已经在 2015 年 6 月正式发布了。它的目标,是使得 JavaScript 语言可以用来编写复杂的大型应用程序,成为企业级开发语言。
江一铭
2022/07/05
1.9K0
ES6_02_变量解构赋值
1 变量解构赋值 定义:ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构 这种写法属于“模式匹配”,只要等号两边的模式相同,左边的变量就会被赋予对应的值。 let [x, , y] = [1, 2, 3]; x // 1 y // 3 let [head, ...tail] = [1, 2, 3, 4]; head // 1 tail // [2, 3, 4] let [x, y, ...z] = ['a']; x // "a" y // undefined
程序员海军
2021/10/11
3050
ECMAScript 6 笔记(三)
  ES6 的写法还有两个好处:首先,阅读代码的人,可以立刻意识到哪些参数是可以省略的,不用查看函数体或文档;其次,有利于将来的代码优化,即使未来的版本在对外接口中,彻底拿掉这个参数,也不会导致以前的代码无法运行。
超然
2018/08/03
4010
ECMAScript 6 笔记(一)
       1996年11月,JavaScript的创造者Netscape公司,决定将JavaScript提交给国际标准化组织ECMA,希望这种语言能够成为国际标准。次年,ECMA发布262号标准文件(ECMA-262)的第一版,规定了浏览器脚本语言的标准,并将这种语言称为ECMAScript,这个版本就是1.0版。
超然
2018/08/03
1.1K0
相关推荐
ECMAScript 6笔记(let,const 和 变量的解构赋值)
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验