数据类型 解构赋值

摘要:
解构和赋值JavaScript中最常用的两种数据结构是Object和Array。解构赋值是一种特殊的语法,它允许我们将数组或对象“解包”为一系列变量,因为有时使用变量更方便。解构也适用于具有许多参数和默认值的函数。当与split函数结合时,它看起来更优雅:let[firstName,sunname]=“IlyaKantor”。拆分(“”);“解构”并不意味着“毁灭”。这种语法被称为“解构赋值”,因为它通过将结构中的元素复制到变量中来达到“解构”的目的。')]=[“朱利叶斯”];警报;//Juliusalert;//您输入的值对象解构赋值也适用于对象。
解构赋值
 

JavaScript 中最常用的两种数据结构是 Object 和 Array

对象让我们能够创建通过键来存储数据项的单个实体,数组则让我们能够将数据收集到一个有序的集合中。

但是,当我们把它们传递给函数时,它可能不需要一个整体的对象/数组,而是需要单个块

解构赋值 是一种特殊的语法,它使我们可以将数组或对象“拆包”为到一系列变量中,因为有时候使用变量更加方便。解构操作对那些具有很多参数和默认值等的函数也很奏效。

数组解构

下面是一个将数组解构到变量中的例子:

// 我们有一个存放了名字和姓氏的数组
let arr = ["Ilya", "Kantor"]

// 解构赋值
// sets firstName = arr[0]
// and surname = arr[1]
let [firstName, surname] = arr;

alert(firstName); // Ilya
alert(surname);  // Kantor

现在我们就可以针对这些变量进行操作,而不是针对原来的数组元素。

当与 split 函数(或其他返回值是数组的函数)结合使用时,看起来就更优雅了:

let [firstName, surname] = "Ilya Kantor".split(' ');
“解构”并不意味着“破坏”

这种语法叫做“解构赋值”,因为它通过将结构中的各元素复制到变量中来达到“解构”的目的。但数组本身是没有被修改的。

这只是下面这些代码的更精简的写法而已:

// let [firstName, surname] = arr;
let firstName = arr[0];
let surname = arr[1];
忽略使用逗号的元素

数组中不想要的元素也可以通过添加额外的逗号来把它丢弃:

 
// 不需要第二个元素
let [firstName, , title] = ["Julius", "Caesar", "Consul", "of the Roman Republic"];

alert( title ); // Consul

在上面的代码中,数组的第二个元素被跳过了,第三个元素被赋值给了 title 变量,数组中剩下的元素也都被跳过了(因为在这没有对应给它们的变量)。

等号右侧可以是任何可迭代对象

……实际上,我们可以将其与任何可迭代对象一起使用,而不仅限于数组:

let [a, b, c] = "abc"; // ["a", "b", "c"]
let [one, two, three] = new Set([1, 2, 3]);
赋值给等号左侧的任何内容

我们可以在等号左侧使用任何“可以被赋值的”东西

例如,一个对象的属性:

 
let user = {};
[user.name, user.surname] = "Ilya Kantor".split(' ');

alert(user.name); // Ilya
与 .entries() 方法进行循环操作

在前面的章节中我们已经见过了 Object.entries(obj) 方法。

我们可以将 .entries() 方法与解构语法一同使用,来遍历一个对象的“键—值”对

 
let user = {
  name: "John",
  age: 30
};

// 循环遍历键—值对
for (let [key, value] of Object.entries(user)) {
  alert(`${key}:${value}`); // name:John, then age:30
}

……对于 map 对象也类似:

 
let user = new Map();
user.set("name", "John");
user.set("age", "30");

for (let [key, value] of user) {
  alert(`${key}:${value}`); // name:John, then age:30
}
交换变量值的技巧

一个用于交换变量值的典型技巧:

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

// 交换值:让 guest=Pete, admin=Jane
[guest, admin] = [admin, guest];

alert(`${guest} ${admin}`); // Pete Jane(成功交换!)

这里我们创建了一个由两个变量组成的临时数组,并且立即以交换了的顺序对其进行了解构。

我们可以用这种方式交换两个以上的变量。

剩余的 ‘…’

如果我们不只是要获得第一个值,还要将后续的所有元素都收集起来 — 我们可以使用三个点 "..." 来再加一个参数来接收“剩余的”元素:

 
let [name1, name2, ...rest] = ["Julius", "Caesar", "Consul", "of the Roman Republic"];

alert(name1); // Julius
alert(name2); // Caesar

// 请注意,`rest` 的类型是数组
alert(rest[0]); // Consul
alert(rest[1]); // of the Roman Republic
alert(rest.length); // 2

rest 的值就是数组中剩下的元素组成的数组。不一定要使用变量名 rest,我们也可以使用其他的变量名,只要确保它前面有三个点,并且在解构赋值的最后一个参数位置上就行了。

默认值

如果赋值语句中,变量的数量多于数组中实际元素的数量,赋值不会报错。未赋值的变量被认为是 undefined

 
let [firstName, surname] = [];

alert(firstName); // undefined
alert(surname); // undefined

如果我们想要一个“默认”值给未赋值的变量,我们可以使用 = 来提供

 
// 默认值
let [name = "Guest", surname = "Anonymous"] = ["Julius"];

alert(name);    // Julius(来自数组的值)
alert(surname); // Anonymous(默认值被使用了)

默认值可以是更加复杂的表达式甚至可以是函数调用,这些表达式或函数只会在这个变量未被赋值的时候才会被计算。

举个例子,我们使用了 prompt 函数来提供两个默认值,但它只会在未被赋值的那个变量上进行调用:

 
// 只会提示输入姓氏
let [name = prompt('name?'), surname = prompt('surname?')] = ["Julius"];

alert(name);    // Julius(来自数组)
alert(surname); // 你输入的值

对象解构

解构赋值同样适用于对象。

基本语法是:

let {var1, var2} = {var1:…, var2:…}

在等号右侧有一个已经存在的对象,我们想把它拆开到变量中。等号左侧包含了对象相应属性的一个“模式(pattern)”。在简单的情况下等号左侧的就是 {...} 中的变量名列表。

举个例子:

 
let options = {
  title: "Menu",
  width: 100,
  height: 200
};

let {title, width, height} = options;

alert(title);  // Menu
alert(width);  // 100
alert(height); // 200

属性 options.titleoptions.width 和 options.height 被赋给了对应的变量。变量的顺序并不重要,下面这个代码也奏效:

// 改变 let {...} 中元素的顺序
let {height, width, title} = { title: "Menu", height: 200, width: 100 }

等号左侧的模式(pattern)可以更加复杂,并且指定了属性和变量之间的映射关系。

如果我们想把一个属性赋值给另一个名字的变量,比如把 options.width 属性赋值给变量 w,那么我们可以使用冒号来指定:

 
let options = {
  title: "Menu",
  width: 100,
  height: 200
};

// { sourceProperty: targetVariable }
let {width: w, height: h, title} = options;

// width -> w
// height -> h
// title -> title

alert(title);  // Menu
alert(w);      // 100
alert(h);      // 200

冒号表示“什么值:赋值给谁”。上面的例子中,属性 width 被赋值给了 w,属性 height 被赋值给了 h,属性 title 被赋值给了同名变量。

对于可能缺失的属性,我们可以使用 "=" 设置默认值,如下所示:

 
let options = {
  title: "Menu"
};

let {width = 100, height = 200, title} = options;

alert(title);  // Menu
alert(width);  // 100
alert(height); // 200

就像数组或函数参数一样,默认值可以是任意表达式甚至可以是函数调用。它们只会在未提供对应的值时才会被计算/调用。

在下面的代码中,prompt 提示输入 width 值,但不会提示输入 title 值:

 
let options = {
  title: "Menu"
};

let {width = prompt("width?"), title = prompt("title?")} = options;

alert(title);  // Menu
alert(width);  // (prompt 的返回值)

我们还可以将冒号和等号结合起来

 
let options = {
  title: "Menu"
};

let {width: w = 100, height: h = 200, title} = options;

alert(title);  // Menu
alert(w);      // 100
alert(h);      // 200

如果我们有一个具有很多属性的复杂对象,那么我们可以只提取所需的内容

 
let options = {
  title: "Menu",
  width: 100,
  height: 200
};

// 仅提取 title 作为变量
let { title } = options;

alert(title); // Menu

剩余模式(pattern)"…"

如果对象拥有的属性数量比我们提供的变量数量还多,该怎么办?我们可以只取其中的某一些属性,然后把“剩余的”赋值到其他地方吗?

我们可以使用剩余模式(pattern),就像我们对数组那样。一些较旧的浏览器不支持此功能(例如,使用 Babel 对其进行填充),但可以在现代浏览器中使用。

看起来就像这样:

 
let options = {
  title: "Menu",
  height: 200,
  width: 100
};

// title = 名为 title 的属性
// rest = 存有剩余属性的对象
let {title, ...rest} = options;

// 现在 title="Menu", rest={height: 200,  100}
alert(rest.height);  // 200
alert(rest.width);   // 100
不使用 let 时的陷阱

在上面的示例中,变量都是在赋值中通过正确方式声明的:let {…} = {…}。当然,我们也可以使用已有的变量,而不用 let,但这里有一个陷阱。

以下代码无法正常运行:

 
let title, width, height;

// 这一行发生了错误
{title, width, height} = {title: "Menu", width: 200, height: 100};

问题在于 JavaScript 把主代码流(即不在其他表达式中)的 {...} 当做一个代码块。这样的代码块可以用于对语句分组,如下所示:

 
{
  // 一个代码块
  let message = "Hello";
  // ...
  alert( message );
}

因此,这里 JavaScript 假定我们有一个代码块,这就是报错的原因。我们需要解构它。

为了告诉 JavaScript 这不是一个代码块,我们可以把整个赋值表达式用括号 (...) 包起来

 
let title, width, height;

// 现在就可以了
({title, width, height} = {title: "Menu", width: 200, height: 100});

alert( title ); // Menu

嵌套解构

如果一个对象或数组嵌套了其他的对象和数组,我们可以在等号左侧使用更复杂的模式(pattern)来提取更深层的数据。

在下面的代码中,options 的属性 size 是另一个对象,属性 items 是另一个数组。赋值语句中等号左侧的模式(pattern)具有相同的结构以从中提取值:

 
let options = {
  size: {
    width: 100,
    height: 200
  },
  items: ["Cake", "Donut"],
  extra: true
};

// 为了清晰起见,解构赋值语句被写成多行的形式
let {
  size: { // 把 size 赋值到这里
    width,
    height
  },
  items: [item1, item2], // 把 items 赋值到这里
  title = "Menu" // 在对象中不存在(使用默认值)
} = options;

alert(title);  // Menu
alert(width);  // 100
alert(height); // 200
alert(item1);  // Cake
alert(item2);  // Donut

对象 options 的所有属性,除了 extra 属性在等号左侧不存在,都被赋值给了对应的变量:

 

最终,我们得到了 widthheightitem1item2 和具有默认值的 title 变量。

注意,size 和 items 没有对应的变量,因为我们取的是它们的内容

智能函数参数

有时,一个函数有很多参数,其中大部分的参数都是可选的。对用户界面来说更是如此。想象一个创建菜单的函数。它可能具有宽度参数,高度参数,标题参数和项目列表等。

下面是实现这种函数的一个很不好的写法:

function showMenu(title = "Untitled", width = 200, height = 100, items = []) {
  // ...
}

在实际开发中存在一个问题就是你怎么记得住这么多参数的顺序。通常集成开发环境工具(IDE)会尽力帮助我们,特别是当代码有良好的文档注释的时候,但是…… 另一个问题就是,当大部分的参数采用默认值就好的情况下,怎么调用这个函数。

难道像这样?

// 在采用默认值就可以的位置设置 undefined
showMenu("My Menu", undefined, undefined, ["Item1", "Item2"])

这太难看了。而且,当我们处理更多参数的时候可读性会变得很差。

解构赋值语法前来救援!

我们可以把所有参数当作一个对象来传递,然后函数马上把这个对象解构成多个变量:

 
// 我们传递一个对象给函数
let options = {
  title: "My menu",
  items: ["Item1", "Item2"]
};

// ……然后函数马上把对象展开成变量
function showMenu({title = "Untitled", width = 200, height = 100, items = []}) {
  // title, items – 提取于 options,
  // width, height – 使用默认值
  alert( `${title} ${width} ${height}` ); // My Menu 200 100
  alert( items ); // Item1, Item2
}

showMenu(options);

我们同样可以使用带有嵌套对象和冒号映射的更加复杂的解构:

 
let options = {
  title: "My menu",
  items: ["Item1", "Item2"]
};

function showMenu({
  title = "Untitled",
  width: w = 100,  // width goes to w
  height: h = 200, // height goes to h
  items: [item1, item2] // items first element goes to item1, second to item2
}) {
  alert( `${title} ${w} ${h}` ); // My Menu 100 200
  alert( item1 ); // Item1
  alert( item2 ); // Item2
}

showMenu(options);

完整语法和解构赋值是一样的:

function({
  incomingProperty: varName = defaultValue
  ...
})

对于参数对象,属性 incomingProperty 对应的变量是 varName,默认值是 defaultValue

请注意,这种解构假定了 showMenu() 函数确实存在参数。如果我们想让所有的参数都使用默认值,那我们应该传递一个空对象

showMenu({}); // 不错,所有值都取默认值

showMenu(); // 这样会导致错误

我们可以通过指定空对象 {} 为整个参数对象的默认值来解决这个问题:

 
function showMenu({ title = "Menu", width = 100, height = 200 } = {}) {
  alert( `${title} ${width} ${height}` );
}

showMenu(); // Menu 100 200

在上面的代码中,整个参数对象的默认是 {},因此总会有内容可以用来解构。

总结

  • 解构赋值可以立即将一个对象或数组映射到多个变量上。

  • 解构对象的完整语法:

    let {prop : varName = default, ...rest} = object

    这表示属性 prop 会被赋值给变量 varName,如果没有这个属性的话,就会使用默认值 default

    没有对应映射的对象属性会被复制到 rest 对象

  • 解构数组的完整语法:

    let [item1 = default, item2, ...rest] = array

    数组的第一个元素被赋值给 item1,第二个元素被赋值给 item2,剩下的所有元素被复制到另一个数组 rest

  • 从嵌套数组/对象中提取数据也是可以的,此时等号左侧必须和等号右侧有相同的结构。

免责声明:文章转载自《数据类型 解构赋值》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇二叉树C++语言Forest Program(dfs方法---树上的环)下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

对象集合 一

1,创建数组。 NSArray是固定数组,NSMutableArray是可变数组。 创建固定数组 NSArray *listOfLetters = [NSArray arrayWithObjects:@"A", @"B", @"C", nil]; 也可用类似的方法创建可变数组,NSMutableArray是NSArray的子类。下面是一些最常用的方法以及解释...

JAVA-初步认识-第五章-数组-常见操作-查找&折半查找

一. 查找 想要知道某一个数据在数组中的位置。(从一个数组中查找某一个数据,数据存在的话,同时返回角标号,没有相应的数据,返回-1.) 介绍数组常见的操作,实际上就是功能化的函数(求最值,排序,查找)。一旦说到函数,就涉及到两个明确,返回值和输入。这里要得到的是位置,也就是索引号。我们要知道某一个数据在某一个数组中的位置,数据和数组都是不确定的,这是一个通用...

PHP中关于foreach使用引用变量的坑

PHP版本为 5.6.12 代码如下: 1 2 3 4 5 6 7 8 9 10 11 12 <?php $arr = ['a', 'b', 'c', 'd', 'e']; foreach ($arr as $i=>&$a) { $a = $a.'_'. $a; echo $a .'<br>';...

前端基础之JavaScript(Day53)

阅读目录 一.JavaScript基础 二.JavaScript对象 三.BOM对象 一.JavaScript基础 http://www.cnblogs.com/yuanchenqi/articles/6893904.html#_label2 二.JavaScript对象 简介: 在JavaScript中除了null和undefined以外其他的数据类型都...

Java数据结构与算法(1)

有序表需要掌握的插入方法,删除方法和二分法查找方法。 插入方法: 从前往后找到比要插入的值大的数组项,将该数组项及之后的项均后移一位(从最后一项起依次后移),最后将要插入的值插入当前数组项。 删除方法: 从前往后找到要删除的项,将该数组项之后的项均前移一位(从该数组项后一项起依次往前移); 二分法查找: 通过将数组数据项范围不断对半分割来查找特定的数据项。...

JavaIO -- Reader 和 Writer

一、简介 设计Reader和Writer继承层次结构主要是为了国际化。InputStream和OutStream流继承层次结构仅支持8位字节流,并不能很好的处理16位的Unicode字符。由于Unicode用于字符国际化(java本身的char也是16位的Unicode),所以添加了Reader和Writer继承层次结构就是为了所有的I/O操作中都支持Uni...