ES6 变量解构赋值

ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构（ Destructuring ）。

一、数组的解构赋值

一个最简单的例子：

var [a,b,c] = [1,2,3];// a=1, b=2, c=3

这其实是一种模式匹配，只要两边的模式相同，就能正确地赋值：

let [a,[b,c]] = [1,[2,3]];// a=1, b=2, c=3

let [ , ,c] = [1,2,3];// c=3

let [c] = [1,2,3];// c = 1

let [a,c] = [1];// a = 1, c undefined

如果等号的右边不是数组（或者严格地说，不是可遍历的结构），那么将会报错

//  报错
let [foo] = 1;
let [foo] = false;
let [foo] = NaN;
let [foo] = undefined;
let [foo] = null;
let [foo] = {};

默认值可以引用解构赋值的其他变量，但该变量必须已经声明:

let [x = 1, y = x] = []; // x=1; y=1
let [x = 1, y = x] = [2]; // x=2; y=2
let [x = 1, y = x] = [1, 2]; // x=1; y=2
let [x = y, y = 1] = []; // ReferenceError

二、对象的解构赋值

对象的解构与数组有一个重要的不同。数组的元素是按次序排列的，变量的取值由它的位置决定；而对象的属性没有次序，变
量必须与属性同名，才能取到正确的值：

let {first,second} = {first:1,second:2};
let {third,fourth} = {fourth:4,third:3};
console.log(first,second,third,fourth);// 1，2，3，4

如果变量名与属性名不一致，则：

let {first:number} = {first:1};
console.log(number); // 1
console.log(first); // Uncaught ReferenceError

let number = {first: 1,second: 2
}
let {first,second} = number; //first = 1, second = 2

var node = {
loc: {
start: {
line: 1,
column: 5
}
}
};
var { loc: { start: { line }} } = node;
line // 1
loc // error: loc is undefined
start // error: start is undefined

对象的解构也可以指定默认值(默认值生效的条件是，对象的属性值严格等于 undefined )：

var {x = 3} = {};
x // 3
var {x, y = 5} = {x: 1};
x // 1
y // 5
var { message: msg = "biubiubiu" } = {};
msg // "biubiubiu"

三、字符串的解构赋值

字符串被转换成了一个类似数组的对象。

let [a,b,c] = 'abc';
console.log(a,b,c);// a=a,b=b,c=c
let {length:len} = 'byebye';
console.log(len);// 6

四、数值和布尔值的解构赋值

如果等号右边是数值和布尔值，则会先转为对象。

let {toString: s} = 123;
s === Number.prototype.toString // true
let {toString: s} = true;
s === Boolean.prototype.toString // true

五、函数参数的解构赋值

函数 add 的参数表面上是一个数组，但在传入参数的那一刻，数组参数就被解构成变量 x 和 y 。对于函数内部的代码来说，它们能感受到的参数就是 x 和 y

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

函数参数的解构也可以使用默认值。

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]

转载于:https://www.cnblogs.com/lastnigtic/p/6540464.html

ES6 变量解构赋值相关推荐

ECMAScript6学习笔记 ——let、const、变量解构赋值
let 不存在变量提升通过let声明的变量仅在块级作用域内有效不允许在同一个作用域内重复声明一个变量防止值公用 var oUl = document.querySelectorAll('ul&g ...
ES6 的解构赋值前每次都创建一个对象吗？会加重 GC 的负担吗？
本文来源于知乎上的一个提问. 为了程序的易读性,我们会使用 ES6 的解构赋值: function f({a,b}){} f({a:1,b:2}); 这个例子的函数调用中,会真的产生一个对象吗?如果会 ...
ES6常用解构赋值有哪几种？
ES6常用解构赋值有哪几种? a.数组的解构赋值 //数组解析赋值,模式匹配 {let [a, b, c] = [1, 2, 3];console.log("模式匹配");cons ...
ES6学习（变量解构赋值）
解构赋值含义:允许按照一定模式,从数组和对象中提取值,对变量进行赋值,只要等号两边的模式相同,左边的变量就会被赋予对应的值 1.数组解构赋值右侧必须是一个数组 let [a, b, c] = [1, ...
ES6语法~解构赋值、箭头函数、class类继承及属性方法、map、set、symbol、rest、new.target、 Object.entries......
2015年6月17日 ECMAScript 6发布正式版本前面介绍基本语法, 后面为class用法及属性方法.set.symbol.rest等语法. 一.基本语法: 1. 定义变 ...
es6学习 -- 解构赋值
ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring). 以前,为变量赋值,只能直接指定值. let a = 1; let b = 2; let c ...
ES6中解构赋值深入解读
ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构 1.数组的解构赋值 let [head, ...tail] = [1, 2, 3, 4]; head // 1 tail ...
ES6语法---解构赋值
解构赋值概念按照一定的模式,从数组和对象中提取值,对变量进行赋值,就被称为解构. 目的是为了提高效率,使用起来更加方便. 以下的各个说明,我会类比着ES5去解释,希望能帮到小伙伴们. 数组解构正常 ...
前端面试不用怕！一分钟带你了解es6的解构赋值
解构赋值(★★★)!!!!! ES6中允许从数组中提取值,按照对应位置,对变量赋值,对象也可以实现解构 <script>var stus=['李钟硕','刘诗诗','易烊千玺']//访问数 ...
ES6：解构赋值及对象方法
解构赋值对象解构起别名:通过:来进行取名 //对象解构赋值 var obj = { uname: "张三", age: 21, sex: "男" } // ...

ES6 变量解构赋值

ES6 变量解构赋值相关推荐

最新文章

热门文章