提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  Javascript

当前栏目

[你必须知道的JavaScript]解构赋值

2023-02-18 16:43:13 时间

概念

解构赋值语法是一种 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

参考文章：

MDN

相关文章