🐚作者简介：苏凉（专注于网络爬虫，数据分析，正在学习前端的路上）
🐳博客主页：苏凉.py的博客 🌐系列专栏：ES6基础语法 👑名言警句：海阔凭鱼跃，天高任鸟飞。
📰要是觉得博主文章写的不错的话，还望大家三连支持一下呀！！！
👉关注✨点赞👍收藏📂
文章目录
- 模板字符串
- 声明
- 在内容中可出现换行符
- 变量拼接
- 简化对象写法
- 箭头函数
- this指向
- 不能作为构造实例化对象
- 不能使用arguments隐含参数
- 箭头函数的简写
- 1.省略小括号
- 2.省略花括号
- 箭头函数的案例
模板字符串
在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
