ECMAScript新特性

從本文你能瞭解到那些知識

• JavaScript和ECMAScript的關係
• let , const與塊級做用域
• 解構
• 字符串的擴展
• 數值的擴展
• 函數的擴展
• 數組的擴展
• 對象的擴展
• Proxy
• Reflect
• Promise
• class類
• Set，Map
• Symbol
• for...of..
• Iterable接口
• Generator

JavaScript和ECMAScript的關係

ES也是一門腳本語言，一般看做JavaScript的標準化規範，實際上JavaScript是ECMAScript的擴展語言
ECMAScript 和 JavaScript 的關係是，前者是後者的規格，後者是前者的一種實現（另外的 ECMAScript 方言還有 JScript 和 ActionScript）

JS在瀏覽器環境下，JS = WEB + ES

JS在Node環境下 JS = Node + ES

版本迭代

• 解決原有語法上的一些問題和不足
• 對原有語法進行加強
• 全新的對象，方法和功能
• 全新的數據類型，數據結構

let與塊級做用域

文章入口

解構

文章入口

字符串擴展

ES2015爲字符串添加了Iterator。因此字符串能夠for...of..遍歷
模板字符串

• 傳統字符串不支持換行 \n

  const str = `hello es2015
  
  this is made in China`
  console.log(str);  //會輸出空行
  
  const name = "tom"
  const msg = `hello ${name}` //插值表達式
  console.log(msg);

• 標籤模板

  //模板字符串前能夠添加標籤，是個方法 ["hello world"]
  const tag = console.log`hello world`

  const n = "mcgee"
  const bol = true
  function myTagFnc(arr,n,bol){ //參數爲靜態內容，插值，插值...
  console.log(arr,n,bol); //['hey,','is a','.'] 靜態內容的分割
  
  //標籤的做用，對值進行加工
  const sex = bol?"man":"woman"
  
  // return 123
  return arr[0]+n+arr[1]+sex+arr[2]
  }
  const result = myTagFnc`hey,${n} is a ${bol}.`
  
  console.log(result); //123 || hey,mcgee is a true  ||  hey,mcgee is a man

• 標籤的做用

對插值進行加工。文本的多語言化，翻譯成中英文。檢查模板字符串內的不安全字符

字符串新增經常使用方法

• includes() 表示是否找到了參數字符串
• startsWith() 表示參數字符串是否在原字符串的頭部
• endsWith() 表示參數字符串是否在原字符串的尾部
• repeat() 返回一個新字符串，表示將原字符串重複n次
• padStart(str.length,"用來補全的值"),padEnd() 字符串補全長度 (ES2017)

const msg = 'Mcgee is a man'
console.log(msg.startsWith("Mcgee")) //true
console.log(msg.endsWith("n")); //true
console.log(msg.includes("is")); //true

'na'.repeat(0) // ""
'na'.repeat(2.9) // "nana"
'na'.repeat(Infinity) // RangeError
'na'.repeat(-1) // RangeError
//若是repeat的參數是字符串，則會先轉換成數字。
'na'.repeat('na') // ""
'na'.repeat('3') // "nanana"

數值的擴展

• Number.parseInt()
• Number.parseFloat()
• Number.isInteger() 用來判斷一個數值是否爲整數
• 2 ** 3 //8 (ES2016)
• BigInt數據類型 （表示整數）

Number.isInteger(25) // true
Number.isInteger(25.0) // true
Number.isInteger(25.1) // false
Number.isInteger() // false
Number.isInteger(null) // false
Number.isInteger('15') // false
Number.isInteger(true) // false

函數的擴展

文章入口

數組的擴展

文章入口

對象的擴展

文章入口

Proxy,Reflect

文章入口

Class類

文章入口

Set,Map數據結構

文章入口

Symbol類型

文章入口

Iterator,Generator

文章入口