ES6 学习笔记(2) 变量的解构赋值
2018-03-01 本文已影响0人
MrZhou_b216
1. 数组的解构赋值
let a = 1;
let b = 2;
let c = 3;
// ES6 可以写成
let [a,b,c] = [1,2,3];
1.1 “模式匹配”，只要等号两边的模式相同，左边的变量就会被赋予对应的值
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 ; 如果结构不成功就是undefined
z // [] ;
1.2 如果等号的右边不是数组（或者严格地说，不是可遍历的结构，那么将会报错。
// 报错
let [foo] = 1;
let [foo] = false;
let [foo] = NaN;
let [foo] = undefined;
let [foo] = null;
let [foo] = {};
1.3 默认值
let [x, y = 'b'] = ['a']; // x='a', y='b'
// ES6 内部使用严格相等运算符（===）判断一个位置是否有值
let [x, y = 'b'] = ['a', undefined]; // x='a', y='b'
// 默认值可以引用解构赋值的其他变量，但该变量必须已经声明。
let [x = 1, y = x] = []; // x = 1 ; y = 1;
let [x = 1, y = x] = [2] // x = 2 ; y = 2;
let [x = y, y = 1] = []; // ReferenceError: y is not defined
2. 对象的解构语法
2.1 对象的属性没有次序,变量名必须与属性名同名,才能取到正确的值
let {foo , bar} = { foo : 'aaa' , bar :'bbb'}
foo //aaa
bar //bbb
// 变量名与属性名不一致
let { foo:baz} = {foo : 'aaa' ,bar : 'bbb'}
baz // 'aaa' ;
foo // error : foo is not defined
// 先找到同名属性,然后再赋给对应的变量 真正被赋值的是后者
2.2 对象解构也可以用于相套结构对象
let obj = {
p: [
'Hello',
{ y: 'World' }
]
};
let { p: [x, { y }] } = obj;
x // "Hello"
y // "World"
2.3 对象的解构也可以指定默认值
var { x =3} = {}
x // 3
var {x : y = 3} = { x: 5}
y // 5
2.4 如果解构失败 变量的为undefined
let {foo} = {bar : 'baz'};
foo //undefined
2.5 如果解构模式是嵌套的对象,而且子对象所在的福属性不存在就会报错
// 报错
let {foo : {bar}} = {bar : 'baz'};
2.6 将一个已声明的变量用于解构赋值
let x;
{x} = { x : 1};
// SynctaxError : synctax error
// 上面代码报错 因为会将{x} 解析成一个代码段 发生语法错误
( {x} = { x = 1})
2.7 对象的解构赋值,可以很方便的地将现有对象的方法,赋值到某个变量上
let { log, sin, cos } = Math;
2.8 由于数组本质是特殊的对象,因此可以对数组进行对象属性的解构
let arr = [1,2,3] ;
let { 0 : first ,[arr.length - 1] : last} = arr ;
first // 1
last // 3
3 字符串的解构赋值
3.1 字符串可转换成一个类似于数组的对象
const [a,b,c,d,e] = 'hello' ;
a // 'h'
b // 'e'
c // 'l'
d // 'l'
o // 'o'
// 类数组都有一个length属性
let {length : len} = 'hello' ;
len // 5
4 数值和布尔值的解构赋值
4.1 解构赋值时如果等号右边是数值和布尔值,则会先转为对象
let { toString : s } = 123 ;
s === Number.prototype.toString // true
let {toString : s} = true ;
s === Boolean.prototype.toString // true
解构的规则: 如果等号右边的值不是数组或对象,就先将其转化为对象;因为 undefined和null 无法转换成兑现,所以进行解构赋值会报错
5 函数参数的机构赋值
function move ({x = 0 ,y = 0}) {
return [x ,y]
}
move({ x : 3 , y : 3 }) // [ 3 ,3 ] ;
move({ x : 3}) // [ 3 ,0 ] ;
move ({ }) // [ 0 ,0 ] ;
move() // [ 0 ,0 ];
5.1 undefined 会触发函数参数的默认值.
[1, undefined , 3].map((x = 'yes') => x); // [1,'yes',3]
6 圆括号问题 以下三种解构赋值不得使用圆括号
3.1 变量声明语句
// 全部报错
let [(a)] = [1];
let {x: (c)} = {};
let ({x: c}) = {};
3.2 函数参数
// 报错
function f([(z)]) { return z; }
// 报错
function f([z,(x)]) { return x; }
3.3 赋值语句的模式
// 全部报错
({ p: a }) = { p: 42 };
([a]) = [5];
7 用途
7.1 交换变量的值
let x = 1 ;
let y = 2 ;
[x , y] = [ y , x] ;
7.2 从函数返回多个值
// 返回数组
function example() {
return [1,2,3];
}
let [a,b,c] = example();
//返回对象
function example() {
return { foo : 1 , bar : 2 };
}
let {foo ,bar} = example();
7.3 函数的定义
// 参数是一个有序数值
function f ([x,y,z]) {...}
f([1,2,3]) ;
// 参数是一个无序数值
function f({x,y,z}) {}
f({x = 1, z = 2, y = 3});
7.4 提取json数据
let jsonData = { id : 12 , status : 'ok' , data : [1212,545]};
let {id , status , data: number} = jsonData ;
console.log(id ,status ,number) ; // 12 ,'ok' ,[1212,545]
7.5 函数参数的默认值
function ajax( url , {async = true, id = 1});
7.6 遍历map解构
const map = new map();
map.set( 'first' , 'hello');
map.set( 'last' , 'world');
for (let [key ,value] of map) {
console.log( key + 'is' + value)
// first is hello
// second is world
};
// 获取键名
for (let [key] of map) {
// ...
}
// 获取键值
for (let [,value] of map) {
// ...
}
7.7 输入模块的指定方法
const { SourceMapConsumer, SourceNode } = require("source-map");
