http://kangax.github.io/compat-table/es5/
http://kangax.github.io/compat-table/es6/git
IE10以上,Chrome、FireFox、移动端、NodeJS
brower.js
var
的缺陷:var a = 1; var a = 2;
PI
let、const
的特性{}
对函数的简写es6
() => { }
参数
, ()
能够省略return
这一行代码, {}
能够省略let show = a => a * 2; alert(show(1));
...
... + 数组名 = 数组名[0] ,数组名[1] ,数组名[2], ..,数组名[length-1] }
,做为参数时互相转换...args
必须是最后一个参数function show(a, b, ...args) { alert(a); alert(b); alert(args); //3,4,5 args是一个数组 } show(1, 2, 3, 4, 5)
function show(a, b, c) { alert(a); alert(b); alert(c); } let arr = [1, 2, 3] //show(1, 2, 3) show(...arr)
function show(a, b = 2, c = 3) { alert(a) alert(b) alert(c) } show(1,5)
[]
和JSON字符串{}
赋值
,赋值
也很关键let [a, b] = [1, [2]]; //同时声明数组a、b而且赋值 console.log(a, b); // 1, [2]
相比数组写法,左边是a、b
右边也必须是 a 和 b
,写法:a: + 值
和 b: + 值
。若是是 c: + 值
和 d: + 值
,那么 a
、b
的值为
undefind
,至关于只是声明了a和b
github
let {a, b, c} = {a: 1, b: [2],c: {c: 3}}; console.log(a, b, c); // 1, [2], {c: 3}
let [{a, b} ,[c, d], e] = [{a: 1,b: 2}, ['3', ['d']],'e'] console.log(a, b, c, d, e); // 1 2 "3" ["d"] "e"
错误1:只能是[]
中包含{}
,否则无法写,会报错,由于最外层就决定了最大的基调是变量 : 值
的形式,[b]
的变量不知道是什么ajax
let {a,[b]} = {a: 1, :[2]]}; //报错 console.log(a, b);
总结:左边声明多个变量,右边用不一样写法为变量赋值,能够赋值任意类型
错误2:json
let [a, b] = {a: 1 ,b: 2} // 结构不一样 报错 Uncaught TypeError: {(intermediate value)(intermediate value)} is not iterable let [a, b] = [a: 1 ,b: 2] // 写法错误 报错 Uncaught SyntaxError: Unexpected token : let {a, b} = {1 , 2} // 写法错误 Uncaught SyntaxError: Unexpected token ,
错误3:声明和赋值不在一块儿数组
let [a, b]; // 没有这样的声明变量方式 [a, b] = {a: 1 ,b: 2} // Uncaught SyntaxError: Missing initializer in destructuring declaration
arr
调用map函数的数组thisValue
在函数体中的thisvar array = [1, 2, 3]; var thisValue = '4'; var newArray = array.map(function(value, index, arr){ return (value + '-' + index + '-' + this + '-' + arr) },thisValue) console.log(newArray); // ["1-0-4-1,2,3", "2-1-4-1,2,3", "3-2-4-1,2,3"]
result
做为每次的返回值thisValue
初始值,做为循环value
的值//求和 var array = [1, 2, 3]; var thisValue = 4; var newArray = array.reduce(function(result, value, index, arr){ return result + value; //下一次执行函数时,`result`参数的值 },thisValue) //thisValue //第一次执行函数,`result`参数的值 console.log(newArray); // 10
thisValue
,函数中this指代var array = [1, 2, 3]; var thisValue = 4; var newArray = array.filter(function(value, index, arr) { return value > 1 ? true : false; }, thisValue) console.log(newArray); // [2, 3]
var array = [1, 2, 3]; var thisValue = 4; array.forEach(function(value, index, arr) { console.log(value + '-' + this + '-' + arr); // 1-4-1,2,3 // 2-4-1,2,3 // 3-4-1,2,3 }, thisValue)
startsWith(str[, position])
包含
开始位置的地方开始比较var str = 'abcd'; console.log(str.startsWith('a', 0)); //true console.log(str.startsWith('a', 1)); //false
endsWith(str[, position])
不包含
末尾位置的地方开始var str = 'abcd'; console.log(str.endsWith('d', 0)); //true console.log(str.endsWith('d', 4)); //false 默认str.length
+
${}`let str = 'abcd' let str1 = `${str}ef g h` console.log(str1); //abcdef //g // h 输出也有一个空格
class
function Book(title) { this.title = title; } Book.prototype = { constructor: Book, showTitle: function() { console.log(this.title) } } var book = new Book('ES6'); book.showTitle(); //ES6
constructor
初始化属性function
关键字class Book{ constructor(title){ this.title = title; } showTitle(){ console.log(this.title) } } let book = new Book('ES2015') book.showTitle(); //ES2015
执行父类的构造函数,使子类继承父类的属性和方法promise
function MyBook(title, name) { Book.call(this, title); this.name = name; } MyBook.prototype = new Book(); MyBook.prototype.constructor = MyBook; MyBook.prototype.showName = function() { console.log(this.name); } var myBook = new MyBook('ES6', 'wangcf'); myBook.showTitle(); //ES6 myBook.showName(); //wangc
class Book { constructor(title) { this.title = title; } showTitle() { console.log(this.title) } } class MyBook extends Book { constructor(title, name) { super(title); //执行父类的构造函数 this.name = name; } showName() { console.log(this.name) } } let myBook = new MyBook('ES2015', '张三') myBook.showTitle(); //ES2015 myBook.showName(); //张三
let obj = { a: 1, b: '2' } let json = JSON.stringify(obj) console.log(json); // {"a":1,"b":"2"}
let a = 1; let b = 2; let json = { a: a, b: b }; let json1 = { a, b }; console.log(json); //{a: 1, b: 2} console.log(json1); //{a: 1, b: 2}
:function
旧写法异步
let obj = { a: 1, show: function(){ console.log(this.a); } } obj.show(); // 1
新写法模块化
let obj = { a: 1, show(){ console.log(this.a); } } obj.show(); // 1
不适用于解决下一个回调依赖上一次结果的状况
适用一次性执行多个请求,各请求之间无关
用同步的方式书写异步代码函数
Promise.race 哪一个快就执行resolve
let p = new Promise(function(resolve, reject){ //异步代码 //成功:resolve //失败:reject if(true){ resolve('成功'); }else{ reject('失败') } }) p.then(function(data){ console.log(data); },function(data){ console.log(data); }) // 成功
let p1 = new Promise(function(resolve, reject) { if (true) { resolve('成功1'); } else { reject('失败1') } }) let p2 = new Promise(function(resolve, reject) { if (true) { resolve('成功2') } else { reject('失败2') } }) Promise.all([p1, p2]).then(function(arr) { //返回值是一个数组,顺序保存多个Promise返回值 console.log('p1和p2所有resolve'); let [data1, data2] = [arr[0], arr[1]]; console.log(data1 + data2); }, function(data) { //有一个失败就当即进入,不会继续执行其余Promise console.log('p1和p2其中有一个reject'); console.log(data); })
function createPromise(num) { return new Promise(function(resolve, reject) { if (true) { resolve('成功' + num); } else { reject('失败1' + num); } }) } Promise.all([ createPromise(1), createPromise(2) ]).then(function(arr) { //返回值是一个数组,顺序保存多个Promise返回值 console.log('p1和p2所有resolve'); let [data1, data2] = [arr[0], arr[1]]; console.log(data1 + data2); }, function(data) { //有一个失败就当即进入,不会继续执行其余Promise console.log('p1和p2其中有一个reject'); console.log(data); })
完美解决下一个回调依赖上一次执行结果的状况
函数组成部分:*
和yield
,建立generator
对象
通常函数:一直执行到完
generator函数:能够在中间暂停,执行使用generatro.next
function *show(){ console.log(1) //1 yield; // 暂停 console.log(2) //没有next则不执行这段子函数 } let gen = show(); //gen.next(); gen.next(); //执行到yield暂停
将函数分割成多个子函数
function* show(num) { console.log(num); //5 console.log(1); //1 let y = yield 7; //y获取第一个子函数的结果,第一个子函数的返回值 console.log(2); //2 console.log(y) //4 console.log(num) //5 return 6; //最后一个子函数依赖return返回 } let gen = show(5); //第一个子函数的参数在这里传递 let res1 = gen.next(3); let res2 = gen.next(4); //第二个next传参才能够接收 console.log(res1) //{value: 7, done: false} console.log(res2) //{value: 6, done: true}
引用runner和jQuery文件
runner(function *(){ let data1 = yield $.ajax(url: xxx, dataType: 'json'); let data2 = yield $.ajax(url: xxx, dataType: 'json'); let data3 = yield $.ajax(url: xxx, dataType: 'json'); })