【ES6(2015)】解构赋值Desctructuring
文章目录
- 1. 数组解构赋值
- 2. 对象解构赋值
- 3. 字符串解构赋值
在 ES6 中新增了变量赋值的方式:解构赋值。允许按照一定模式,从数组和对象中提取值,对变量进行赋值。如果对这个概念不了解,我们可以快速展示一个小示例一睹风采:
let arr = [1, 2, 3]
let a = arr[0]
let b = arr[1]
let c = arr[2]
ES6 中就可以用解构赋值这样写:
let [a, b, c] = [1, 2, 3]
1. 数组解构赋值
- 赋值元素可以是任意可遍历的对象
赋值的元素不仅是数组,它可以是任意可遍历的对象
let [a, b, c] = "abc" // ["a", "b", "c"]
let [one, two, three] = new Set([1, 2, 3])
- 左边的变量
被赋值的变量还可以是对象的属性,不局限于单纯的变量。
let user = {}
[user.firstName, user.secondName] = 'Kobe Bryant'.split(' ')console.log(user.firstName, user.secondName) // Kobe Bryant
- 循环体
解构赋值在循环体中的应用,可以配合 entries 使用。
let user = {name: 'John',age: 30
}// loop over keys-and-values
for (let [key, value] of Object.entries(user)) {console.log(`${key}:${value}`) // name:John, then age:30
}
let user = new Map()
user.set('name', 'John')
user.set('age', '30')for (let [key, value] of user.entries()) {console.log(`${key}:${value}`) // name:John, then age:30
}
- 可以跳过赋值元素
如果想忽略数组的某个元素对变量进行赋值,可以使用逗号来处理。
// second element is not needed
let [name, , title] = ['John', 'Jim', 'Sun', 'Moon']console.log( title ) // Sun
- rest 参数
let [name1, name2, ...rest] = ["Julius", "Caesar", "Consul", "of the Roman Republic"]console.log(name1) // Julius
console.log(name2) // Caesar// Note that type of `rest` is Array.
console.log(rest[0]) // Consul
console.log(rest[1]) // of the Roman Republic
console.log(rest.length) // 2
- 默认值
如果数组的内容少于变量的个数,并不会报错,没有分配到内容的变量会是undefined
。
let [firstName, surname] = []console.log(firstName) // undefined
console.log(surname) // undefined
当然你也可以给变量赋予默认值,防止 undefined 的情况出现:
// default values
let [name = "Guest", surname = "Anonymous"] = ["Julius"]console.log(name) // Julius (from array)
console.log(surname) // Anonymous (default used)
2. 对象解构赋值
- 基本用法
let options = {title: "Menu",width: 100,height: 200
}let {title, width, height} = options
// let {title: title, width: width, height: height} = options 上面是简写console.log(title) // Menu
console.log(width) // 100
console.log(height) // 200
在这个结构赋值的过程中,左侧的“模板”结构要与右侧的 Object 一致,但是属性的顺序无需一致。
- 默认值
let options = {title: "Menu"
}let {width = 100, height = 200, title} = optionsconsole.log(title) // Menu
console.log(width) // 100
console.log(height) // 200
- rest 运算符
let options = {title: "Menu",height: 200,width: 100
}let {title, ...rest} = options// now title="Menu", rest={height: 200, width: 100}
console.log(rest.height) // 200
console.log(rest.width) // 100
3. 字符串解构赋值
字符串可以当做是数组的解构:
let str = 'hello'
let [a, b, c, d, e] = str
console.log(a, b, c, d, e)
【ES6(2015)】解构赋值Desctructuring相关推荐
- ES6 的解构赋值前每次都创建一个对象吗?会加重 GC 的负担吗?
本文来源于知乎上的一个提问. 为了程序的易读性,我们会使用 ES6 的解构赋值: function f({a,b}){} f({a:1,b:2}); 这个例子的函数调用中,会真的产生一个对象吗?如果会 ...
- ES6常用解构赋值有哪几种?
ES6常用解构赋值有哪几种? a.数组的解构赋值 //数组解析赋值,模式匹配 {let [a, b, c] = [1, 2, 3];console.log("模式匹配");cons ...
- ES6语法~解构赋值、箭头函数、class类继承及属性方法、map、set、symbol、rest、new.target、 Object.entries......
2015年6月17日 ECMAScript 6发布正式版本 前面介绍基本语法, 后面为class用法及属性方法.set.symbol.rest等语法. 一.基本语法: 1. 定义变 ...
- es6学习 -- 解构赋值
ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring). 以前,为变量赋值,只能直接指定值. let a = 1; let b = 2; let c ...
- ES6中解构赋值深入解读
ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构 1.数组的解构赋值 let [head, ...tail] = [1, 2, 3, 4]; head // 1 tail ...
- ES6语法---解构赋值
解构赋值概念 按照一定的模式,从数组和对象中提取值,对变量进行赋值,就被称为解构. 目的是为了提高效率,使用起来更加方便. 以下的各个说明,我会类比着ES5去解释,希望能帮到小伙伴们. 数组解构 正常 ...
- 前端面试不用怕!一分钟带你了解es6的解构赋值
解构赋值(★★★)!!!!! ES6中允许从数组中提取值,按照对应位置,对变量赋值,对象也可以实现解构 <script>var stus=['李钟硕','刘诗诗','易烊千玺']//访问数 ...
- ES6:解构赋值及对象方法
解构赋值 对象解构 起别名:通过:来进行取名 //对象解构赋值 var obj = { uname: "张三", age: 21, sex: "男" } // ...
- 【ES6】变量的解构赋值
[ES6]变量的解构赋值 一.什么叫解构赋值? 二.解构赋值有哪些分类?写法? 1)对数组的解构赋值 2)对对象的解构赋值 3)对字符串的解构赋值 4)对数值和布尔值的解构赋值 5)对函数参数的解构赋 ...
最新文章
- C++ Primer第18章Vector的再实现及bug修正
- KV数据存储:持久化
- 历时7周,当然了真正的安装时间没这么多,终于把集群安装好了
- 《剑指offer》-整数中1出现的次数
- 圆周率 π 的研究、π 的等式
- 用数组循环实现矩阵乘法php,array用法 numpy_从创建数组到矩阵运算,一文带你看懂Numpy...
- JDK API下载
- qq邮箱注册收件服务器,qq邮箱smtp服务器
- 计算机电源接口图,电脑电源接口定义图解
- ps-半透明图片抠图
- HTML基础常识问答(一)
- 范莎学院 计算机,申请范莎学院
- 三维空间中直角坐标与球坐标的相互转换
- 用树莓派做linux电视盒子,用树莓派制造一台“口袋电视”
- http://bbs.pediy.com/showthread.php?p=1365122
- 【伪大数据】对QQ空间指定好友2017年说说数据的分析
- 如何在Dynamic CRM 2011中使用自定义Workflow
- 获取商品ID下所有的sku精准库存api
- FPGA交通灯 Verilog Modelsim
- Linux复习题:2判断题