ES5和ES6的區別


ECMAScript5,即ES5,是ECMAScript的第五次修訂,於2009年完成標准化ECMAScript6,即ES6,是ECMAScript的第六次修訂,於2015年完成,也稱ES2015ES6是繼ES5之后的一次改進,相對於ES5更加簡潔。

接下來簡單的談談ES5和ES6的區別:

1.塊級作用域,關鍵字let,常量const:

  let聲明變量和const聲明常量,兩個都有塊級作用域,ES5中是沒有塊級作用域的,並且var有變量提升,在let中,使用的變量一定要進行聲明。let命令,聲明變量,用法和var差不多,但是let是為JavaScript新增了塊級作用域,ES5中是沒有塊級作用域的,並且var有變量提升的概念,但是在let中,使用的變量一定要進行聲明;const聲明一個只讀的常量。一旦聲明,常量的值就不能改變。const和let一樣只在當前代碼塊有效,且不能重復聲明,作用域不會被提升,聲明的常量必須被賦值。

var、let、const之間的區別:

    var聲明變量可以重復聲明,而let不可以重復聲明var是不受限於塊級的,而let是受限於塊級
    var會與window相映射(會掛一個屬性),而let不與window相映射
    var可以在聲明的上面訪問變量,而let有暫存死區,在聲明的上面訪問變量會報錯
    const聲明之后必須賦值,否則會報錯
    const定義不可變的量,改變了就會報錯
    const和let一樣不會與window相映射、支持塊級作用域、在聲明的上面訪問變量會報錯
2.箭頭函數

  ES6中的函數定義不再使用關鍵字function(),而是利用了()=>來進行定義。

   箭頭函數和普通函數的區別:

1.外形不同
  箭頭函數使用箭頭定義,普通函數中沒有
2.箭頭函數全都是匿名函數
  普通函數可以有匿名函數,也可以有具名函數
3.箭頭函數不能用於構造函數
  普通函數可以用於構造函數,以此創建對象實例
4.箭頭函數中this的指向不同
  在普通函數中this總是指向調用它的對象,如果用構造函數,它指向創建的對象實例。
  箭頭函數本身不創建this,也就是說箭頭函數本書沒有this,但是它在聲明時捕獲別人的this供自己使用(this一旦被捕獲,將不再變化)。即箭頭函數中的this是捕獲而來的。
  箭頭函數中的this是在它聲明時捕獲它所處作用域中的this。
5.箭頭函數不具有arguments對象
  每一個普通函數調用后都具有一個arguments對象,用來存儲實際傳遞的參數。但是箭頭函數並沒有此對象
6.其他區別:
(1).箭頭函數不能Generator函數
(2).箭頭函數不具有prototype原型對象。
(3).箭頭函數不具有super。
(4).箭頭函數不具有new.target。

  使用箭頭函數應該注意什么?

(1)用了箭頭函數,this就不是指向window,而是父級(指向是可變的)
(2)不能夠使用arguments對象
(3)不能用作構造函數,這就是說不能夠使用new命令,否則會拋出一個錯誤
(4)不可以使用yield命令,因此箭頭函數不能用作 Generator 函數

3.字符串模板

  模板字符串模板字符串是增強版的字符串,用反引號(`)標識,可以當作普通字符串使用,也可以用來定義多行字符串。

let name = 'world';
let myName = 'Jerry' ;
let str = '你好,${name} 我是 ${myName }'
str = str.replace(/\$\{([^}]*)\}/g,function(){
     return eval(arguments[1]);
   })
console.log(str);//你好,world 我是 Jerry
 4.賦值解構

  解構賦值ES6 允許按照一定模式,從數組和對象中提取值,對變量進行賦值

5.for of循環for...of循環可以遍歷數組、Set和Map結構、某些類似數組的對象、對象,以及字符串

1.Set和map的區別

應用場景Set用於數據重組,Map用於數據儲存Set: 
(1)成員不能重復
(2)只有鍵值沒有鍵名,類似數組
(3)可以遍歷,方法有add, delete,has
Map:
(1)本質上是健值對的集合,類似集合
(2)可以遍歷,可以跟各種數據格式轉換

ps:

Set方法可以很簡潔的完成數組去重。

let arr = [9,12,9,16,10,13];
let item = [...new Set(arr)];
console.log(item); //  [9, 12, 16, 10, 13]

For循環當中:

let arr = [9,16,88,10,15];
let sum = 0;
for(let i=0;i<arr.length;i++){
    sum += arr[i];
}
//138

相當於

let arr = [9,16,88,10,15];
let sum = 0;
for(item of arr){
    sum += item;
}
138

forEach、for in、for of三者區別:
  forEach更多的用來遍歷數組
  for in 一般常用來遍歷對象或json
  for of數組對象都可以遍歷,遍歷對象需要通過和Object.keys()
  for in循環出的是key,for of循環出的是value

6.Symbol

  Symbol是一種基本類型。Symbol 通過調用symbol函數產生,它接收一個可選的名字參數,該函數返回的symbol是唯一的。

7.系統庫的引用及導出

  ES5中需要先使用require導入,成為對象,再去進行真正引用
  ES6可以使用import方法來直接實現系統庫的引用,不需要額外制作一個類庫對象

  ES5中,要導出一個類給別的模塊使用,一般通過module.exports來實現,引用時,依然通過require方法來獲取。
  ES6中,使用export default實現同樣的功能,但要使用import方法來實現導入。

8.set數據結構
  Set數據結構,類似數組。所有的數據都是唯一的,沒有重復的值。它本身是一個構造函數
9.Proxies

  使用代理(Proxy)監聽對象的操作,然后可以做一些相應事情

10.promise

  Promise是異步編程的一種解決方案,比傳統的解決方案(回調函數和事件)更合理、強大

11.async、await

  使用 async/await, 搭配promise,可以通過編寫形似同步的代碼來處理異步流程, 提高代碼的簡潔性和可讀性async 用於申明一個 function 是異步的,而 await 用於等待一個異步方法執行完成。

后續會繼續更新補充~


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM