变量的解构赋值
在ES6中可以从数组和对象中提取值,对变量进行赋值,称为解构赋值。解构赋值就是只要等号两边的模式相同,左边的变量就会被对应赋值。
示例代码:
let [x,y='b'] = ['a'];console.log(y); // b
let [x,y='b'] = ['a', undefined];console.log(y); // b
let [x,y='b'] = ['a', null];console.log(y); // null
解构赋值分类
- 完全解构
- 不完全解构
不完全解构代码如下:
let [a = 1, b] = [];// a = 1, b = undefined
数组的解构赋值
代码如下:
let [a, [b], d] = [1, [2, 3], 4];a // 1b // 2d // 4
解构赋值允许指定默认值。
代码如下:
let [foo = true] = [];foo // true
在使用默认值的时候,应该注意undefined,因为undefined是不能赋值的。
代码如下:
let [x = 1] = [undefined];x // 1 let [x = 1] = [null];x // null
对象解构
代码如下:
let { bar, foo } = { foo: 'aaa', bar: 'bbb' };foo // "aaa"bar // "bbb" let { baz } = { foo: 'aaa', bar: 'bbb' };baz // undefined
通过解构,我们可以很容易的把对象的方法复制给变量。
代码如下:
const { log } = console;log('hello') // hello
或者是:
const { log:minelog } = console;minelog ('hello') // hello
当我们使用解构赋值的时候,需要注意声明变量的作用域问题:
// 错误的写法let x;{x} = {x: 1}; // 正确的写法let x;
({x} = {x: 1});
数组中是一个特殊的对象
let arr = [1, 2, 3];let {0 : first, [arr.length - 1] : last} = arr;first // 1last // 3
不完全解构
let obj = {p: [{y: 'world'}] };let {p: [{ y }, x ] } = obj;// x = undefined// y = 'world'
剩余运算符
let {a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40};// a = 10// b = 20// rest = {c: 30, d: 40}
解构默认值
let {a = 10, b = 5} = {a: 3};// a = 3; b = 5;let {a: aa = 10, b: bb = 5} = {a: 3};// aa = 3; bb = 5;
字符串解构
字符串本身也是一个对象,有时候,可以当成一个数组解构
代码如下:
const [a, b, c, d, e] = 'hello';a // "h"b // "e"c // "l"d // "l"e // "o"
当做一个对象解构
let {length : len} = 'hello';len // 5
剩余运算符
let [a, ...b] = [1, 2, 3];//a = 1//b = [2, 3]
函数参数的解构赋值
function add([x, y]){ return x + y;} add([1, 2]); // 3
计算函数任意个参数之和:
代码:
function sum(...num){
var sumNum = 0;
for(let i=0;i<num.length;i++){
sumNum += parseInt(num[i])
}
console.log(sumNum)
}
Generator
Generator是es6提供的一种异步编程解决方案,在语法上,可以把它理解为一个状态机,内部封装了多种状态。执行Generator,会生成并返回一个遍历器对象。返回的遍历器对象,可以依次遍历Generator函数的每一个状态。
Generator函数是一个普通的函数。
第一,function关键字与函数名之间有一个*号。
第二,函数体内使用yield表达式来遍历状态。
代码如下:
function* newGenerator() {
yield 'web';
yield 'it';
return 'ending';
}
代码理解,执行Generator函数之后,并不会被立即执行,返回的也不是函数运行结果,而是一个指向内部状态的指针对象。使用遍历器对象的Next()方法,使指针移向下一个状态。每一次调用next()方法,内部指针就会从函数头部或上一次停下的地方开始执行,直到遇到下一个yield表达式位置。Generator是分段执行的,yield表达式是暂停执行的标志,而next()方法可以恢复执行。next()函数带参数,该参数作为上一次yield表达式的返回值,因为yield本身是没有返回值的。
简单数据类型
ES5中有5中简单数据类型,Undefined, Null, Boolean, Number, String
Set
- 成员不能重复
- 只有健值,没有健名,有点类似数组。
- 可以遍历,方法有add, delete,has
Set 实例属性
- constructor:构造函数
- size:元素数量
代码如下:
let set = new Set([1, 2, 3, 2, 1])
console.log(set.length) // undefined
console.log(set.size) // 3
Set 实例方法
操作方法
- add(value):新增,相当于 array里的push
- delete(value):存在即删除集合中value
- has(value):判断集合中是否存在 value
- clear():清空集合
遍历方法
- keys():返回一个包含集合中所有键的迭代器
- values():返回一个包含集合中所有值得迭代器
- entries():返回一个包含Set对象中所有元素得键值对迭代器
- forEach(callbackFn, thisArg):用于对集合成员执行callbackFn操作
Map
- 本质上是键值对的集合,类似集合
- 可以遍历,方法很多可以跟各种数据格式转换
Set 和 Map 主要的应用场景在于 数据重组 和 数据储存
Set 是一种叫做集合的数据结构,Map 是一种叫做字典的数据结构
Map 的属性及方法
属性:
- constructor:构造函数
- size:返回字典中所包含的元素个数
代码如下:
const map = new Map([ ['name', 'web'], ['des', 'JS']]);
map.size // 2
操作方法
- set(key, value):向字典中添加新元素
- get(key):通过键查找特定的数值并返回
- has(key):判断字典中是否存在键key
- delete(key):通过键 key 从字典中移除对应的数据
- clear():将这个字典中的所有元素删除
遍历方法
- Keys():将字典中包含的所有键名以迭代器形式返回
- values():将字典中包含的所有数值以迭代器形式返回
- entries():返回所有成员的迭代器
- forEach():遍历字典的所有成员
字典(Map)
集合 与 字典 的区别:
- 共同点:集合、字典 可以储存不重复的值
- 不同点:集合 是以 [value, value]的形式储存元素,字典 是以 [key, value] 的形式储存