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'
});

 

转载于:https://www.cnblogs.com/zhonghonglin1997/p/10115065.html