Js变量的解构赋值

来源:http://www.chinese-glasses.com 作者:Web前端 人气:98 发布时间:2020-03-31
摘要:时间: 2019-10-21阅读: 113标签: 解构 ES6允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构 解构:从数组和对象中提取值,对变量进行赋值。 一. 数组 一、数组的

时间: 2019-10-21阅读: 113标签: 解构

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

解构:从数组和对象中提取值,对变量进行赋值。

一. 数组

一、数组的解构赋值

例子:

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

1.数组的元素是按次序排列的,变量的取值由它的位置决定

等同于

let a = 1;
let b = 2;
let c = 3;

Tips:从数组中提取值,按照对应位置,对变量赋值

let [a, [b], c] = [1, [2], 3];
console.log(a);  // 1
console.log(b);  // 2
console.log(c);  // 3

let [ , , third] = ['one' , 'two', 'three']
console.log(third);  // three

let [x ,  ,z ] = [1, 2, 3];
console.log(x);  // 1
console.log(z);  // 3

let [top , ...buttom] = [1, 2, 3, 4];
console.log(top);  // 1
console.log(buttom);  // [2, 3, 4]

let [x, y, ...z] = ['a'];
console.log(x);  // a
console.log(y);  // undefiend
console.log(z);  // [ ]

Tips: 如果解构不成功,变量的值就等于undefined。


不完全解构,即等号左边的模式,只匹配一部分的等号右边的数组。这种情况下,解构依然可以成功。

// 模式匹配let [a, b, c] = [1, 2, 3];let [foo, [[bar], baz]] = [1, [[2], 3]];foo // 1bar // 2baz // 3let [ , , third] = ["foo", "bar", "baz"];third // "baz"let [x, , y] = [1, 2, 3];x // 1y // 3let [head, ...tail] = [1, 2, 3, 4];head // 1tail // [2, 3, 4]let [x, y, ...z] = ['a'];x // "a"y // undefinedz // []

例子:

let [x, y] = [1, 2, 3];
console.log(x); // 1
console.log(y); // 2

let [x, [y], z] = ['a', ['b' , 'c'], d];
console.log(x); // a
console.log(y); // b
console.log(z); // d

如果等号的右边不是数组(或者严格地说,不是可遍历的结构,参见《Iterator》一章),那么将会报错。

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

解构赋值允许指定默认值。

2.默认值

例子:

let [ i = 'mark'] = [];  // i = 'mark'
let [x, y = 'a'] = ['b']; // x = 'b', y = 'a'
let [x, y = 'b'] = [ 'a' , undefiend]; // x = 'a' , y = 'b'

Tips: ES6 内部使用严格相等运算符(===),判断一个位置是否有值。所以,如果一个数组成员不严格等于undefined,默认值是不会生效的。

let [x = 1] = [undefined]; 
//x = 1

let [x = 1] = [null];  
// x = null

Tips : 如果一个数组成员是null,默认值就不会生效,因为null不严格等于undefined。

如果默认值是一个表达式,那么这个表达式是惰性求值的,即只有在用到的时候,才会求值。

// 当一个数组成员严格等于undefined,默认值才会生效let [foo = true] = [];foo // truelet [x, y = 'b'] = ['a']; // x='a', y='b'let [x, y = 'b'] = ['a', undefined]; // x='a', y='b'// 默认值可以引用解构赋值的其他变量,但该变量必须已经声明。let [x = 1, y = x] = []; // x=1; y=1let [x = 1, y = x] = [2]; // x=2; y=2let [x = 1, y = x] = [1, 2]; // x=1; y=2let [x = y, y = 1] = []; // ReferenceError: y is not defined

例子:

function f(){
    return 'aaa';
}

let [a = f()] = [1]; 
// a = 1

Tips: 因为x能取到值,所以函数f根本不会执行。

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

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

Tips: 最后一个表达式之所以会报错,是因为x用到默认值y时,y还没有声明


本文由10bet发布于Web前端,转载请注明出处:Js变量的解构赋值

关键词:

最火资讯