ES6

ES6是什么，为什么要学习它，不学习又会怎样？

ES6是新一代的JavaScript标准，对js语言的核心内容做了优化升级，规范了js的使用标准，新增了一些js原生方法，使得js更加规范，更加优雅，更加适合大型应用，学习ES6是成为专业正规军的必经之路。不学习ES6也能打鬼子，但只能当个游击队长

ES5、ES6和ES2015有什么区别？

ES2015特指在2015年新发布的新一代的js标准，ES6泛指下一代js标准，ES6包括ES2015,、ES2016、ES2017、ES2018等等，某部分人认为ES7就是ES2016，ES8就是ES2017等类推（这样不标准）

babal有什么用？

babal是一个ES6转码器，可以将ES6高级代码转化为ES6低端代码，以便兼容低版本浏览器

 

let有什么用，为什么有了var还要使用let

在ES6之前，声明变量是能使用var，var声明变量有很多不合理的点，准确来说是因为ES5中没有块级作用域是很不合理的，甚至可以说是一门语言级别的bug（这也是很多C++，java开发人员看不懂，瞧不起JavaScript语言的原因之一）

没有块级作用域会带来很多难以解决的问题，比如for循环变量泄漏，变量覆盖问题，let声明的变量拥有自己的块级作用域。且修复了var声明带来的变量提升问题、

console.log(a)//报错
let a
//let不存在变量提升，var存在
console.log(b)//underfind
var b

举一下ES6对String字符串类型做的常用升级优化

优化部分

ES6新增了字符串模版，在拼接大段字符串，用反引号(`)取代以往的字符串相加的形式，能保留所用空格和换行，是字符串看起来更加直观、优雅。

 var x=100
 div1.style.width=x+'px'
​
 //用ES6模版字符串
 div1.style.width=`${x}px`
 
 //传统写法 不允许换行 读写性差
 li.innerHTML=  '<div class="topPipe" style="height: '+topHeight+'px"><img src="img/up_pipe.png" alt=""></div> <div class="bottomPipe" style="height: '+bottomHeight+'px"> <img src="img/down_pipe.png" alt=""> </div>'
​
//ES6模版字符串 允许换行和空格 读写性强
    li.innerHTML = `
            <div class="topPipe" style="height: ${topHeight}px">
                <img src="../public/img/up_pipe.png" alt="">
            </div>
            <div class="bottomPipe" style="height: ${bottomHeight}px;">
                <img src="../public/img/down_pipe.png" alt="">
            </div>
    `

升级部分

ES6在String原型上新增includes()方法，用于取代传统只能用indexOf查找包含字符串的方法，（inexOf返回-1表示没查到，不如includes()返回flase更精确，语法更清晰），此外还新增starsWith()、endWith()、padStart()、padend() 、reqeat()等方法，可更加方便的用于查找，补全字符串。

let str='Hello world!'
​
//console.log(str.indexOf('m'))//-1
​
//console.log(str.includes('0'))//ture
​
//starsWith判断是否以某字符串开始
//console.log(str.starsWith('Hello'))//ture
​
//正则方式判断是否某字符串开始
console.log(/^Hello/.test(str))//true
//正则方式判断是否某字符串结束
console.log(/!$/.test(str))//true
​
//endsWith判断是否以某字符串结束
//console.log(str.endsWith('Hello'))//ture
​
const arr=[]
for(i=1;i<=12;i++){
    arr.push((i+'').padStart('5','0'))
    //padStrart(位数，填充物)
}
console.log(arr)
​
//padend是后面填充。上述类似
​
//repeat()
//将字符串自我复制n次
​
console.log(str.repeat(4))
//Hello,world!Hello,world!Hello,world!Hello,world!
​
​

ES6对Array数组做的升级优化

优化部分

数组的解构赋值

ES6可以直接以下形式进行变量赋值

let [a,b,c]=[1,2,3]
console.log(a,b,c)//1,2,3
​
//传统
let arr[1,2,3]
let a=arr[0],
    b=arr[1],
    c=arr[2]

在声明较多变量时，不需要再写很多let （或var），且映射结构清晰，支持赋默认值。

扩展运算符

ES6新增的扩展预算符(...)，可以轻松的实现数字和松散序列（比如集合等）的相互转化，可以取代arguments对象和apply方法，可以轻松获取未知参数个数情况下参数集合。（尤其是在ES5即传统的js中，arguments不是一个真正的数组，而是一个类数组的对象，但是扩展运算符的逆运算却可以返回一个真正的数组）。扩展运算符还可以轻松的实现数组的复制和解构。

let arr=[1,2,3]
let brr=arr//指针
brr[0]='a'
console.log(arr)//['a',2,3]
//这样仅把指针赋值给新变量，arr和brr都指向内存上的同一个数组
​
//ES6 copy一个数组
let crr=[...arr]
crr[0]='c'
console.log(arr,crr)
​
//传统 copy一个数组
var drr=[]
/*for(var i=arr.length-1;i>=0;i--){//反序性能略优于正序
    drr.unshift(arr[i])
    //[3]
    //[2,3]
    //['a',2,3]
}*/
for(var i=0;i<arr.length;i++){
    drr.push(arr[i])
}
drr[1]='d'
console.log(arr,drr)
​
const err=[1,2,3,4]
const [a,b,...c]=err
console.log(a,b,c)//1 2 [3,4]
//剩余部分都在c里面了
​

升级部分

ES6在Array原型上新增了find()方法，用于取代传统只能indexOf()查找数组项目的方法，且修复了indexOf查找不到NaN的bug

[1,2,3,NAN,4,5].indexOf(NAN)===-1//true

此外，还新增了copyWithin()、includes()、fill()、flat()等方法，可方便用于数组的查找，补全，和转换等。

//copyWithin()
const arr=['a','b','c','d','e','f','g','h']
​
//用b、c把e、f替换掉
/*arr[4]=arr[1]
arr[5]=arr[2]
console.log(arr)*/
​
//arr.copyWithin(指定插入目标位置索引，从哪里开始复制，复制到哪里结束)
arr.copyWithin(4,1,3)
console.log(arr)//[a,b,c,d,b,c,g,h]
​

//fill()
const arr=['a','b','c','d','e','f','g','h']
​
//用'y'把def替换掉
arr.fill('y',3,6)
console.log(arr)

//flat()多维数组降维 （数组内的某一个元素还是一个数组）
const arr=['a','b',['c','d'],'e','f','g','h']
console.log(arr.flat())//['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h']
​
const brr=['a','b',['c','d',['e','f'],'g','h']]
console.log(brr.flat())//[ 'a', 'b', 'c', 'd', [ 'e', 'f' ], 'g', 'h' ]
console.log(brr.flat().flat())//['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h']
​
//无论几维都降维一维
console.log(brr.flat(Infinity))//['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h']

ES6对Number数字做的升级优化

优化部分

ES6在Number原型上新增了isFinite(),isNaN()方法，用来取代ES5中的isFinite(),isNaN方法检测数值是否有限，是否是NaN。

//ES5
console.log(isNaN("NaN"))//true
console.log(isNaN(NaN))//true
​
//ES6
console.log(Number.isNaN("NaN"))//flase
console.log(Number.isNaN(NaN))//true
​

Number.isFinite()与上类似，是判断数字是否有限。

升级部分

ES6在Math对象上新增了Math.cbrt()、 Math.trunc()、 Math.hypot()等运算方法，求立方根、求和立方根等。

console.log(Math.cbrt(27))//3 开立方
​
console.log(Math.trunc('27.1545665px'))//取整
console.log(Math.trunc(27.1545665))
console.log(Math.trunc('27.1545665'))//弱类型转换
console.log(Math.trunc(0.1545665))
console.log(Math.trunc(-27.1545665))
console.log(Math.trunc(NaN))
​
console.log(Math.hypot(3,4))// 5 平方和开方

ES6对Object对象类型升级优化（重要）

优化部分

对象属性变量式声明

ES6可以直接以变量形式声明对象属性或方法，比传统的键值对形式声明更加简洁，更方便，语义更清晰

let [a,b]=[1,2]
​
let obj1={a,b}
//等同于
let obj2={
    a:a,
    b:b
}
console.log(obj1,obj2)
    

对象中的方法也可以使用上述简洁写法:

//ES5
var obj1={
    fun1:function(){
        //语句
    }
}
​
//ES6
let obj2={
    fun2(){
        //语句
    }
}

对象的解构赋值

let {a,b}={a:1,b:2}
//a==1 b==2
​
var obj={a:1,b:2}
var a=obj.a,
    b=obj.b

对象的扩展运算符

ES6对象的扩展运算符和数组的扩展运算符区别不大，毕竟数组用是一个特殊的对象，对象的扩展运算符一个最好用也是最长用的方法是可以轻松的去除木匾对象内部全部或部分可遍历属性，从而进行对象的合并和分解。

const person={
    name:'小明',
    age:18,
    gender:'男',
    number:13312341234,
    hobbies:['唱','跳','rap']
}
​
const {name,gender,...others}=person
​
console.log(name,gender,others)

升级部分

ES6在Object原型上新增了is()方法，用来做两个对象的相等比较，并且完善了NaN!==NaN的不合理。

const obj1={
    a:1,
    b:2
}
const obj2={
    a:1,
    b:2
​
​
}
const obj3=obj2
​
/*console.log(obj2==obj3)//true
console.log(obj1==obj2)//flase
console.log(Object.is(obj1,obj2))
console.log(Object.is(obj2,obj3))*/
​
console.log(NaN===NaN)
console.log(Object.is(NaN,NaN))

如何判断两个对象是否属性和属性值完全相同?（以下非完整写法，不足以判断两个对象是否完全一致）

function isObjectSame(obj1,obj2){
    //判断是否是Oject
    console.log(Object.prototype.toString.call(obj1))
    if (Object.prototype.toString.call(obj1)!=='[object Object]'
        ||Object.prototype.toString.call(obj2)!=='[object Object]'
    ){
        return console.log('不是对象')
    }
}
//判断二者是否原本就是同一指针
if (obj1===obj2){
    return true
}
const arr1=Object.getOwnPropertyNames(obj1)//[a,b]可以获取obj1所有的键值对
const arr2=Object.getOwnPropertyNames(obj2)//[b,a]
if(arr1.length!==arr2.length){
    return flase
}
let count=0
for (key of arr1){
    count=obj1[key]===obj2[key]?count+1:NaN
}
if(count!==arr1.length){
    return flase
}
return true
​
console.log(isObjectSame([],{}))
​

ES6对Function函数类型升级优化

优化部分

箭头函数（核心）

1. 箭头函数内的this指向的是函数定义时所在的对象，而不是函数执行时所在的对象，ES5中函数的this总是指向函数执行时所在的对象，这使得很多情况下this的指向变得难以理解，可以归结为语言层面的bug之一。箭头函数优化了这一点，它的内部没有自己的this，这样就导致了this总是指向上一层的this，如果上一层还是箭头函数，则继续向上指。直到指向自己的this的函数为止，并作为自己的this；

2. 箭头函数不能用作构造函数，因为没有this，无法实例化；

3. 由于箭头函数没有this，所以箭头函数内不存在arguments对象（可以用扩展运算符...代替）

   函数默认赋值

   在ES6之前，函数的形参是无法给默认值的，只能在内部通过变通方法实现，ES6以更简洁的方式进行函数默认值赋值。

//ES5
function add(x,y){
    const a=x||'请输入数字',
    b=y||''
    return a+b
}
​
//ES6
function add2(x='请输入数字',y=''){
    return x+y
}
​
console.log(add(1,2))
console.log(add())
​
console.log(add2(1,2))
console.log(add2())