ES5&6&7

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

©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 194,088评论 5赞 459
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 81,715评论 2赞 371
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 141,361评论 0赞 319
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 52,099评论 1赞 263
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 60,987评论 4赞 355
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 46,063评论 1赞 272
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 36,486评论 3赞 381
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 35,175评论 0赞 253
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 39,440评论 1赞 290
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,518评论 2赞 309
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,305评论 1赞 326
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 32,190评论 3赞 312
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 37,550评论 3赞 298
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,880评论 0赞 17
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,152评论 1赞 250
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 41,451评论 2赞 341
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 40,637评论 2赞 335

推荐阅读更多精彩内容

  • ES5 6 7常用语法
    ECMAScript 简介 它是一种由ECMA组织（前身为欧洲计算机制造商协会）制定和发布的脚本语言规范 而我们学...
    冬来Angus阅读 1,025评论 0赞 0
  • 二十四、ES5_6_7语法
    ES5 1.ECMAScript理解 它是一种由ECMA组织（前身为欧洲计算机制造商协会）制定和发布的脚本语言规范...
    风中丶凌乱阅读 537评论 0赞 0
  • WEB基础入门十四：ES5、6、7
    一、ECMAScript 1、它是一种由ECMA组织（前身为欧洲计算机制造商协会）制定和发布的脚本语言规范2、我们...
    瘦不下去了阅读 822评论 0赞 1
  • snapshot-1.0.0.js
    "use strict";function _classCallCheck(e,t){if(!(e instanc...
    久些阅读 2,025评论 0赞 2
  • 37/70 三个问题
    托尔斯泰写过一个小故事。讲述了一个关于皇帝的三个问题的故事。读后颇有感触。 1.做每件事的最佳时机是什么时候...
    028黄小丸阅读 98评论 0赞 0