二、ES6合集之类
原创一、ES6合集之let 和const
二、ES6集合的解构赋值。
三、ES6合集之Map和Set
参考新手教程: https://www.runoob.com/w3cnote/es6-tutorial.html
这篇文章仅供自学。
ES6 数据类型 Number 、 String 、 Boolean 、 Object、 null 和 undefined ,还添加了 Symbol 。
1.ES6 解构赋值
解构赋值是赋值运算符的扩展。
他是数组或对象的模式匹配,然后为其中的变量赋值。
解构的目标,解构赋值表达式的左侧部分。-- 解构的来源,解构赋值表达式的正确部分。
1.1阵列模型的解构(Array)
基本解构
let [a, b, c] = [1, 2, "3"]
console.log(a, b, c);//1 2 3
可嵌套-解构
let [a, [b, [c]]] = [1, [2, [3]]]
console.log(a, b, c);//1 2 3
可忽略
let [a, [, [c]]] = [1, [2, [3]]]
console.log(a, c);//1 2
不完全解构
let [a, b, c] = [1, 2]
console.log(a, b, c);//1 2 undefined
let [a = 1, b] = []
console.log(a, b);//1 undefined
残差算子
let [a, ...b] = [1, {2:3},{2:3}];
console.log(a, b);//1 [{2:3},{2:3}]
let [a, ...b] = [1, 2, 3];
console.log(a, b);//1 [2, 3]
字符串等
在数组的解构中,如果解构对象是可遍历对象,则可以对其进行解构。可遍历对象是实现。 Iterator 接口的数据。
let [a, b, c, d, e] = hello;
console.log(a, b, c, d, e);//a, b, c, d, e
解构默认值
//当解构模式具有匹配结果并且匹配结果为 undefined 默认值作为返回结果触发。
let [a = 2] = [undefined];
console.log(a);//2
//当解构模式具有匹配结果时,将返回匹配值。
let [a = 2] = [3];
console.log(a); //3
//a和b匹配结果为 undefined,(触发器默认值)返回默认值:a=3 b=a=3
let [a = 3, b = a] = []; // a = 3, b = 3
console.log(a, b);//3 3
//a正常解构赋值,a=1 ;b匹配结果为 undefined,(触发器默认值)返回b = a = 1
let [a = 3, b = a] = [1];
console.log(a, b);//1 1
//a和b正常解构赋值 a=1,b=2
let [a = 3, b = a] = [1, 2];
console.log(a, b);//1 2
用于价值交换
// ES6 之前
let a = 1;
let b = 2;
let tmp;
tmp = a;
a = b;
b = tmp;
console.log(a, b);//2,1
//ES6之后
let a = 1;
let b = 2;
[a, b] = [b, a]
console.log(a, b);//2,1
1.2 对象模型的解构(Object)
let {foo,bar}={foo:aaa,bar:bbb}
console.log(foo,bar);//aaa bbb
let {foo:bar}={foo:aaa}
console.log(bar);//aaa
可嵌套
let {p: [x, { y }] } = {p: [hello, {y: world}] };
console.log(x,y);//hello world
可忽略
let {p: [x, { }] } = {p: [hello, {y: world}] };
console.log(x);//hello
不完全解构
let {p: [{ x }, y ] } = {p: [{x: world1}] };
console.log(x,y);//world1 undefined
残差算子
let {a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40};
console.log(a, b, rest);//10 20 {c: 30, d: 40}
解构默认值
let {a = 10, b = 5} = {a: 3};
console.log(a);//3
let {a: aa = 10, b: bb = 5} = {a: 3};
console.log(aa,bb);//3 5
let {a: aa = 10, b: bb = aa} = {a: 3};
console.log(aa,bb);//3 3
版权声明
所有资源都来源于爬虫采集,如有侵权请联系我们,我们将立即删除
上一篇:动态调用img的目录路径和style 下一篇:一、ES6大合辑之let和const