ES6学习笔记

ES6

es6是什么 为什么要学习它 不学习会怎样

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

es5、es6和es2015有什么区别？

es2015特指在2015年新发布的新一代js标准，es6泛指下一代js标准，es6包括es2015、es2016、es2017、es2018etc.某部分人认为es7就是es2016，es8就是es2017以此类推（这样不标准）

babel有什么用

babel是es6转码器 可以将es6高级代码转为es5低端代码 以兼容那些低版本浏览器。

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

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

java语言是sun公司创建，作者是詹姆斯高斯林，在当年很火爆

sun公司高层不懂技术，要求下属创建另外一名门像java一样火爆的语言 于是Brendan Eich用了两周时间（10天）创建了JavaScript，实际上JavaS跟Java毫无关系，也是由于时间紧促所以js存在很多不合理的地方。

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

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

举一下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查找包含字符串的方法（indexOf返回-1表示没查到，不如includes(）返回false更明确，语义更清晰），此外还新增了startsWith(),endWith()，padStart()，padEnd()，repeat()等方法，可更加方便的用于查找、补全字符串。

let str='Hello,world!'
​
//console.log(str.indexOf('m'))// -1
​
//console.log(str.includes('o'))//true
​
//startsWith判断是否以某字符串开始
console.log(str.startsWith('Hello'))//true
//正则方式判断是否某字符串开头
console.log(/^Hello/.test(str))//true
​
​
//endsWith判断是否以某字符串结束
console.log(str.endsWith('!'))//true
//正则方式判断是否某字符串结尾
console.log(/!$/.test(str))//true
​
//endStart是前面填充
const arr=[]
for(let i=1;i<=12345;i++){
    arr.push((i+'').padStart(5,'0'))
    //padStart(位数，填充物)
}
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]
console.log(a,b,c)

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

扩展运算符

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

let arr=[1,2,3]
let brr=arr//arr指针brr
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
const.log(a,b)
//剩余部分都在c里

升级部分

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

[1,2,3,NaN,4,5].indexOd(NaN)= = =-1
//true

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

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

//flat()多维数组降维
const arr=['a','b',['c','d'],'e','f','g']
console.log(arr.flat())//['a', 'b', 'c','d', 'e', 'f','g']
​
const brr=['a','b',['c','d',['e','f'],'g']]
console.log(brr.flat())//[ 'a', 'b', 'c', 'd', [ 'e', 'f' ], 'g' ]
console.log(brr.flat().flat())//['a', 'b', 'c','d', 'e', 'f','g']
​
console.log(brr.flat(Infinity))//['a', 'b', 'c','d', 'e', 'f','g']
​

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"))//false
console.log(Number.isNaN(NaN))//true
​

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

升级部分

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

console.log(Math.cbrt(27))//3  开立方
​
console.log(Math.trunc('27.4567890px'))//取整
console.log(Math.trunc('27.4567890'))
console.log(Math.trunc(27.4567890))
console.log(Math.trunc(0.4567890))
console.log(Math.trunc(-27.4567890))
console.log(Math.trunc(NaN))
​
console.log(Math.hupot(3,4))//5平方和开方
​

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

优化部分

对象属性变量式声明

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

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

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

//es5
var obj1={
    fun1:function(){
        //语句
    }
}
//es6
let obj2={
    fun2(){
        //语句
    }
}

对象的结构赋值

//es6
let {a,b}={a:1,b:2}
//a==1,b==2
​
​
//es5
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(obj1==obj2)
// console.log(Object.is(obj2,obj3))
// console.log(Object.is(obj1,obj2))
​
console.log(NaN===NaN)
console.log(Object.is(NaN,NaN))
​

如何判断两个对象属性和属性值是否完全相同

function isObjectSame(obj1,obj2) {
        //判断是否为Object
        //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(arr.length!==arr2.length){
            return false
        }
        let count=0
        for (key of arr1){//把obj1.a===obj2.a obj.b===obj2.b
            count=obj1[key]===obj2[key]?count+1:NaN
​
        }
        if (count!==arr1.length){
            return false
        }
        return true
​
    }
​
    console.log(isObjectSame([],{}))

es6对Function函数类型升级优化

优化部分

箭头函数（核心）

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

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

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

 

函数默认赋值

在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())
​

 

function isObjectValueEqual(a, b) {
    var aProps = Object.getOwnPropertyNames(a)//Array或Object都无所谓  ['id','name','a','b']
    var bProps = Object.getOwnPropertyNames(b)
    if (aProps.length !== bProps.length) {//二者key值数量不同，直接false
        return false
    }
    for (key of aProps) {
        var propA = a[key] //a 对象中的value
        var propB = b[key]
        // 这里忽略了值为undefined的情况
        // 如果二者存在不同键名，则直接false
        if (!b.hasOwnProperty(key)) return false
        if (propA instanceof Object) {//propA是Object或Array
            if (!isObjectValueEqual(propA, propB)) {//递归
                return false
            }
        } else if (propA !== propB) {
            return false
        }
    }
    return true
}
​
/*
* 先判断键值对数量是否一致
* 再判断键名是否一致
* 再通过循环判断键值value是否一致（深层判断是否是Object，如果是则递归）
*
* */
​
var a = {
    id: 1,
    name: 2,
    c: {
        age: 3
    },
    d: [1, 2, {te: 1}],
    f:b
};
var b = {
    id: 1,
    name: 2,
    c: {
        age: 3
    },
    d: [1,2, {te: 1}],
    f:NaN
}
console.log(isObjectValueEqual(a, b));//true
​