ES5和ES6

箭头函数

箭头函数没有自己的this值，其this值是通过继承其它传入对象而获得的。

var button = document.getElementById('button');

//es5
button.onclick=function(){
console.log(123)
};

//es6
button.onclick=()=>{console.log(123)};

es5 Array方法

增加了every、some 、forEach、filter 、indexOf、lastIndexOf、isArray、map、reduce、reduceRight方法。

循环

var arr = [1,12,31,6,7,12,0];//全局的数组

arr.forEach(function(value,index,array){
  //es5,相当于for()
	console.log(value);
});
var ret = arr.map(function(item){
  //es5,原数组映射新数组
	return 2*item;
})
var filter = arr.filter(function(item){
  //es5,过滤，返回过滤后的新数组
	return item;
})
var some = arr.some(function(item){
  //es5,某些值合乎条件，some只要有true即返回不再执行了，返回Boolean值
	return item>20;
});

array.every(callback,[ thisObject])：返回Boolean值,需要每一个值都满足条件才返回true。

索引

console.log(arr.indexOf(12,'3'));
//从4号位开始搜索12

console.log(arr.lastIndexOf(12,3));
//从后往前搜索，索引值小于3开始

迭代

array.reduce(callback,[initialValue])：callback函数接受4个参数：之前值、当前值、索引值以及数组本身。initialValue参数可选，表示初始值。若指定，则当作最初使用的previous值；如果缺省，则使用数组的第一个元素作为previous初始值，同时current往后排一位，相比有initialValue值少一次迭代。

1
2
3

 var reduce = arr.reduce(function(previous,current,index,array){
			return previous + current;
});//es5,类似于迭代

es6特性

块级作用域关键字let, 常量const。

和var的区别：let和const不允许在相同作用域内，重复声明同一个变量。let不像var那样，会发生“变量提升”现象。const声明常量，声明之后常量的值不会改变。

let和const声明的变量内存空间不挂在于window上，而var声明的变量是挂载到window上。

var a = 1;
let b = 2;
let obj = {
  a:10,
  b:20,
  func:()=>{
    this.a = 100;//window
    this.b = 200;//window
  }
};
obj.func();
console.log(a,obj.a);//100 10
console.log(b,obj.b);//2 20

赋值解构

1
2
3

let person = { name: "Bob", id: "123" };
let { name: n, id: i } = person;
// 相当于 n = "Bob", i = "123"

字符串模板

1
2
3
var str = `<p>
  hello world
</p>`

迭代器

for(var item of arr){
  //es6,与forEach()不一样，用于遍历数据，它支持break，continue和return
  console.log(item);
}

新增类型

四种集合类型，WeakMap、WeakSet作为属性键的对象如果没有别的变量在引用它们，则会被回收释放掉。

Map

var map = new Map();//es6,map对象，map里面的数据由键值对组成

// 添加新的key-value
map.set('a', 6);
map.set('b', 1);

// 是否存在key
map.has('a');

//获取
map.get('a');

//删除
map.delete('a');

for(var [key,value] of map){
  console.log(key+':'+value);
}

Set：似于数组，但它的一大特性就是所有元素都是唯一的，没有重复。

 var sets = new Set([1,2,12,9,10,5]);//es6,一个set对象使用于排除重复项
for(var w of sets){
	console.log(w);
}

 //向Set中添加元素。
 sets.add(14);

 //从Set中删除元素
 sets.delete(14);

 //判断某元素是否存在
 sets.has(2);

 //清除所有
 sets.clear()

 //转为数组
 var array =  Array.from(sets);

生成器

 //生成器函数以function*开头，yield在其中是关键字，可以暂时中断生成器

 function* quips(name) {
   yield "hello " + name + "!";
   yield "i hope you are enjoying the blog posts";
   if (name.startsWith("X")) {
     yield "it's cool how your name starts with X, " + name;
   }
   yield "see you later!";
 }

 //每当调用生成器对象的.next()方法时，函数恢复运行直至遇到下一个yield表达式，其作用是用于迭代

 var iter = quips('jore');
console.log(iter.next()) //{value: 'hello jore!', done: false}
console.log(iter.next()) //{value: 'i hope you are enjoying the blog posts', done: false}
console.log(iter.next()) // {value: 'see you later!', done: false}
console.log(iter.next()); //{value: undefined, done: true}

class

 class RangeIterator{
	constructor(start,stop){
		this.value = start;
		this.stop = stop;
	}
	[Symbol.iterator](){
		return this;
	}
	next(){
		var value = this.value;
		if(value<this.stop){
			this.value++;
			return {done:false,value:value};
		}else{
			return {done:true,value:undefined};
		}
	}
}

生成器生成迭代器

 //one,通过使用[Symbol.iterator]()和.next()来进行创建迭代器
 function range(start,stop){
	return new RangeIterator(start,stop);
}

 //two,生成器生成迭代器
 function* range(start,stop){
	for(var i =start;i<stop;i++)
		yield i;
}

 //使用
 for (var value of range(0, 3)) {
  alert("Ding! at floor #" + value);
}

剩余参数与默认值

 function containAll(value="cat",...needles){//es6,剩余参数与默认值
	for(var n of needles){
		if(value.indexOf(n)===-1){
			return false;
		}
	}
	return true;
}

参考

https://www.cnblogs.com/fuheng01/articles/JS.html

https://blog.csdn.net/hbts_901111zb/article/details/79242091