本节知识点
- 数组的解构赋值
- 对象的解构赋值
- 字符串的解构赋值
- 数值和布尔值的解构赋值
- 函数参数的解构赋值
- 圆括号的问题
- 用途
(1) 数组的解构赋值
基本用法
ES6允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构.
以前，为变量赋值，现在能直接指定值。
let a=1;
let b = 2;
let c = 3;
要是es6可以写成
let [a,b,c] = [1,2,3];
上面代码表示,可以从数组中提取值，按照对应位置，对变量赋值.
本质上，这种写法属于"模式匹配",只要等号两边的模式相同，左边的变量就会被赋予对应的值，下面是嵌套数组进行解构的例子。
let [foo,[[baz],baz]] = [1,[[2],3]];
foo //1
bar //2
baz //3
let [ , , third] = ["foo","bar","baz"];
third // baz
let[x, , y] = [1,2,3];
x //1
y //3
let [head,...tail] = [1,2,3,4];
head //1
tail // [2,3,4]
let [x,y,...z] = ['a'];
x //"a"
y //undefined
z //[]
如果解构不成功，变量的值就是undefined
let [foo] = [];
let [bar,foo] [1];
以上两种情况都属于解构不成功,foo的值都会等于undefined
另一种情况是完全机构，即等号左边的模式，只匹配一部分的等号右边的数组，这种情况解构依然可以成功
let [x,y] = [1,2,3];
x //1
y //2
let [a,[b],d] = [1,[2,3],4];
a //1
b //2
d //4
上面两个例子都属于不完全解构，但是都可以成功
但是如果等号的右边不是数组，那么将会报错
let [foo] = 1;
let [foo] = false;
let [foo] = NaN;
let [foo] = undefined;
let [foo] = null;
let [foo] = {};
上面的语句都会报错，因为等号右边的值，和左边的格式不匹配
let [x,y,z] = new Set(['a','b','c']);
x //"a"
第二种两个值互换位置
let a = 2;
let b = 3;
[a, b] = [b, a];
console.log(a);
console.log(b);
默认值
解构赋值允许指定默认值
let[foo=true] = [];
foo //true
let [x,y='b'] = ['a']; // x='a' ,y='b'
let[x,y='b'] = ['a',undefined]; //x='a',y = b
undefined不会改变默认值，但要是null则会改变默认值例如
let[x=1] = [undefined];
x //1
let [x=1] = [null];
x // null
默认值也可以是函数
function f() {
console.log('aaa');
}
let [x = f()] = [];
x; // aaa
默认值可以引用解构赋值的其他变量，但是该变量必须已经声明
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] = []; //语法错误，因为y没定义
上面最后一个表达式报错，因为x用y做默认值。y没有被声明。
(2)对象的解构赋值
解构不仅仅用于数组，还可以用于对象
let {foo,bar} = {foo:"aaa",bar:"bbb"};
foo //aaa
bar //bbb
对象的解构与数组有一个重要的不同，数组的元素都是按次序排列的，变量的取值由它的位置决定的，而对象的属性没有次序，变量必须与属性同名，才能取到正确的值。
let {bar,foo} = {foo:"aaa",bar:"bbb"};
foo //"aaa"
bar //"bbb"
let {baz} = {foo:"aaa",bar:"bbb"}
baz // undefined
上面的代码，改变次序没关系，但是对于取值完全没有影响。第二个例子的变量没有对应的同名属性，导致取不到值。
如果变量名和属性名不一致那只有采用别名了
let {foo:baz} = {foo:'aaa',haha:'bbb'};
baz //aaa
let obj = {first:'hello',last:'world'};
let {first:f,last:l} = obj;
f // hello
l // world
与数组一样，解构也可以用于嵌套结构的对象
let obj = {
p:[
'Hello',
{y:"world"}
]
};
let {p:[x,{y}]} = obj;
x //Hello
y //world
此时P是模式，不是变量，因此不会被赋值，如果P也要作为变量赋值，可以写成下面
let obj = {
p:[
'Hello',
{y:"world"}
]
};
let {p,p:[x,{y}]} = obj;
x //Hello
y //World
p //[Hello,{y:world}]
对象的解构也可以指定默认值
var {x=3} = {};
x //3
var {x,y=5} = {x:1};
x //1
y //5
var {x:y=3} = {};
y //3
var {x:y=3} = {x:5};
y //5
var {message:msg='Something went wrong'} = {};
msg //Something went wrong
特别要注意的就是如果要将一个已经声明的变量用于解构赋值，必须非常小心
let x; //声明
{x} = {x:1}; //语法错误
要是想变成对的只有加圆括号
对象解构只声明没有赋值必须加圆括号
let x;
({x}={x:1})
这样就可以了
(3)字符串的解构赋值
const [a,b,c,d,e] = 'hello';
a //"h"
b //"e"
c //"l"
d //"l"
e //"o"
类似数组的对象都有一个length属性，因此还可以对这个属性解构赋值
let {length:len} = "hello";
len //5
(4) 数值和布尔值的解构赋值
解构赋值的时候，如果等号右边是数值和布尔值。则会先转为对象.
let{toString:s}=123;
s === Number.prototype.toString; //true
let {toString:s} = true;
s === Boolean.prototype.soString; //true
上面的代码中，数值和布尔值包装对象都有toString属性，因此变量s都能取到值
(5)函数参数的解构赋值
函数的参数也可以使用解构赋值.
function add([x,y]){
return x+y;
}
add([1,2]); //3
上面代码中函数add的参数表面上是一个数组，但是传入参数的那一刻，数组参数就被解构成变量x和y,对于函数内部代码来说。他们能感受到的参数就是x和y
函数参数的解构也可以使用默认值
function move({x=0,y=0}={}){
return [x,y];
}
move({x:3,y:8}) //[3,8]
move({x:3}); //[]
但要是换一种写法。为move的参数指定默认值，而不是为变量x和y指定默认值，那么就会得到另外的结果
function move({x, y} = { x: 0, y: 0 }) {
return [x, y];
}
move({x: 3, y: 8}); // [3, 8]
move({x: 3}); // [3, undefined]
move({}); // [undefined, undefined]
move(); // [0, 0]
(6)用途
变量解构赋值用途很多
(i) 交换变量的值
let x = 1;
let y =2;
[x,y] = [y,x];
上面代码交换变量x和y的值。
(ii) 从函数返回多个值
函数只能返回一个值，如果要返回多个值，只能将他们放在数组或者对象里面返回，有了解构赋值，取出这些值就非常方便。
function example(){
return [1,2,3];
}
let [a,b,c] = example();
//返回一个对象
function example2(){
return {
foo:1,
bar:2
}
}
let {foo,bar} = example();
(iii) 函数参数的定义
解构赋值可以方便的将一组参数与变量名对应起来
function f([x,y,z]){....}
f([1,2,3]);
//参数是一组无次序的值
function f({x,y,z}){...}
f({z:3,y:2,x:1})
(iv)提取JSON数据
解构赋值对提取JSON数据很有用
let jsonData = {
id:42,
status:"ok",
data:[867,444]
}
let {id,status,data} = jsonData;
console.log(id+"||"+status+"||"+data);
//42,"ok",[867,444]
(v) 函数参数的默认值
jquery.ajax = function(url,{
async = true,
beforesend = function(){},
cache = true
}={}){ //todo}
指定参数的默认值这样就避免了在参数内部里面写 var foo = config.foo||"defaultfoo"
(vi) 输入模块的指定方法
加载模块时，往往需要指定哪些方法。解构赋值使得输入语句非常清晰
const {SourceMapConsumer,SourceNode} = require("xxxxx");
网友评论