JavaScript 解构语法使用

原文地址(推荐直接看原文):https://www.cnblogs.com/xiaohuochai/p/7243166.html
一对象解构
取出指定对象指定字段的值
代码

let node = {
    type: "Identifier",
    name: "foo"
};
let { type, name } = node;
console.log(type); // "Identifier"
console.log(name); // "foo"

取出node 对象的type 跟 name 字段的值
二解构赋值
取出指定对象指定字段的值赋值到已经声明的名称相同的字段
代码

let node = {
    type: "Identifier",
    name: "foo"
},
type = "Literal",
name = 5;
// 使用解构来分配不同的值
({ type, name } = node);
console.log(type); // "Identifier"
console.log(name); // "foo"

取出node 对象中的 type 跟 name 的值赋值给已经声明的 type 跟 name
使用解构来分配不同的值最外层的小括号必须有
三默认值
使用解构赋值表达式时,如果指定的局部变量名称在对象中不存在,那么这个局部变量会被赋值为undefined
代码

let node = {
    type: "Identifier",
    name: "foo"
};
let { type, name, value } = node;
console.log(type); // "Identifier"
console.log(name); // "foo"
console.log(value); // undefined

value 变量在 node 中不存在所以被赋值为undefined

自己定义默认值,当指定的属性不存在时,可以给不存在的属性定义任意的默认值
比如

let node = {
    type: "Identifier",
    name: "foo"
};
let { type, name, value = true } = node;
console.log(type); // "Identifier"
console.log(name); // "foo"
console.log(value); // true

value 属性会使用默认值 true

四为非同名局部变量赋值
如果希望使用不同命名的局部变量来存储对象属性的值,可以使用ES6中的扩展语法
比如

let node = {
    type: "Identifier",
    name: "foo"
};
let { type: localType, name: localName } = node;
console.log(localType); // "Identifier"
console.log(localName); // "foo"

type 属性赋值给 localType name属性赋值给localName

当使用其他变量名存储对象的属性时也可以设置默认值
比如

let node = {
    type: "Identifier"
};
let { type: localType, name: localName = "bar" } = node;
console.log(localType); // "Identifier"
console.log(localName); // "bar"

五嵌套对象解构

let node = {
    type: "Identifier",
    name: "foo",
    loc: {
        start: {
            line: 1,
            column: 1
        },
    end: {
        line: 1,
        column: 4
    }
}
};
let { loc: { start }} = node;
console.log(start.line); // 1
console.log(start.column); // 1

嵌套对象解构可以获取对象中指定的属性值他只能获取到展开的最后一级的属性,
比如当前直接通过loc 去查找属性是找不到的只能通过start 去查找属性
同样嵌套查询也可是使用别名
比如

let node = {
    type: "Identifier",
    name: "foo",
    loc: {
        start: {
            line: 1,
            column: 1
        },
        end: {
            line: 1,
            column: 4
        }
    }
};
// 提取 node.loc.start
let { loc: { start: localStart }} = node;
console.log(localStart.line); // 1
console.log(localStart.column); // 1

六数组解构
在数组解构中,我们通过值在数组中的位置进行选取,且可以将其存储在任意变量中,未显示声明的元素会直接被忽略掉
比如

let colors = [ "red", "green", "blue" ];
let [ firstColor, secondColor ] = colors;
console.log(firstColor); // "red"
console.log(secondColor); // "green"

第一个元素与第二个元素分别赋值给了 firstColor与secondColor 第三个元素直接忽略了
在解构模式中,也可以直接省略元素,只为赶兴趣的元素提供变量名
比如

let colors = [ "red", "green", "blue" ];
let [ , , thirdColor ] = colors;
console.log(thirdColor); // "blue"

前两个元素直接忽略了

数组解构赋值
数组解构赋值也可以用于赋值上下文,但不需要小括号包裹表达式,这一点与对象解构赋值不同
比如

let colors = [ "red", "green", "blue" ],
firstColor = "black",
secondColor = "purple";
[ firstColor, secondColor ] = colors;
console.log(firstColor); // "red"
console.log(secondColor); // "green"

使用数组解构进行变量交换
ES5方法

let a = 1,
　　b = 2,
　　tmp;
tmp = a;
a = b;
b = tmp;
console.log(a); // 2
console.log(b); // 1

使用数组解构

let a = 1,
    b = 2;
[ a, b ] = [ b, a ];
console.log(a); // 2
console.log(b); // 1

数组解构设置默认值
比如

let colors = [ "red" ];
let [ firstColor, secondColor = "green" ] = colors;
console.log(firstColor); // "red"
console.log(secondColor); // "green"

嵌套数组解构
比如

let colors = [ "red", [ "green", "lightgreen" ], "blue" ];
// 随后
let [ firstColor, [ secondColor ] ] = colors;
console.log(firstColor); // "red"
console.log(secondColor); // "green"

不定元素
函数具有不定参数，而在数组解构语法中有一个相似的概念——不定元素。在数组中，可以通过...语法将数组中的其余元素赋值给一个特定的变量

let colors = [ "red", "green", "blue" ];
let [ firstColor, ...restColors ] = colors;
console.log(firstColor); // "red"
console.log(restColors.length); // 2
console.log(restColors[0]); // "green"
console.log(restColors[1]); // "blue"

把第一个元素赋值给firstColor 剩下的所有元素直接赋值给restColors

数组复制
ES5方法
在ES5中，开发者们经常使用concat()方法来克隆数组,concat()方法的设计初衷是连接两个数组，如果调用时不传递参数就会返回当前函数的副本

// 在 ES5 中克隆数组
var colors = [ "red", "green", "blue" ];
var clonedColors = colors.concat();
console.log(clonedColors); //"[red,green,blue]"

解构复制数组

// 在 ES6 中克隆数组
let colors = [ "red", "green", "blue" ];
let [ ...clonedColors ] = colors;
console.log(clonedColors); //"[red,green,blue]"

七混合解构
数组与对象混合解构

let node = {
    type: "Identifier",
    name: "foo",
    loc: {
        start: {
            line: 1,
            column: 1
        },
        end: {
            line: 1,
            column: 4
        }
    },
    range: [0, 3]
};
let {
    loc: { start },
    range: [ startIndex ]
} = node;
console.log(start.line); // 1
console.log(start.column); // 1
console.log(startIndex); // 0

获取对象中的start属性与数组中的第一个元素

八解构参数
解构参数最完美的写法

const setCookieDefaults = {
    secure : false,
    path : "/",
    domain : "example.com",
    expires : new Date(Date.now() + 360000000)    
}
function setCookie(name, value,{
        secure = setCookieDefaults.secure,
        path = setCookieDefaults.path,
        domain = setCookieDefaults.domain,
        expires = setCookieDefaults.expires        
    }=setCookieDefaults) {
    // ...
}

这样写可以排除很多坑为什么这么写看原文

十其他解构
字符串解构

const [a, b, c, d, e] = 'hello';
console.log(a);//"h"
console.log(b);//"e"
console.log(c);//"l"
console.log(d);//"l"
console.log(e);//"o"

类似数组的对象都有一个length属性，因此还可以对这个属性解构赋值

const {length} = 'hello';
console.log(length);//5

数值和布尔值解构
解构赋值时，如果等号右边是数值和布尔值，则会先转为对象

let {toString:s1} = 123;
console.log(s1 === Number.prototype.toString);//true
let {toString:s2} = true;
console.log(s2 === Boolean.prototype.toString);//true

解构赋值的规则是，只要等号右边的值不是对象或数组，就先将其转为对象。由于undefined和null无法转为对象，所以对它们进行解构赋值，都会报错

let { prop: x } = undefined; // TypeError
let { prop: y } = null; // TypeError

JavaScript 解构语法使用

猜你喜欢