ES6解构赋值

Muninn 发布于2019-08-21 15:11 / 3432人阅读

摘要：一数组解构赋值解构赋值也可嵌套赋值结果结果结果结果如果解构不成功，变量就会等于。解构赋值允许指定默认值。例如数组对象如果变量名与属性名称不一致必须写成下面这样和不允许重新声明其他同数组解构赋值。

一、数组解构赋值：
var a = 1;
var b = 2;
var c = 3;
解构赋值：
var [a,b,c] = [1,2,3];
let [a,b,c] = new Set([1,2,3]);
也可嵌套赋值：
let [foo,[[bar],[baz]]] = [1,[[2],[3]]];
结果：
foo //  1; bar // 2; baz // 3;
 
let [,,third] == ["foo","bar","baz"];
结果：
third // "baz";
 
let [head, ...tail] = [1,2,3,4];
结果：
head // 1;
tail // [2,3,4];
 
let [x, y, ...z] = ["a"];
结果: 
x // "a"; 
y // undefined;
z // [];
 
如果解构不成功，变量就会等于undefined。
var [foo] == [];  foo // undefined
var [bar,foo] == [1];  foo // undefined
 
 
不完全解构
let [x,y] = [1,2,3];
x // 1
y // 2
 
let [a,[b],c] = [1,[2,3],4];
a // 1;
b // 2;
c // 4;
 
只要某种数据解构具有迭代接口，都可以采用数组形式的解构赋值。
 
解构赋值允许指定默认值。
var [foo = true] = []; foo // true
let [x, y="b"] = ["a"]; //x = "a"; y = "b"
let [x, y="b"] = ["a",undefined]; //x = "a"; y = "b"
ES6内部使用（===）完全等于来判断一个位置是否有值，所以，如果一个数组成员不严格等于undefined，默认值不会生效。
var [x = 1] = [undefined]; x // 1
var [x = 1] = [null]; x // null
上面如果一个数组成员是null，默认值就不会生效，因为null不严格等于undefined
 
解构赋值的惰性取值：
function f(){ return "aaa"};
let [x = f()] = [1];
x // 1
上面代码中x可以取到值1，所以就不会执行表达式，所以x = 1,等价于下面代码
var x;
if([1][0] === undefined){x =f()}else{x = [1][0]}
变赋值之前必须声明
二、对象解构赋值
var {foo, bar} = {foo:"aaa", bar:"bbb"};
foo // "aaa"
bar // "bbb"
*对象的解构赋值与数组一个重要的不同。数组必须是按次序排列，变量取值由未知决定；
而对象的属性没次序，变量必须与属性同名，才能取到正确的值。例如：
数组：let [x,y] = [1,2];  // x = 1,  y = 2
对象：var {foo, bar} = {bar:"aaa", foo:"bbb"}; // foo = "bbb", bar = "aaa"
var {baz} = {bar:"aaa"} // baz = "undefined"
如果变量名与属性名称不一致；必须写成下面这样：
var {foo：baz} = {foo: "aaa", bar: "bbb"};  // baz = "aaa"
let和const不允许重新声明！
其他同数组解构赋值。
三、字符串解构赋值
const [a,b,c,d,e] = "hello"; // a="h", b="e"... e="o";
类似与数组对象都有长度(length属性)；因此还可以对这个属性解构赋值
let {length : len} = "hello"; // len = 5
四、数值和布尔值得解构赋值
let {toString: s} = 123;
s === Number.prototype.toString // true
let {toString: s} = true;
s === Boolean.prototype.toString // true
五、函数参数的解构赋值
function add([x,y]){
return  x+y;
}
add([1,2]); // 3
[[1,2],[3,4]].map(([a,b]) => a+b); // [3,7];
函数参数的解构也可以使用，默认值
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]
undefined会触发函数的默认值
[1,undefined,3].map((x = "yes")=>x) // [1,"yes",3]

GPU云服务器云服务器解构赋值对象解构解构函数 ES6

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/88124.html

ES6 学习笔记（一）let，const和解构赋值

摘要：另外对于已经声明的变量进行解构赋值时，要非常小心。因此在行首加，将其强制转化为表达式执行。由于和无法转为对象，所以对它们进行解构赋值，都会报错。 let和const let和const是es6新增的两个变量声明关键字，与var的不同点在于：（1）let和const都是块级作用域，在{}内有效，这点在for循环中非常有用，只在循环体内有效。var为函数作用域。（2）使用let和con...

iOS122 2019-08-23 15:29 评论0 收藏0
es6 - 解构赋值

摘要：比如上面展示的情况都是可以联合使用的比如对象的解构赋值对象的解构赋值是基于属性的。当给已存在的变量解构赋值时，注意加这是由于如果不加会把左边看成一个代码块，会报错。注意事项数组的解构赋值中，使用的变量必须放在最后。解构赋值解构赋值是一个听起来比较高大上的特性，但按我的理解，它就是一种语法糖。它并没有赋予js更强大的能力，只是让赋值操作更加的灵活，效率。在es6之前，赋值操作需要=...

DirtyMind 2019-08-26 11:45 评论0 收藏0
ES6学习第二章变量的解构赋值

摘要：前言前言该篇笔记是第二篇变量的解构赋值。这一章原文链接变量的解构赋值解构赋值解构赋值允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构。对象的解构赋值是根据对象值进行匹配。前言该篇笔记是第二篇变量的解构赋值。这一章原文链接：变量的解构赋值解构赋值ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构（Destructuring）。解构赋值是对赋值运...

番茄西红柿 2021-11-24 09:38 评论0 收藏2637
ES6学习第二章变量的解构赋值

摘要：前言该篇笔记是第二篇变量的解构赋值。这一章原文链接变量的解构赋值解构赋值允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构。对象的解构赋值是根据对象值进行匹配。前言该篇笔记是第二篇变量的解构赋值。这一章原文链接：变量的解构赋值解构赋值ES6 允许按照一定模式，从数组和对象中提取值，对...

番茄西红柿 2021-11-24 09:38 评论0 收藏2637
ES6-变量的解构赋值(3)

摘要：数组的解构赋值特点根据数据的下标来赋值的，有次序。模式能够匹配起来，如长度为数值和布尔值的解构赋值解构赋值的规则是只要等号右边的值不是对象或数组，就先将其转为对象。布尔值解构赋值为字符串的一种。在很多独立细小的方面，解构赋值都非常有用。 1、解构赋值简介官方解释：按照一定的模式，从数组和对象中提取值，对变量进行赋值，这被称为解构（Destructuring）。举个例子，想获取数组中...

Jason_Geng 2019-08-23 16:46 评论0 收藏0
《ES6学习2》变量的解构赋值

摘要：解构赋值的分类数组解构赋值对象解构赋值字符串解构赋值数值解构赋值布尔值解构赋值函数参数解构赋值。嵌套情况默认值解构赋值允许设置默认值，当数组成员严格等于，默认值将生效。报错报错函数参数的解构赋值函数的参数也可以使用解构赋值和指定默认值 ES6可以从数组和对象中提取值，然后对变量进行赋值。解构赋值的分类：数组解构赋值、对象解构赋值、字符串解构赋值、数值解构赋值、布尔值解构赋值、函数参...

mist14 2019-08-26 13:52 评论0 收藏0