ES6 解构赋值详解:对象解构赋值、数组解构赋值
2019-07-17 10:20
537 查看
所谓的解构赋值就是:按照一定模式,从数组和对象中提取值,对变量进行赋值(先解析结构再进行赋值)。
对象的解构赋值
对象是通过属性名进行解构(是用的最多的解构赋值)
-
基本使用
// 创建一个对象 let obj = {username: '妲己', age: 18, gender: 'girl'} // 进行解构赋值 let {age, username, gender} = obj // 通过解构赋值后左侧表达式中的变量已经申明可以直接使用 username = username +','+ age console.log(username) // 输出结果:妲己,18
-
属性名必须相同
等号左侧中的名称必须是右侧对象中已有的属性名
let obj = {username: '妲己', age: 18, gender: 'girl'} // obj 中没有 hobby 属性;相当于只声明了变量,没有进行赋值 let {gender, hobby, username} = obj console.log(hobby)
执行结果:
undefined
-
等号两侧的类型必须保持一致
let obj = {username: '妲己', age: 18, gender: 'girl'} // 等号左侧为 “数组” 右侧是 “对象” let [gender, username, age] = obj console.log(username)
执行结果:
# 报错 Uncaught TypeError: obj is not iterable
-
灵活使用
需要哪个属性值就结构赋值哪个属性,等号左侧名称的个数与右侧对象中的属性个数可以不一致。
let obj = {username: '妲己', age: 18, gender: 'girl'} // 只获取对象中的 age let {age} = obj console.log(age) // 执行结果:18
作为参数使用
let obj = {username: '妲己', age: 18, gender: 'girl'} function fun({username, age} = obj) { console.log(username, age) } fun()
执行结果:
妲己 18
数组的解构赋值
通过数组下标进行解构赋值
-
基本使用
let arr = ["潘金莲", 26, "Sexy married women"] let [name, age, MaritalStatus] = arr console.log(MaritalStatus)
输出结果:
Sexy married women
-
等号左右两侧的结构必须保持一致
let arr = ["潘金莲", 26, ["Sexy married women", "萧、古筝、琵琶"]] let [name, age, MaritalStatus] = arr console.log(name, age, MaritalStatus)
执行结果:
# 变量 MatitalStatus 拿到的是一个数组,获取其中的值还需要下标索引 潘金莲 26 ["Sexy married women", "萧、古筝、琵琶"]数
-
被解构的数组为空时,可以给等号左侧中的变量初始化一个默认值
let arr = [] let [name = "貂蝉", age = 16, gender = "女"] = arr console.log(name, age, gender)
执行结果:
貂蝉 16 女
-
灵活使用
获取数组指定下标的值,通过 “,” ;一个 “,” 占一个下标
let arr = ["潘金莲", 26, "Sexy married women", "萧、古筝、琵琶"] // 获取 arr 下标为 2 的值 let [,,MatitalStatus] = arr // 输出结果 console.log(MatitalStatus)
执行结果:
Sexy married women
相关文章推荐
- ES6数组与对象的解构赋值详解
- ECMAScript6(ES6)之解构赋值(数组,对象,字符串)
- JavaScript解构赋值(代码说明ES6数组, 对象, 函数的解构赋值)
- ES6解构赋值(数组和对象)
- JavaScript解构赋值(代码说明ES6数组, 对象, 函数的解构赋值)
- ES6 的解构赋值前每次都创建一个对象吗?会加重 GC 的负担吗?
- es6中的解构赋值、扩展运算符和rest参数使用详解
- 如何理解es6语法的,对象前面加三个点(...) 对象的解构赋值和扩展
- es6中的对象解构赋值
- ES6新特性 let、const、变量对象的解构赋值
- ES6学习随笔--字符串模板、解构赋值、对象、循环、函数、Promise、Generrator
- 【es6】【变量的解构赋值】【对象解构赋值】
- ES6——对象的解构赋值
- ES6数组的解构赋值和Set
- ES6解构赋值详解
- ES6 对象的解构赋值
- ES6数组的解构赋值
- 基于ES6作用域和解构赋值详解
- [Wondgirl]ECMAScript6(ES6)(五)对象的解构赋值
- ES6——Day3(对象的解构赋值)