ES6解构语法

71 阅读1分钟

对象解构

// 对象解构
let obj = {
    name:"nodejs",
    age:11,
    email:"nodejs@163.com"
}
let name = "zhangsan"

// 获取obj的属性有哪些方法:
// 方法1:
// let name = obj.name;
// let age = obj.age;
// let email = obj.eamil;

// 方法2:
// let name = obj["name"];
// let age = obj["age"];
// let email = obj["email"];

// 方法3:(解构)
// let {name, email, age} = obj;  //完全解构    解构的写法等效于上面的方法1
// console.log(name, age, email);

let {name} = obj;   // 部分解构  等效于: let name = obj.name
console.log(name);

// let {name:myName} = obj;   // 部分解构起别名  等效于: let name = obj.name
console.log(myName);

// 注意点: 
// 1、大括号里面的变量名,都只能是obj里面的属性名。
// 2、大括号里面的变量名顺序可以任意
// 3、如果只想获取部分属性,可以只写这部分属性名
// 4、let {name} = obj;  等效于: let name = obj.name
// 5、let {name:myName} = obj; 给name起了一个别名叫myName,取obj的name属性赋值给myName这个新变量

数组解构

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

// 部分解构
let [d] = arr1;
console.log(d);  //10

let [ , ,f] = arr1;
console.log(f);  //30

// 复合解构
let arr2 = [1, 2, [10, 20, 30]];
let [ j, k, [x, y, z]] = arr2;
console.log(j);  //1
console.log(k);  //2
console.log(x);  //10
console.log(y);  //20
console.log(z);  //30

字符串解构

let string1 = "xyz";

let [a,b,c] = string1;
console.log(a);  //x
console.log(b);  //y
console.log(c);  //z

string1[1] = "Y";
console.log(string1);  // xyz    无法修改
console.log(string1[1]);  // y