前言
仅将自己的理解做整理、归类并结合实际遇到的问题做记录，更推荐阅读 ECMAScript 6 入门。
扩展篇
数组的扩展
- 解构赋值
“ES6 中允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构（Destructuring）”
作用：可以快速取得数组或对象当中的元素或属性，而无需使用arr[x]或者obj[key]等传统方式进行赋值
let [a,b,c] = [1,2,3];
- 扩展运算符
“扩展运算符是三个点，它如同rest参数的逆运算，将一个数组转为用逗号分隔的参数序列”
作用：把数组或类数组对象展开成一系列用逗号隔开的值
console.log(...[1,2,3])
//1 2 3
console.log([1,2,3].join())
//1,2,3
console.log(typeof(...[1,2,3]))
//Uncaught SyntaxError: Unexpected token ...
console.log(typeof([1,2,3].join()))
//string
* 为什么typeof(...[1,2,3])报错Uncaught SyntaxError: Unexpected token ...？？？
常用
let [head,...tail] = [1,2,3,4]; //head:1,tail:[2,3,4]
let colors = ["red","green","blue"];
let [...cloneColors] = colors;
console.log(cloneColors) //["red", "green", "blue"]
1.将数组转为函数的参数，替代 apply 方法
Math.max.apply(null,[14,3,77])//ES5
Math.max(...[14,3,77])//ES6
2.合并数组
var arr1=['a','b']
var arr2=['c','d']
console.log(arr1.concat(arr2))//ES5
console.log([...arr1,...arr2])//ES6
- Array.from()
“Array.from方法用于将两类对象转成真正的数组”
- Array.of()
“Array.of方法用于将一组值转换为数组”
常用
console.log(Array.of(3,11,8))//[3, 11, 8]
- copyWithin()
复制替换数据
Array.prototype.copyWithin(target,start=0,end=this.length)
target:必选，从该位置开始替换 start：替换内容的起点 end：到该位置前停止读取
console.log([1,2,3,4,5].copyWithin(0,3,4))//[4, 2, 3, 4, 5]
console.log(['a','b','c'].copyWithin(0,1,3))//["b", "c", "c"]
- etc. find()、fill()、entries()、keys()、values()、includes、数组的空位（非重点关注）
对象的扩展
- 属性简洁表示、属性名表达式、方法的name属性、Object.is()、Object.assign():’合并对象-浅复制’、属性可枚举性
- 遍历对象的属性
1.for…in
2.Object.keys()
var obj = { 0: 'a', 1: 'b', 2: 'c' };
console.log(Object.keys(obj)); // console: ['0', '1', '2']
- 对象的解构赋值
对象的属性没有次序，变量必须与属性同名，才能取到正确的值
let { foo, bar } = { foo: "aaa", bar: "bbb" };
foo // "aaa"
bar // "bbb"
字符串的扩展
- 字符串遍历 for…of
console.log('foo'.split(''))//["f", "o", "o"]//ES5
for(let codePoint of 'foo'){
console.log(codePoint)//'f',"o","o"//ES6
}
- 返回字符串给定位置的字符at()
console.log('lallallal'.indexOf('a'))//1 Number//ES5
console.log('lallallal'.charAt('a'))//1 String//ES6
- includes():是否找到参数字符串、startsWith()/endswith():参数字符串是否在源字符串头/尾部…
函数的扩展
- 函数参数的默认值
function log(x,y='world'){
console.log(x,y)
}
log('moximoxi')//moximoxi world
- rest参数(…变量名)
function test(...values){
console.log(values)
for(var val of values){
console.log(val)
}//for...of可以不仅可以遍历字符串，还可以遍历数组 ES6
}
test(1,2,3)//[1, 2, 3]
- name属性
name属性：function foo(){} foo.name//"foo"
- 箭头函数 →→→
函数名=参=>返回值
- 尾调用、尾递归
某个函数的最后一步是调用另一个函数
正则的扩展
数值的扩展
承诺篇
Promise
from MDN:
var promise1 = new Promise(function(resolve, reject) {
setTimeout(function() {
resolve('foo');
}, 300);
});
promise1.then(function(value) {
console.log(value);
// expected output: "foo"
});
console.log(promise1);
// expected output: [object Promise]
Generator
from CSDN:
function* helloGenerator() {
console.log("this is generator");
}
var h = helloGenerator();
h.next();
function* helloGenerator() {
yield "hello";
yield "generator";
return;
}
var h = helloGenerator();
console.log(h.next());//{ value: 'hello', done: false }
console.log(h.next());//{ value: 'generator', done: false }
console.log(h.next());//{ value: 'undefined', done: true }
yield实际就是暂缓执行的标示，每执行一次next()，相当于指针移动到下一个yield位置。
总结一下，Generator函数是ES6提供的一种异步编程解决方案。通过yield标识位和next()方法调用，实现函数的分段执行。
async
迭代器=>Generator=>async
1.迭代器：不暴露对象的内部表示的情况下，能够遍历整个元素
遍历 ~ Traverse 访问一个集合(广义)的每个元素
迭代 ~ Iterate 反复调用同一个过程最终达成目的（迭代是循环的一种方式），这个过程如果是一个函数，那就是递归，如果是一个循环体，那就是狭义上的迭代。递归和迭代之间的关系、转换、优化等等又是另一个故事了。
function makeIterator (arr) {
let nextIndex = 0;
//返回一个迭代器方法
return {
next: () => {
if(nextIndex < arr.length){
return {value: arr[nextIndex++], done: false}
}else{
return {done: true}
}
}
}
}
const it = makeIterator([1,2,3]);
console.log('1:', it.next());
console.log('2:', it.next());
console.log('3:', it.next());
console.log('end:', it.next());
2.Generator函数执行后会返回一个迭代器
3.async函数是Generator的语法糖
async 函数返回一个Promise对象，可以使用 then 方法添加回调函数
实际遇到
(function(){
let pro=new Promise((resolve,reject)=>{
resolve(true)
})
console.log(pro)//promise对象
})()
(async function(){
let pro=await new Promise((resolve,reject)=>{
resolve(true)
})
console.log(pro)//true
//（async函数的返回值是一个promise对象;waite命令后面是一个Promise对象，如果不是，会被转成一个立即resolve的Promise对象）
})()
数据结构篇
Set、Map
- Set
Set 是成员值唯一的数据结构，类似于数组 Array
所以，有一种重要且好用的去重方法：
var set1 = Array.from(new Set([1,1,2,2,33,'aa','aa','bb'
]))
console.log(set1)//[1, 2, 33, "aa", "bb"]
或:
var set1 = [...new Set([1,1,2,2,33,'aa','aa','bb'
])]
console.log(set1)//[1, 2, 33, "aa", "bb"]
常用
Set 实例的方法分为两大类：操作方法（用于操作数据）、遍历方法（用于遍历成员）
分类 | 方法 |
操作方法 | Set.prototype.add(value)：添加某个值，返回 Set 结构本身 Set.prototype.delete(value)：删除某个值，返回一个布尔值，表示删除是否成功。 Set.prototype.has(value)：返回一个布尔值，表示该值是否为Set的成员。 Set.prototype.clear()：清除所有成员，没有返回值。 |
遍历方法 | Set.prototype.keys()：返回键名的遍历器 Set.prototype.values()：返回键值的遍历器 Set.prototype.entries()：返回键值对的遍历器 Set.prototype.forEach()：使用回调函数遍历每个成员 |
- Map
Map 是可以用非字符串当作键的键值对数据结构，类似于对象 Object
Map 结构提供了“值—值”的对应，是一种更完善的 Hash 结构实现。
常用
Map 实例的方法分为两大类：操作方法（用于操作数据）、遍历方法（用于遍历成员）
分类 | 方法 |
操作方法 | Map.prototype.set(key, value)：设置 Map.prototype.get(key)：获取 Map.prototype.has(key)：判断存在 Map.prototype.delete(key)：删除 Map.prototype.clear()：清除 |
遍历方法 | Map.prototype.keys()：返回键名的遍历器。 Map.prototype.values()：返回键值的遍历器。 Map.prototype.entries()：返回所有成员的遍历器。 Map.prototype.forEach()：遍历 Map 的所有成员。 |
## Proxy、Reflect |
- Proxy
Proxy 用于修改某些操作的默认行为，等同于在语言层面做出修改，所以属于一种“元编程”（meta programming），即对编程语言进行编程。
Proxy 可以理解成，在目标对象之前架设一层“拦截”，外界对该对象的访问，都必须先通过这层拦截，因此提供了一种机制，可以对外界的访问进行过滤和改写。Proxy 这个词的原意是代理，用在这里表示由它来“代理”某些操作，可以译为“代理器”。
Proxy就是对象的拦截器
典例：set()方法：用validator拦截person.age的创建；
let validator = {
set: function(obj, prop, value) {
if (prop === 'age') {
if (!Number.isInteger(value)) {
throw new TypeError('The age is not an integer');
}
if (value > 200) {
throw new RangeError('The age seems invalid');
}
}
// 对于满足条件的 age 属性以及其他属性，直接保存
obj[prop] = value;
}
};
let person = new Proxy({}, validator);
person.age = 100;
person.age // 100
person.age = 'young' // The age is not an integer
person.age = 300 // The age seems invalid
- Reflect
将Object对象的一些明显属于语言内部的方法（比如Object.defineProperty），放到Reflect对象上。
为了修改某些Object方法的返回结果，让其变得更合理。
例:用defineProperty，不抛出错误，返回false：
// 老写法
try {
Object.defineProperty(target, property, attributes);
// success
} catch (e) {
// failure
}
// 新写法
if (Reflect.defineProperty(target, property, attributes)) {
// success
} else {
// failure
}
重点食用：使用 Proxy 实现观察者模式
观察者模式（Observer mode）指的是函数自动观察数据对象，一旦对象有变化，函数就会自动执行。
const person = observable({
name: '张三',
age: 20
});
function print() {
console.log(`${person.name}, ${person.age}`)
}
observe(print);
person.name = '李四';
// 输出
// 李四, 20
上面代码中，数据对象person是观察目标，函数print是观察者。一旦数据对象发生变化，print就会自动执行。
下面，使用 Proxy 写一个观察者模式的最简单实现，即实现observable和observe这两个函数。 思路是observable函数返回一个原始对象的 Proxy 代理，拦截赋值操作，触发充当观察者的各个函数。
const queuedObservers = new Set();
const observe = fn => queuedObservers.add(fn);
const observable = obj => new Proxy(obj, {set});
function set(target, key, value, receiver) {
const result = Reflect.set(target, key, value, receiver);
queuedObservers.forEach(observer => observer());
return result;
}
上面代码中，先定义了一个Set集合，所有观察者函数都放进这个集合。 然后，observable函数返回原始对象的代理，拦截赋值操作。拦截函数set之中，会自动执行所有观察者。
lterator和for…of循环
Iterator 的作用有三个：一是为各种数据结构，提供一个统一的、简便的访问接口；二是使得数据结构的成员能够按某种次序排列；三是 ES6 创造了一种新的遍历命令for…of循环，Iterator 接口主要供for…of消费。
lterator有点难理解了 传送门 结合迭代器、生成器理解
默认调用 Iterator 接口（即Symbol.iterator方法）的场合:
（1）解构赋值
对数组和 Set 结构进行解构赋值时，会默认调用Symbol.iterator方法。
let set = new Set().add('a').add('b').add('c');
let [x,y] = set;
// x='a'; y='b'
let [first, ...rest] = set;
// first='a'; rest=['b','c'];
（2）扩展运算符
扩展运算符（…）也会调用默认的 Iterator 接口。
// 例一
var str = 'hello';
[...str] // ['h','e','l','l','o']
// 例二
let arr = ['b', 'c'];
['a', ...arr, 'd']
// ['a', 'b', 'c', 'd']
上面代码的扩展运算符内部就调用 Iterator 接口。
实际上，这提供了一种简便机制，可以将任何部署了 Iterator 接口的数据结构，转为数组。也就是说，只要某个数据结构部署了 Iterator 接口，就可以对它使用扩展运算符，将其转为数组。
let arr = [...iterable];
（3）yield*
yield*后面跟的是一个可遍历的结构，它会调用该结构的遍历器接口。
let generator = function* () {
yield 1;
yield* [2,3,4];
yield 5;
};
var iterator = generator();
iterator.next() // { value: 1, done: false }
iterator.next() // { value: 2, done: false }
iterator.next() // { value: 3, done: false }
iterator.next() // { value: 4, done: false }
iterator.next() // { value: 5, done: false }
iterator.next() // { value: undefined, done: true }
（4）其他场合
由于数组的遍历会调用遍历器接口，所以任何接受数组作为参数的场合，其实都调用了遍历器接口。下面是一些例子。
for...of
Array.from()
Map(), Set(), WeakMap(), WeakSet()（比如new Map([['a',1],['b',2]])）
Promise.all()
Promise.race()
模块化篇
Class
ES6 的class可以看作只是一个语法糖，它的绝大部分功能，ES5 都可以做到，新的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。
∴ JS实现继承还是通过原型链的方式！
ES5:
function Point(x, y) {
this.x = x;
this.y = y;
}
Point.prototype.toString = function () {
return '(' + this.x + ', ' + this.y + ')';
};
var p = new Point(1, 2);
ES6:
class Point {
constructor(x, y) {
this.x = x;
this.y = y;
}
toString() {
return '(' + this.x + ', ' + this.y + ')';
}
}
Modlule
ES6 模块的设计思想是尽量的静态化，使得编译时就能确定模块的依赖关系，以及输入和输出的变量。CommonJS 和 AMD 模块，都只能在运行时确定这些东西。比如，CommonJS 模块就是对象，输入时必须查找对象属性。
ES6 模块不是对象，而是通过export命令显式指定输出的代码，再通过import命令输入。
// circle.js
export function area(radius) {
return Math.PI * radius * radius;
}
export function circumference(radius) {
return 2 * Math.PI * radius;
}
// main.js
import { area, circumference } from './circle';
console.log('圆面积：' + area(4));
console.log('圆周长：' + circumference(14));
编程风格的变化
（1） let 取代 var
（2） 在let和const之间，建议优先使用const，尤其是在全局环境，不应该设置变量，只应设置常量。
（3） 静态字符串一律使用单引号或反引号，不使用双引号。动态字符串使用反引号。
// bad
const a = "foobar";
const b = 'foo' + a + 'bar';
// acceptable
const c = `foobar`;
// good
const a = 'foobar';
const b = `foo${a}bar`;
（4） 善用解构赋值⭐
（5） 对象尽量静态化，一旦定义，就不得随意添加新的属性。如果添加属性不可避免，要使用Object.assign方法。
// bad
const a = {};
a.x = 3;
// if reshape unavoidable
const a = {};
Object.assign(a, { x: 3 });
// good
const a = { x: null };
a.x = 3;
（6） 使用扩展运算符（…）拷贝数组。⭐
// bad
const len = items.length;
const itemsCopy = [];
let i;
for (i = 0; i < len; i++) {
itemsCopy[i] = items[i];
}
// good
const itemsCopy = [...items];
（7）立即执行函数可以写成箭头函数的形式
(() => {
console.log('Welcome to the Internet.');
})();
（8）善用Map⭐
（9）Module 语法是 JavaScript 模块的标准写法，坚持使用这种写法。使用import取代require。
（10）ESLint
我是掘金安东尼： 一名人气前端技术博主（文章 100w+ 阅读量）
终身写作者（INFP 写作人格）
坚持与热爱（简书打卡 1000 日）
我能陪你一起度过漫长技术岁月吗（以梦为马）
觉得不错，给个点赞和关注吧（这是我最大的动力 ）b(￣▽￣)d
© 版权声明
文章版权归作者所有，未经允许请勿转载。
