ES6学习笔记(2)----变量的解构和赋值
参考书《ECMAScript 6入门》
http://es6.ruanyifeng.com/
变量的解构和赋值
本质上:只要模式匹配,左边的变量就能被赋予右边对应的值
原则: 解构赋值的规则是,只要等号右边的值不是对象或数组,就先将其转为对象。由于undefined和null不能转化为对象,所以如果右边是undefined或者null,则会解构报错
数组类型 :数组类型按照顺序匹配
let [x,y,z] = [1,2,3]
x = 1
y = 2
z = 3
对象类型 :对象类型按照属性名匹配
let {key1 : value1,key2 : value2} = {key2 : "v2",key1 : "v1"}
value1 = "v1"
value2 = "v2"
字符串||数字||布尔类型
let [a,b,c,d,e] = "admin"
a = 'a'
b = 'd'
c = 'm'
d = 'i'
e = 'n'
let {toLowerCase : method} = 'admin'
method = String.prototype.toLowerCase
let {toFixed : method1} = 3
method1 = Number.prototype.toFixed
let {toString : method2} = true
method2 = Boolean.prototype.toString
默认值
a.只有当右边对应的赋值严格等于undefined时,左边变量才能取默认值
b.惰性求值
c.默认值可以引用其他已经解构的变量的值
let [x = 1,y = 2] = [] //此时x的默认值是1,y的默认值是2 []等同于 [][0] = undefined,[][1] = undefined .....
let [x = 1,y = 2] = [null,null] //只有当x,y的值是undefined的时候,才能把默认值给x,y,此处null 不等于 undefined ,所以x = null, y = null
let {x = 3} = {x : undefined} // x = 3
let {x = 3} = {x : null} //x = null
function f(){
return "abc";
}
let [x = f()] = [1]
//此时x = 1,而不是会输出"abc",因为右边对应x变量的值是可以正常赋值的,所以不执行x =f()语句
let [x = 1, y = x] = [3] //x = 3,y = 3
不完全解构 : 等号左边的模式只匹配一部分等号右边的值
let [x,y] = [3] // x = 3 , y = undefined
let {k1 : a, k2 : b} = {k2 : "123"} // a = undefined, b = "123"
圆括号
允许使用 : 赋值语句的非模式部分
不允许使用
a.变量声明
b.函数参数
c.赋值语句模式
嵌套解构
数组
let [x, ...rest] = [1, 2, 3, 4];//x = 1 rest = [2,3,4]
let [x,[y,z]] = [1,[2,3]] // x = 1, y = 2, z = 3
对象
let obj = {
obj2: {
k1 : 'v1',
k2: 'v2'
}
};
let { obj2, obj2: {k1 : x, k2 : y} } = obj;
x // "v1"
y // "v2"
obj2 // {k1 : 'v1', k2 : 'v2'}
ES6学习笔记(2)----变量的解构和赋值的更多相关文章
- ES6学习笔记之变量的解构赋值
变量的解构赋值 ES6允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构. 数组的解构赋值 以前,为变量赋值,只能直接指定值: 1 2 3 var a = 1; var b = 2; ...
- ES6学习 第二章 变量的解构赋值
前言 该篇笔记是第二篇 变量的解构赋值. 这一章原文链接: 变量的解构赋值 解构赋值 ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring). 解构 ...
- ES6 学习笔记(二)解构赋值
一.数组的解构赋值 1.基本用法 ES6允许按照一定模式从数组和对象中提取值,然后对变量进行赋值,该操作即为解构 如: let [a,b,c]=[1,2,3]; console.log(a,b,c) ...
- es6学习2:变量的解构赋值
一:数组的解构赋值 ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构 let [foo, [[bar], baz]] = [1, [[2], 3]]; foo bar ba ...
- ES6学习笔记(4)- 解构
一.解构的意义 二.对象解构 三.数组解构
- ES6学习笔记(二)变量的解构与赋值
1.数组的解构赋值 1.1基本用法 ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring). 以前,为变量赋值,只能直接指定值. let a = 1 ...
- ES6学习----let、const、解构赋值、新增字符串、模板字符串、Symbol类型、Proxy、Set
这篇es6的学习笔记来自于表哥 表严肃,是我遇到过的讲课最通透,英文发音最好听的老师,想一起听课就去这里吧 https://biaoyansu.com/i/hzhj1206 ES6就是JS6,JS的第 ...
- ES6第三节:变量的解构赋值
ES6允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构.下面我们看实际的例子: 一.数组解构: let [a,b,c] = [1,2,3]; console.log(a); //a ...
- ES6系列_3之变量的解构赋值
ES6允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构. 解构有三种类型: 1.数组的解构赋值 (1)简单的数组解构 以前,我们给变量赋值是直接单个指定值,比如: let a=0; ...
随机推荐
- 2016/3/10 PHP (超文本预处理器) 是什么?
PHP(外文名:PHP: Hypertext Preprocessor,中文名:“超文本预处理器”)是一种通用开源脚本语言.语法吸收了C语言.Java和Perl的特点,利于学习,使用广泛,主要适用于W ...
- Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content
Content-Type https://tools.ietf.org/html/rfc7231#section-3.1.1.5 https://tools.ietf.org/html/rfc7231 ...
- 如何完成DEDE CMS外部数据库调用|不同数据库调用数据
dedecms如何完成2个数据库内容彼此调用?这是笔者今日要和我们共享的内容.百度了一大堆,大多语焉不详.常识有限,所以就说下笔者的做法, 能够还有其他有用的办法,欢送共享.笔者站点是dedecms5 ...
- 用dpkg命令制作deb包方法总结
用dpkg命令制作deb包方法总结 如何制作Deb包和相应的软件仓库,其实这个很简单.这里推荐使用dpkg来进行deb包的创建.编辑和制作. 首先了解一下deb包的文件结构: deb 软件包里面的结构 ...
- I.MX6 MAC Address 导致的系统崩溃
/**************************************************************************** * I.MX6 MAC Address 导致 ...
- poyla计数问题
关于poyla定理,首先推荐两篇很好的文章阅读 2001-----符文杰<poyla原理及其应用> 2008-----陈瑜希<poyla计数法的应用> 在然后就是自己的学习笔记 ...
- [Tjoi2016&Heoi2016] 树
[题目链接] https://www.lydsy.com/JudgeOnline/problem.php?id=4551 [算法] 树链剖分 时间复杂度 : O(QlogN) [代码] #includ ...
- 在 SharePoint 2013 中针对地理位置字段创建地图视图
在 SharePoint 2013 中针对地理位置字段创建地图视图 了解如何通过在 SharePoint 2013 列表中使用地图视图来显示位置信息.您可以通过 SharePoint 用户界面 (UI ...
- 数据库无法访问,用户 NT AUTHORITY/SYSTEM或NT AUTHORITY\NETWORK SERVICE登录失败的解决办法
问题:win7中的在IIS 7.0中,在 Default Web Site 目录下挂一虚拟目录. 在相应的应用程序池 DefaultAppPool 设置标识设置成NetworkService. 但是打 ...
- 查询及删除重复记录的SQL语句
1.查找表中多余的重复记录,重复记录是根据单个字段(peopleId)来判断 select * from people where peopleId in (select peopleId from ...