解构赋值语法是一种 Javascript 表达式。通过解构赋值, 可以将属性/值从对象/数组中取出,赋值给其他变量。
数组 匹配解构
变量声明并赋值时的解构
let [one, two, three] = ["one", "two", "three"];console.log(one,two,three); // "one","two","three"
变量先声明后赋值时的解构
let a, b;[a, b] = [1, 2];console.log(a); // 1
默认值
let a, b;[a=5, b=7] = [1];console.log(a); // 1
交换变量
let a = 1;let b = 3;[a, b] = [b, a];console.log(a); // 3console.log(b); // 1
解析一个从函数返回的数组
function f() {return [1, 2];}let a, b;[a, b] = f();console.log(a); // 1
忽略某些返回值
function f() {return [1, 2, 3];}let [a, , b] = f();console.log(a); // 1console.log(b); // 3
将剩余数组赋值给一个变量
let [a, ...b] = [1, 2, 3];console.log(a); // 1console.log(b); // [2, 3]
对象 匹配解构
基本赋值
var o = {p: 42, q: true};var {p, q} = o;console.log(p); // 42console.log(q); // true
无声明赋值
let a, b;( {a, b} = {a: 1, b: 2} );// 圆括号一定要加上// 否则 {a, b} = {a: 1, b: 2} 不是有效的独立语法,因为左边的 {a, b} 被认为是一个块而不是对象字面量。
给新的变量名赋值
var o = {p: 42, q: true};var {p: foo, q: bar} = o;console.log(foo); // 42console.log(bar); // true
默认值
- 变量可以先赋予默认值。当要提取的对象没有对应的属性,变量就被赋予默认值。 ```javascript var {a = 10, b = 5} = {a: 3};
console.log(a); // 3 console.log(b); // 5
<a name="5gaQJ"></a>### 给新的变量命名并提供默认值- 一个属性可以同时 1)从一个对象解构,并分配给一个不同名称的变量 2)分配一个默认值,以防未解构的值是 undefined。```javascriptvar {a:aa = 10, b:bb = 5} = {a: 3};console.log(aa); // 3console.log(bb); // 5
参数 匹配解构
let user = {id: 42,displayName: "jdoe",fullName: {firstName: "John",lastName: "Doe"}};function userId({id}) {return id;}function whois({displayName: displayName, fullName: {firstName: name}}){console.log(displayName + " is " + name);}console.log("userId: " + userId(user)); // "userId: 42"whois(user); // "jdoe is John"
字符串 解构赋值
因为字符串可以像数组进行遍历,但同时也有length属性,所以,数组和对象的解构赋值都可以对字符串进行使用。
var str = 'hello';1. 使用对象的解构赋值let {length} = str;console.log(length);//52. 使用数组的解构赋值let [ch1,ch2,...ch3] =str;//['h','e','l','l','o']console.log(ch1,ch2,ch3); 'h' 'e' ['llo']
