乐趣区

ES6学习变量解构赋值

jiezi

解构赋值含义：允许按照一定模式，从数组和对象中提取值，对变量进行赋值，只要等号两边的模式相同，左边的变量就会被赋予对应的值

1、数组解构赋值 右侧必须是一个数组
let [a, b, c] = [1, 2, 3];
// 如果不是数组，则会报错
let [e] = 5
console.log(e)
// 如果左侧变量名多于右侧，则左侧多的变量赋值不成功为 undefined
let [a,b,c,d] = [2,3];
console.log(a,b,c,d) //2  3  undefined  undefined
// 如果左侧出现展开运算符时；右侧对应的值会放到一个数组中
let [a,...b] = [1,2]
console.log(a,b)   // 1  [2]
let [c,...d] = [1,[3,4]]
console.log(c,d)// 1  [[3,4]]
// 如果右侧的值多于左侧的变量，那么只匹配对应的值，多余的值则不会解构  嵌套解构
let [aa,bb] = [1,[3,4],66]
let [cc,[dd]] = [1,[3,4],66]
console.log(aa,bb) //1  [3,4]
console.log(cc,dd) //1  3
// 2、解构赋值允许指定默认值
let [a1,b1=2] = [1];
console.log(a1,b1) //1  2
// 只有左侧对应的值严格等于 undefined 时，默认才生效
let [a2,b2=3]=[2,false];
let [a3,b3=3]=[2,undefined];
console.log(a2,b2);  //2  false
console.log(a3,b3);  //2  3
// 默认值可以引用解构赋值的其他变量，但该变量必须已经声明。let [a4,b4=a4] = [3];
let [a6=1,b6=a6] = [];
let [a5=b5,b5] = [3,5];
let [a7=b7,b7] = []; //ReferenceError: b7 is not defined
console.log(a4,b4)  //3  3
console.log(a5,b5)  //3  5
console.log(a6,b6)  //1  1
2、对象的解构赋值

对象解构 是根据变量名来进行解构赋值的 没有顺序，如果左侧没有在右侧找到同样的名称，则该变量是 undefined 先找到同名属性，然后再赋给对应的变量。真正被赋值的是后者，而不是前者。所以我们写代码的时候一定要注意

let {bar, foo} = {foo: 'aaa', bar: 'bbb'};
console.log(bar,foo)  //bbb  aaa
let {bar, foo} = {foo: 'aaa'};
console.log(bar,foo) //undefined  aaa
let {bar:foo, foo:bar} = {foo: 'aaa', bar: 'bbb'};
let {foo:bar} = {foo: 'aaa', bar: 'bbb'};
console.log(bar,foo) //foo is not defined
// 也可以对内置对象进行解构 例如 Math
let {floor,ceil,round} = Math;
console.log(floor(3.5))  //3
console.log(ceil(3.5)) //4
console.log(round(3.5)) //4
// 对象也可以嵌套解构
let {fn,fn:{fn1}} = {fn:{fn1:3}}
console.log(fn) //{fn1:3}
console.log(fn1) // 3
// 对象的解构也可以指定默认值  默认值生效的条件是，对象的属性值严格等于 undefined。var {obj1 = 3} = {};
var {obj2 = 3} = {obj2:undefined};
var {obj3 = 3} = {obj3:null};
console.log(obj1,obj2,obj3) //3  3  null
// 注意  不能将大括号写在行首，JavaScript 引擎会将 {obj4} 理解成一个代码块，从而发生语法错误。let obj4;
// {obj4} = {obj3:5};
({obj4} = {obj4:5})
// 可以对数组进行对象属性的解构
// 都有一个 length 属性，因此还可以对这个属性解构赋值。let {0:first,length:len} = [2,4,5]
console.log(first) //2
console.log(len) //3
3、字符串的解构赋值 就是把字符串展开，分别对应左侧一个变量
const [str1, str2, str3] = 'hello';
const {length}= 'hello';
console.log(str1,str2,str3,length)  //h  e  l  5
// 只要等号右边的值不是对象或数组，就先将其转为对象。由于 undefined 和 null 无法转为对象，所以对它们进行解构赋值，都会报错。let {toString:s} = 55
let dddd = s.toString(444)
console.log(typeof dddd)
4、解构赋值有什么用？

（1）、交换赋值更方便

let x = 1;
let y = 2;
​
[x, y] = [y, x];

（2）、函数返回值，可以直接解构对应不同的变量

function example() {
    return {
        foos: 1,
        bars: 2
    };
}
let {foos, bars} = example();

（3）、函数传参更方便 如果向函数中传入数组或对象的话，不使用解构那我们还需要从数组或对象中去取值；如果解构，则我们可以在函数中直接使用变量的值

function f([x, y, z]) {// 这里可以直接使用 数组的值 1 2 3}
f([1, 2, 3]);

（4）、以快速提取 JSON 数据中有用的值 后台接口给我们返回的字段，我们不一定全部都用，这是我们可以把用到的字段解构出来使用。

let jsonData = {data: [867, 5309],
    success:true,
    massage:"成功",
    status:200
};
​
let {status, data,success} = jsonData;

（5）、for…of 循环遍历 任何部署了 Iterator 接口的对象，

const map = new Map();
map.set('first', 'hello');
map.set('second', 'world');
​
for (let [key, value] of map) {console.log(key + "is" + value);
}

（6）、引入模块的时候，可以使用解构来，输出需要使用的一些方法

// 例如 vue3 的引入 直接使用其内的函数
 import {ref, reactive,readonly,toRaw} from 'vue'

欢迎关注公众号（web 学习吧），一起学习进步:

本文使用 mdnice 排版

退出移动版