ES6之解构赋值
ES6变量的解构赋值 ／ 对象的解构赋值
对象的解构赋值： 对象的解构赋值与数组的机构复制相似。
等号左右两边都为对象结构 const { a, b } = { a: 1, b: 2 }。
左边的{}中为需要赋值的变量。 右边为需要解构的对象。
主要用途：
提取对象属性。 使用对象传入乱序的函数参数。 获取多个函数返回值。
与数组不同的是，数组是靠下标匹配，对象是靠属性名匹配，属性名若是不匹配则返回undefined。
当出现了重复的对象属性名时，可以在属性名后添加：改新名字。冒号前面原本所代表的东西是不存在的，对象的解构赋值的内部机制，是先找到同名属性，然后再赋给对应的变量，真正被赋值的是后者，而不是前者。
扩展运算符...会将剩下的数据放在一个自己取名的对象中。还可用于对象的合并。
let是用在以后你还有可能再次给他赋值的时候,const 以后不能再给它赋值。
一般 const 定义方法,let 定义变量。
对象的解构赋值中，与顺序无关，需要注意的是，变量名与属性名必须一致。
// 对象的解构赋值 // const obj = { // saber: '阿尔托利亚', // archer: '卫宫' // }; // const { saber, archer1 } = obj; // ------------------------------------------ // 稍微复杂的解构条件 // const player = { // nickname: '感情的戏∫我没演技∆', // master: '东海龙王', // skill: [{ // skillName: '龙吟', // mp: '100', // time: 6000 // },{ // skillName: '龙卷雨击', // mp: '400', // time: 3000 // },{ // skillName: '龙腾', // mp: '900', // time: 60000 // }] // }; // const { nickname } = player; // const { master } = player; // const { skill: [ skill1, { skillName }, { skillName: sklName } ] } = player; // const { skill } = player; // const [ skill1 ] = skill; // ------------------------------------------ // 结合扩展运算符 // const obj = { // saber: '阿尔托利亚', // archer: '卫宫', // lancer: '瑟坦达' // }; // const { saber, ...oth } = obj; // const obj1 = { // archer: '卫宫', // lancer: '瑟坦达' // } // const obj = { // saber: '阿尔托利亚', // ...obj1, // }; // ------------------------------------------ // 如何对已经申明了的变量进行对象的解构赋值 // let age; // const obj = { // name: '小明', // age: 22 // }; // ({ age } = obj); // ------------------------------------------ // 默认值 // let girlfriend = { // name: '小红', // age: undefined, // }; // let { name, age = 24, hobby = ['学习'] } = girlfriend; // ------------------------------------------ // ------------------------------------------ // 提取对象属性 // const { name, hobby: [ hobby1 ], hobby } = { // name: '小红', // hobby: ['学习'] // }; // ------------------------------------------ // 使用对象传入乱序的函数参数 // function AJAX({ // url, // data, // type = 'get' // }) { // // var type = option.type || 'get'; // // console.log(option); // console.log(type); // }; // AJAX({ // data: { // a: 1 // }, // url: '/getinfo', // }); // ------------------------------------------ // 获取多个 函数返回值 // function getUserInfo(uid) { // // ...ajax // return { // status: true, // data: { // name: '小红' // }, // msg: '请求成功' // }; // }; // const { status, data, msg: message } = getUserInfo(123); // ------------------------------------------
ES6变量的解构赋值 ／ 数组的解构赋值
// 数组的解构赋值 // const arr = [1, 2, 3, 4]; // let [a, b, c, d] = arr; // ------------------------------------------ // 更复杂的匹配规则 // const arr = ['a', 'b', ['c', 'd', ['e', 'f', 'g']]]; // const [ , b] = arr; // const [ , , g] = ['e', 'f', 'g'] // const [ , , [ , , g]] = ['c', 'd', ['e', 'f', 'g']]; // const [ , , [ , , [ , , g]]] = arr; // ------------------------------------------ // 扩展运算符 ... // const arr1 = [1, 2, 3]; // const arr2 = ['a', 'b']; // const arr3 = ['zz', 1]; // const arr4 = [...arr1, ...arr2, ...arr3]; // const arr = [1, 2, 3, 4, 5, 6]; // const [a, b, ...c] = arr; // ------------------------------------------ // 默认值 // const arr = [1, null, undefined]; // const [a, b = 2, c, d = 'aaa'] = arr; // ------------------------------------------ // 交换变量 // let a = 20; // let b = 10; // let temp; // temp = a; // a = b; // b = temp; // [a, b] = [b, a]; // ------------------------------------------ // 接收多个 函数返回值 // function getUserInfo(id) { // // .. ajax // return [ // true, // { // name: '小明', // gender: '女', // id: id // }, // '请求成功' // ]; // }; // const [status, data, msg] = getUserInfo(123);
ES6变量的解构赋值 ／ 字符串的解构赋值
// 字符串的结构赋值 // const str = 'I am the bone of my sword'; // 我是剑骨头 // const [ a, b ,c, ...oth ] = str; // const [ ...spStr1 ] = str; // const spStr2 = str.split(''); // const spStr3 = [ ...str ]; //三者结果一致 // ------------------------------------------ // 提取属性 // const { length, split } = str;
ES6变量的解构赋值 ／ 数值与布尔值的解构赋值
// 数值与布尔值的解构赋值 const { valueOf: vo } = 1; const { toString: ts } = false;
//这里会获取值的原本的构造函数的方法。
ES6变量的解构赋值 ／ 函数参数的解构赋值
// 函数参数的解构赋值 // function swap([x, y]) { // return [y, x]; // }; // let arr = [1, 2]; // arr = swap(arr); function Computer({ cpu, memory, software = ['ie6'], OS = 'windows 3.5' }) { console.log(cpu); console.log(memory); console.log(software); console.log(OS); }; new Computer({ memory: '128G', cpu: '80286', OS: 'windows 10' });
