ES6中变量的解构赋值
1、数组的解构赋值
基本用法
ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring)。
输出:
上面代码表示,可以从数组中提取值,按照对应位置,对变量赋值。
本质上,这种写法属于“模式匹配”,只要等号两边的模式相同,左边的变量就会被赋予对应的值。下面是一些使用嵌套数组进行解构的例子。
(2)不完全解构
let [x, y] = [1, 2, 3]; x // 1 y // 2 let [a, [b], d] = [1, [2, 3], 4]; a // 1 b // 2 d // 4
(3)默认值
解构赋值允许指定默认值
let [foo = true] = []; foo // true let [x, y = 'b'] = ['a']; // x='a', y='b' let [x, y = 'b'] = ['a', undefined]; // x='a', y='b'
注意,ES6 内部使用严格相等运算符(===
),判断一个位置是否有值。所以,只有当一个数组成员严格等于undefined
,默认值才会生效。
let [x = 1] = [undefined]; x // 1 let [x = 1] = [null]; x // null
如果默认值是一个表达式,那么这个表达式是默认表达式,只有在右边没有值赋值给左边的时候 才会调用 如果右边有值赋给左边 则不会调用
上面代码中,因为x
能取到值,所以函数f
根本不会执行。
2、对象的解构赋值
//左边的是变量 右边是对象 左边变量名需要与右边对象的属性名相同let { foo, bar } = { foo: "aaa", bar: "bbb" }; foo // "aaa" bar // "bbb"
对象的解构与数组有一个重要的不同。数组的元素是按次序排列的,变量的取值由它的位置决定;而对象的属性没有次序,变量必须与属性同名,才能取到正确的值。
let { bar, foo } = { foo: "aaa", bar: "bbb" }; foo // "aaa" bar // "bbb" let { baz } = { foo: "aaa", bar: "bbb" }; baz // undefined
如果变量名与属性名不一致,必须写成下面这样。
let { foo: baz } = { foo: 'aaa', bar: 'bbb' }; baz // "aaa" let obj = { first: 'hello', last: 'world' }; let { first: f, last: l } = obj; f // 'hello' l // 'world'
这实际上说明,对象的解构赋值是下面形式的简写
let { foo: foo, bar: bar } = { foo: "aaa", bar: "bbb" };
也就是说,对象的解构赋值的内部机制,是先找到同名属性,然后再赋给对应的变量。真正被赋值的是后者,而不是前者。
let { foo: baz } = { foo: "aaa", bar: "bbb" }; baz // "aaa" foo // error: foo is not defined
上面代码中,foo
是匹配的模式,baz
才是变量。真正被赋值的是变量baz
,而不是模式foo
。
let obj = {p: ['Hello',{ y: 'World' }] };let { p: [x, { y }] } = obj; x // "Hello" y // "World"
注意,这时p
是模式,不是变量,因此不会被赋值。
对象解构步骤:先找到左右同名的属性,然后再将youb
对象的解构也可以指定默认值。
对象的解构赋值,可以很方便地将现有对象的方法,赋值到某个变量。
3、字符串解构赋值
字符串也可以解构赋值。这是因为此时,字符串被转换成了一个类似数组的对象。
类似数组的对象都有一个length
属性,因此还可以对这个属性解构赋值。
let {length : len} = 'hello'; len // 5
4、数值和布尔值的解构赋值
解构赋值时,如果等号右边是数值和布尔值,则会先转为对象。
let {toString: s} = 123; s === Number.prototype.toString // true let {toString: s} = true; s === Boolean.prototype.toString // true
上面代码中,数值和布尔值的包装对象都有toString
属性,因此变量s
都能取到值。
解构赋值的规则是,只要等号右边的值不是对象或数组,就先将其转为对象。由于undefined
和null
无法转为对象,所以对它们进行解构赋值,都会报错。
let { prop: x } = undefined; // TypeError let { prop: y } = null; // TypeError
5、函数参数的解构赋值
function add([x, y]){return x + y; }add([1, 2]); // 3
上面代码中,函数add
的参数表面上是一个数组,但在传入参数的那一刻,数组参数就被解构成变量x
和y
。对于函数内部的代码来说,它们能感受到的参数就是x
和y
。
[[1, 2], [3, 4]].map(([a, b]) => a + b); // [ 3, 7 ]
函数参数的解构也可以使用默认值
function move({x = 0, y = 0} = {}) {return [x, y]; }move({x: 3, y: 8}); // [3, 8] move({x: 3}); // [3, 0] move({}); // [0, 0] move(); // [0, 0]
用途:
1、交换变量
let x = 1; let y = 2;[x, y] = [y, x];
(2)从函数返回多个值
函数只能返回一个值,如果要返回多个值,只能将它们放在数组或对象里返回。有了解构赋值,取出这些值就非常方便。
// 返回一个数组function example() {return [1, 2, 3]; } let [a, b, c] = example();// 返回一个对象function example() {return {foo: 1,bar: 2}; } let { foo, bar } = example();
(3)函数参数的定义
解构赋值可以方便地将一组参数与变量名对应起来。
// 参数是一组有次序的值 function f([x, y, z]) { ... } f([1, 2, 3]);// 参数是一组无次序的值 function f({x, y, z}) { ... } f({z: 3, y: 2, x: 1});
(4)提取 JSON 数据
let jsonData = {id: 42,status: "OK",data: [867, 5309] };let { id, status, data: number } = jsonData;console.log(id, status, number); // 42, "OK", [867, 5309]
(5)函数参数的默认值
jQuery.ajax = function (url, {async = true,beforeSend = function () {},cache = true,complete = function () {},crossDomain = false,global = true,// ... more config } = {}) {// ... do stuff };
指定参数的默认值,就避免了在函数体内部再写var foo = config.foo || 'default foo';
这样的语句。
(6)遍历 Map 结构
任何部署了 Iterator 接口的对象,都可以用for...of
循环遍历。Map 结构原生支持 Iterator 接口,配合变量的解构赋值,获取键名和键值就非常方便。
const map = new Map(); map.set('first', 'hello'); map.set('second', 'world');for (let [key, value] of map) {console.log(key + " is " + value); } // first is hello // second is world
// 获取键名 for (let [key] of map) {// ... }// 获取键值 for (let [,value] of map) {// ... }
(7)输入模块的指定方法
const { SourceMapConsumer, SourceNode } = require("source-map");
转载于:https://www.cnblogs.com/cmy1996/p/9290930.html
ES6中变量的解构赋值相关推荐
- 【ES6】变量的解构赋值
[ES6]变量的解构赋值 一.什么叫解构赋值? 二.解构赋值有哪些分类?写法? 1)对数组的解构赋值 2)对对象的解构赋值 3)对字符串的解构赋值 4)对数值和布尔值的解构赋值 5)对函数参数的解构赋 ...
- Vue2.x—理解vuex核心概念action(使用到ES6的变量的解构赋值)
Action Action 类似于 mutation,不同在于: Action 提交的是 mutation,而不是直接变更状态. Action 可以包含任意异步操作. 让我们来注册一个简单的 acti ...
- es6分享——变量的解构赋值
变量的解构赋值:ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring). 以前的写法: var a = 1; var b = 2; es6允许的写法 ...
- [ES6] 细化ES6之 -- 变量的解构赋值
变量的解构赋值 解构赋值是什么 ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值 var/let [变量名称1,变量名称2,...] = 数组或对象 本质上,这种写法属于"模式 ...
- ES6之变量的解构赋值
变量的解构赋值 1. 数组的解构赋值 基本用法 ES6允许写成下面这样 let [a, d, c] = [1, 2, 3]; //按照对应位置对变量赋值 这种写法也叫模式匹配 只要等号两边模式相同(解 ...
- ES6中的对象解构赋值
解构赋值: 解构赋值语法是一个Javascript表达式,这使得可以将数据从数组或对象提取到不同的变量中(这段话是mdn中关于解构赋值的定义,注意这里的定义,可以看出解构主要用在数组和对象上). 说白 ...
- ES6的新特性(3)——变量的解构赋值
变量的解构赋值 数组的解构赋值 基本用法 ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring). let a = 1; let b = 2; le ...
- ES6学习笔记03:变量的解构赋值
ES6学习笔记03:变量的解构赋值 如果想从复杂数据结构(数组.对象)中获取某一个数据,可能需要大量的遍历操作才能完成.通过解构赋值,这一过程可以得到简化. 1.字符串的解构赋值 其实,Python也 ...
- ES6学习笔记二 新的声明方式和变量的解构赋值!
新的声明方式 在ES5的时候,我们只有一个声明方式,var!但是在es6中,声明进行了扩展,我们加上ES5的var的申明方式,我们有了三种声明方式: var:它是variable的简写,可以理解成变量 ...
最新文章
- Kali linux 渗透测试技术之搭建WordPress Turnkey Linux及检测WordPress 应用程序漏洞
- java web 开发技术大全 代码_Java Web开发技术大全
- Python数据挖掘学习笔记】九.回归模型LinearRegression简单分析氧化物数据
- python 大智慧股池_大智慧的一般设置及股票池的安装步骤、使用方法
- 怎么自学编程python_怎样自学Python编程?
- Linux (deepin)网络管理详解
- 【Linux】一步一步学Linux——atq命令(139)
- python的spider程序下载安装_Python3WebSpider
- mysql 100w 查询耗时4秒_MySql百万数据0秒筛选查询
- kali 解压rar
- YOLOv3网络结构细致解析
- 【C++】Vscode 中使用CMakeLists(推荐)构建C++项目:项目结构、各个文件夹的作用、从编码到debug
- 【opencv】19.图像边缘检测算子数学原理、像素一二阶导数的意义
- python里char什么意思_编程中“char”是什么意思?
- 【python】GUI thinter窗口最大化
- 电赛 | 循迹小车(省电赛一等奖作品)
- Python 阿拉伯数字转换为中文大写数字
- 希腊罗马神话和《圣经》中的英语典故
- 在Git中,origin / master与origin master之间有什么区别?
- 计算机专业竞争力度大吗,求职竞争最激烈十大行业出炉 计算机软件业榜首
热门文章
- 2台电脑一根网线传文件_黑龙江工程专用网线报价,黑电源线配件厂家
- linux终端中书名号,Linux双引号、单引号和反向单引号
- sftp日志linux,Linux下使用SFTP命令及FTP命令 (转)
- linux运行非法指令,illegal instruction非法指令的解决思路
- java单例设计模式双重_Java 设计模式 ——单例模式(饿汉,懒汉,双重锁,静态内部类)...
- 360好还是电脑管家好_安装了电脑管家,为什么电脑还是卡?
- css3 混合,css3混合模式
- 路科验证示例_角度形式验证示例
- LeetCode之3Sum Closest(Kotlin)
- 《数位板这样玩——Photoshop+Painter数码手绘必修课(第2版)》目录—导读