解构赋值语法是一种 Javascript 表达式。通过解构赋值, 可以将 属性/值 从 对象/数组中 取出,赋值给其他变量。
let [a,b]=[1,2]
// a = 1
// b = 2
在react中经常用于const [value,setValue]=useState('')
。
当解构一个数组时,可以使用剩余模式,将数组剩余部分赋值给一个变量。
var [a, ...b] = [1, 2, 3];
// a = 1
// b = [2, 3]
如果解构取出的值是undefined
,可以设置默认值:
let a, b;
// 设置默认值
[a = 9, b = 7] = [1, 2];
// a = 9
// b = 7
在一个解构表达式中可以交换两个变量的值。
没有解构赋值的情况下,交换两个变量需要一个临时变量(或者用低级语言中的XOR-swap技巧)。
var a = 1;
var b = 3;
[a, b] = [b, a];
// a = 3
// b = 1
你也可以忽略你不感兴趣的返回值:
function f() {
return [1, 2, 3];
}
var [a, , b] = f();
// a = 1
// b = 3
甚至可以忽略全部:
[,,] = f();
const { a:k = 2 } = { a: 1 }
// k = 1
const { a:k = 2 } = { a: null }
// k = null
const { a: k = 2 } = { a: undefined }
// k = 2
上面那么仔细,下面简单点:
//
const metadata = {
title: 'Scratchpad',
translations: [
{
locale: 'de',
localization_tags: [],
last_edit: '2014-04-14T08:43:37',
url: '/de/docs/Tools/Scratchpad',
title: 'JavaScript-Umgebung'
}
],
url: '/en-US/docs/Tools/Scratchpad'
};
let {
title: englishTitle, // rename
translations: [
{
title: localeTitle, // rename
},
],
} = metadata;
console.log(englishTitle); // "Scratchpad"
console.log(localeTitle); // "JavaScript-Umgebung"
let key = "z";
let { [key]: foo } = { z: "bar" };
console.log(foo); // "bar"
通过提供有效的替代标识符,解构可以与不是有效的JavaScript标识符的属性名称一起使用。
const foo = { 'fizz-buzz': true };
const { 'fizz-buzz': fizzBuzz } = foo;
// 以下写法,js语法会报错,所以用上面的
// const { fizz-buzz: fizzBuzz } = foo;
console.log(fizzBuzz); // true
参考文章: