ECMAScript 6 入门学习笔记(二)——变量的解构赋值
一、数组的解构赋值
let [foo, [[bar], baz]] = [1, [[2], 3]];
①可多不可少,等号的右边是数组
let [x, y] = [1, 2, 3]; //可以
let [bar, foo] = [1]; //foo的值为undefined // 报错
let [foo] = 1;
let [foo] = false;
let [foo] = NaN;
let [foo] = undefined;
let [foo] = null;
let [foo] = {};
//(具备 Iterator 接口?)
②默认值
let [foo = true] = [];
foo // true
二、对象的解构赋值
①对象的属性没有次序,变量必须与属性同名,才能取到正确的值
let { foo, bar } = { foo: "aaa", bar: "bbb" };
foo // "aaa"
bar // "bbb"
//(全)
let { foo: foo, bar: bar } = { foo: "aaa", bar: "bbb" };
②对象的解构赋值的内部机制,是先找到同名属性,然后再赋给对应的变量
//foo是匹配的模式,baz才是变量
let { foo: baz } = { foo: "aaa", bar: "bbb" };
baz // "aaa"
foo // error: foo is not defined
③对数组进行对象解构
let arr = [1, 2, 3];
let {0 : first, [arr.length - 1] : last} = arr;
first //
last //
三、字符串的解构赋值
①
const [a, b, c, d, e] = 'hello';
a // "h"
b // "e"
e // "o"
②
let {length : len} = 'hello';
len //
四、数值和布尔值的解构赋值
①解构赋值时,如果等号右边是数值和布尔值,则会先转为对象。
//数值和布尔值的包装对象都有toString属性,因此变量s都能取到值
let {toString: s} = 123;
s === Number.prototype.toString // true let {toString: s} = true;
s === Boolean.prototype.toString // true
②undefined和null无法转为对象
五、函数参数的解构赋值
①传入参数时,数组参数被解构成变量x和y。
function add([x, y]){
return x + y;
} add([1, 2]); //
②undefined会触发函数参数的默认值
[1, undefined, 3].map((x = 'yes') => x);
// [ 1, 'yes', 3 ]
六、圆括号问题(可能导致解构歧义)
①有好几条不能用的,我觉得还是尽量都不用吧。
②可以使用圆括号的情况只有一种:赋值语句的非模式部分,可以使用圆括号
七、用途
①交换变量的值
let x = 1;
let y = 2;
[x, y] = [y, x];
②从函数返回多个值
// 返回一个数组 function example() {
return [1, 2, 3];
}
let [a, b, c] = example(); // 返回一个对象 function example() {
return {
foo: 1,
bar: 2
};
}
let { foo, bar } = example();
③函数参数的定义
// 参数是一组有次序的值
function f([x, y, z]) { ... }
f([1, 2, 3]); // 参数是一组无次序的值
function f({x, y, z}) { ... }
f({z: 3, y: 2, x: 1});
④提取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]
⑤函数参数的默认值(这样就避免了在函数体内部再写var foo = config.foo || 'default foo';这样的语句。)
jQuery.ajax = function (url, {
async = true,
beforeSend = function () {},
cache = true,
complete = function () {},
crossDomain = false,
global = true,
// ... more config
}) {
// ... do stuff
};
⑥遍历Map结构
var 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) {
// ...
} // 获取键值(value前面还有逗号)
for (let [,value] of map) {
// ...
}
⑦输入模块的指定方法
const { SourceMapConsumer, SourceNode } = require("source-map");
ECMAScript 6 入门学习笔记(二)——变量的解构赋值的更多相关文章
- ES6学习笔记之变量的解构赋值
变量的解构赋值 ES6允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构. 数组的解构赋值 以前,为变量赋值,只能直接指定值: 1 2 3 var a = 1; var b = 2; ...
- ES6学习 第二章 变量的解构赋值
前言 该篇笔记是第二篇 变量的解构赋值. 这一章原文链接: 变量的解构赋值 解构赋值 ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring). 解构 ...
- ES6学习笔记(2)----变量的解构和赋值
参考书<ECMAScript 6入门>http://es6.ruanyifeng.com/ 变量的解构和赋值 本质上:只要模式匹配,左边的变量就能被赋予右边对应的值 原则: 解构赋值的规则 ...
- es6学习2:变量的解构赋值
一:数组的解构赋值 ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构 let [foo, [[bar], baz]] = [1, [[2], 3]]; foo bar ba ...
- ES6之主要知识点(二) 变量的解构赋值。默认值
引自http://es6.ruanyifeng.com/#docs/destructuring 数组解构赋值 默认值 对象解构赋值 用途 1.数组的解构赋值 let [a, b, c] = [1, 2 ...
- ES6 学习笔记 - 变量的解构赋值
变量的解构赋值 学习资料:ECMAScript 6 入门 数组的解构赋值 基本用法 可以从数组中提取值,按照对应位置,对变量赋值.这种写法属于"模式匹配". let [a, b, ...
- ES6 - 变量的解构赋值学习笔记
变量的解析赋值 数组的解析赋值 es6允许按照一定的模式,从数组和对象中提取值,对变量进行赋值,这就称为解构. var a = 1; var b = 2; var c = 3; //在es6中允许写成 ...
- ECMAScript 6入门 - 变量的解构赋值
定义 ES6允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring). 解构赋值不仅适用于var命令,也适用于let和const命令. 解构赋值的规则是,只要 ...
- ES6学习笔记(一)-变量的解构赋值
变量的解构赋值种类 解构(Destructuring):ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值. 只有当一个数组成员严格等于(===)undefined,包括空“ ” ,默认值 ...
- es6变量的解构赋值学习笔记
1. 解构赋值的规则是,只要等号右边的值不是对象,就先将其转为对象.由于undefined和null无法转为对象,所以对它们进行解构赋值,都会报错. let { prop: x } = undefin ...
随机推荐
- Java多线程(六)守护进程
守护进程:当进程中不存在非守护线程了,则守护线程自动销毁: public class DaemonThread extends Thread{ private int i =0; public voi ...
- [C++ 多线程] 学习前瞻
1 多线程是什么? 1.1 多线程的概念? 说起多线程,那么就不得不说什么是线程,而说起线程,又不得不说什么是进程. 进程可以简单的理解为一个可以独立运行的程序单位,它是线程的集合,进程就是有一个或多 ...
- Uva 796 Critical Links (割边+排序)
题目链接: Uva 796 Critical Links 题目描述: 题目中给出一个有可能不连通的无向图,求出这个图的桥,并且把桥按照起点升序输出(还有啊,还有啊,每个桥的起点要比终点靠前啊),这个题 ...
- 模拟 HDOJ 4552 Running Rabbits
题目传送门 /* 模拟:看懂题意,主要是碰壁后的转向,笔误2次 */ #include <cstdio> #include <algorithm> #include <c ...
- ACM_N皇后问题
N皇后问题 Time Limit: 2000/1000ms (Java/Others) Problem Description: 在N*N的方格棋盘放置了N个皇后,使得它们不相互攻击(即任意2个皇后不 ...
- PowerDesigner连接Oracle数据库(32位)反向生成物理数据模型
PowerDesigner可以连接Oracle数据库进行反向生成物理数据模型,本文演示操作过程. 环境说明: 1)Windows8.1,Oracle11R2 32位. 2)PowerDesigner1 ...
- java IO流 之 字节输入流 InputString()
学习java的重点之一:InputStream 字节输入流的使用 (1)FileInputstream: 子类,读取数据的通道 使用步骤: 1.获取目标文件:new File() 2.建立通道:ne ...
- 通过机智云APP来学习安卓
效果非常之好,安卓6.0之后就进行了动态授权.按照网上的视频一步一步调试的非常成功,非常舒服.
- rabbitmq 简单示例(Hello World)
一:消息中间件: AMQP,即Advanced Message Queuing Protocol,高级消息队列协议,是应用层协议的一个开放标准,为面向消息的中间件设计 RabbitMQ是实现AMQP( ...
- C语言入门100题,考算法的居多
入门题,考算法的居多,共同学习! 1. 编程,统计在所输入的50个实数中有多少个正数.多少个负数.多少个零. 2. 编程,计算并输出方程X2+Y2=1989的所有整数解. 3. 编程,输入一个10进制 ...