JavaScript解构赋值

JavaScript解构赋值为我们提供了很多方便,但是用法比较多,本文就来梳理一下。总体来说,主要就两种地方使用解构赋值,一种是数组的解构赋值,另一种是对象的解构赋值。以这两个为基础就可以得到比较复杂的解构赋值,本质上就是这些结构的嵌套。

先来看数组的解构赋值:

const arr = ["little", "moon", 1, 2, 3];
const [first, second, ...rest] = arr;
console.log(first, second); // little moon
console.log(rest); //[1, 2, 3]

first、second和rest只是变量名,...rest叫做剩余表达式,将所有剩余下来的放到rest里。数组的解构按顺序将数组赋值给解构表达式左边的变量,左边的变量如果少于数组元素,不会报错,而是有几个赋值几个,比如下面的写法依然可以获取数组前两个元素的值:

const arr = ["little", "moon", 1, 2, 3];
const [first, second] = arr;

如果想忽略某个(些)元素也可以,使用一个占位符,或者直接省略占位符也可以:

const arr = ["little", "moon", 1, 2, 3];
// 忽略不感兴趣的元素
const [, _, one, two, three] = arr;
console.log(one, two, three);

可以利用解构赋值简洁地实现变量交换:

let a = 1;
let b = 2;
[a, b] = [b, a];
console.log("a:" + a + ", b:" + b); // a:2, b:1

下面来看对象的解构,最基础的用法是使用和属性相同的名字,就可以解构到属性值,如下所示:

// 解构对象
const person = {
name: "xiaoyuhang",
age: 22,
address: {
home: "nanjing",
work: "shanghai",
school: {
middleschool: "sy",
highschool: "wg",
graduateschool: "sh"
}
}
} const {name, age} = person; // 获取到xiaoyuhang 和 22两个属性值

对于这种相对来说层次较多的对象,可以解构到我们想要的层次,下面的例子中,只获取highschool这个属性:

// 可以只解构我们想要的部分,解构到想要的层次
const { address: { school: { highschool } } } = person;

有时候觉得对象属性的命名不太直观,可以在获取的同时为它重命名,使用name: alias这种方式即可,如下所示,将highschool重命名为high_school_address

const { address: { school: { highschool: high_school_address } } } = person;

有些时候,我们用于获取的属性名不是硬编码到程序中的,而是通过字符串计算得到,这时候就要使用[property]方法来计算属性名,看下面的例子就明白了:

// 计算属性名
const obj1 = { zz: "2020", yy: "2021" }
const z = "zz";
const { [z]: year } = obj1;
console.log(z); // zz
console.log(year); // 2020

此外,通过提供有效的代替名,也可以计算出属性:

const { "yy": nextyear } = obj1;
// const { "yyy": nextyear } = obj1; // 这就不行了 必须要和属性同名的字符串

使用解构,可以方便的在循环中进行赋值:

// 解构 + 迭代
var people = [
{
name: 'Mike Smith',
family: {
mother: 'Jane Smith',
father: 'Harry Smith',
sister: 'Samantha Smith'
},
age: 35
},
{
name: 'Tom Jones',
family: {
mother: 'Norah Jones',
father: 'Richard Jones',
brother: 'Howard Jones'
},
age: 25
}
];
for (var { name: n, family: { father: f } } of people) {
console.log('Name: ' + n + ', Father: ' + f);
}
// Name: Mike Smith, Father: Harry Smith
// Name: Tom Jones, Father: Richard Jones

解构对象,会依次查看原型链上的所有属性,直到找到为止或最终查找失败:

// 解构对象会访问原型链
function Person() {
this.name = "yhx";
this.age = 18;
}
Person.prototype.foo = "bar"; const ps1 = new Person(); const { name, age, foo } = ps1;
console.log(name, age, foo);

ps1对象的原型是Person,我们在Person的prototype属性上添加了一个foo属性,然后解构ps1对象时,对于foo,会沿着原型链查找到foo。

以上大概就是JavaScript解构表达式中最常用且最重要的内容了。

The end.

JavaScript解构赋值的更多相关文章

  1. JavaScript学习笔记(八)——变量的作用域与解构赋值

    在学习廖雪峰前辈的JavaScript教程中,遇到了一些需要注意的点,因此作为学习笔记列出来,提醒自己注意! 如果大家有需要,欢迎访问前辈的博客https://www.liaoxuefeng.com/ ...

  2. JavaScript学习笔记 -- ES6学习(三) 变量的解构赋值

    1.解构赋值的定义 在ES6中,允许按照一定模式,从数组和对象中提取值(所谓解构),然后对变量进行赋值. var a = 1; var b = 2; var c = 3; //等价于 var [a, ...

  3. 变量的解构赋值////////////z

    变量的解构赋值 数组的解构赋值 对象的解构赋值 字符串的解构赋值 数值和布尔值的解构赋值 函数参数的解构赋值 圆括号问题 用途 数组的解构赋值 基本用法 ES6允许按照一定模式,从数组和对象中提取值, ...

  4. ES6解构赋值详解

    文章转载自:http://www.zhufengpeixun.cn/article/167 解构赋值(destructuring assignment)语法是一个 Javascript 表达式,这种语 ...

  5. ES6的变量解构赋值

      前  言 ES6 解构赋值: ES6允许按照一定模式从数组和对象中提取值,然后对变量进行赋值,这被称为解构. 1.1 数组的结构赋值 1.1.1基本用法 JS中,为变量赋值直接指定.例如下面代码: ...

  6. es6学习笔记--解构赋值

    昨天学习了es6语法中解构赋值,解构赋值在声明中和函数传参提高了灵活性和便捷性,值得掌握该语法. 概念: ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构.   数组的解构 ...

  7. ECMAScript 6入门 - 变量的解构赋值

    定义 ES6允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring). 解构赋值不仅适用于var命令,也适用于let和const命令. 解构赋值的规则是,只要 ...

  8. ECMAScript 6之变量的解构赋值

    1,数组的解构赋值 基本用法 ES6允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring). 以前,为变量赋值,只能直接指定值. var a = 1; va ...

  9. es2015 解构赋值

    解构赋值语法是一个 Javascript 表达式,这使得可以将值从数组或属性从对象提取到不同的变量中.

随机推荐

  1. CSS-position 属性&元素脱离文档流引发父级边框塌陷问题

    CSS-position 属性 CSS 定位机制 CSS 有三种基本的定位机制:普通流.浮动(float)和绝对定位(position). 除非专门指定,否则所有框都在普通流中定位.也就是说,普通流中 ...

  2. securefx 系统中不到指定文件 (转中文)

    如何处理上传工具SecureFX中的中文乱码 工具/原料   SecureFX centos7 方法/步骤  转百度知道 https://jingyan.baidu.com/article/eae07 ...

  3. DAS、SAN和NAS三种服务器存储方式 (转)

    转 :https://blog.csdn.net/fgf00/article/details/52592651    2016年09月20日 09:04:00 凌_风 一.存储的分类根据服务器类型分为 ...

  4. 风炫安全WEB安全学习第二十二节课 DOM型XSS讲解

    风炫安全WEB安全学习第二十二节课 DOM型XSS讲解 Dom型XSS演示 通过Javascript,可以重构整个HTML文档,你可以添加.移除.改变或重排页面上的项目 要改变页面的某个东西,Java ...

  5. 实验一-最小生成树Kruskal算法

    实验名称 最小生成树算法-Kruskal算法 实验目的 1.掌握并查集的合并优化和查询优化: 2.掌握Kruskal算法. 3.能够针对实际问题,能够正确选择贪心策略. 4.能够针对选择的贪心策略,证 ...

  6. Redis-4.X 版本 Redis Cluster集群 (一)

    一 创建redis cluster 集群前提条件: 1 ) 每个redis node 节点采用相同的硬件配置,相同的密码. 2 ) 每个节点必须开启的参数: cluster-enabled yes # ...

  7. /usr/local/mysql/bin/mysqlbinlog -vv /var/lib/bin/mysql-bin.000008 --base64-output=DECODE-ROWS --start-pos=307

    /usr/local/mysql/bin/mysqlbinlog -vv /var/lib/bin/mysql-bin.000008 --base64-output=DECODE-ROWS  --st ...

  8. kubernets之卷

    一 卷的由来以及种类和常用的卷的类型 前面介绍了大部分都是pod的管理以及在集群内部和集群外部如何访问pod,但是我们也了解到,pod是有生命周期的,当pod所在节点下线,或者等其他原因原因导致pod ...

  9. CS远控

    Cobaltstrike 一.基础使用 ./teamserver 192.168.43.224 123456 启动服务器端 在windows下的链接 双击bat文件即可 在linux下 ./start ...

  10. apijson简单使用

    apijson简单使用 介绍 APIJSON 是一种专为 API 而生的 JSON 网络传输协议 以及 基于这套协议实现的 ORM 库.为简单的增删改查.复杂的查询.简单的事务操作 提供了完全自动化的 ...