快捷搜索:  汽车  科技

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)

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两个方法

猜您喜欢: