模板字符串
在es6中引入了新的对字符串表示方法，那就是模板字符串，在es6之前，我们通常使用双引号""或单引号''来表示字符串，模板字符串用反引号``来表示，下面我们一起看看模板字符串与普通字符串有何区别
声明
与普通字符串一样，声明模板字符串用反引号``表示即可。
let str = `苏凉`; console.log(str,typeof str); //苏凉 string
在内容中可出现换行符
使用反引号可以自动添加换行：在html中添加列表只能用字符串来拼接，如：
window.onload = function(){ var p = document.getElementById('p1'); p.innerHTML='<ul>'+ '<li>'+'1' +'</li>'+ '<li>'+ '2'+'</li>' + '<li>'+'3'+'</li>' + '<li>'+'4'+'</li>'+ '</ul>' }
使用模板字符串就省事很多。
window.onload = function(){ var p2 = document.getElementById('p2'); p2.innerHTML = `<ul> <li>a</li> <li>b</li> <li>c</li> <li>d</li> <li>e</li> </ul>` }
两种方法，哪一个更简洁好用不言而喻。
变量拼接
普通字符串拼接使用+号来进行拼接，而使用模板字符串则可以直接拼接，如：
//语法：在反引号内使用${}拼接 `${str1}str2`
let name = '苏凉'; let age = 21; let info = `姓名：${name},年龄：${age}`; console.log(info);//姓名：苏凉,年龄：21
简化对象写法
在es6中，在对象的大括号内，可以直接写入变量和函数，作为对象的属性和方法，这种写法相较于es6之前的版本来说书写更简洁。如：
let name = '苏凉'; let sayName = function(){ console.log('su') } const info = { //直接写入变量，取代：name:name name, sayName, //直接写入函数，取代：fun2:function(){} fun2(){ console.log('liang') } } console.log(info.name); //苏凉 info.sayName(); +//su info.fun2() //liang
箭头函数
在es6中可以使用箭头（=>）来定义函数。
语法：let 函数名 = (参数)=>{函数体}
如：
let fun1 = () =>{ console.log('苏凉') } fun1(); //苏凉
函数体内与之前一样，调用函数也是，函数名()
下面我们一起看看箭头函数与普通函数有何区别：
this指向
箭头函数的this指向时静态的，它始终指向声明函数时所在的作用域下this的值。
而普通函数的this值则是谁调用函数，this就指向谁，默认指向window。
箭头函数的this指向不会被call，bind，apply所改变。
//定义全局变量 var name = '苏凉' //普通函数 let fun1 = function(){ console.log(this.name); } //箭头函数 let fun2 = () =>{ console.log(this.name); } const info ={ name:'xiaoming' } fun1(); //苏凉 fun2(); //苏凉 //改变this指向， //通函数的this指向会被改变 //箭头函数的this不会被改变 fun1.call(info); //xiaoming fun2.call(info); //苏凉
不能作为构造实例化对象
箭头函数不能作为构造实例化对象使用。否则会报错：TypeError: Person is not a constructor
如：
//使用普通函数构造实例化对象 let Dog = function(name,age){ this.name = name ; this.age = age ; } let dog1 = new Dog('xiaohua',2); console.log(dog1); //Dog {name: 'xiaohua', age: 2} //是用箭头函数构造实例化对象 let Person = (name,age)=>{ this.name = name ; this.age = age; } let per1 = new Person('suliang',21); console.log(per1); //TypeError: Person is not a constructor
不能使用arguments隐含参数
在普通函数中，arguments隐含参数会返回我们所传递的实参，而在箭头函数中并不存在这一隐含参数。
//普通函数 let fun1 = function(){ console.log(arguments); } fun1(1,2,3); // Arguments(3) [1, 2, 3, callee: ƒ, Symbol(Symbol.iterator): ƒ] //箭头函数 let fun2 =()=>{ console.log(arguments); } fun2(4,5,6); // arguments is not defined at fun2
箭头函数的简写
1.省略小括号
当形参有且只有一个的时候，箭头函数中的小括号可以省略。如：
//小括号省略 let fun1 = n =>{ return n+n; } let result1 = fun1(5) console.log(result1); //10
2.省略花括号
当函数体内的代码有且只有一条语句时，可以省略花括号，并且语句的执行结果就是函数的返回值。
//省略花括号 //eg1 let fun2 = n => n*n; console.log(fun2(9)); //81 //eg2 let fun3 = n =>console.log(n); fun3(9); //9
箭头函数的案例
定时器的箭头函数，若定时器不适用箭头函数，则定时器内部的this则指向window。
window.onload = function(){ //找到box let box = document.getElementById('box'); box.addEventListener('click',function(){ setTimeout(() => { this.style.backgroundColor = 'blue' }, 2000); }) }
返回数组中偶数：
let list = [1,5,3,6,8,45,68,96,99]; const arr = list.filter(item => item%2==0); console.log(arr); //(4) [6, 8, 68, 96]
箭头函数适合与 this 无关的回调，如定时器，数组的方法回调等
箭头函数不适合与 this有关的回调．事件回调，对象的方法等。
var name = 'ming' let arr = { name:'su', age:21, sayName:()=>{ console.log(this.name); //指向window }, sayName1:function(){ console.log(this.name); //指向arr数组对象 } } arr.sayName(); //ming arr.sayName1(); //su
