变量的解构赋值

在ES6中可以从数组和对象中提取值,对变量进行赋值,称为解构赋值。解构赋值就是只要等号两边的模式相同,左边的变量就会被对应赋值。

示例代码:

  1. let [x,y='b'] = ['a'];console.log(y); // b
  2. let [x,y='b'] = ['a', undefined];console.log(y); // b
  3. let [x,y='b'] = ['a', null];console.log(y); // null

解构赋值分类

  • 数组的解构赋值
  • 对象的解构赋值
  • 字符串的解构赋值
  • 数字以及布尔值的解构赋值
  • 函数参数的解构赋值

    解构赋值的情况

    两种情况:
  1. 完全解构
  2. 不完全解构

不完全解构代码如下:

  1. let [a = 1, b] = [];// a = 1, b = undefined

数组的解构赋值

代码如下:

  1. let [a, [b], d] = [1, [2, 3], 4];a // 1b // 2d // 4

解构赋值允许指定默认值。
代码如下:

  1. let [foo = true] = [];foo // true

在使用默认值的时候,应该注意undefined,因为undefined是不能赋值的。
代码如下:

  1. let [x = 1] = [undefined];x // 1 let [x = 1] = [null];x // null

对象解构
代码如下:

  1. let { bar, foo } = { foo: 'aaa', bar: 'bbb' };foo // "aaa"bar // "bbb" let { baz } = { foo: 'aaa', bar: 'bbb' };baz // undefined

通过解构,我们可以很容易的把对象的方法复制给变量。
代码如下:

  1. const { log } = console;log('hello') // hello

或者是:

  1. const { log:minelog } = console;minelog ('hello') // hello

当我们使用解构赋值的时候,需要注意声明变量的作用域问题:

  1. // 错误的写法let x;{x} = {x: 1}; // 正确的写法let x;
  2. ({x} = {x: 1});

数组中是一个特殊的对象

  1. let arr = [1, 2, 3];let {0 : first, [arr.length - 1] : last} = arr;first // 1last // 3

不完全解构

  1. let obj = {p: [{y: 'world'}] };let {p: [{ y }, x ] } = obj;// x = undefined// y = 'world'

剩余运算符

  1. let {a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40};// a = 10// b = 20// rest = {c: 30, d: 40}

解构默认值

  1. let {a = 10, b = 5} = {a: 3};// a = 3; b = 5;let {a: aa = 10, b: bb = 5} = {a: 3};// aa = 3; bb = 5;

字符串解构

字符串本身也是一个对象,有时候,可以当成一个数组解构
代码如下:

  1. const [a, b, c, d, e] = 'hello';a // "h"b // "e"c // "l"d // "l"e // "o"

当做一个对象解构

  1. let {length : len} = 'hello';len // 5

剩余运算符

  1. let [a, ...b] = [1, 2, 3];//a = 1//b = [2, 3]

函数参数的解构赋值

  1. function add([x, y]){ return x + y;} add([1, 2]); // 3

计算函数任意个参数之和:
代码:

  1. function sum(...num){
  2. var sumNum = 0;
  3. for(let i=0;i<num.length;i++){
  4. sumNum += parseInt(num[i])
  5. }
  6. console.log(sumNum)
  7. }

Generator

Generator是es6提供的一种异步编程解决方案,在语法上,可以把它理解为一个状态机,内部封装了多种状态。执行Generator,会生成并返回一个遍历器对象。返回的遍历器对象,可以依次遍历Generator函数的每一个状态。
Generator函数是一个普通的函数。
第一,function关键字与函数名之间有一个*号。
第二,函数体内使用yield表达式来遍历状态。
代码如下:

  1. function* newGenerator() {
  2. yield 'web';
  3. yield 'it';
  4. return 'ending';
  5. }

代码理解,执行Generator函数之后,并不会被立即执行,返回的也不是函数运行结果,而是一个指向内部状态的指针对象。使用遍历器对象的Next()方法,使指针移向下一个状态。每一次调用next()方法,内部指针就会从函数头部或上一次停下的地方开始执行,直到遇到下一个yield表达式位置。Generator是分段执行的,yield表达式是暂停执行的标志,而next()方法可以恢复执行。next()函数带参数,该参数作为上一次yield表达式的返回值,因为yield本身是没有返回值的。

简单数据类型

ES5中有5中简单数据类型,Undefined, Null, Boolean, Number, String

Set

  1. 成员不能重复
  2. 只有健值,没有健名,有点类似数组。
  3. 可以遍历,方法有add, delete,has

Set 实例属性

  1. constructor:构造函数
  2. size:元素数量

代码如下:

  1. let set = new Set([1, 2, 3, 2, 1])
  2. console.log(set.length) // undefined
  3. 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

  1. 本质上是键值对的集合,类似集合
  2. 可以遍历,方法很多可以跟各种数据格式转换

Set 和 Map 主要的应用场景在于 数据重组 和 数据储存
Set 是一种叫做集合的数据结构,Map 是一种叫做字典的数据结构

Map 的属性及方法

属性:

  1. constructor:构造函数
  2. size:返回字典中所包含的元素个数

代码如下:

  1. const map = new Map([ ['name', 'web'], ['des', 'JS']]);
  2. map.size // 2

操作方法

  • set(key, value):向字典中添加新元素
  • get(key):通过键查找特定的数值并返回
  • has(key):判断字典中是否存在键key
  • delete(key):通过键 key 从字典中移除对应的数据
  • clear():将这个字典中的所有元素删除

遍历方法

  • Keys():将字典中包含的所有键名以迭代器形式返回
  • values():将字典中包含的所有数值以迭代器形式返回
  • entries():返回所有成员的迭代器
  • forEach():遍历字典的所有成员

    字典(Map)

集合 与 字典 的区别:

  • 共同点:集合、字典 可以储存不重复的值
  • 不同点:集合 是以 [value, value]的形式储存元素,字典 是以 [key, value] 的形式储存