JavaScript知識總結 ES6篇

這里給大家分享我在網上總結出來的一些知識，希望對大家有所幫助

1. let、const、var的區別

（1）塊級作用域：塊作用域由 { }包括，let和const具有塊級作用域，var不存在塊級作用域，塊級作用域解決了ES5中的兩個問題：

• 內層變數可能覆寫外層變數
• 用來計數的回圈變數泄露為全域變數

（2）變數提升：var存在變數提升，let和const不存在變數提升，即在變數只能在宣告之后使用，否在會報錯，

（3）給全域添加屬性：瀏覽器的全域物件是window，Node的全域物件是global，var宣告的變數為全域變數，并且會將該變數添加為全域物件的屬性，但是let和const不會，

（4）重復宣告：var宣告變數時，可以重復宣告變數，后宣告的同名變數會覆寫之前宣告的遍歷，const和let不允許重復宣告變數，

（5）暫時性死區：在使用let、const命令宣告變數之前，該變數都是不可用的，這在語法上，稱為暫時性死區，使用var宣告的變數不存在暫時性死區，

（6）初始值設定：在變數宣告時，var 和 let 可以不用設定初始值，而const宣告變數必須設定初始值，

（7）指標指向：let和const都是ES6新增的用于創建變數的語法， let創建的變數是可以更改指標指向（可以重新賦值），但const宣告的變數是不允許改變指標的指向，

2. const物件的屬性可以修改嗎

const保證的并不是變數的值不能改動，而是變數指向的那個記憶體地址不能改動，對于基本型別的資料（數值、字串、布林值），其值就保存在變數指向的那個記憶體地址，因此等同于常量，

但對于參考型別的資料（主要是物件和陣列）來說，變數指向資料的記憶體地址，保存的只是一個指標，const只能保證這個指標是固定不變的，至于它指向的資料結構是不是可變的，就完全不能控制了，

3. 如果new一個箭頭函式的會怎么樣

箭頭函式是ES6中的提出來的，它沒有prototype，也沒有自己的this指向，更不可以使用arguments引數，所以不能New一個箭頭函式，

new運算子的實作步驟如下：

1. 創建一個物件
2. 將建構式的作用域賦給新物件（也就是將物件的__proto__屬性指向建構式的prototype屬性）
3. 指向建構式中的代碼，建構式中的this指向該物件（也就是為這個物件添加屬性和方法）
4. 回傳新的物件

所以，上面的第二、三步，箭頭函式都是沒有辦法執行的，

4. 箭頭函式與普通函式的區別

（1）箭頭函式比普通函式更加簡潔

• 如果沒有引數，就直接寫一個空括號即可
• 如果只有一個引數，可以省去引數的括號
• 如果有多個引數，用逗號分割
• 如果函式體的回傳值只有一句，可以省略大括號
• 如果函式體不需要回傳值，且只有一句話，可以給這個陳述句前面加一個void關鍵字，最常見的就是呼叫一個函式：

let fn = () => void doesNotReturn();

（2）箭頭函式沒有自己的this

箭頭函式不會創建自己的this， 所以它沒有自己的this，它只會在自己作用域的上一層繼承this，所以箭頭函式中this的指向在它在定義時已經確定了，之后不會改變，

（3）箭頭函式繼承來的this指向永遠不會改變

var id = 'GLOBAL';
var obj = {
  id: 'OBJ',
  a: function(){
    console.log(this.id);
  },
  b: () => {
    console.log(this.id);
  }
};
obj.a();    // 'OBJ'
obj.b();    // 'GLOBAL'
new obj.a()  // undefined
new obj.b()  // Uncaught TypeError: obj.b is not a constructor

物件obj的方法b是使用箭頭函式定義的，這個函式中的this就永遠指向它定義時所處的全域執行環境中的this，即便這個函式是作為物件obj的方法呼叫，this依舊指向Window物件，需要注意，定義物件的大括號{}是無法形成一個單獨的執行環境的，它依舊是處于全域執行環境中，

（4）call()、apply()、bind()等方法不能改變箭頭函式中this的指向

var id = 'Global';
let fun1 = () => {
    console.log(this.id)
};
fun1();                     // 'Global'
fun1.call({id: 'Obj'});     // 'Global'
fun1.apply({id: 'Obj'});    // 'Global'
fun1.bind({id: 'Obj'})();   // 'Global'

（5）箭頭函式不能作為建構式使用

建構式在new的步驟在上面已經說過了，實際上第二步就是將函式中的this指向該物件， 但是由于箭頭函式時沒有自己的this的，且this指向外層的執行環境，且不能改變指向，所以不能當做建構式使用，

（6）箭頭函式沒有自己的arguments

箭頭函式沒有自己的arguments物件，在箭頭函式中訪問arguments實際上獲得的是它外層函式的arguments值，

（7）箭頭函式沒有prototype

（8）箭頭函式不能用作Generator函式，不能使用yeild關鍵字

5. 箭頭函式的this指向哪?？

箭頭函式不同于傳統JavaScript中的函式，箭頭函式并沒有屬于??的this，它所謂的this是捕獲其所在上下?的 this 值，作為??的 this 值，并且由于沒有屬于??的this，所以是不會被new調?的，這個所謂的this也不會被改變，

可以?Babel理解?下箭頭函式: 

// ES6 
const obj = { 
  getArrow() { 
    return () => { 
      console.log(this === obj); 
    }; 
  } 
}

轉化后：

// ES5，由 Babel 轉譯
var obj = { 
   getArrow: function getArrow() { 
     var _this = this; 
     return function () { 
        console.log(_this === obj); 
     }; 
   } 
};

6. 擴展運算子的作用及使用場景

（1）物件擴展運算子

物件的擴展運算子(...)用于取出引數物件中的所有可遍歷屬性，拷貝到當前物件之中，

let bar = { a: 1, b: 2 };
let baz = { ...bar }; // { a: 1, b: 2 }

上述方法實際上等價于:

let bar = { a: 1, b: 2 };
let baz = Object.assign({}, bar); // { a: 1, b: 2 }

Object.assign方法用于物件的合并，將源物件（source）的所有可列舉屬性，復制到目標物件（target），Object.assign方法的第一個引數是目標物件，后面的引數都是源物件，(如果目標物件與源物件有同名屬性，或多個源物件有同名屬性，則后面的屬性會覆寫前面的屬性)，

同樣，如果用戶自定義的屬性，放在擴展運算子后面，則擴展運算子內部的同名屬性會被覆寫掉，

let bar = {a: 1, b: 2};
let baz = {...bar, ...{a:2, b: 4}};  // {a: 2, b: 4}

利用上述特性就可以很方便的修改物件的部分屬性，在redux中的reducer函式規定必須是一個純函式，reducer中的state物件要求不能直接修改，可以通過擴展運算子把修改路徑的物件都復制一遍，然后產生一個新的物件回傳，

需要注意：擴展運算子對物件實體的拷貝屬于淺拷貝，

（2）陣列擴展運算子

陣列的擴展運算子可以將一個陣列轉為用逗號分隔的引數序列，且每次只能展開一層陣列，

console.log(...[1, 2, 3])
// 1 2 3
console.log(...[1, [2, 3, 4], 5])
// 1 [2, 3, 4] 5

下面是陣列的擴展運算子的應用：

• 將陣列轉換為引數序列

function add(x, y) {
  return x + y;
}
const numbers = [1, 2];
add(...numbers) // 3

• 復制陣列

const arr1 = [1, 2];
const arr2 = [...arr1];

要記住：擴展運算子(…)用于取出引數物件中的所有可遍歷屬性，拷貝到當前物件之中，這里引數物件是個陣列，陣列里面的所有物件都是基礎資料型別，將所有基礎資料型別重新拷貝到新的陣列中，

• 合并陣列

如果想在陣列內合并陣列，可以這樣：

const arr1 = ['two', 'three'];
const arr2 = ['one', ...arr1, 'four', 'five'];
// ["one", "two", "three", "four", "five"]

• 擴展運算子與解構賦值結合起來，用于生成陣列

const [first, ...rest] = [1, 2, 3, 4, 5];
first // 1
rest  // [2, 3, 4, 5]

需要注意：如果將擴展運算子用于陣列賦值，只能放在引數的最后一位，否則會報錯，

const [...rest, last] = [1, 2, 3, 4, 5];         // 報錯
const [first, ...rest, last] = [1, 2, 3, 4, 5];  // 報錯

• 將字串轉為真正的陣列

[...'hello']    // [ "h", "e", "l", "l", "o" ]

• 任何 Iterator 介面的物件，都可以用擴展運算子轉為真正的陣列

比較常見的應用是可以將某些資料結構轉為陣列：

// arguments物件
function foo() {
  const args = [...arguments];
}

用于替換es5中的Array.prototype.slice.call(arguments)寫法，

• 使用Math函式獲取陣列中特定的值

const numbers = [9, 4, 7, 1];
Math.min(...numbers); // 1
Math.max(...numbers); // 9

7. Proxy 可以實作什么功能？

在 Vue3.0 中通過 Proxy 來替換原本的 Object.defineProperty 來實作資料回應式，

Proxy 是 ES6 中新增的功能，它可以用來自定義物件中的操作，

let p = new Proxy(target, handler)

target 代表需要添加代理的物件，handler 用來自定義物件中的操作，比如可以用來自定義 set 或者 get 函式，

下面來通過 Proxy 來實作一個資料回應式：

let onWatch = (obj, setBind, getLogger) => {
  let handler = {
    get(target, property, receiver) {
      getLogger(target, property)
      return Reflect.get(target, property, receiver)
    },
    set(target, property, value, receiver) {
      setBind(value, property)
      return Reflect.set(target, property, value)
    }
  }
  return new Proxy(obj, handler)
}
let obj = { a: 1 }
let p = onWatch(
  obj,
  (v, property) => {
    console.log(`監聽到屬性${property}改變為${v}`)
  },
  (target, property) => {
    console.log(`'${property}' = ${target[property]}`)
  }
)
p.a = 2 // 監聽到屬性a改變
p.a // 'a' = 2

在上述代碼中，通過自定義 set 和 get 函式的方式，在原本的邏輯中插入了我們的函式邏輯，實作了在對物件任何屬性進行讀寫時發出通知，

當然這是簡單版的回應式實作，如果需要實作一個 Vue 中的回應式，需要在 get 中收集依賴，在 set 派發更新，之所以 Vue3.0 要使用 Proxy 替換原本的 API 原因在于 Proxy 無需一層層遞回為每個屬性添加代理，一次即可完成以上操作，性能上更好，并且原本的實作有一些資料更新不能監聽到，但是 Proxy 可以完美監聽到任何方式的資料改變，唯一缺陷就是瀏覽器的兼容性不好，

8. 對物件與陣列的解構的理解

解構是 ES6 提供的一種新的提取資料的模式，這種模式能夠從物件或陣列里有針對性地拿到想要的數值，

1）陣列的解構

在解構陣列時，以元素的位置為匹配條件來提取想要的資料的：

const [a, b, c] = [1, 2, 3]

最終，a、b、c分別被賦予了陣列第0、1、2個索引位的值：

陣列里的0、1、2索引位的元素值，精準地被映射到了左側的第0、1、2個變數里去，這就是陣列解構的作業模式，還可以通過給左側變數陣列設定空占位的方式，實作對陣列中某幾個元素的精準提取：

const [a,,c] = [1,2,3]

2）物件的解構

物件解構比陣列結構稍微復雜一些，也更顯強大，在解構物件時，是以屬性的名稱為匹配條件，來提取想要的資料的，現在定義一個物件：

const stu = {
  name: 'Bob',
  age: 24
}

假如想要解構它的兩個自有屬性，可以這樣：

const { name, age } = stu

這樣就得到了 name 和 age 兩個和 stu 平級的變數：

注意，物件解構嚴格以屬性名作為定位依據，所以就算調換了 name 和 age 的位置，結果也是一樣的：

const { age, name } = stu

9. 如何提取高度嵌套的物件里的指定屬性？

有時會遇到一些嵌套程度非常深的物件：

const school = {
   classes: {
      stu: {
         name: 'Bob',
         age: 24,
      }
   }
}

像此處的 name 這個變數，嵌套了四層，此時如果仍然嘗試老方法來提取它：

const { name } = school

顯然是不奏效的，因為 school 這個物件本身是沒有 name 這個屬性的，name 位于 school 物件的“兒子的兒子”物件里面，要想把 name 提取出來，一種比較笨的方法是逐層解構：

const { classes } = school
const { stu } = classes
const { name } = stu
name // 'Bob'

但是還有一種更標準的做法，可以用一行代碼來解決這個問題：

const { classes: { stu: { name } }} = school
       
console.log(name)  // 'Bob'

可以在解構出來的變數名右側，通過冒號+{目標屬性名}這種形式，進一步解構它，一直解構到拿到目標資料為止，

10. 對 rest 引數的理解

擴展運算子被用在函式形參上時，它還可以把一個分離的引數序列整合成一個陣列：

function mutiple(...args) {
  let result = 1;
  for (var val of args) {
    result *= val;
  }
  return result;
}
mutiple(1, 2, 3, 4) // 24

這里，傳入 mutiple 的是四個分離的引數，但是如果在 mutiple 函式里嘗試輸出 args 的值，會發現它是一個陣列：

function mutiple(...args) {
  console.log(args)
}
mutiple(1, 2, 3, 4) // [1, 2, 3, 4]

這就是 … rest運算子的又一層威力了，它可以把函式的多個入參收斂進一個陣列里，這一點經常用于獲取函式的多余引數，或者像上面這樣處理函式引數個數不確定的情況，

11. ES6中模板語法與字串處理

ES6 提出了“模板語法”的概念，在 ES6 以前，拼接字串是很麻煩的事情：

var name = 'css'   
var career = 'coder' 
var hobby = ['coding', 'writing']
var finalString = 'my name is ' + name + ', I work as a ' + career + ', I love ' + hobby[0] + ' and ' + hobby[1]

僅僅幾個變數，寫了這么多加號，還要時刻小心里面的空格和標點符號有沒有跟錯地方，但是有了模板字串，拼接難度直線下降：

var name = 'css'   
var career = 'coder' 
var hobby = ['coding', 'writing']
var finalString = `my name is ${name}, I work as a ${career} I love ${hobby[0]} and ${hobby[1]}`

字串不僅更容易拼了，也更易讀了，代碼整體的質量都變高了，這就是模板字串的第一個優勢——允許用${}的方式嵌入變數，但這還不是問題的關鍵，模板字串的關鍵優勢有兩個：

• 在模板字串中，空格、縮進、換行都會被保留
• 模板字串完全支持“運算”式的運算式，可以在${}里完成一些計算

基于第一點，可以在模板字串里無障礙地直接寫 html 代碼：

let list = `
	<ul>
		<li>串列項1</li>
		<li>串列項2</li>
	</ul>
`;
console.log(message); // 正確輸出，不存在報錯

基于第二點，可以把一些簡單的計算和呼叫丟進 ${} 來做：

function add(a, b) {
  const finalString = `${a} + ${b} = ${a+b}`
  console.log(finalString)
}
add(1, 2) // 輸出 '1 + 2 = 3'

除了模板語法外， ES6中還新增了一系列的字串方法用于提升開發效率：

• 存在性判定：在過去，當判斷一個字符/字串是否在某字串中時，只能用 indexOf > -1 來做，現在 ES6 提供了三個方法：includes、startsWith、endsWith，它們都會回傳一個布林值來告訴你是否存在，

• includes：判斷字串與子串的包含關系：

const son = 'haha' 
const father = 'xixi haha hehe'
father.includes(son) // true

• startsWith：判斷字串是否以某個/某串字符開頭：

const father = 'xixi haha hehe'
father.startsWith('haha') // false
father.startsWith('xixi') // true

• endsWith：判斷字串是否以某個/某串字符結尾：

const father = 'xixi haha hehe'
father.endsWith('hehe') // true

• 自動重復：可以使用 repeat 方法來使同一個字串輸出多次（被連續復制多次）：

const sourceCode = 'repeat for 3 times;'
const repeated = sourceCode.repeat(3) 
console.log(repeated) // repeat for 3 times;repeat for 3 times;repeat for 3 times;

如果對您有所幫助，歡迎您點個關注，我會定時更新技術檔案，大家一起討論學習，一起進步，

標籤：JavaScript

上一篇：空間轉換/影片

下一篇：JavaScript深入理解系列：bind方法詳解以及手寫