1、数组的解构赋值
// 数组的解构赋值 // 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);
2、对象的解构赋值
// 对象的解构赋值 // 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); // ------------------------------------------
3、字符串的解构赋值
// 字符串的结构赋值 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;
4、数值与布尔值的解构赋值
// 数值与布尔值的解构赋值 const { valueOf: vo } = 1; const { toString: ts } = false;
5、函数参数的解构赋值
// 函数参数的解构赋值 // 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' });