写写自己常用到的ES6(一)

模板字符串

概念

其实就是一种字符串的新的表现形式

1、他解决了字符串和变量拼接的问题

	var s3 = "a" + s1 + "b" + s2;

或者也可以这样写：

var s3 = ` a${s1} b ${s2} `;

2、还有一个就是字符串换行，提升了代码的可读性

不过这个更多的还是用在vue中，

	var s4 = `
		<div>
			<p>
				<span></span>
			</p>	
		</div>
	`

3、函数的扩展

如…arguments的形式

	function fn(){
	console.log(arguments.length);
		//arguments是函数内部一个局部变量，标识函数实参个数
	}	
	fn(1,3,5)//3
		//es6箭头函数不能使用arguments
		//为了弥补这个问题rest参数应孕而生
		//...args就是rest参数
		//产生一个变量，这个变量是一个数组，数组里面包含了 这个函数调用时传递的所有实参
	function q(...args){
		console.log(args)
		//验证是不是数组
		console.log(args instanceof Array);
		console.log(Object.prototype.toString.call(args));//"[Object Array]"
		console.log(Array.isArray(args));
	}
	q(1,3,5)//1,3,5

4、箭头函数

用户替换匿名函数，防止内存外泄、内存占用等闭包的缺点
箭头函数和普通匿名函数的区别：
1、函数体内this对象，就是定义时所在的对象，而不是使用时所在的对象
2、不可以当做构造函数，也就是说不可以用new命令，否则会抛出错误
3、不可以使用arguments对象，该对象在函数体内不存在，如果要用，可以用rest参数替代
4、不可以用yield命令，因此家头函数不能用作Generator函数

div.onclick = function(){}
div.addEvenListener("click",dunctiion(){})
=============
//无参匿名函数
div.onclick=()=>{}
=============
//有一个参数的
var fn = function(name){}
//优化:
var fn=name=>{}
//等价于
var fn=(name)=>{}
=========
//有多个参数的函数
var q = function(name,age)
//优化
var q=(name,age)=>{}
//例子
var student = [1,3,5]
student.forEach(function(value,index){})
student.forEach((value,index)=>{})

然后箭头函数有一点要注意，就是this的指向问题，他的指向是由外部函数决定的，也是固定的，所以一般这样写：

say(){
	res(()=>{
		...this;
	})
}

那么问题来了，如何用es5实现es6，写之前看下下面两段代码的输出结果：

function foo() {
  setTimeout(() => {
    console.log('id:', this.id);
  }, 100);
}
 
var id = 21;
 
foo.call({ id: 42 });
	// id: 42

上面代码中，setTimeout的参数是一个箭头函数，这个箭头函数的定义生效是在foo函数生成时，而它的真正执行要等到 100 毫秒后。如果是普通函数，执行时this应该指向全局对象window，这时应该输出21。但是，箭头函数导致this总是指向函数定义生效时所在的对象（本例是{id: 42}），所以输出的是42。

箭头函数可以让setTimeout里面的this，绑定定义时所在的作用域，而不是指向运行时所在的作用域。下面是另一个例子。

function Timer() {
  this.s1 = 0;
  this.s2 = 0;
  // 箭头函数
  setInterval(() => this.s1++, 1000);
  // 普通函数
  setInterval(function () {
    this.s2++;
  }, 1000);
}
 
var timer = new Timer();
 
setTimeout(() => console.log('s1: ', timer.s1), 1000*2);
setTimeout(() => console.log('s2: ', timer.s2), 1000*2);
// s1: 3
// s2: 0

上面代码中，Timer函数内部设置了两个定时器，分别使用了箭头函数和普通函数。前者的this绑定定义时所在的作用域（即Timer函数），后者的this指向运行时所在的作用域（即全局对象）。所以，3100 毫秒之后，timer.s1被更新了 3 次，而timer.s2一次都没更新。
this指向的固定化，并不是因为箭头函数内部有绑定this的机制，实际原因是箭头函数根本没有自己的this，导致内部的this就是外层代码块的this。正是因为它没有this，所以也就不能用作构造函数。
所以es5实现箭头函数：

// ES6
function foo() {
  setTimeout(() => {
    console.log('id:', this.id);
  }, 100);
}
// ES5
function foo() {
  var _this = this;
 
  setTimeout(function () {
    console.log('id:', _this.id);
  }, 100);
}

5、还有一个就是fetch函数了

我经常把他用在vue.js中，和axios相似，都是用来对数据进行处理的。

今天先写到这里，下次写es6新增的函数