解构赋值

前言

这些是我学习中的一些笔记，希望有用。

---

一、解构赋值是什么？

ES6允许按照一定模式从数组和对象中提取值，然后对变量进行赋值，该操作即为**解构（Destructuring)** 

特点：

1、给变量赋值

2、值的来源是对象或数组

3、规则：按一定的模式

一般用在数据交互，ajax请求数据。

二、数组的解构赋值

1.这种比较散

let a = 10; let b = 12; let c = 13; console.log(a,b,c); //10,12,13

2.定义到数组内

let arr = [1,2,3]; console.log(arr[0],arr[1],arr[2]) //1,2,3

3.解构赋值

let [a,b,c] = [1,2,3]； console.log(a,b,c) //1,2,3

4.解构赋值必须两边格式一致

let [a,b,c] = [1,[2,3]]; console.log(a,b,c) //1,[2,3],undefined let
[a,[b,c]] = [1,[2,3]]; console.log(a,b,c) //1,2,3

5.交互数据

let a = 10； let b = 20; [a,b] = [b,a]; console.log(a,b); //20,10

json解构

var json = { ‘name’:‘lixd’, ‘age’:‘20’, ‘job’:‘teacher’ } ; let
{name,age,job} = json; console.log(name,age,job); //lixd,20,teacher

默认值

• 解构赋值允许指定默认值。

• ES6内部使用严格相等运算符（===）判断一个位置是否有值，如果一个数组成员不严格等于undefined，默认值不会生效。

• 如果默认值是一个表达式，会采用惰性求值，只有在用到时才会求值。

• *默认值可以引用解构赋值的其他变量，但改变量必须已经声明，否则会报错。

三、对象的解构赋值

• 对象的解构赋值与数组不同

• 数组的元素是按次序排列的，变量的取值是由它的位置决定。
• 对象的属性没有次序，变量必须与属性同名才能取到正确的值
代码如下（示例）：

• 如果变量名与属性名不一致，必须明确对应关系。

• 实际上，对象解构赋值内部机制是先找到同名属性，然后再赋值给对应的变量，真正被赋值的是后者。

• 即，foo（前）是匹配模式，foo（后）才是变量。

• 对象解构赋值也可以用于嵌套结构的对象。

• 对象解构赋值也指定默认值，且默认值生效条件是对象的属性严格等于undefined。

• 如果解构失败，变量的值等于undefined。

• 如果解构模式是嵌套的对象，且子对象所在父属性存在，将会报错。

• 如果要将一个已经声明的变量用于解构赋值，需谨慎。

• 正确的做法是将解构赋值视为一个表达式，用括号括起来。

• 对象解构赋值可以很方便地将现有对象的方法赋值给某个变量。

• 由于数组本质是特殊的对象，因此可以对数组进行对象属性的解构。

四、字符串的解构赋值

• 字符串的解构赋值，将字符串看作一个类似于数组的对象。

• 类似数组的对象都有一个length属性，因此还可以对这个属性进行解构。

五、数值和布尔值的解构赋值

• 解构赋值的原则是，如果等号右边不是对象，则先转换为对象。

• 如果等号右边无法转换为对象，则会报错，如null和undefined。

六、函数参数的解构赋值

• 函数调用时，会将实参传递给形参，其过程就是实参赋值给形参。因此，也可以使用解构赋值。

• 其规则与数组、对象的解构赋值一致，关键看参数是采用哪种解构赋值方式。

七、解构赋值的用途

• 交换变量的值

• 从函数返回多个值

• 函数参数的定义

• 解构赋值可以方便地将一组参数与变量名对应起来。

• 提取JSON数据