一、全局變量以及對(duì)應(yīng)的作用域、this動(dòng)態(tài)作用域

1）變量提升

在es5中var變量 在一個(gè)作用域內(nèi)，變量的聲明會(huì)提升，也就是一個(gè)作用域里面，無(wú)論變量聲明的位置在什么地方，在執(zhí)行過(guò)程中，都會(huì)把聲明提到代碼最前執(zhí)行

 funcation example(){
     console.log(a);
     var a;
 }
 # 輸出內(nèi)容:undefined 因?yàn)閍這個(gè)變量已經(jīng)聲明 ，但是并沒(méi)有初始化內(nèi)容

2)全局變量的聲明和屬性值的區(qū)分

# 在index.js中
var a = 0 #聲明了一個(gè)window的全局變量
a = 0 # 聲明了一個(gè)window屬性

在實(shí)際用到的過(guò)程中，看似效果差不多，但是其實(shí)本質(zhì)并不同。

3）閉包的作用

#在es5中

function fun1(){
    var a = 2;
    function fun2(){
        return a + 4；
    }
    return fun2;
}
輸出：6

在es5中，如果在fun2函數(shù)中找不到變量a的聲明，則會(huì)一層一層向上直到找到聲明,否則會(huì)報(bào)錯(cuò)。如下就實(shí)現(xiàn)了閉包。

4）塊變量 let 和const

在es5中var變量根據(jù)作用域分有：全局作用域、局部作用域

  #es5用法
  function test(){
      var a = 1;
      
  }

二、array數(shù)組的遍歷、轉(zhuǎn)換、生成、查找有哪些相關(guān)的函數(shù)

1)數(shù)組遍歷

• forEach 輸出的每一項(xiàng)都是key所對(duì)應(yīng)的value值，不支持continue，break這些關(guān)鍵詞

 let arry = [2,3,4,5];
 array.forEach(functon(item){
     console.log(item)
 })

• 如果回調(diào)函數(shù)返回了false時(shí) 則結(jié)束遍歷，否則繼續(xù)循環(huán)

arry.every(funcation(item){
    console.log(item)
    return true
})

• for ....in 循環(huán) 獲取到的是key 也就是獲取索引值,針對(duì)的是對(duì)象，數(shù)組可以看做是一種特殊的對(duì)象

for(let i in arry){
    console.log(array[i])  
}

• for ... of 循環(huán)，獲取到的key所對(duì)應(yīng)的value值

  for(let item of arry){
      console.log(item)
  }

2）數(shù)組的查找

• 使用過(guò)濾器filter,篩選過(guò)程中，無(wú)論是否尋找到合適的內(nèi)容，都會(huì)返回一個(gè)數(shù)組。

   var arr = [1,2,3,4,5,6];
   arr.filter(item=>{
       return item%2 == 0
   })
   輸出:[2,4,6]

• 使用find進(jìn)行查找，只會(huì)查找到第一個(gè)符合條件的第一個(gè)value,而findIndex返回索引

array.find(function(item){
    return item % 2 == 0;
})
輸出：2
array.findIndex(funcation(item){
    return item % 2 == 0;
})
輸出:1

三、es6和es5在class類的原型鏈中掛載一個(gè)函數(shù)

• es5 定義構(gòu)造函數(shù)

let Animal = function(type){
  this.type = type;
  this.fun1  = function(){
      console.log("輸出內(nèi)容")
  }
}
let dog = mew Animal("dog");
#在原型鏈掛載函數(shù),所有實(shí)例公用一個(gè)
dog.constructor.prototype.eat =function(){
      console.log("輸出內(nèi)容")
  }

• es6中無(wú)需手動(dòng)掛載，自動(dòng)實(shí)現(xiàn)

 class Animal(){
     contructor(type){
         this.type = type;
     }
     eat(){
         consolo.log("自動(dòng)掛載在原型鏈中")
     }
 }

四、es6使用set和get進(jìn)行class屬性的讀寫(xiě)操作（內(nèi)含閉包）

let realage =7 ;
  class example(){
      get age(){
          return  realage;
      }
      set age(val){
          realage = val;
      }
  }
  let ww = new example();
  console.log(ww.age);
  ww.age = 10;
  console.log(ww.age);
  輸出：7,10

五、es5與es6的繼承

//在es5中繼承
let dog = function(){
//初始化構(gòu)造函數(shù)
Animal.call(this,"dog")  //使用call改變this的指向
//在子類中掛載一些方法
this.run  = function(){
////
}
}
//把子類原型鏈指向到父類原型鏈
this.dog.prototype = this.Animal.prototype

總結(jié)es6在class的聲明、 屬性、方法、繼承

  class parent{
  //重定義構(gòu)造函數(shù)
     constructor(type){
         this.type = type //定義屬性
     }  
 //定義靜態(tài)·方法
 static walk(){
     console.log("This is a static methods！")
 }
  func1(){
      console.log("自動(dòng)被掛載在原型鏈的method")
  } 
  class child extends parent(){
     constructor(type){
        super(type)  //繼承
         this.type = type //定義屬性
     }  
     this.run = funcation(){
         console.log("自定義函數(shù)")
     }
  }
}

六、 處理不確定參數(shù)

對(duì)于es5 使用arguements獲取執(zhí)行的參數(shù)

function sum(x,y,z){
   console.log(Array.from(this.arguement))
    return x + y + z;
}

在es6 使用 ...num 淺拷貝的形式獲取 Rest parameter

function sum(...data){
    let nums = 0;
    data.forEach(function(item){
        nums += item;
    })
    return data;
}
let datas=[1,2,4];
sum(...datas);

九、Arrow Function (箭頭函數(shù))

箭頭函數(shù)是對(duì)函數(shù)寫(xiě)法一個(gè)簡(jiǎn)化,對(duì)this的指向也有了一個(gè)變化，之前的函數(shù) 是誰(shuí)執(zhí)行函數(shù)this指向誰(shuí)，而箭頭函數(shù)中的this是定義時(shí)的綁定

# 當(dāng)參數(shù)有且僅有一個(gè)的時(shí)候小括號(hào)可以省略，當(dāng)函數(shù)體內(nèi)容是表達(dá)式花括號(hào)可以省略
let arrow = () =>{}

下面舉一個(gè)經(jīng)典的例子

let x = 11;
let obj={
 x:22,
 say:()=>{
   console.log(this.x);
 }
}
obj.say();
//輸出的值為11

原因如下,say和箭頭函數(shù)相當(dāng)于是obj對(duì)象中key和value的關(guān)系，say函數(shù)本身所在的對(duì)象是obj，可是因?yàn)?strong>obj只有在函數(shù)被調(diào)用，或者通過(guò)構(gòu)造函數(shù)new Object()的形式才會(huì)有this,因此this向上執(zhí)行繼承父類window的this

十、對(duì)象屬性

在es6中，對(duì)對(duì)象的使用更加便捷化，對(duì)象中的key值可以是表達(dá)式、變量，且當(dāng)key和value相同，可以省略很多東西

let x = 1, y = 2, z=3;  
let obj = {
    x,
    y,
    [z+x]:5,
    <!--eat(){-->
    <!--    console.log("這個(gè)是一個(gè)方法");-->
    <!--}-->
}
console.log(obj);
輸出：{x:1,y:2,4:5}

十一、set數(shù)據(jù)結(jié)構(gòu)

set對(duì)象的增刪改查，以及常用的一些函數(shù)，最大的特點(diǎn)是會(huì)自動(dòng)去重，但是不可以修改內(nèi)容，遍歷方法可參照數(shù)組遍歷方法。

let  s =new Set();//聲明一個(gè)set對(duì)象
s.add(1).add(2);  //增加一個(gè)元素
console.log(s.keys(),s.values(),s.entries());//獲取所有key、value值、所有的內(nèi)容
s.size  //獲取元素個(gè)數(shù)
s.has(1) //true 獲取某元素是否存在
s.delete(1)//刪除某個(gè)元素

十二、map數(shù)據(jù)結(jié)構(gòu)

map對(duì)元素有一定的要求，需要是可遍歷的，并且每一個(gè)元素都有對(duì)應(yīng)的鍵值對(duì)，相對(duì)于來(lái)說(shuō)比set類型的數(shù)據(jù)性能更好，以下是和set數(shù)據(jù)結(jié)構(gòu)有些不同的部分

let m = new Map([[2,"value1"],[4,"value3"]]); //聲明形式如下，[2,"value1"] 是其中的一個(gè)元素
m.set(5,"values");  //增加元素
m.set(2,"value11"); //修改元素
m.has(2)  //判斷的是key值
m.get(5)  //獲取對(duì)應(yīng)的value
# 兩種遍歷方式
m.forEach(function(value,key){  //注意key和value的位置
    console(value,key);
})
for(let [key,value] of m){
     console(value,key);
}

十三、字符串模板

字符串模板可以解決在和字符串拼接過(guò)程中遇到 字符串換行、包含變量、邏輯運(yùn)算的簡(jiǎn)潔方法

 const price = 10;
 const retails = "retail"
 const showText1 = `您購(gòu)買的價(jià)格是${price}`;  //和字符串常量中加入表達(dá)式
 const showText2 = `我是第一行
 我是第二行`  //可以直接識(shí)別模板
 function hanlePrice(strings,type){ //strings是獲取到的
    let s1 = `這個(gè)是一個(gè)測(cè)試！`
     return `${strings[0]}${s1}`
 }
 let showText3 = handlePrice`您好${retail}`
 console.log(showText3)
 輸出：您好這個(gè)是一個(gè)測(cè)試！

十四、解構(gòu)賦值

解構(gòu)賦值是對(duì)可遍歷對(duì)象的取值做了一個(gè)極大的貢獻(xiàn)，使得賦值的過(guò)程變得簡(jiǎn)潔.可以嘗試的用在獲取接口數(shù)據(jù)、函數(shù)參數(shù)的場(chǎng)景中。

• 數(shù)組的解構(gòu)賦值

let arry = [1,2,3,4];
let [one,two] = array;
console.log(one,two);
//輸出：1,2

• 獲取需要的內(nèi)容

let [one,,three] = array;
console.log(one,three);
//輸出：1,3

• 獲取需要內(nèi)容并且使用rest變量保留剩余內(nèi)容

let [one,two,...last] = array;
console.log(one,two,last);
//輸出：1,2,[3,4]

• 解構(gòu)對(duì)象

let option ={width:100,height:30}
let [width,height] = option
console.log(width,height);
//輸出 100 30

let options ={
    size:{
        width:100,
        height:20
    },
    items:['Cakes','Dount'],
    extra:true
}
let [size:{width},items:[one]] = options;
console.log(width,one);
//輸出：100，Cakes