ES6 - 变量的解构赋值学习笔记
变量的解析赋值
数组的解析赋值
es6允许按照一定的模式,从数组和对象中提取值,对变量进行赋值,这就称为解构。
var a = 1;
var b = 2;
var c = 3;
//在es6中允许写成:
var [a,b,c] = [1,2,3];
//表示从数组中提取值,按照位置的对应关系对变量赋值
本质为:“模式匹配”。
如果解构不成功,变量的值就等于undefined
var [foo] = [];
var [bar, foo] = [1];
// foo的值为undefined
let [x,y,....z] = ['a'];
x //"a"
y //undefined
z //[]
let [a, [b], d] = [1, [2,3], 4];
上面的例子为不完全解构,但是可以成功。如果等号的右边不是数组(或者严格的说,不是可遍历的结构),那么就会报错。
解构赋值允许有指定的默认值
var [foo = true] = [ ];
foo //true [x, y = 'b'] = ['a']; //x = 'a' , y = 'b'
注意:es6内部使用严格相等运算符(===)判断一个位置是否有值,所以一个数组成员不严格等于undefined,默认值是不会生效的,
var [x = 1] = [undefined]; //x = 1
var [x = 1] = [null]; //x = null
对象的解构赋值
解构不仅仅用于数组,还可以用于对象,
var { foo ,bar} = { foo : "aaa",bar : "bbb"};
foo //"aaa"
bar //"bbb"
对象的解构与数组有一个重要的不同。数组的元素是按照次序排列的,变量的取值由他的位置决定;而对象的属性没有次序,变量必须与属性同名,才能取到正确的值。也就是说,对象的解构赋值的内部机制是先找到同名的属性,然后再赋值给对应的变量。真正被赋值的后者,而不是前者。
var {foo :baz} = {foo :"aaa", bar :"bbb"};
baz // aaa
foo //error:foo is not undefined
这段代码说明,真正被赋值的是变量baz,而不是模式foo
字符串的解构赋值
这是因为,此时字符串被转换成了一个类似数组的对象。
const [a,b,c,d,e] = 'hello';
a // "h"
b //"e"
..
类似数组对象都有length属性,因此还可以对这个属性解构赋值。
let {length :len} = 'hello';
len //5
数值和布尔值的解构赋值
解构赋值时,如果等号右边是数值或是布尔值,就先转为对象。解构赋值的原则是:只要的等号右边不是对象,就先将它转为对象。由于undefined和null无法转为对象,所以对他们进行解构赋值都会报错。
函数参数的解构赋值
function add([x ,y]){
return x+y;
}
add([1,2]); //3
上面的代码中,函数add的参数实际上不是一个数组,而是通过解构获得的变量x,y。
undefined会触发函数参数的默认值
[1,undefined,3].map((x = 'yes') => x)
// [1,'yes',3]
用途
变换变量的值
[x,y] = [y,x];
从函数返回多个值
function show(){
return [1,2,3];
}
var [a,b,c] = show();
//返回一个数组
函数参数的定义
解构赋值可以方便的将一组参数与变量名对应起来function f([x,y,z]){...}
f([1,2,3])
提取JSON数值
var jsondata = {
id: 34,
status: "ok",
data: [232,433]
}
let {id, status, data: number} =jsondata;
console.log(id, status, number); //42, ok, [232,433]
函数参数的默认值
遍历Map结构
任何部署了iterator接口的对象,都可以用for....of循环遍历,Map数据原生支持该接口,配合变量的解构赋值,获取键名和键值就很方便了。var map = new Map();
map.set('first', 'hello');
for(let[key, value] o
f map){
console.log(key + "is" + value);
}
输入模板的指定方法
ES6 - 变量的解构赋值学习笔记的更多相关文章
- es6变量的解构赋值学习笔记
1. 解构赋值的规则是,只要等号右边的值不是对象,就先将其转为对象.由于undefined和null无法转为对象,所以对它们进行解构赋值,都会报错. let { prop: x } = undefin ...
- ES6 变量的解构赋值
数组的解构赋值 var [a,b,c] = [1,2,3]; 左边是变量,右边是值,根据数据结构一一对应 只要等号两边的模式相同,左边的变量就会被赋予右边对应的值,必须模式相同 如果等号 ...
- ES6变量的解构赋值
变量的解构赋值 1.数组的解构赋值 2.对象的解构赋值 3.字符串的解构赋值 4.数值和布尔值的解构赋值 5.函数参数的解构赋值 6.圆括号问题 7.用途 1.数组的解构赋值 ES6 允许写成下面这样 ...
- es6—变量的解构赋值
数组的解构赋值 ]]]]]]] = []}} = {}} = {}})]: first]: last} = arr} = {}) {}))}))}) {}))}))].]]]])})] }}} = { ...
- ES6变量的解构赋值(一)数组的解构赋值
let[a,...arr]=[1,2,3,4];//a==>1 arr==>[2,3,4] let [x, y, ...z] = ['a'];//a==>'a' y==>und ...
- ES6变量的解构赋值(二)对象的解构赋值
前面我们知道,数组的结构赋值需要按顺序进行赋值, let [a,,c] = [,,] console.log(a); console.log(c);//3 let [a,b] = [1];consol ...
- ES6 学习笔记 - 变量的解构赋值
变量的解构赋值 学习资料:ECMAScript 6 入门 数组的解构赋值 基本用法 可以从数组中提取值,按照对应位置,对变量赋值.这种写法属于"模式匹配". let [a, b, ...
- ES6中的变量的解构赋值, 解放我们的双手,实现变量的批量赋值
ES6--变量的解构赋值 引言 正文 一.数组的解构赋值 解构失败 不完全解构 默认值 二.对象的解构赋值 三.字符串的解构赋值 结束语 引言 变量的解构赋值, 听起来很复杂, 简单点说可以理解成批量 ...
- ES6学习笔记之变量的解构赋值
变量的解构赋值 ES6允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构. 数组的解构赋值 以前,为变量赋值,只能直接指定值: 1 2 3 var a = 1; var b = 2; ...
随机推荐
- maven项目如何跳过某些junit test,或者指定执行部分junit test
maven-surefire-plugin的插件提供了对测试目录的配置,想要细看的或者学习更多东西的可以去http://maven.apache.org/surefire/maven-surefire ...
- 过河(DP)
问题描述] 在河上有一座独木桥,一只青蛙想沿着独木桥从河的一侧跳到另一侧.在桥上有一些石子,青蛙很讨厌踩在这些石子上.由于桥的长度和青蛙一次跳过的距离都是正整数,我们可以把独木桥上青蛙可能到达的点看成 ...
- PAT (Advanced Level) 1078. Hashing (25)
二次探测法.表示第一次听说这东西... #include<cstdio> #include<cstring> #include<cmath> #include< ...
- NVIDA 提到的 深度框架库
BidMachBlocksCaffeChainerCNTKcuda-convnetcuda-convnet2Deeplearning4jkaldiKerasLasagneMarvinMatConvNe ...
- sql语句优化之not in
多表关联想查a表中除去b表的可用not exists 效率比not in 更高 优化后的语句用时0.421秒 select john.*, (case when round((case john.su ...
- CG中的数据变量类型
CG 中的数据变量类型有三: float:高精度浮点值,通常是32位. half:中精度浮点值.通常是16位,范围是-60000至+60000,它适合存储UV坐标,颜色值等. fixed:低精度浮点值 ...
- ICE第三篇------一些疑难点
1 间接代理 参考http://blog.sina.com.cn/s/blog_53e8499c0100lkoo.html IceGrid用于支持分布式网络服务应用,一个IceGrid域由一个注册表( ...
- 深入浅出 - Android系统移植与平台开发(一)
深入浅出 - Android系统移植与平台开发(一) 分类: Android移植2012-09-05 14:16 16173人阅读 评论(12) 收藏 举报 androidgitgooglejdkub ...
- CodeForces 660D Number of Parallelograms
枚举两点,确定一条线段,计算每条线段的中点坐标. 按线段中点坐标排个序.找出每一种坐标有几个. 假设第x种坐标有y个,那么这些线段可以组成y*(y-1)/2种平行四边形. 累加即可. #include ...
- Nginx 中 nginx.conf 详解
#定义Nginx运行的用户和用户组 user www www; #nginx进程数,建议设置为等于CPU总核心数. worker_processes 8; #全局错误日志定义类型,[ debug | ...