二、ES6合集之类

原创
小哥 3年前 (2022-11-10) 阅读数 49 #大杂烩

一、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
版权声明

所有资源都来源于爬虫采集,如有侵权请联系我们,我们将立即删除

热门