ES6中的面试点总结

这是我参与8月更文挑战的第11天，活动详情查看：8月更文挑战

前言

es6也就是ECMAScript6，es6中新增了很多方法和属性，比如：let、const、箭头函数、结构赋值、模板字符串等等，本文就一些比较常用的点来做一下总结。

let

let是es6中新增的，在es6之前我们声明变量一般使用var，但var在使用for循环的时候会出现一些问题，如下

    var a=[]
        for(var i=0;i<5;i++){
            a[i] = function(){
                console.log(i)
            }
        }
        a[1]()
        //这个代码就是个很平常的for循环，但运行结果却很出乎意料，并不是我们想的1，而是5，这是因为var声明的变量是一个全局变量，当我们调用a[1]()的时候，i已经变成了5

解决上述问题的方法也很简单，我们只要把var改成let即可，这就是let的特性，let声明的变量是块级作用域

const

const没什么说的，就一点const声明的是常量，声明之后不可以更改，更改会报错

箭头函数

这是es6中的重点，到底什么是箭头函数呢？它的基本样子是这样的()=> {}

• 我们可以把箭头函数理解为匿名函数的简写形式 function(){}，也就是把匿名函数的function关键字去掉，加上=>即可
• 箭头函数的几种形式

 ()=> {}
 (arg1,arg2) =>{}
 () => i+8 //这种可能看起来比较奇怪，这是一种简写形式，如果存在return，并且只有一行代码，就可以简写为这样

• 普通函数中this指向的是调用者，箭头函数中this的指向是它的上一级的那个对象（this指向是一大难点，抽空专门搞一篇this指向的文章），下面搞个例子

liObj.onclick = function(){
    console.log(this) //这里的this是li
    setInterval(function(){
        console.log(this) //这里的this是window，定时器中没有特殊处理都是指向window
    },1000)
}

//若果把上边的代码改为箭头函数的形式，那么定时器中的this就指向了li
liObj.onclick = function(){
    console.log(this) //这里的this是li
    setInterval(()=>{
        console.log(this) //这里也指向li
    },1000)
}

实在不知道this指向谁的时候，用的时候就打印一下看看，改变this的三种方法call(),apply(),bind()

模板字符串

这个很简单，但是再项目中用的比较多，比如说写一个动态的style

:style="`color:${isWeatherView ? '#41A3FF' : '#CFD4DA'};`"

其实也就是把字符串用反引号引起来，在${}中写变量就行了

解构赋值

对象的解构赋值

let obj= {a:1,b:2,c:3}
let{a}=obj
console.log(a)
//结果是1

数组的解构赋值

let obj= ['red','blue','yellow']
let [color1,color2] = obj
console.log(color1,color2)
//结果是red，blue，如果想取red，yellow，这样写即可 let[color1,,color2]

总结

es6中新增的东西是面试的常考点，大家一定要牢记于心啊，一起进步，加油