JavaScript 解构赋值

JavaScript 解构赋值文章目录JavaScript解构数组解构分配默认值交换变量跳过项将剩余元素分配给单个变量嵌套解构赋值参考文档    在本教程中,您将借助示例了解JavaScript解构赋值。JavaScript解构    ES6中引入的解构赋值可以轻松地将数组值和对象属性分配给不同的变量。例如,    在ES6之前://assigningobjectattributestovariablesconstperson={name:’Sara’,age:25,

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全家桶1年46,售后保障稳定

    在本教程中,您将借助示例了解 JavaScript 解构赋值。

JavaScript 解构

    ES6 中引入的解构赋值可以轻松地将数组值和对象属性分配给不同的变量。例如,
    在 ES6 之前:

// assigning object attributes to variables
const person = {
    name: 'Sara',
    age: 25,
    gender: 'female'    
}

let name = person.name;
let age = person.age;
let gender = person.gender;

console.log(name); // Sara
console.log(age); // 25
console.log(gender); // female

Jetbrains全家桶1年46,售后保障稳定

    来自 ES6:

// assigning object attributes to variables
const person = {
    name: 'Sara',
    age: 25,
    gender: 'female'    
}

// destructuring assignment
let { name, age, gender } = person;

console.log(name); // Sara
console.log(age); // 25
console.log(gender); // female

    注意:名称的顺序在对象解构中无关紧要。
    例如,您可以将上述程序编写为:

let { age, gender, name } = person;
console.log(name); // Sara

    注意:在解构对象时,应该使用与相应对象键相同的变量名称。
    例如,

let {name1, age, gender} = person;
console.log(name1); // undefined

    如果要为对象键分配不同的变量名称,可以使用:

const person = {
    name: 'Sara',
    age: 25,
    gender: 'female'    
}

// destructuring assignment
// using different variable names
let { name: name1, age: age1, gender: gender1 } = person;

console.log(name1); // Sara
console.log(age1); // 25
console.log(gender1); // female

数组解构

    您也可以用类似的方式执行数组的解构。例如,

const arrValue = ['one', 'two', 'three'];

// destructuring assignment in arrays
const [x, y, z] = arrValue;

console.log(x); // one
console.log(y); // two
console.log(z); // three

分配默认值

    您可以在使用解构时为变量指定默认值。例如,

let arrValue = [10];

// assigning default value 5 and 7
let [x = 5,  y = 7] = arrValue;

console.log(x); // 10
console.log(y); // 7

    在上述程序中,arrValue 只有一个元素。因此,

  • x 变量将是 10
  • y 变量采用默认值 7

    在对象解构中,可以以类似的方式传递默认值。例如,

const person = {
    name: 'Jack',
}

// assign default value 26 to age if undefined
const { name, age = 26} = person;

console.log(name); // Jack
console.log(age); // 26

交换变量

    在此示例中,使用解构赋值语法交换了两个变量。

// program to swap variables

let x = 4;
let y = 7;

// swapping variables
[x, y] = [y, x];

console.log(x); // 7
console.log(y); // 4

跳过项

    您可以跳过数组中不需要的项,而无需将它们分配给局部变量。例如,

const arrValue = ['one', 'two', 'three'];

// destructuring assignment in arrays
const [x, , z] = arrValue;

console.log(x); // one
console.log(z); // three

    在上面的程序中,使用逗号分隔符 , 省略了第二个元素。

将剩余元素分配给单个变量

    您可以使用扩展语法将数组的剩余元素分配给变量…。例如,

const arrValue = ['one', 'two', 'three', 'four'];

// destructuring assignment in arrays
// assigning remaining elements to y
const [x, ...y] = arrValue;

console.log(x); // one
console.log(y); // ["two", "three", "four"]

    这里,one 被分配给 x 变量。其余的数组元素被分配给 y 变量。
    您还可以将对象其余的属性指定给单个变量。例如,

const person = {
    name: 'Sara',
    age: 25,
    gender: 'female'    
}

// destructuring assignment
// assigning remaining properties to rest
let { name, ...rest } = person;

console.log(name); // Sara
console.log(rest); // {age: 25, gender: "female"}

    注意:具有扩展语法的变量不能有尾随逗号,。您可以将这个rest元素(带有扩展语法的变量)作为最后一个变量。
    例如,

const arrValue = ['one', 'two', 'three', 'four'];

// throws an error
const [ ...x, y] = arrValue;

console.log(x); // eror

嵌套解构赋值

    您可以对数组元素执行嵌套解构。例如,

// nested array elements
const arrValue = ['one', ['two', 'three']];

// nested destructuring assignment in arrays
const [x, [y, z]] = arrValue;

console.log(x); // one
console.log(y); // two
console.log(z); // three

    在这里,变量 y 和 z 被指定为嵌套元素 two 和 three。
    为了执行嵌套的解构赋值,必须将变量包含在数组结构中(通过将变量包含在 [] 中)。
    您还可以对对象属性执行嵌套解构。例如,

const person = {
    name: 'Jack',
    age: 26,
    hobbies: {
        read: true,
        playGame: true
    }
}
// nested destructuring 
const {name, hobbies: {read, playGame}} = person;

console.log(name); // Jack
console.log(read); // true
console.log(playGame); // true

    为了对对象执行嵌套的解构赋值,必须将变量封装在对象结构中(通过在 { } 内封装)。
    注意:解构赋值特性是在ES6中引入的。一些浏览器可能不支持使用解构赋值。访问Javascript 解构支持以了解更多信息。

    上一教程JS Set                                          下一教程JS Classes

参考文档

[1] Parewa Labs Pvt. Ltd. (2022, January 1). Getting Started With JavaScript, from Parewa Labs Pvt. Ltd: https://www.programiz.com/javascript/destructuring-assignment

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:http://www.javaforall.cn/234890.html原文链接:http://www.javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • Apple Silicon M1 Mac如何恢复出厂设置

    Apple Silicon M1 Mac如何恢复出厂设置今天小编就来和大家讲述一下AppleSiliconM1Mac如何恢复出厂设置并还原的?Apple完全改变的AppleSiliconMac的一个方面是访问恢复模式的方式,这是重新安装MacOS,解决问题或彻底擦除硬盘驱动器所必需的工具,以防万一您必须将其退回或决定删除硬盘。在下面,您将找到如何进入“恢复模式”,包括其中的工具,最后是如何完全重置M1Mac。新的恢复模式看起来很相似,但使用起来却有所不同。如何在AppleSiliconMac上访问MacOSRecovery

  • 2021.4.1 idea 激活码_通用破解码

    2021.4.1 idea 激活码_通用破解码,https://javaforall.cn/100143.html。详细ieda激活码不妨到全栈程序员必看教程网一起来了解一下吧!

  • 信息学奥赛GoC编程测试题题库

    信息学奥赛GoC编程测试题题库在线答题和答案详解请参考https://blog.csdn.net/zhengzyx2040/article/details/118632561一、单选题(15题,每题4分,满分60分)1、GoC的编译+运行的快捷键是()A、F5B、F11C、F8D、F122、GoC程序的源文件扩展名是(),经过编译后生成的可执行文件扩展名是()A、CPPEXEB、EXECPP…

  • Spring Cloud 微服务架构图「建议收藏」

    Spring Cloud 微服务架构图「建议收藏」SpringCloud微服务总体架构图上面图中技术名词理解:1、Sleuth-链路跟踪为服务之间调用提供链路追踪。通过Sleuth可以很清楚的了解到一个服务请求经过了哪些服务,每个服务处理花费了多长。从而让我们可以很方便的理清各微服务间的调用关系。2、断路器(Hystrix)在微服务架构中,根据业务来拆分成一个个的服务,服务与服务之间可以相互调…

  • 数据库向DropDownList1绑定数据

    数据库向DropDownList1绑定数据常用方法stringConnString=@”DataSource=PC-20140331BMRR\SQLEXPRESS;InitialCatalog=lianxi;IntegratedSecurity=True”;      //创建一个SqlConnection      SqlConnectionConn=newSqlConnect

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号