ES6之解构赋值

ES6允许按照一定模式从数组和对象中提取值，对变量进行赋值 称为解构赋值

数组的解构

1.基础解构

const aaa = ['张三','李四','王二','麻子'];
			let [zhang,li,wang,ma] = aaa;
			console.log(zhang);  //张三
			console.log(li);     //李四
			console.log(wang)    //王二
			console.log(ma);     //麻子

2.复杂的匹配规则

const arr = ["a", "b", ["c", "d", ["e", "f", "g"]]];
const [, , [, , [, , g]]] = arr;
console.log(g); // g

3. 扩展运算符

const arr1 = [1, 2, 3];
const arr2 = ["a", "b", "c"];
const arr3 = [...arr1, ...arr2];
console.log(arr3);  // [1, 2, 3, "a", "b", "c"]

const arr4 = [1, 2, 3, 4, 5, 6];
const [a, b, ...c] = arr4;
console.log(a); // 1
console.log(b); // 2
console.log(c); // 3, 4, 5, 6

4.默认值

只有当值是undefined的时候才会使用默认值，即使值是null也不会使用默认值

const arr = [1, undefined, undefined, null];
const [a, b = 2, c, d = "aaa"] = arr;
console.log(a); // 1
console.log(b); // 2
console.log(c); // undefined
console.log(d); // null

5.变量交换

交换变量不需要中间变量即可完成

let a = 1 ;
let b = 2 ;

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

对象的解构赋值

1.基础解构

const angula_info = {
				name:'angula',
				age:'18',
				hanshu:function(){
					console.log('欢迎关注')
				}
			}
			let {name,age,hanshu} = angula_info;
			console.log(name);  //angula
			console.log(age);   //18
			console.log(hanshu);  //欢迎关注
			hanshu()  //欢迎关注
			

2 复杂的解构

// 可以使用:重命名变量
const test = {
    name: "angula",
    like: "code",
    skill: [
        {
            skillName: "js",
            aa: "100",
            time: 6000
        },
        {
            skillName: "vue",
            aa: "400",
            time: 3000
        },
        {
            skillName: "jquery",
            aa: "900",
            time: 60000
        }
    ]
};

const { name } = test;
const { like } = test;
const {
    skill: [skill_one, { skillName }, { skillName: skillName_three }]
} = test;

console.log(skill_one);    // {Name: "js", aa: "100", time: 6000}
console.log(skillName); // vue
console.log(sklName_three);   // jquery

3.结合扩展运算符

const obj = {
	name_one:'js',
	name_two:'jquery',
	name_three:'vue'
};
const {name_one,...other} = obj;
console.log('name_one');    //js
console.log(other);         //{name_two:'jquery',name_three:'vue'}

4.对已声明的变量进行对象的解构赋值

let age;
const obj = {
	name:'angula',
	age:'18',
	sex:'male'
}
//注意，下面这种写法会报错，这里的大括号会认为是一个块级作用域
{age} = obj;
//解决办法
({age} = obj);   //当然，为了引起不必要的麻烦，最好还是在声明的同时进行解构赋值
   

5.默认值

let obj = {
	name:'angula'
}
let {name,age = 18,skill=["js","vue"]};
console.log(name);    //angula
console.log(age);     //18
console.log(skill);   //["js","vue"]

字符串的解构赋值

// 字符串的解构赋值
			const str = 'my name is angula';
			const [a,b,...oth] = str;
			console.log(a);  //m
			console.log(b);  //y
			console.log(oth);  //[" ","n","a","m","e"," ","i","s"," ","a","n","g","u","l","a"]


//下面三行代码是相同的，都输出["m","y"," ","n","a","m","e"," ","i","s"," ","a","n","g","u","l","a"]
const [...obj] = str;
			console.log(obj)
			const obj2 = [...str];
			console.log(obj2);
			const obj3 = str.split("");
			console.log(obj3)