[你必须知道的JavaScript]解构赋值
概念
解构赋值语法是一种 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 标识符作为属性名称
通过提供有效的替代标识符，解构可以与不是有效的JavaScript标识符的属性名称一起使用。
const foo = { 'fizz-buzz': true };
const { 'fizz-buzz': fizzBuzz } = foo;
// 以下写法，js语法会报错，所以用上面的
// const { fizz-buzz: fizzBuzz } = foo;
console.log(fizzBuzz); // true参考文章：
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2021-12-29，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
