ES6-11学习笔记--解构赋值

解构赋值：按照一定模式，从数组和对象中提取值，对变量进行赋值。

 

数组解构

对象解构

字符串解构

应用场景

 

 

曾经的赋值噩梦，非解构赋值数组：

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

　　上面代码赋值十分冗长。

解构赋值数组：

let [d, e, f] = arr;
console.log(d, e, f);

　　使用解构赋值之后代码来那个骤减。

复杂的解构：

let [g, h, [i, j]] = [1, 2, [3, 4]];
console.log(g, h, i, j); //输出1 2 3 4
let [g, h, [i]] = [1, 2, [3, 4]];
console.log(i); //输出3
let [g,h,i,j=5] = [1,2,[3,4],6]

综上可看出解构赋值就是对应数据结构对应给变量赋值。

解构赋值是一种惰性赋值，如果没传值，那么变量就是undefined或者默认值，传了值就是对应的值。

 

 

对象解构赋值：

let user = {
  name: "张三",
  age: 18,
};
let { age, name } = user;
console.log(name, age);

　　对象解构是通过对象key去一一对应，所以解构赋值的时候顺序混乱也能对应上。

使用别名进行解构：

let { age: uage, name: uname } = user;
console.log(uage, uname);

　　

字符串解构赋值：

let str = "ibccq";
// for(let i =0;i<str.length;i++){
//     console.log(str[i]);
// }
// 根据上面的for循环可以类比字符串解构类似于数组解构
let [s1, s2, s3, s4, s5] = str;
console.log(s1, s2, s3, s4, s5);

　　

应用场景：

1、简化赋值代码

2、默认值的赋值使用

 

默认赋值使用例如方法传参解构：

function foo([a, b, c]) {
  console.log(a, b, c);
}
foo([1, 2, 3]);

function foo2({ name, age, school = "清华" }) {
  console.log(name, age, school);
}
foo2({
  name: "掌声那",
  age: 18,
});

function foo3() {
  return {
    name: "lala",
    age: 18,
  };
}
let { name: fname, age: fage } = foo3();
console.log(fname, fage);

　　

json解构：

let json = '{"a":"hello","b":"world"}';
let { a: ja, b: jb } = JSON.parse(json);
console.log(ja, jb);