ES6入门学习(part3)解构赋值

接part2 的声明与表达式。part2 学习了 声明变量使用的 let conts 的基本用法以及使用注意事项

一、声明与表达式

2、解构赋值

2.1定义

结构赋值是对赋值运算符的一种拓展。解构赋值表达式由两部分组成:(1)解构源。解构赋值表达式的右边。(2)解构目标。结构赋值表达式的左边

2.2数组模型的解构(Array)

2.2.1 数组模型解构的特点大致分为4种:

(1)解构源(array)和解构目标(array) 满足  对应位置、对应赋值

(1.1)基本解构   let [a, b, c] = [1, 2, 3];

(2)解构源(array)和解构目标(array) 满足  对应的模式匹配

(2.1)可嵌套、可忽略解构   let [a, [[b,c], d]] = [1, [[2], 3]];

(2.2)不完全解构   let [a = 1, b] = [];

(2.3)剩余运算符   let [a, ...b] = [1, 2, 3];

(3)解构源(string)和解构目标(array)。此时解构目标要满足可以遍历

(3.1)字符串解构  let [a, b, c, d, e] = 'hello';

(4)解构默认值 

(4.1)undefined 不等于 null

(4.2)变量匹配结果如果为undefined,触发默认值。 let [a = 2] = [undefined] || []; // a = 2

(4.3)let [a = 3, b = a] = [1]; // a = 1, b = 1

(4.4)let [a = 3, b = a] = [1, 2]; // a = 1, b = 2

2.3对象模型的解构(Object)

2.3.1 数组模型解构的特点大致分为4种:

(1)解构源(object)和解构目标(objext) 满足  对应位置、对应赋值

(1.1)基本解构   let { foo, bar } = { foo: 'aaa', bar: 'bbb' };//foo = "aaa"   bar = "bbb"

(2)解构源(object)和解构目标(object) 满足  对应的模式匹配

(2.1)可嵌套、可忽略解构、不完全解构   let {p: [x, { y },z] }{p: ['hello', {y: 'world'}] };//x = "hello"  y = "world"  z = undefined

(2.2)剩余运算符   let {a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40};

(3)解构默认值 

(3.1)let {a = 10, b = 5} = {a: 3}; // a = 3  b = 5

(3.2)let {a: aa = 10, b: bb = 5} = {a: 3};  // aa = 3  bb = 5

原文地址:https://www.cnblogs.com/Ella2018/p/10974960.html