ECMAScript是一种由Ecma国际(前身为欧洲计算机制造商协会,European Computer Manufacturers Association)通过ECMA-262标准化的脚本程序设计语言。这种语言在万维网上应用广泛，它往往被称为JavaScript或JScript，但实际上后两者是ECMA-262标准的实现和扩展
有五个ECMA-262版本:
1997年06月，首版
1998年6月，ECMAScript2.0版发布
1999年12月，ECMAScript3发布，正则表达式，文字链处理，新的控制指令，异常处理，错误定义更加明确，数输出的格式化及其它改变
2007年10月，ECMAScript 4.0版草案发布，由于过于激进，以Yahoo、Microsoft、Google为首的大公司，反对JavaScript的大幅升级，主张小幅改动，以JavaScript创造者Brendan Eich为首的Mozilla公司，则坚持当前的草案，2008年7月，由于对于下一个版本应该包括哪些功能，各方分歧太大，争论过于激进，ECMA决定中止ECMAScript 4.0的开发，将其中涉及现有功能改善的一小部分，发布为ECMAScript3.1
2009年12月，ECMAScript 5.0版正式发布
2011年6月，ECMAscript 5.1版发布，并且成为ISO国际标准(ISO/IEC 16262:2011)
2013年12月，ECMAScript 6草案发布，然后是12个月的讨论期，听取各方反馈
2015年6月17日，ECMAScript6发布正式版本，即ECMAScript2015
_______________________________________________________________________________________________
在低版本浏览器中使用ES6、ES7
方法① 在WebStorm中使用babel，将js编译为ES5
缺点: 非常消耗内存
_______________________________________________________________________________________________
ES5:ECMAScript第五个版本(第四版因为过于复杂废弃了),增加特性如下:
① strict模式
严格模式，限制一些用法: "use strict";
② Array增加方法
增加了every、some、forEach、filter、indexOf、lastIndexOf、isArray、map、reduce、reduceRight等
还有其他方法: Function.prototype.bind、String.prototype.trim、Date.now
③ Object方法
Object.getPrototypeOf、Object.create、Object.getOwnPropertyNames、Object.defineProperty、
Object.getOwnPropertyDescriptor、Object.defineProperties、Object.keys、
Object.preventExtensions/Object.isExtensible、Object.seal/Object.isSealed、
Object.freeze/Object.isFrozen
_______________________________________________________________________________________________
ES6: ECMAScript6(又称为ECMAScript 2015),保证向下兼容的前提下，提供了大量新特性:
① 块级作用域、关键字let,常量const
② 对象字面量的属性赋值简写(property value shorthand)
var obj = {
__proto__: theProtoObj, // 原型
handler, // Shorthand for 'handler: handler'
toString(){ // 定义方法
return "d " + super.toString(); // Super调用
},
[ 'prop_' + (() => 42)() ]: 42 // 动态计算属性名
};
③ 赋值解构
let singer = { first: "Bob", last: "Dylan" };
let { first: f, last: l } = singer; // 相当于 f = "Bob", l = "Dylan"
let [all, year, month, day] = /^(\d\d\d\d)-(\d\d)-(\d\d)$/.exec("2015-10-25");
let [x, y] = [1, 2, 3]; // x = 1, y = 2
④ 函数参数: 默认值、参数打包、数组扩展（Default、Rest、Spread）
function findArtist(name='lu', age='26'){ ... } //默认值
function f(x, ...y){ //参数打包
return x*y.length; //y变成数组
}
f(3,"hello",true) == 6; //true
function f(x, y, z){ //数组扩展
return x + y + z;
}
f(...[1,2,3]) == 6 //true，将数组的每个值传给函数，作为参数
⑤ 箭头函数(Arrow functions)
简化了代码形式，默认return表达式结果
自动绑定语义this，即定义函数时的this
⑥ 字符串模板(Template strings)
var name = "Bob",time = "today";
`Hello ${name}, how are you ${time}?` //return "Hello Bob, how are you today?"
⑧ 迭代器(Iterators) + for..of
迭代器有个next方法，调用会返回:
返回迭代对象的一个元素: { done: false, value: elem }
如果已到迭代对象的末端: { done: true, value: retVal }
for(var n of ['a','b','c']){
console.log(n); //打印a、b、c
}
⑧ 生成器(Generators)
⑨ Class
Class，有constructor、extends、super，本质上是语法糖(对语言的功能并没有影响，更方便程序员使用)
class Artist{
constructor(name){ this.name = name; }
perform(){ return this.name + " performs "; }
}
class Singer extends Artist {
constructor(name, song) {
super.constructor(name);
this.song = song;
}
perform(){ return super.perform() + "[" + this.song + "]"; }
}
let james = new Singer("Etta James", "At last");
james instanceof Artist; // true
james instanceof Singer; // true
james.perform(); // "Etta James performs [At last]"
⑩ Modules
ES6的内置模块功能借鉴了CommonJS和AMD各自的优点:
具有CommonJS的精简语法、唯一导出出口(single exports)和循环依赖(cyclic dependencies)的特点
类似AMD，支持异步加载和可配置的模块加载
lib/math.js:
export function sum(x, y){ return x + y; }
export var pi = 3.141593;
app.js:
import * as math from "lib/math";
alert("2π = " + math.sum(math.pi, math.pi));
otherApp.js
import {sum, pi} from "lib/math";
alert("2π = " + sum(pi, pi));
Module Loaders:(动态加载，'系统'是默认加载器)
System.import('lib/math').then(function(m){
alert("2π = " + m.sum(m.pi, m.pi));
});
直接操作模块缓存:
System.get('jquery');
System.set('jquery', Module({$: $})); // WARNING: 未完成
⑪ Map + Set + WeakMap + WeakSet(四种集合类型)
WeakMap、WeakSet作为属性键的对象如果没有别的变量在引用它们，则会被回收释放掉
var s = new Set(); //Sets
s.add("hello").add("goodbye").add("hello");
s.size === 2;
s.has("hello") === true;
var m = new Map(); //Maps
m.set("hello", 42);
m.set(s, 34);
m.get(s) == 34;
var wm = new WeakMap(); //WeakMap
wm.set(s, { extra: 42 });
wm.size === undefined;
var ws = new WeakSet(); //Weak Sets
ws.add({ data: 42 }); //因为添加的对象没有其他引用，所以不会在集合中保存它
Set是一种新的数据结构，它类似于数组，但是成员的值都是唯一的，没有重复的值
Set 本身是一个构造函数，用来生成 Set 数据结构: let set = new Set()
Set 函数可以接受一个数组(或类数组对象)作为参数，用来初始化: let set=new Set([1,2,3,4,4]);
操作方法:
1、add(value) 添加某个值，返回 Set 结构本身
2、delete(value) 删除某个值，返回一个布尔值，表示删除是否成功
3、has(value) 返回一个布尔值，表示该值是否为 Set 的成员
4、clear() 清除所有成员，无返回值
遍历方法:
1、keys() 返回键名的遍历器
2、values() 返回键值的遍历器
3、entries() 返回键值对的遍历器
4、forEach() 使用回调函数遍历每个成员，无返回值
属性:
1、Set.prototype.constructor 构造函数，默认就是 Set 函数
2、Set.prototype.size 返回 Set 实例的成员总数
⑫ Math + Number + String + Array + Object 的一些API
Number.EPSILON;
Number.isInteger(Infinity) //false
Number.isNaN("NaN") //false
Math.acosh(3) //1.762747174039086
Math.hypot(3, 4) //5
Math.imul(Math.pow(2, 32) - 1, Math.pow(2, 32) - 2) //2
"abcde".includes("cd") //true
"abc".repeat(3) //"abcabcabc"
Array.from(document.querySelectorAll('*')) //返回一个真正的数组
Array.of(1, 2, 3) //类似于数组，但没有单参数行为
[0, 0, 0].fill(7, 1) //[0,7,7]
array.fill(value [, start[, end]]);
array 必需，数组对象
value 必需，用于填充数组的值
start 可选，用于填充数组值的起始索引，默认值为0
end 可选，用于填充数组值的结束索引，默认值是this对象的length属性
如果start为负，则start被视为length+start，其中，length是数组的长度
如果end为负，则end被视为length+end
[1, 2, 3].find(x => x == 3) //3
[1, 2, 3].findIndex(x =>x==2) //1
[1, 2, 3, 4, 5].copyWithin(3,0) //[1, 2, 3, 1, 2]
["a", "b", "c"].entries() //迭代器[0,"a"],[1,"b"],[2,"c"]
["a", "b", "c"].keys() //迭代器0,1,2
["a", "b", "c"].values() //迭代器"a", "b", "c"
Object.assign(Point,{ origin: new Point(0,0) })
⑬ Proxies
使用代理(Proxy)监听对象的操作，进行操作
var target = {};
var handler = {
get: function (receiver, name){ return `Hello, ${name}!`; }
};
var p = new Proxy(target, handler);
p.world === 'Hello, world!';
可监听的操作: get、set、has、deleteProperty、apply、construct、getOwnPropertyDescriptor、defineProperty、getPrototypeOf、setPrototypeOf、enumerate、ownKeys、preventExtensions、isExtensible
⑭ Symbols
Symbol是一种基本类型，Symbol通过调用symbol函数产生，它接收一个可选的名字参数，该函数返回的symbol是唯一的
var key = Symbol("key");
var key2 = Symbol("key");
key == key2; //false
⑮ Promises
Promises是处理异步操作的对象，使用了Promise对象之后可以用一种链式调用的方式来组织代码，让代码更加直观(类似jQuery的deferred对象)
functionfakeAjax(url){ //声明一个promise对象(并指定成功、失败的条件)(可传参数)
return new Promise(function (resolve, reject){
if(!url){ return setTimeout(reject, 1000); } //setTimeout是为了看到效果，通常使用XHR
return setTimeout(resolve, 1000);
});
}
fakeAjax().then(function(){ //使用声明的promise对象fakeAjax，若不传url,promise会拒绝
console.log('success');
},function(){
console.log('fail');
});
Promise是一个对象，用来传递异步操作的消息。它代表了某个未来才会知道结果的事件(通常是一个异步操作)，并且这个事件提供统一的API，可供进一步处理
特点:
①对象的状态不受外界影响
Promise对象代表一个异步操作，有三种状态: Pending(进行中)、Resolved(已完成，又称Fulfilled)和Rejected(已失败)。只有异步操作的结果，可以决定当前是哪一种状态，任何其他操作都无法改变这个状态。这也是Promise(承诺)这个名字的由来，表示其他手段无法改变
②一旦状态改变，就不会再变，任何时候都可以得到这个结果
Promise对象的状态改变，只有两种可能: 从Pending变为Resolved和从Pending变为Rejected。只要这两种情况发生，状态就凝固了，不会再变了，会一直保持这个结果。就算改变已经发生了，你再对Promise对象添加回调函数，也会立即得到这个结果。这与事件(Event)完全不同，事件的特点是: 如果你错过了它，再去监听，是得不到结果的
③ 缺点: 首先，无法取消Promise，一旦新建它就会立即执行，无法中途取消。其次，如果不设置回调函数，Promise内部抛出的错误，不会反应到外部。第三，当处于Pending状态时，无法得知目前进展到哪一个阶段(刚刚开始还是即将完成)
varpromise= new Promise(function(resolve, reject){
if(/*异步操作成功*/){
resolve(value);
}else{
reject(error);
}
});
promise.then(
function(value){ },//成功
function(value){ }//失败
);
Promise构造函数接受一个函数作为参数，该函数的两个参数分别是resolve方法和reject方法
如果异步操作成功，则用resolve方法将Promise对象的状态，从"未完成"变为"成功"(即从pending变为resolved)
如果异步操作失败，则用reject方法将Promise对象的状态，从"未完成"变为"失败"(即从pending变为rejected)
基本的API
1、Promise.resolve() //异步操作成功
2、Promise.reject() //异步操作失败
3、Promise.prototype.then()
4、Promise.prototype.catch()
5、Promise.all() //所有的都完成
var p = Promise.all([p1, p2, p3]);
6、Promise.race() //竞速，完成一个即可
promises的奇妙在于给予以前的return与throw，每个Promise都会提供一个then()和一个catch()函数
somePromise().then(functoin(){
//do something
})
可以做3件事:
1、return另一个promise
2、return一个同步的值(或者undefined)
3、throw一个同步异常throw new Eror('')
_______________________________________________________________________________________________
解构
作用: 可以快速取得数组或对象当中的元素或属性，而无需使用arr[x]或者obj[key]等传统方式进行赋值
原理: 赋值的两边具有相同的结构，就可以正确取出数组或对象里面的元素或属性值
数组解构赋值:
var arr = ['this is a string', 2, 3];
var [a, b, c] = arr; //解构赋值
console.log(a); //this is a string
console.log(b); //2
console.log(c); //3
函数传参解构:
① var arr = ['this is a string', 2, 3];
functionfn1([a, b, c]){
console.log(a); //this is a string
console.log(b); //2
console.log(c); //3
}
fn1(arr);
② var obj = {a:1, b:2, c:3};
functionfn2({a, b}){ console.log(a, b) }
fn2(obj);
var x = 1, y = 2;
var [x, y] = [y, x]; //变量互换
console.log(x); //2
console.log(y); //1
var str = 'love';
var [a, b, c, d] = str; //字符串解构
console.log(a); //l
console.log(b); //o
console.log(c); //v
console.log(d); //e
_______________________________________________________________________________________________
扩展运算符(spread)
扩展运算符用三个点号表示，功能是把数组或类数组对象展开成一系列用逗号隔开的值
var foo = function(a, b, c){
console.log(a);
console.log(b);
console.log(c);
}
var arr = [1, 2, 3];
foo(arr[0], arr[1], arr[2]); //传统写法
foo(...arr); //使用扩展运算符 //1，2，3
//数组深拷贝(复制数组,地址值不同)
var arr2 = arr;
var arr3 = [...arr];
console.log(arr===arr2); //true,说明arr和arr2指向同一个数组
console.log(arr===arr3); //false,说明arr3和arr指向不同数组
//把一个数组插入另一个数组字面量
var arr4 = [...arr, 4, 5, 6];
console.log(arr4); //[1, 2, 3, 4, 5, 6]
//字符串转数组
var str = 'love';
var arr5 = [...str];
console.log(arr5); //['l', 'o', 'v', 'e']
配合Set删除数组中的重复项
var arr = [...new Set([1, 2, 3, 3, 4, 5, 5])]
_______________________________________________________________________________________________
rest运算符
rest运算符也是三个点号，不过其功能与扩展运算符恰好相反，把逗号隔开的值序列组合成一个数组
主要用于不定参数，所以ES6开始可以不再使用arguments对象
var bar = function(...args) {
for(let el of args){
console.log(el);
}
}
bar(1, 2, 3, 4); //1，2，3，4
bar = function(a, ...args){
console.log(a);
console.log(args);
}
bar(1, 2, 3, 4); //1，[2, 3, 4]
rest运算符配合解构使用:
var [a, ...rest] = [1, 2, 3, 4];
console.log(a); //1
console.log(rest); //[2, 3, 4]
_______________________________________________________________________________________________
总结:
三个点号: 三点放在形参或者等号左边为rest运算符（放在被赋值一方）
三点放在实参或者等号右边为扩展运算符（放在赋值一方）
在等号赋值或for循环中，如果需要从数组或对象中取值，尽量使用解构
在自己定义函数的时候，如果调用者传来的是数组或对象，形参尽量使用解构方式，优先使用对象解构，其次是数组解构
在调用第三方函数的时候，如果该函数接受多个参数，并且要传入的实参为数组，则使用扩展运算符
rest运算符使用场景应该稍少一些，主要是处理不定数量参数，可以避免arguments对象的使用
_______________________________________________________________________________________________
vue.watch的原理
/**
* @desc 属性改变监听，属性被set时出发watch的方法，类似vue的watch
* @author **
* @data 2018-04-27
* @constructor
* @param {object} opts - 构造参数. @default {data:{},watch:{}};
* @argument {object} data - 要绑定的属性
* @argument {object} watch - 要监听的属性的回调
* watch @callback (newVal, oldVal) 新值与旧值
*/
class watcher{
constructor(opts){
this.$data = this.getBaseType(opts.data) === 'Object' ? opts.data : {};
this.$watch = this.getBaseType(opts.watch) === 'Object' ? opts.watch : {};
for(let key in opts.data){
this.setData(key)
}
}
getBaseType(target){
const typeStr = Object.prototype.toString.apply(target);
return typeStr.slice(8, -1);
}
setData(_key){
Object.defineProperty(this,_key,{
get: function(){
return this.$data[_key];
},
set: function(val){
const oldVal = this.$data[_key];
if(oldVal === val) return val;
this.$data[_key] = val;
this.$watch[_key] && typeof this.$watch[_key] === 'function' && (
this.$watch[_key].call(this,val,oldVal)
);
return val;
}
});
}
}
let wm = new watcher({ //使用方法
data:{
a: 0
},
watch:{
a(newVal,oldVal){
$('.bb').html(newVal);
}
}
})
setInterval(function(){
wm.a = ++wm.a;
},1000)
_______________________________________________________________________________________________
JavaScript生成器
生成器最重要的特性: 只有在需要的时候它才会产生下一个值，而不会一次性产生所有的值
语法:在函数关键词后加上一个星号
例:
function * fn () { }
let fn = function * () { }
class MyClass {
*generator() { }
* generator() { }
}
const obj = {
*generator() { }
* generator() { }
}
注意: 不能使用箭头函数创建生成器
关键词yield: 类似于return，但不完全相同
return 会在完成函数调用后简单地将值返回，在 return 语句之后无法进行任何操作
yield 之后仍然可以执行操作，但只会返回一次，当再次调用同一函数时，会执行至下一个 yield 语句处，而前面的 yield 不再返回东西
在生成器中，通常会在输出时得到一个对象。这个对象有两个属性: value 与 done
value 是返回值，done 会显示生成器是否完成了它的工作
在生成器中，不仅可以使用 yield，也可以使用 return 来返回同样的对象。但是，在函数执行到第一个 return 语句时，生成器将结束它的工作
带星号的 yield 可以将它的工作委托给另一个生成器，通过这种方式，可以将多个生成器连接在一起
例:
function * anotherGenerator(i) {
yield i + 1;
yield i + 2;
yield i + 3;
}
function * generator(i) {
yield* anotherGenerator(i);
}
var gen = generator(1);
gen.next().value; //2
gen.next().value; //3
gen.next().value; //4