es6数组结构图解(ES6之解构赋值)
es6数组结构图解(ES6之解构赋值)三、字符串的解构赋值默认值生效的条件是,对象的属性值严格等于 undefined 。es6内部使用严格相等运算符(===),如果数组成员不严格等于undefined,默认值不生效。[x y = 'b'] = ['a' undefined]; // x='a' y='b' var [x = 1] = [null]; //x=null 二、对象的解构赋值对象的解构赋值的内部机制,是先找到同名属性,然后再赋给对应的变量。 真正被赋值的是后者,而不是前者。
es6之前我们对变形进行赋值都需要一个个赋值,效率很低,而且如果给函数某个参数设定默认值需要在函数内使用选择语句,增加代码量,追求效率和代码精简的我们怎么能忍,下面介绍一下es6的一大利器——解构赋值
一、数组的解构赋值
1.1 示例(赋值按照次序)
var [a b c] = [1 2 3]; let [foo [[bar] baz]] = [1 [[2] 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--[] let [x y] = [1 2 3]; //x--1; y--2 let [a [b] d] = [1 [2 3] 4]; //a--1; b--2; d--4
1.2 解构赋值的默认值
es6内部使用严格相等运算符(===),如果数组成员不严格等于undefined,默认值不生效。
[x y = 'b'] = ['a' undefined]; // x='a' y='b' var [x = 1] = [null]; //x=null
二、对象的解构赋值
对象的解构赋值的内部机制,是先找到同名属性,然后再赋给对应的变量。 真正被赋值的是后者,而不是前者。
默认值生效的条件是,对象的属性值严格等于 undefined 。
三、字符串的解构赋值
const [a b c d e] = 'hello'; // a=h;b=e;c=l;d=l;e=o
四、解构赋值作用
4.1 交换变量的值
[x y] = [y x]; // 将x,y值互换
4.2 从函数返回多个值
function ex(){ return [1 2 3]; } var [a b c] = ex(); //a=1;b=2;c=3
4.3 函数参数的定义(有序和无序)
// 无序 function f([x y z]){...} f([1 2 3]); // 有序 function f({x y z}){...} f({x:1 z:2 y:3});
4.4 提取JSON数据
var jsonData = { id: "42" status: "OK" data: [2 66] }; let {id status data:number} = jsonData; // id=42 status=ok number=[2 66]
4.5 函数参数默认值,这样就不用在函数内再添加默认值
function f({x y=1 z=2}){...}
4.6 遍历Map结构(利用for...of)
var map = new Map(); map.set(1 3); map.set(2 4); for (let[num1 num2]of map){ console.log(num1 " " num2) }
4.7 输入模块的指定方法
const {func1 func2} =require("module1"); // 只获取module1的func1和func2两个方法