ES6解构赋值详解

漫天转悠

于 2024-11-25 17:38:39 发布

阅读量398

点赞数 3

分类专栏： ES6 文章标签： es6 前端 ecmascript

本文链接：https://blog.csdn.net/hjl_and_djj/article/details/144033060

版权

ES6 专栏收录该内容

4 篇文章

订阅专栏

ES6解构赋值详解

ES6解构赋值是JavaScript语言的一项强大特性，它允许从数组或对象中提取数据，并将其赋值给变量。这一特性不仅简化了代码，提高了可读性，还增强了代码的灵活性。本文将详细介绍ES6解构赋值的基本概念、语法、应用场景以及一些高级用法。

1. 基本概念

解构赋值是对赋值运算符的扩展。它允许按照一定的模式，从数组或对象中提取值，并赋值给变量。这种语法使得从复杂数据结构中提取数据变得更加简洁和直观。

2. 数组解构赋值

2.1 基本用法

数组解构赋值允许从数组中提取值，并按照对应的位置赋值给变量。

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

2.2 部分解构

可以只解构数组中的一部分元素。

let [d, e] = [4, 5, 6, 7];
console.log(d, e); // 4 5

2.3 默认值

如果解构的数组可能缺少某些元素，可以为变量设置默认值。

let [f, g = 10] = [8];
console.log(f, g); // 8 10

2.4 剩余元素

使用扩展运算符（...）可以收集数组中的剩余元素。

let [h, ...i] = [11, 12, 13, 14];
console.log(h, i); // 11 [12, 13, 14]

3. 对象解构赋值

3.1 基本用法

对象解构赋值允许从对象中提取特定的属性值，并赋值给变量。

let obj1 = { x: 100, y: 200 };
let { x, y } = obj1;
console.log(x, y); // 100 200

3.2 别名

可以为解构的属性设置别名。

let obj2 = { z: 300 };
let { z: newName } = obj2;
console.log(newName); // 300

3.3 默认值

对于可能不存在的属性，可以设置默认值。

let obj3 = { w: 400 };
let { v = 500 } = obj3;
console.log(v); // 500

3.4 嵌套解构

对象的解构可以嵌套进行。

let obj4 = { p: { q: 600 } };
let { p: { q } } = obj4;
console.log(q); // 600

4. 高级用法

4.1 函数参数解构

函数参数也可以使用解构赋值，这使得函数的调用更加方便。

function printCoords({ x, y }) {
  console.log(`X: ${x}, Y: ${y}`);
}

let point = { x: 700, y: 800 };
printCoords(point); // X: 700, Y: 800

4.2 多个变量交换

解构赋值可以用于交换两个变量的值。

let guest = "Jane";
let admin = "Pete";

[guest, admin] = [admin, guest];
console.log(guest, admin); // Pete Jane

4.3 字符串解构

字符串也可以解构赋值，因为字符串在内部会被转换成一个类似数组的对象。

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

4.4 嵌套数组和对象解构

可以解构嵌套的数组和对象。

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: "/zh-CN/docs/Tools/Scratchpad",
};

let { title: englishTitle, translations: [{ title: localeTitle }] } = metadata;
console.log(englishTitle); // "Scratchpad"
console.log(localeTitle); // "JavaScript-Umgebung"

5. 应用场景

5.1 从函数返回多个值

函数可以返回一个数组或对象，使用解构赋值可以方便地提取这些值。

function getInfo() {
  return { name: 'John', age: 30 };
}

let { name, age } = getInfo();
console.log(name, age); // John 30

5.2 提取JSON数据

解构赋值对提取JSON对象中的数据特别有用。

const user = {
  id: 42,
  displayName: "jdoe",
  fullName: { firstName: "Jane", lastName: "Doe" },
};

let { displayName, fullName: { firstName } } = user;
console.log(displayName, firstName); // jdoe Jane

5.3 函数参数的默认值

在函数参数中使用解构赋值可以方便地设置默认值。

function drawChart({ size = "big", coords = { x: 0, y: 0 }, radius = 25 } = {}) {
  console.log(size, coords, radius);
}

drawChart({ coords: { x: 18, y: 30 }, radius: 30 });