学习ES6

2016-10-02

摘要：学习 ES6 笔记

0.兼容性

现在的浏览器对ES6的兼容性都不太好，要想正常的使用就必须先处理下浏览器的兼容性。
首先要使用npm安装babel，安装5.x版本的 babel-core 模块获取（这样也只是部分支持，但从 Babel 6.0开始，不再直接提供浏览器版本，而是要用构建工具构建出来）

1	npm install babel-core@5

然后找到 babel-core 下的 browser.js 或 browser.min.js 和 browser-polyfill.js 或 browser-polyfill.min.js，将两者引入。前者提供将 es6 转为浏览器能识别的语法，后者提供修补浏览器的功能。
最后将<script>标签的type改为”text/babel”

<script src="node_modules/babel-core/browser.min.js"></script>
<script src="node_modules/babel-core/browser-polyfill.min.js"></script>
<script type="text/babel">
  let test = "hello world";
  alert(test);
</script>

使用构建工具构建的话请看Babel 入门教程

1.声明变量 let

let用于声明块级变量，只在自己的块中有效。
var的不足：
1.for循环中的变量i会影响各个块中i的值
2.变量提升
注意：
1.同一个块级作用域内不能重复声明同一个变量
2.函数内不能使用 let 重新声明函数的参数

1
2
3

function say(argument) {
  let argument = "hello world" // 重新声明会报错
}

3.let适合for循环，只在块级域作用，无变量提升

2.声明常量 const

特点：
1.不可修改
2.只在块级域作用
3.无变量提升，先声明，后使用
4.不可重复声明同一个变量
5.声明必须赋值

const name; // 报错，必须赋值
const name = "hello";
name = "world"; // 报错，不可修改
var name = "hi"; // 报错，不可重复声明

注意：如果常量是一个对象，使用传址赋值，保存的是数据地址

const Person = {
  "name" : "hello"
}
Person.age = 2016;
Person.name = "world";
console.log(Person); // {name: "world", age: 2016}
Person = {}; // 赋新的地址报错，地址不可修改

房子随便整修，但门牌号不可改变

3.字符串 String

模板字符串，用于字符串拼接，用反引号包裹，变量在${}中

let name = "小王";
let age = 24;
let str = `${name}今年${age}岁`;
console.log(str) // 小王今年24岁

注意：
1.可定义多行字符串，可直接换行，但原样输出（换行、空格和缩进都会输出）
2.${}中可以放任意的js表达式、对象的属性、函数的调用

标签模板，函数调用的一种特殊形式，模板字符串相当于它的参数。标签模板=标签函数+模板字符串

let name = "小王";
let age = 24;
function strFn(arr, var1, var2) {
  console.log(arr); // ["","今年","岁"]
  console.log(var1); // 小王
  console.log(var2); // 24
}

由此可以看出：第一个参数是除去变量之外的内容组成的数组，并且该数组是由变量切割、按顺序组成的；后面的参数则是一次对应模板字符串中的变量。

repeat：将字符串重复几次，返回一个新的字符串，不影响目标字符串。

let strA = "hello";
let strB = strA.repeat(2);
console.log(strA); // hello
console.log(strB); // hellohello

includes：判断字符串中是否包含指定的子字符串，返回布尔值，true 表示有，false 表示无。可以有两个参数，第一个为子字符串，第二个选填，表示开始搜索的位置（索引）

let strC = "helloworld";
strC.includes("hello"); // true
strC.includes("helow"); // false
strC.includes("ellow", 2); // false
strC.includes("llowo", 2); // true

startsWith：判断指定的子字符串是否出现在字符串的开头位置，返回布尔值，true 表示是，false 表示否。可以有两个参数，第一个为子字符串，第二个选填，表示开始搜索的位置（索引）

let strC = "helloworld";
strC.startsWith("hello"); // true
strC.startsWith("ellow", 1); // true
strC.startsWith("ellow", 2); // false

endsWith：判断指定的子字符串是否出现在字符串的末端，返回布尔值，true 表示是，false 表示否。可以有两个参数，第一个为子字符串，第二个选填，表示针对前几个字符

let strC = "helloworld";
strC.endsWith("world"); // true
strC.endsWith("hello", 5); // true
strC.endsWith("hello", 6); // false

codePointAt：能正确识别4个字节的字符（Unicode 码点大于0xFFFF的字符），并正确返回码点的十进制数，charAt 只能识别2个字节的字符
String.fromCodePoint：能根据码点返回对应的字符，可以识别 Unicode 码点大于0xFFFF的字符，如果有多个参数传入，则它们会被合并成一个字符串返回。String.fromCharCode 方法只识别2个字节的码点

let str4 = "𠮷";
let strCode0 = str4.codePointAt();
let str4_0 = String.fromCodePoint(strCode0, strCode0, strCode0);
console.log(strCode0) // 134071
console.log(str4_0) // 𠮷𠮷𠮷

String.raw：不加工，原样输出

let strC = `helloworld\nhelloworld`;
let strD = String.raw`helloworld\nhelloworld`;
console.log(strC)
console.log(strD)

blog4

4.Number 对象

Number.isNaN：判断是否为非数值，只针对数值型有效，非数值型一律返回 false。也就是说：返回 false 的可能是数值或非 Number 类型的值。传统的 isNAN 会先试着将参数转化成数值型在判断，而 Number.isNaN 则不转化直接判断。

Number.isNaN(1); // false
Number.isNaN(NaN); // true
Number.isNaN("abc"); // false
Number.isNaN("abc"); // true
Number.isNaN("1"); // false
Number.isNaN("1"); // false

Number.isFinite：判断是否为非无穷，即有穷。也是只针对数值型有效，非数值型一律 false。

1
2
3

Number.isFinite(1); // true
Number.isFinite(Infinity); // 无穷大，false
Number.isFinite("1"); // false

Number.parseInt：返回一个整数，如果参数是字符串，会先转化解析字符串再返回一个整数

1 2	Number.parseInt(12.3); // 12 Number.parseInt("12.3abc"); // 12

Number.parseFloat：与 Number.parseInt 相似，但它返回一个浮点数

1	Number.parseFloat("12.3abc"); // 12.3

Number.isInteger：判断数否为整数，如果参数是小数点后都是0的浮点数也会被认为是整数。

1 2	Number.isInteger(1.1); // false Number.isInteger(1.0); // true

Number.EPSILON：定义了一个极小数值的常量，用来判断浮点数的计算误差
Number.MAX_SAFE_INTEGER：安全整数的最大值
Number.MIN_SAFE_INTEGER：安全整数的最小值
Number.isSafeInteger：判断是否在安全范围内（-2^53到2^53)，超过这个范围 JavaScript 就无法精确表示

1 2	Number.isSafeInteger(Number.MAX_SAFE_INTEGER); // true Number.isSafeInteger(Number.MAX_SAFE_INTEGER + 1); // false

5.Math对象

Math.trunc：截取一个数的整数部分并返回

1 2	Math.trunc(3.22); // 3 Math.trunc(3.88); // 3

Math.sign：判断一个数是正数、负数还是零。正数返回1，负数返回-1，零就返回0，非数值返回 NaN

Math.sign(-3); // -1
Math.sign(-0); // -0
Math.sign(0); // 0
Math.sign(+0); // 0
Math.sign(3); // 1
Math.sign("-3"); // -1
Math.sign("3"); // 1
Math.sign("-3a"); // NaN
Math.sign("3a"); // NaN

6.Array数组

Array.of：可以将一组值转换成数组

1	Array.of(1,2,3); // [1,2,3]

Array.from：可以将类似数组的对象或可遍历的对象还有字符串转换成真正的数组,只要是部署了 Iterator 接口的数据结构，Array.from 都能将其转为数组。

Array.from("abc"); // ["a","b","c"]
let arrayLike = { //类似数组的对象
  '0': 'a',
  '1': 'b',
  '2': 'c',
  length: 3
};
Array.from(arrayLike); // ['a', 'b', 'c']
let allP = document.querySelectorAll('p');
Array.from(allP).forEach(function (p) {
  console.log(p);
});

find：找出数组中符合条件的第一个元素，如果都不符合返回 undefind，其参数是一个匿名函数

let arrA = [1, 2, 3];
arrA.find(function (v) {
  return v > 1;
}) // 2
arrA.find(function (v) {
  return v > 3;
}) // undefind

findIndex：找出数组中符合条件的第一个成员的位置（索引），如果都不符合返回-1，其参数是一个匿名函数

let arrA = [1, 2, 3];
arrA.findIndex(function (v) {
  return v > 1;
}) // 1
arrA.findIndex(function (v) {
  return v > 3;
}) // -1

fill(n[,start[,end]]):使用指定的值n填充数组，start 是开始位置索引，end 是截止到该索引之前（不包含该元素）,end省略表示包含 start 之后的所有元素

let arrB = [1, 2, 3, 4, 5];
arrB.fill(6); // [6, 6, 6, 6, 6]
arrB.fill(6, 1); // [1, 6, 6, 6, 6]
arrB.fill(6, 1, 3); // [1, 6, 6, 4, 5]

keys：对数组的键名进行遍历
values：对数组的键值进行遍历
entrise：对数组的键值对进行遍历
三者均返回一个遍历器，可以用 for…of 对其进行遍历

for (let i of ['a', 'b'].keys()) {
  console.log(i)
}
// 0
// 1
for (let v of ['a', 'b'].value()) {
  console.log(v)
}
// a
// b
for (let [i, v] of ['a', 'b'].entries()) {
  console.log(i, v);
}
// 0 "a"
// 1 "b"

数组推导：通过简洁的语法操作现有的数组生成新数组

let arrA = [1, 2, 3];
let arrC = [for (i of arrA) i * 2];
// [2,4,6]
// for...of中可以加上 if 语句，用来设定循环的限制条件
let arrD = [for (i of arrA) if (i > 2) i * 2]; // 限定数组中值大于2的乘以2生成新数组
// [6]

7.函数

很多情况下我们要给函数的参数指定一个默认值
传统写法使用运算符“||”来操作：如果第一项为 true 直接返回第一项，否则返回第二项

function person(n, a) {
  let name = n || "xiaowang";
  let age = a || 24;
}

但这种写法有缺陷：参数对应的布尔值不能是 false（比如：数字0、空字符串），否则依然会使用默认值。ES6 带来一种新方式：

function person(name = "xiaowang", age = 24) {
  console.log(name, age)
}
person(); //xiaowang 24
person("dagang", 34); // dagang 34

注意：
1.只有当传入的参数为 undefined 时才会触发默认值，而0、false、null 都不会触发默认值
2.函数参数是默认声明的，函数内部再声明会报错（声明变量名不能与形参一样）
3.设定默认值的参数一定要放在最后，有默认值的参数后面不能再跟不需默认值的参数

person(undefined, 0); // xiaowang 0
person(false, null); // false null

function person(age = 24) {
  let age = 34; // 错误
}

function person(name, age = 24) { // 正确
  console.log(name, age)
}
function person(age = 24, name) { // 错误
  console.log(name, age)
}

rest参数
rest参数(形式：“…变量名”)用在函数上就代表是获取函数剩下部分的参数，这样就不需要使用 arguments 对象了。变量是一个数组，将多余的参数都存到数组中

function Sum(...val) { // 求和
  let sum = 0;
  console.log(...val); // 1 2 3 4
  for (var v of val) {
    sum += v;
  }
  console.log(sum); // 10
}
Sum(1, 2, 3, 4);

注意：rest参数必须是函数的最后一个参数，后面不能再有其他参数

1 2	function success(name,age,...val){} // 正确 function error(name,...val,age){} // 错误

扩展运算符
扩展运算符即三个点（…）,它一般结合数组使用，把数组的元素用逗号分开，将一个数组转成一个对应的参数序列

let arrA = [1,2,3];
function sum(a,b,c){
  console.log(a+b+c)
}
sum(...arrA); // 6

箭头函数
箭头函数是一种全新的定义函数的方式，使用箭头符号（=>）

// 两种写法是等价的
var sum = function(a){
  return a;
}
var sum = a => a

=>之前的 a 代表传进去的参数，之后的 a 表示函数体，传多个参数时

1
2
3

let arrA = [1,2,3];
var sum = (a,b,c) => {return a+b+c}
sum(...arrA); // 6

由此看出：如果参数不止一个时，要用小括号()括起来；函数体语句不止一条时，要用大括号{}括起来
还有一点，箭头函数中的 this 指向的是定义时的 this，而不是执行时的 this

window.id = 2;
function arrow() {
  setTimeout(() => { // 箭头函数
    console.log(this.id);
  }, 100);
}
function ordinary() {
  setTimeout(function () { // 普通函数
    console.log(this.id);
  }, 100);
}
arrow.call({ id: 1 }); // 1
ordinary.call({ id: 1 }); // 2

8.Object对象

ES6 中对象有更简便的表示方法：变量名就可以表示属性，一起组成对象的内容

var name = "xiaowang";
var personA = { // 传统表示法
  "name": name,
  say: function () {
    console.log(this.name)
  }
}
// 等同于
var personB = { // ES6表示法
  name,
  say() {
    console.log(this.name)
  }
}
person.say(); // xiaowang

对象的属性名还可以是表达式

var a = "java";
var b = "script";
var c = "love";
var d = "you";
var person = {
  [a + b]: "I love you",
  [c + d]() {
    return "I love you too";
  }
}
console.log(person.javascript); // I love you
console.log(person.loveyou()); // I love you too

Object.is：比较两个值是否严格相等（全等：变量类型和值都一样）

var strA = "123";
var numA = 123;
var numB = 123;
Object.is(strA,numA) // false
Object.is(numA,numB) // true

Object.assign：将后面对象的属性赋值到第一个对象上，如果属性名有相同的，后面的属性值覆盖前面的属性值（浅拷贝）

var first = {"a":1};
var second = {"a":2,"b":2};
var third = {"a":3,"c":3};
Object.assign(first,second,third);
console.log(first); // {a: 3, b: 2, c: 3}

Object.getPrototypeOf：获取一个对象的 prototype 属性和方法
Object.setPrototypeOf：设置一个对象的 prototype 属性和方法

Object.getPrototypeOf(object);
Object.setPrototypeOf(
  object,
  {say(){console.log("hi");}}
)

9.解构赋值

ES6允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构（Destructuring）

数组的解构赋值
传统的变量赋值

var arrA = [1, 2, 3];
var a = arrA[0]; // 1
var b = arrA[1]; // 2
var c = arrA[3]; // 3

使用解构赋值

var [a, b, c] = [1, 2, 3];
console.log(a); // 1
console.log(b); // 2
console.log(c); // 3

将变量作为一个数组的元素后直接赋值
注意：
1.解构赋值可以嵌套

1
2
3

var [a, b, [c1, c2]] = [1, 2, [3.1, 3.2]];
console.log(c1); // 3.1
console.log(c2); // 3.2

2.不完全解构,即等号左边的模式，只匹配一部分的等号右边的数组。这种情况下，解构依然可以成功

1
2
3

let [x, y] = [1, 2, 3];
let [a, [b], c] = [1, [2, 3], 4];
console.log(x, y, a, b, c); // 1 2 1 2 4

3.解构不成功,变量的值就等于undefined

1
2
3

var [x] = [];
var [a, b] = [1];
console.log(x, a, b); // undefined 1 undefined

4.允许设置默认值, 但如果有新的赋值时会覆盖默认值（undefined 不会覆盖默认值）

var [a, b, c = 3] = [1, 2];
console.log(a, b, c); // 1 2 3
var [x, y, z = 3] = [1, 2, 4];
console.log(x, y, z); // 1 2 4
var [n = 3] = [undefined];
console.log(n); // 3

对象的解构赋值
对象的解构赋值不受排列次序影响（数组则会受影响），变量名和属性名相同的赋值成功，也可以嵌套、设置默认值

var { a, b, c } = { "a": 1, "b": 2, "c": 3 };
console.log(a, b, c); // 1 2 3
var { x, y, z } = { "x": 1, "z": 3, "y": 2 };
console.log(x, y, z); // 1 2 3

var { n: { m } } = { "n": { "m": 1 } };
console.log(m); // 1

var { p, q = 2 } = { "p": 1 };
console.log(p, q); // 1 2

给一个变量名与属性名不一样的变量解构赋值

1 2	var { a: b } = { "a": 1 }; console.log(b); // 1

字符串的解构赋值
字符串解构赋值时先被转换成一个类似数组的对象再分别赋值

1 2	var [a, b, c, d, e] = "hello"; console.log(a, b, c, d, e); // h e l l o

解构赋值的用途
1.交换变量的值, 不必引入第三个变量

var x = 1;
var y = 2;
[x, y] = [y, x];
console.log(x, y); // 2 1

2.提取函数返回的多个值。函数只能返回一个值，可以将多个值装入数组或对象中，用解构赋值快速提取

function demoA() {
  return { "a": 1, "b": 2 }
}
var { a, b } = demo();
console.log(a, b); // 1 2

3.定义函数的参数

function demoB({ a, b }) { // 只接收 a 和 b
  console.log(a, b); // 1 er 
}
demoB({ "a": 1, "b": "er", "c": 3 });

4.提取JSON数据

var data = {
  a: 1,
  b: "er",
  c: [1, 2]
};
var { a, b, c: d } = data;
console.log(a, b, d); // 1 er [1, 2]

5.设置函数参数的默认值

function demoC({ name = "xiaowang" }) {
  console.log(name)
}
demoC({}); // xiaowang
demoC({ name: "dagang" }); // dagang

10.Symbol

ES6 引入了一种新的原始数据类型Symbol，表示独一无二的值，用来解决对象的属性名冲突。即使参数一样，描述一样，得到的值也不相等，Symbol 永远是独一无二的值。Symbol接受参数，用于对实例值的描述。它是 JavaScript 语言的第七种数据类型，前六种是：Undefined（未定义）、Null（空值）、Boolean（布尔值）、String（字符串）、Number（数值）、Object（对象）

let smA = Symbol();
let smB = Symbol();
let smC = Symbol("smC");
console.log(smA); // Symbol()
console.log(typeof smA); // symbol
console.log(smA === smB); // false
console.log(smC); // Symbol(smC)

当 symbol 值作为对象属性名时一定要用中括号[]，不能用点运算取值,因为点运算符会使 js 把属性名理解为字符串类型而不是 symbol 类型

let name = Symbol();
let person = { [name]: "xiaowang" };
console.log(person[name]); // xiaowang
console.log(person.name); // undefined
person.name = "dagang";
console.log(person.name); // dagang
console.log(person["name"]); // dagang

注意：当symbol类型的值作为属性名时，该属性是不会出现在 for…in 和 for…of 中的，也不会被 Object.keys 获取到，这三种方法只能获取 String 类型的属性

获取symbol类型属性的方法：
1、Object.getOwnPropertySymbols：该方法会找到 symbol 类型的属性并返回一个数组，数组的成员就是 symbol 类型的 Symbol 值

let name = Symbol("name");
let age = Symbol("age");
let person = {
  [name]: "xiaowang",
  [age]: 24
};
console.log(Object.getOwnPropertySymbols(person)); // [Symbol(name), Symbol(age)]

2、Reflext.ownKeys：该函数返回一个数组，数组的内容就是对象的键名，包括 symbol 和 String 类型

let person = {
  [Symbol("name")]:"xiaowang",
  age:24
}
console.log(Reflext.ownKeys(person)); // [Symbol(name), "age"]

Symbol.for：根据参数名去全局环境中搜索是否有以该参数为名的 symbol 值，有就返回它，没有就以该参数名来创建一个新的symbol值。Symbol.for 创建的 symbol 值会被登记在全局环境中，而 Symbol 创建的则不可以

let sym = Symbol("name");
let symA = Symbol.for("name");
let symB = Symbol.for("name");
console.log(symA === sym); // false
console.log(symA === symB); // true

Symbol.keyFor：返回一个已经被登记在全局环境中的 symbol 值的 key，没有就报 undefined

1 2	let symA = Symbol.for("name"); console.log(Symbol.keyFor(symA)); // name

11.Proxy 代理

Proxy 可以理解成，在目标对象之前架设一层“拦截”，外界对该对象的访问，都必须先通过这层拦截，因此提供了一种机制，可以对外界的访问进行过滤和改写。
get：用于拦截某个属性的读取操作
set：用于拦截对对象的写操作
注意：要使得 Proxy 起作用，必须针对 Proxy 实例进行操作，而不是针对目标对象进行操作

var person = { "height": 180, "weight": 72 }; // 目标对象
var pro = new Proxy(person, {  // 创建Porxy代理实例
  get: function (target, property) { // 读取拦截 参数：对象，属性
    return target[property]; // 返回属性值
  },
  set: function (target, property, value) { // 写入拦截 参数：对象，属性，值
    if (value > 0) { // 判断是否大于0
      target[property] = value; // 修改属性值
    }
  }
})
console.log(pro.height, pro.weight); // 180 72
pro.height = 175;
pro.weight = -72;
console.log(pro.height, pro.weight); // 175 72

对象代理
ownKeys：拦截操作，拦截过滤 Object.ownKeys 对对象的属性遍历

let person = { "name": "xiaowang", "age": 24, "height": 180 };
let per = new Proxy(person, {
  ownKeys: function (target) {
    return ["name", "age"];
  }
})
Object.keys(person); // ["name", "age", "height"]
Object.keys(per); // ["name", "age"]

has：拦截操作，拦截 key in object 的操作，但不拦截 for…in，判断是否含有指定的键值对，返回一个布尔值

let person = { "name": "xiaowang", "age": 24 };
let pro = new Proxy(person, {
  has: function (target, prop) {
    if (target[prop] === undefined) {
      return false;
    }
    else {
      return true;
    }
  }
})
console.log("name" in pro); // true
console.log("height" in pro); // false

函数代理
apply：用于拦截函数

let fn = function () {
  console.log("hello")
}
let proxy = new Proxy(fn, {
  apply: function () {
    console.log("world")
  }
})
proxy(); // world

proxy 本身是一个代理实例对象，代理的是一个函数 fn，把它当做函数调用的时候就会被 apply 拦截。

取消代理
Proxy.revocable：方法返回一个对象，对象中含有一个 proxy 属性，它就是 Proxy 的代理实例对象；还有一个 revoke 方法，用于取消代理

let person = { "name": "xiaowang" };
let obj = Proxy.revocable(person, {
  get: function (target, prop) {
    return "dagang";
  }
})

console.log(obj.proxy.name); // dagang
obj.revoke();
console.log(obj.proxy.name); // 报错

12.遍历

传统的遍历都有各自的缺陷
1、使用 for 循环遍历数组就是代码不够简洁

1 2	var arr = [1, 2, 3]; for (let i = 0; i < arr.length; i++) { };

2、使用 forEach 遍历却又无法中断停止整个循环

1 2	var arr = [1, 2, 3]; arr.forEach(function (value, index) { });

3、for…in 循环用于对象的循环，如果用于数组遍历，则每次遍历得到的值是字符串类型

var arr = [1, 2, 3];
for (let i in arr) {
  console.log(typeof i, i); // string 0 string 1 string 2
}

新增的 for…of 循环与 for…in 相似，它的优势：
1.比 for 循环简洁
2.可以用 break 终止整个循环，或用 continute 跳出当前循环，继续后面的循环
3.结合 keys() 获得循环的索引，而且是数字类型，非字符串类型

var arr = [1, 2, 3, 4, 5];
for (let v of arr) {
  if (v === 2) {
    continue;
  }
  else if (v === 4) {
    break;
  }
  else {
    console.log(v);
  } // 1 3
}
for (let i of arr.keys()) {
  console.log(typeof i); // number*5
}

for…of 能遍历的对象有：数组、类数组对象、字符串、set 和 map 结构等具有 iterator 接口的数据结构。因为 Object 对象不具有 iterator 接口，所以不能直接使用 for…of 遍历 Object 对象

13.Iterator遍历器

当一个数据结构拥有一个叫Symbol.iterator的方法(Symbol 类型)就可以被 for…of 遍历。当用 for…of 遍历时，Symbol.iterator 方法就会被调用并返回一个 iterator 遍历器对象，然后就在遍历器上不断调用 next() 方法，直到 done 的值为 true 表示遍历结束。

let arr = [1, 2, 3];
let iterator = arr[Symbol.iterator]();
console.log(iterator.next()); // { value: 1, done: false }
console.log(iterator.next()); // { value: 2, done: false }
console.log(iterator.next()); // { value: 3, done: false }
console.log(iterator.next()); // { value: undefined, done: true }

加深理解：手动给一个普通的 Object 对象添加上类似的方法可以使其能够被 for…of 遍历

let obj = {
  0: "a",
  1: "b",
  2: "c",
  length: 3,
  [Symbol.iterator]: function () {
    let _this = this;
    let index = 0;
    return {
      next: () => {
        let value = _this[index];
        let done = (index >= _this.length);
        index++;
        return { value, done }
      }
    }
  }
};
for (let v of obj) {
  console.log(v); // a b c
}

14.Generator生成器

普通函数用function来声明，Generator 函数用function*声明，Generator 函数中还有新的关键字yield。Generator 函数被调用时，先返回一个生成器对象，然后暂停不动，等到生成器对象的 next() 方法被调用后，函数才会继续执行，直到遇到 yield 后又停止执行，并返回一个 Object 对象，等待 next() 调用，直到 done 等于 true
yield：Generator 函数可以有多个 yield，代表暂停执行，通过 next() 方法可以恢复执行

function* text() {
  yield `a`;
  yield `b`;
  yield `c`;
}
let gen = text(); // [object Generator]
gen.next(); // {value: "a", done: false}
gen.next(); // {value: "b", done: false}
gen.next(); // {value: "c", done: false}
gen.next(); // {value: undefined, done: true}

next() 方法还可以接受一个参数，它的参数会作为上一个 yield 的返回值

function* text() {
  let res = yield `hello`;
  yield res;
}
let ite = text();
ite.next(); // {value: "hello", done: false}
ite.next("world"); // {value: "world", done: false}

在一个 Generator 函数里调用里一个 Generator 函数，需要用到yield *，会按顺序将所有程序走完

function* gen1() {
  yield "genA";
  yield "genB";
}
function* gen() {
  yield "gen0";
  yield* gen1();
  yield* "gen2";
}
var ite = gen();
ite.next(); // {value: "gen0", done: false}
ite.next(); // {value: "genA", done: false}
ite.next(); // {value: "genB", done: false}
ite.next(); // {value: "gen2", done: false}
ite.next(); // {value: undefined, done: false}

15.Set

Set 可以理解为值的集合，但它的值不会有重复项，每个值都是唯一的
给Set对象添加值，用数组作为参数直接传入或使用 add() 方法来添加，而且Set结构会自动忽略相同的值，只会保留一个相同的值

var s1 = new Set([1, 2, 3]);
console.log(s1); // Set { 1, 2, 3 }
var s2 = new Set();
s2.add(1);
s2.add(2);
s2.add(3);
console.log(s2); // Set { 1, 2, 3 }
var s3 = new Set();
s3.add(1);
s3.add(1);
console.log(s3); // Set { 1 }

Set 对象的 size 属性会获取成员的个数

1 2	var s1 = new Set([1, 2, 3]); console.log(s1.size); // 3

delete：删除 Set 结构中指定的值，成功返回 true，失败返回 false

var s1 = new Set([1, 2, 3]);
console.log(s1.delete(1)); // true
console.log(s1.delete(4)); // false
console.log(s1); // Set { 2, 3 }

clear：清除所有成员

1
2
3

var s1 = new Set([1, 2, 3]);
s1.clear();
console.log(s1); // Set { }

has：判断是否含有指定的值，有就返回 true，没有就返回 false

1
2
3

var s1 = new Set([1, 2, 3]);
console.log(s1.has(1)); // true
console.log(s1.has(4)); // false

entries：返回一个键值对的遍历器，Set 结构的键名和键值是同一个值
keys：返回键名的遍历器
values：返回键值的遍历器

var s1 = new Set([1, 2, 3]);
console.log(s1.entries()); // SetIterator {[1, 1], [2, 2], [3, 3]}
console.log(s1.keys()); // SetIterator {1, 2, 3}
console.log(s1.values()); // SetIterator {1, 2, 3}

使用 for…of 遍历

var s1 = new Set([1, 2, 3]);
for (let [i, v] of s1.entries()) {
  console.log(i, v) // 1 1 2 2 3 3
}

forEach：遍历每一个成员

var s1 = new Set([1, 2, 3]);
s1.forEach(function (value, key) {
  console.log(value, key); // 1 1 2 2 3 3
})

Set 的用途之一，利用Set结构的成员值不能重复的特点来实现数组去重的效果

let arrA = [1, 2, 2, 3, 3, 3];
let s = new Set(arrA);
console.log(s); // Set {1, 2, 3}
var arrB = Array.from(s);
console.log(arrB); // [1, 2, 3]

16.WeakSet

WeakSet 与 Set 类似，WeakSet 结构同样不会存储重复的值，但它的成员必须是对象类型的值（严格来说是具有 iterable 接口的对象），而且 WeakSet 结构不可遍历（它的成员都是对象的弱引用，随时会被回收机制回收）
WeakSet结构提供了 add、delete、has 方法，作用与用法跟 Set 结构完全一致。但由于 WeakSet 结构不能遍历，就不会有 keys、values、entride、forEach 方法和 size 属性

let ws1 = new WeakSet([{ name: "xiaowang" }]);
console.log(ws1); // WeakSet {Object {name: "xiaowang"}}

var arrA = [1];
var arrB = [2];
let ws2 = new WeakSet([arrA, arrB]);
console.log(ws2); // WeakSet {[1], [2]}

let ws3 = new WeakSet([1, 2]);
console.log(ws3); // 报错

17.Map

Map 与 Object 对象类似，但Map的键名类型不在局限于字符串，可以是各种类型的值。如果想要在创建实例的同时进行初始化，可以将数组作为参数

let m = new Map([
  ["name", "xiaowuang"],
  ["age", 24]
]);
console.log(m); // Map {"name" => "xiaowuang", "age" => 24}

set：给实例设置一堆键值对，返回 map 实例,如果键名已经存在，那么后面的键值会覆盖前面的键值

let m = new Map();
m.set("name", "xiaowang"); // 字符串类型的键名
m.set({ "age": 24 }, 1)  // 对象类型的键名
m.set([1], 2); // 数组类型的键名
m.set(true, 3); // 布尔类型的键名
m.set(Symble("symble"), 4); // Symbol 类型的键名
m.set(null, 5); // null为键名
m.set(undefined, 6); // undefined 为键名
console.log(m);

blog5

size属性来获取实例的成员数
get：获得指定键名的键值，如果不存在就返回 undefined
delete：删除指定的键值对，成功返回 true，失败返回 false
clear：清除所有键值对
has：判断 Map 实例是否包含指定的键值对，有就返回 true，没有则返回 false

let m = new Map([["name", "xiaowang"], ["age", 24], ["height", 180]]);
console.log(m.get("name")); // xiaowang
console.log(m.get("weight")); // undefined
console.log(m.delete("age")); // true
console.log(m); // Map {"name" => "xiaowang", "height" => 180}
console.log(m.size); // 2
console.log(m.has("name")); // true
console.log(m.has("age")); // false
m.clear();
console.log(m); // Map { }

Map 结构可以被遍历
entries：返回实例的键值对遍历器
keys：返回实例所有键名的遍历器
values：返回实例所有键值的遍历器
forEach：遍历每一个键值对

let m = new Map([["name", "xiaoming"], ["age", 24]]);
for (let [key, value] of m.entries()) {
  console.log(key, value); // name xiaoming age 24
}
for (let key of m.keys()) {
  console.log(key); // name age
}
for (let value of m.values()) {
  console.log(value); // xiaoming 24
}
m.forEach(function (value, key) {
  console.log(key, value); // name xiaoming age 24
})

18.WeakMap

WeakMap 与 Map 结构很类似，不同点在于 WeakMap 的键名只支持数组、对象、函数这样的引用类型数据
WeakMap 也有 get、has、delete 方法，用法用途与Map一样，但不支持clear、keys、values、entries、forEach方法，也没有 size 属性

let wm = new WeakMap();
wm.set({ "name"}, "xiaowang");
wm.set(["age"], 24);
function height() { }
wm.set(height, 180);
console.log(wm); // WeakMap {["age"] => 24, function => 180, Object {name: "xiaowang"} => 1}

19.Promise对象

Pormise 对象是一个全局对象，用来解决回调地狱。promise 对象有三种状态：
1.pending:刚刚创建一个 Promise 实例，进行初始化
2.fulfilled:resolve 方法调用的时候，表示操作成功
3.rejected:reject 方法调用的时候，表示操作失败
状态只有两种变化：pending -> fulfilled,或pending -> rejected，没有其他情况

let promise = new Promise(function (resolve, reject) {
  if (/* 异步操作成功 */) {
    resolve(value);
  }
  else {
    reject(error);
  }
})

then：用于绑定处理操作后的处理程序，then 的两个参数是函数，第一个处理成功后的操作，第二个处理异常时的操作

promise.then(function(resolve){
  // 成功
},function(error){
  // 失败
})

catch：Promise专门处理异常操作的方法

1
2
3

promise.catch(function(error){
  // 异常时的操作
})

then和catch调用后都会返回promise对象，结合两者得到：

promise.then(function(resolve){
  // 成功
}).catch(function(error){
  // 失败
})

完整示例

let pro = new Promise(function (resolve, reject) {
  if (true) {
    resolve("成功");
  }
  else {
    reject("失败");
  }
})
pro.then(requestA).then(requestB).then(requestC).catch(rejectError);
function requestA() {
  console.log("请求A成功");
  return "下一步请求B"; // 使用return语句将需要的数据传递给下一个请求
}
function requestB(res) {
  console.log(res);
  console.log("请求B成功");
  return "下一步请求C";
}
function requestC(res) {
  console.log(res);
  console.log("请求C成功");
}
function rejectError() {
  console.log("请求失败");
}
// 请求A成功
// 下一步请求B
// 请求B成功
// 下一步请求C
// 请求C成功

Promise.all：其参数是一个由 Promise 实例对象组成的数组，当参数中的实例对象的状态都为 fulfilled (成功)时，该方法会有返回

let pro1 = new Promise(function (resolve) {
  resolve("pro1成功");
})
let pro2 = new Promise(function (resolve) {
  resolve("pro2成功");
})
Promise.all([pro1, pro2]).then(function (result) {
  console.log(result);
})
// [ "pro1成功", "pro2成功" ]

Promise.race：其参数是一个由 Promise 实例对象组成的数组，当参数中的实例对象有一个的状态发生变化（成功或失败），该方法就有返回

let pro1 = new Promise(function (resolve) {
  setTimeout(function () {
    resolve("pro1成功");
  }, 2000);
})
let pro2 = new Promise(function (resolve) {
  reject("pro2失败");
})
Promise.race([pro1, pro2]).then(function (result) {
  console.log(result);
})

20.Class（类）

本质：基于原型 prototype 的实现方式做了进一步的封装，实际上也是函数 function 和原型 prototype 实现
使用关键字 class 声明一个类，类名后面花括号{}里面的内容称为类体。构造方法 constructor 是一个类必需且唯一的方法，一个类体不能含有多个 constructor 构造方法。如果没有手动编写 constructor 构造方法，执行时会被加上一个默认的空的 constructor 方法

class People {
  constructor(name) {
    this.name = name;
  }
}

注意：先声明定义类，再创建实例；必须使用 new 来创建类的实例对象

class People {
  // 构造方法
  constructor(name) {
    // 属性
    this.name = name;
  }
  // 自定义方法
  getName() {
    return this.name + "同学";
  }
}
// 创建一个实例对象 xiaowang
let xiaowang = new People("xiaowang");
console.log(xiaowang.name); // xiaowang
console.log(xiaowang.getName()); // xiaowang同学

静态方法：直接使用类名即可访问的方法称为静态方法
静态方法的定义需要使用 static 关键字来标识，直接同过类名来调用（实例方法需要通过实例对象调用）

class People {
  // 构造方法
  constructor(name) {
    // 属性
    this.name = name;
  }
  // 静态方法
  static love(love1, love2) {
    return `${love1.name} and ${love2.name} are lovers`;
  }
}
let jack = new People("jack");
let rose = new People("rose");
console.log(People.love(jack, rose)); // jack and rose are lovers

类的继承：使用 extends 关键字来实现子类继承父类, 使用 super 来引用父类
使用 super 时要注意：
1.子类必须在 constructor 方法中调用 super 方法；
2.必须先调用 super() ，才可以使用 this, 否则报错

class People {
  constructor(name) {
    this.name = name;
  }
  say() {
    return "People"
  }
}
class Man extends People {
  constructor(name, sex) {
    // 调用super
    super(name);
    this.sex = sex;
  }
  getIntroduce() {
    // 先调用super再使用this
    return `${super.say()},name:${this.name},sex:${this.sex}`;
  }
}
let xiaowang = new Man("xiaowang", "male");
console.log(xiaowang.getIntroduce()); // People,name:xiaowang,sex:male

21.module模块

模块：对其他模块提供自己的属性或方法的文件。
导出Export：模块可以选择性的提供自己的属性和方法供其他模块使用
导入Import：模块可以根据需要引入其他模块提供的属性或方法供自己使用

// Export.js文件
export var name = "xiaowang"; // 导出变量name

// Import.js文件
import { name } from "./Export.js";
console.log(name); // xiaowang

批量导出：可以直观的看出模块提供了那些变量

// Export.js文件
var name = "xiaowang";
var age = 24;
var say = function () {
  console.log("hello world");
}
export { name, age, say }

批量导入：变量名字必须跟导出的一致才能准确获取，位置顺序无要求

// Import.js文件
import { name, age, say } from "./Export.js";
console.log(name, age); // xiaowang 24
say(); // hello world

有时候想要给导入的变量换个名字，可以使用关键字 as

1 2	import { name as wangname } from "./Export.js"; console.log(wangname); // xiaowang

整体导入：使用星号*将其它模块提供的所有属性和方法整体导入赋值给一个变量对象，使用点运算符来获取它的属性和方法

1
2
3

import * as obj from "./Export.js";
console.log(obj.name, obj.age); // xiaowang 24
obj.say(); // hello world

默认导出：每个模块支持导出一个没有名字的变量，使用关键语句 export default 来实现。导入时可以给这个匿名函数去任意的名字，并且不需要大括号{}包裹

// Export.js文件
export default function () {
  console.log("export default")
}

// Import.js文件
import default from "./Export.js"; // 取任意名为 default
default (); // export default

注意：声明的变量对外都是只读的，但如果导出的是对象类型的值则可以修改。如果导入不存在的变量，值为 undefined，不会报错

// Export.js文件
var person = { "name": "xiaowang" };
export { person }

// Import.js文件
import { person, age } form "./Export.js"
console.log(person.name); // xiaowang
person.name = "dagang";
console.log(person.name); // dagang
console.log(age); // undefined

ES6系列教程连载
 ECMAScript 6 入门