ES6 到 ES10 的新特性总结

浣滆€咃細楸煎ご鐨刉eb娴锋磱 鍏彿 / 闄堝ぇ楸煎ご

浠嬬粛

ECMAScript鏄竴绉嶇敱Ecma鍥介檯锛堝墠韬负娆ф床璁＄畻鏈哄埗閫犲晢鍗忎細锛夊湪鏍囧噯ECMA-262涓畾涔夌殑鑴氭湰璇█瑙勮寖銆傝繖绉嶈瑷€鍦ㄤ竾缁寸綉涓婂簲鐢ㄥ箍娉涳紝瀹冨線寰€琚О涓篔avaScript鎴朖Script锛屼絾瀹為檯涓婂悗涓よ€呮槸ECMA-262鏍囧噯鐨勫疄鐜板拰鎵╁睍銆?/p>

鍘嗗彶鐗堟湰

闄ゅ紑2020骞村彂甯冪殑ES11锛堢敱浜庡崟鐙啓涓€绡囨枃绔犳杩帮級锛屽湪姝や箣鍓嶅叡鏈夊崄涓狤CMA-262鐗堟湰鍙戣〃銆傚叾鍘嗗彶鐗堟湰濡備笅锛?/p>

1.1997骞?鏈堬細绗竴鐗?br> 2.1998骞?鏈堬細淇敼鏍煎紡锛屼娇鍏朵笌ISO/IEC16262鍥介檯鏍囧噯涓€鏍?br> 3.1999骞?2鏈堬細寮哄ぇ鐨勬鍒欒〃杈惧紡锛屾洿濂界殑璇嶆硶浣滅敤鍩熼摼澶勭悊锛屾柊鐨勬帶鍒舵寚浠わ紝寮傚父澶勭悊锛岄敊璇畾涔夋洿鍔犳槑纭紝鏁版嵁杈撳嚭鐨勬牸寮忓寲鍙婂叾瀹冩敼鍙?br> 4.2009骞?2鏈堬細娣诲姞涓ユ牸妯″紡("use strict")銆備慨鏀逛簡鍓嶉潰鐗堟湰妯＄硦涓嶆竻鐨勬蹇点€傚鍔犱簡getters锛宻etters锛孞SON浠ュ強鍦ㄥ璞″睘鎬т笂鏇村畬鏁寸殑鍙嶅皠銆?br> 5.2011骞?鏈堬細ECMAScript鏍?.1鐗堝舰寮忎笂瀹屽叏涓€鑷翠簬鍥介檯鏍囧噯ISO/IEC 16262:2011銆?br> 6.2015骞?鏈堬細ECMAScript 2015锛圗S2015锛夛紝绗?6 鐗堬紝鏈€鏃╄绉颁綔鏄疎CMAScript 6锛圗S6锛夛紝娣诲姞浜嗙被鍜屾ā鍧楃殑璇硶锛屽叾浠栫壒鎬у寘鎷凯浠ｅ櫒锛孭ython椋庢牸鐨勭敓鎴愬櫒鍜岀敓鎴愬櫒琛ㄨ揪寮忥紝绠ご鍑芥暟锛屼簩杩涘埗鏁版嵁锛岄潤鎬佺被鍨嬫暟缁勶紝闆嗗悎锛坢aps锛宻ets 鍜?weak maps锛夛紝promise锛宺eflection 鍜?proxies銆備綔涓烘渶鏃╃殑 ECMAScript Harmony 鐗堟湰锛屼篃琚彨鍋欵S6 Harmony銆?br> 7.2016骞?鏈堬細ECMAScript 2016锛圗S2016锛夛紝绗?7 鐗堬紝澶氫釜鏂扮殑姒傚康鍜岃瑷€鐗规€с€?br> 8.2017骞?鏈堬細ECMAScript 2017锛圗S2017锛夛紝绗?8 鐗堬紝澶氫釜鏂扮殑姒傚康鍜岃瑷€鐗规€с€?br> 9.2018骞?鏈堬細ECMAScript 2018 锛圗S2018锛夛紝绗?9 鐗堬紝鍖呭惈浜嗗紓姝ュ惊鐜紝鐢熸垚鍣紝鏂扮殑姝ｅ垯琛ㄨ揪寮忕壒鎬у拰 rest/spread 璇硶銆?br> 10.2019骞?鏈堬細ECMAScript 2019 锛圗S2019锛夛紝绗?10 鐗堛€?/p>

鍙戝睍鏍囧噯

TC39锛圱echnical Committee 39锛夋槸涓€涓帹鍔↗avaScript鍙戝睍鐨勫鍛樹細锛屽畠鐨勬垚璇潵鑷悇涓富娴佹祻瑙堝櫒鐨勪唬琛ㄦ垚璇€備細璁疄琛屽鏁板喅锛屾瘡涓€椤瑰喅绛栧彧鏈夊ぇ閮ㄥ垎浜哄悓鎰忎笖娌℃湁寮虹儓鍙嶅鎵嶈兘鍘诲疄鐜般€?/p>

TC39鎴愬憳鍒跺畾鐫€ECMAScript鐨勬湭鏉ャ€?/p>

姣忎竴椤规柊鐗规€ф渶缁堣杩涘叆鍒癊CMAScript瑙勮寖閲岋紝闇€瑕佺粡鍘?涓樁娈碉紝杩?涓樁娈靛涓嬶細

鈥?strong>Stage 0: Strawperson

鍙鏄疶C39鎴愬憳鎴栬€呰础鐚€咃紝閮藉彲浠ユ彁浜ゆ兂娉?/p>

鈥?strong>Stage 1: Proposal

杩欎釜闃舵纭畾涓€涓寮忕殑鎻愭

鈥?strong>Stage 2: draft

瑙勮寖鐨勭涓€涓増鏈紝杩涘叆姝ら樁娈电殑鎻愭澶ф鐜囦細鎴愪负鏍囧噯

鈥?strong>Stage 3: Candidate

杩涗竴姝ュ畬鍠勬彁妗堢粏鍒?/p>

鈥?strong>Stage 4: Finished

琛ㄧず宸插噯澶囧ソ灏嗗叾娣诲姞鍒版寮忕殑ECMAScript鏍囧噯涓?/p>

鐢变簬ES6浠ュ墠鐨勫睘鎬ц癁鐢熷勾搴曚箙杩滐紝鎴戜滑浣跨敤涔熸瘮杈冩櫘閬嶏紝閬備笉杩涜璇存槑锛孍S6涔嬪悗鐨勮瑷€椋庢牸璺烢S5浠ュ墠鐨勫樊寮傛瘮杈冨ぇ锛屾墍浠ュ崟鐙嫀鍑烘潵鍋氫釜璁板綍銆?/strong>

ES6(ES2015)

ES6鏄竴娆￠噸澶х殑闈╂柊锛屾瘮璧疯繃鍘荤殑鐗堟湰锛屾敼鍔ㄦ瘮杈冨ぇ锛屾湰鏂囦粎瀵瑰父鐢ㄧ殑API浠ュ強璇硶绯栬繘琛岃瑙ｃ€?/p>

Let 鍜?Const

鍦‥S6浠ュ墠锛?code>JS鍙湁var涓€绉嶅０鏄庢柟寮忥紝浣嗘槸鍦‥S6涔嬪悗锛屽氨澶氫簡let璺?code>const杩欎袱绉嶆柟寮忋€傜敤var瀹氫箟鐨勫彉閲忔病鏈夊潡绾т綔鐢ㄥ煙鐨勬蹇碉紝鑰?code>let璺?code>const鍒欎細鏈夛紝鍥犱负杩欎笁涓叧閿瓧鍒涘缓鏄笉涓€鏍风殑銆?/p>

鍖哄埆濡備笅锛?/p>

{
    var a = 10
    let b = 20
    const c = 30
}
a // 10
b // Uncaught ReferenceError: b is not defined
c // c is not defined
let d = 40
const e = 50
d = 60
d // 60
e = 70 // VM231:1 Uncaught TypeError: Assignment to constant variable.

绫伙紙Class锛?/h3>

鍦‥S6涔嬪墠锛屽鏋滄垜浠鐢熸垚涓€涓疄渚嬪璞★紝浼犵粺鐨勬柟娉曞氨鏄啓涓€涓瀯閫犲嚱鏁帮紝渚嬪瓙濡備笅锛?/p>

function Person(name, age) {
    this.name = name
    this.age = age
}
Person.prototype.information = function () {
    return 'My name is ' + this.name + ', I am ' + this.age
}

浣嗘槸鍦‥S6涔嬪悗锛屾垜浠彧闇€瑕佸啓鎴愪互涓嬪舰寮忥細

class Person {
    constructor(name, age) {
        this.name = name
        this.age = age
    }
    information() {
        return 'My name is ' + this.name + ', I am ' + this.age
    }
}

绠ご鍑芥暟锛圓rrow function锛?/h3>

绠ご鍑芥暟琛ㄨ揪寮忕殑璇硶姣斿嚱鏁拌〃杈惧紡鏇寸畝娲侊紝骞朵笖娌℃湁鑷繁鐨?code>this锛?code>arguments锛?code>super鎴?new.target銆傝繖浜涘嚱鏁拌〃杈惧紡鏇撮€傜敤浜庨偅浜涙湰鏉ラ渶瑕佸尶鍚嶅嚱鏁扮殑鍦版柟锛屽苟涓斿畠浠笉鑳界敤浣滄瀯閫犲嚱鏁般€?/p>

鍦‥S6浠ュ墠锛屾垜浠啓鍑芥暟涓€鑸槸锛?/p>

var list = [1, 2, 3, 4, 5, 6, 7]
var newList = list.map(function (item) {
    return item * item
})

浣嗘槸鍦‥S6閲岋紝鎴戜滑鍙互锛?/p>

const list = [1, 2, 3, 4, 5, 6, 7]
const newList = list.map(item => item * item)

鐪嬶紝鏄笉鏄畝娲佷簡涓嶅皯,鑰屼笖绠ご鍑芥暟鍋氬洖璋冪殑鏃跺€?strong>娌℃湁this鐨勬寚鍚戦棶棰?/strong>銆?/p>

鍑芥暟鍙傛暟榛樿鍊硷紙Function parameter defaults锛?/h3>

鍦‥S6涔嬪墠锛屽鏋滄垜浠啓鍑芥暟闇€瑕佸畾涔夊垵濮嬪€肩殑鏃跺€欙紝闇€瑕佽繖涔堝啓锛?/p>

function config (data) {
    var data = data || 'data is empty'
}

杩欐牱鐪嬭捣鏉ヤ篃娌℃湁闂锛屼絾鏄鏋滃弬鏁扮殑甯冨皵鍊间负false鏃跺氨浼氬嚭闂锛屼緥濡傛垜浠繖鏍疯皟鐢╟onfig锛?/p>

config(0)
config('')

閭ｄ箞缁撴灉灏辨案杩滄槸鍚庨潰鐨勫€?/p>

濡傛灉鎴戜滑鐢ㄥ嚱鏁板弬鏁伴粯璁ゅ€煎氨娌℃湁杩欎釜闂锛屽啓娉曞涓嬶細

const config = (data = 'data is empty') => {}

妯℃澘瀛楃涓诧紙Template string锛?/h3>

鍦‥S6涔嬪墠锛屽鏋滄垜浠鎷兼帴瀛楃涓诧紝鍒欓渶瑕佸儚杩欐牱锛?/p>

var name = 'kris'
var age = 24
var info = 'My name is ' + this.name + ', I am ' + this.age

浣嗘槸鍦‥S6涔嬪悗锛屾垜浠彧闇€瑕佸啓鎴愪互涓嬪舰寮忥細

const name = 'kris'
const age = 24
const info = `My name is ${name}, I am ${age}`

瑙ｆ瀯璧嬪€硷紙Destructuring assignment锛?/h3>

鎴戜滑閫氳繃瑙ｆ瀯璧嬪€? 鍙互灏嗗睘鎬?鍊间粠瀵硅薄/鏁扮粍涓彇鍑?璧嬪€肩粰鍏朵粬鍙橀噺銆?/p>

姣斿鎴戜滑闇€瑕佷氦鎹袱涓彉閲忕殑鍊硷紝鍦‥S6涔嬪墠鎴戜滑鍙兘闇€瑕侊細

var a = 10
var b = 20
var temp = a
a = b
b = temp

浣嗘槸鍦‥S6閲岋紝鎴戜滑鏈夛細

let a = 10
let b = 20
[a, b] = [b, a]

鏄笉鏄柟渚垮緢澶?/p>

妯″潡鍖栵紙Module锛?/h3>

鍦‥S6涔嬪墠锛孞S骞舵病鏈夋ā鍧楀寲鐨勬蹇碉紝鏈夌殑涔熷彧鏄ぞ鍖哄畾鍒剁殑绫讳技CommonJS鍜孉MD涔嬬被鐨勮鍒欍€備緥濡傚熀浜嶤ommonJS鐨凬odeJS锛?/p>

// circle.js
// 杈撳嚭
const { PI } = Math
exports.area = (r) => PI * r ** 2
exports.circumference = (r) => 2 * PI * r

// index.js
// 杈撳叆
const circle = require('./circle.js')
console.log(`鍗婂緞涓?4 鐨勫渾鐨勯潰绉槸 ${circle.area(4)}`)

鍦‥S6涔嬪悗鎴戜滑鍒欏彲浠ュ啓鎴愪互涓嬪舰寮忥細

// circle.js
// 杈撳嚭
const { PI } = Math
export const area = (r) => PI * r ** 2
export const circumference = (r) => 2 * PI * r

// index.js
// 杈撳叆
import {
    area
} = './circle.js'
console.log(`鍗婂緞涓?4 鐨勫渾鐨勯潰绉槸: ${area(4)}`)

鎵╁睍鎿嶄綔绗︼紙Spread operator锛?/h3>

鎵╁睍鎿嶄綔绗﹀彲浠ュ湪鍑芥暟璋冪敤/鏁扮粍鏋勯€犳椂, 灏嗘暟缁勮〃杈惧紡鎴栬€卻tring鍦ㄨ娉曞眰闈㈠睍寮€锛涜繕鍙互鍦ㄦ瀯閫犲瓧闈㈤噺瀵硅薄鏃? 灏嗗璞¤〃杈惧紡鎸塳ey-value鐨勬柟寮忓睍寮€銆?/p>

姣斿鍦‥S5鐨勬椂鍊欙紝鎴戜滑瑕佸涓€涓暟缁勭殑鍏冪礌杩涜鐩稿姞锛屽湪涓嶄娇鐢?code>reduce鎴栬€?code>reduceRight鐨勫満鍚堬紝鎴戜滑闇€瑕侊細

function sum(x, y, z) {
    return x + y + z;
}
var list = [5, 6, 7]
var total = sum.apply(null, list)

浣嗘槸濡傛灉鎴戜滑浣跨敤鎵╁睍鎿嶄綔绗︼紝鍙渶瑕佸涓嬶細

const sum = (x, y, z) => x + y + z
const list = [5, 6, 7]
const total = sum(...list)

闈炲父鐨勭畝鍗曪紝浣嗘槸瑕佹敞鎰忕殑鏄墿灞曟搷浣滅鍙兘鐢ㄤ簬鍙凯浠ｅ璞?/p>

濡傛灉鏄笅闈㈢殑鎯呭喌锛屾槸浼氭姤閿欑殑锛?/p>

var obj = {'key1': 'value1'}
var array = [...obj] // TypeError: obj is not iterable

瀵硅薄灞炴€х畝鍐欙紙Object attribute shorthand锛?/h3>

鍦‥S6涔嬪墠锛屽鏋滄垜浠灏嗘煇涓彉閲忚祴鍊间负鍚屾牱鍚嶇О鐨勫璞″厓绱狅紝鍒欓渶瑕侊細

var cat = 'Miaow'
var dog = 'Woof'
var bird = 'Peet peet'

var someObject = {
  cat: cat,
  dog: dog,
  bird: bird
}

浣嗘槸鍦‥S6閲屾垜浠氨鏂逛究寰堝锛?/p>

let cat = 'Miaow'
let dog = 'Woof'
let bird = 'Peet peet'

let someObject = {
  cat,
  dog,
  bird
}

console.log(someObject)

//{
//  cat: "Miaow",
//  dog: "Woof",
//  bird: "Peet peet"
//}

闈炲父鏂逛究

Promise

Promise 鏄疎S6鎻愪緵鐨勪竴绉嶅紓姝ヨВ鍐虫柟妗堬紝姣斿洖璋冨嚱鏁版洿鍔犳竻鏅版槑浜嗐€?/p>

Promise 缈昏瘧杩囨潵灏辨槸鎵胯鐨勬剰鎬濓紝杩欎釜鎵胯浼氬湪鏈潵鏈変竴涓‘鍒囩殑绛斿锛屽苟涓旇鎵胯鏈変笁绉嶇姸鎬侊紝鍒嗗埆鏄細

1.绛夊緟涓紙pending锛?.瀹屾垚浜?锛坮esolved锛?.鎷掔粷浜嗭紙rejected锛?/p>

杩欎釜鎵胯涓€鏃︿粠绛夊緟鐘舵€佸彉鎴愪负鍏朵粬鐘舵€佸氨姘歌繙涓嶈兘鏇存敼鐘舵€佷簡锛屼篃灏辨槸璇翠竴鏃︾姸鎬佸彉涓?resolved 鍚庯紝灏变笉鑳藉啀娆℃敼鍙?/p>

new Promise((resolve, reject) => {
  resolve('success')
  // 鏃犳晥
  reject('reject')
})

褰撴垜浠湪鏋勯€?Promise 鐨勬椂鍊欙紝鏋勯€犲嚱鏁板唴閮ㄧ殑浠ｇ爜鏄珛鍗虫墽琛岀殑

new Promise((resolve, reject) => {
  console.log('new Promise')
  resolve('success')
})
console.log('finifsh')
// new Promise -> finifsh

Promise 瀹炵幇浜嗛摼寮忚皟鐢紝涔熷氨鏄姣忔璋冪敤 then 涔嬪悗杩斿洖鐨勯兘鏄竴涓?Promise锛屽苟涓旀槸涓€涓叏鏂扮殑 Promise锛屽師鍥犱篃鏄洜涓虹姸鎬佷笉鍙彉銆傚鏋滀綘鍦?then 涓?浣跨敤浜?return锛岄偅涔?return 鐨勫€间細琚?Promise.resolve() 鍖呰

Promise.resolve(1)
  .then(res => {
    console.log(res) // => 1
    return 2 // 鍖呰鎴?Promise.resolve(2)
  })
  .then(res => {
    console.log(res) // => 2
  })

褰撶劧浜嗭紝Promise 涔熷緢濂藉湴瑙ｅ喅浜嗗洖璋冨湴鐙辩殑闂锛屼緥濡傦細

ajax(url, () => {
    // 澶勭悊閫昏緫
    ajax(url1, () => {
        // 澶勭悊閫昏緫
        ajax(url2, () => {
            // 澶勭悊閫昏緫
        })
    })
})

鍙互鏀瑰啓鎴愶細

ajax(url)
  .then(res => {
      console.log(res)
      return ajax(url1)
  }).then(res => {
      console.log(res)
      return ajax(url2)
  }).then(res => console.log(res))

for...of

for...of璇彞鍦ㄥ彲杩唬瀵硅薄锛堝寘鎷?Array锛孧ap锛孲et锛孲tring锛孴ypedArray锛宎rguments 瀵硅薄绛夌瓑锛変笂鍒涘缓涓€涓凯浠ｅ惊鐜紝璋冪敤鑷畾涔夎凯浠ｉ挬瀛愶紝骞朵负姣忎釜涓嶅悓灞炴€х殑鍊兼墽琛岃鍙ャ€?/p>

渚嬪瓙濡備笅锛?/p>

const array1 = ['a', 'b', 'c'];

for (const element of array1) {
      console.log(element)
}

// "a"
// "b"
// "c"

Symbol

symbol 鏄竴绉嶅熀鏈暟鎹被鍨嬶紝Symbol()鍑芥暟浼氳繑鍥?strong>symbol绫诲瀷鐨勫€硷紝璇ョ被鍨嬪叿鏈夐潤鎬佸睘鎬у拰闈欐€佹柟娉曘€傚畠鐨勯潤鎬佸睘鎬т細鏆撮湶鍑犱釜鍐呭缓鐨勬垚鍛樺璞★紱瀹冪殑闈欐€佹柟娉曚細鏆撮湶鍏ㄥ眬鐨剆ymbol娉ㄥ唽锛屼笖绫讳技浜庡唴寤哄璞＄被锛屼絾浣滀负鏋勯€犲嚱鏁版潵璇村畠骞朵笉瀹屾暣锛屽洜涓哄畠涓嶆敮鎸佽娉曪細"new Symbol()"銆?/p>

姣忎釜浠?code>Symbol()杩斿洖鐨剆ymbol鍊奸兘鏄敮涓€鐨勩€備竴涓猻ymbol鍊艰兘浣滀负瀵硅薄灞炴€х殑鏍囪瘑绗︼紱杩欐槸璇ユ暟鎹被鍨嬩粎鏈夌殑鐩殑銆?/p>

渚嬪瓙濡備笅锛?/p>

const symbol1 = Symbol();
const symbol2 = Symbol(42);
const symbol3 = Symbol('foo');

console.log(typeof symbol1); // "symbol"
console.log(symbol3.toString()); // "Symbol(foo)"
console.log(Symbol('foo') === Symbol('foo')); // false

杩唬鍣紙Iterator锛? 鐢熸垚鍣紙Generator锛?/h3>

杩唬鍣紙Iterator锛夋槸涓€绉嶈凯浠ｇ殑鏈哄埗锛屼负鍚勭涓嶅悓鐨勬暟鎹粨鏋勬彁渚涚粺涓€鐨勮闂満鍒躲€備换浣曟暟鎹粨鏋勫彧瑕佸唴閮ㄦ湁 Iterator 鎺ュ彛锛屽氨鍙互瀹屾垚渚濇杩唬鎿嶄綔銆?/p>

涓€鏃﹀垱寤猴紝杩唬鍣ㄥ璞″彲浠ラ€氳繃閲嶅璋冪敤next()鏄惧紡鍦拌凯浠ｏ紝浠庤€岃幏鍙栬瀵硅薄姣忎竴绾х殑鍊硷紝鐩村埌杩唬瀹岋紝杩斿洖{ value: undefined, done: true }

铏界劧鑷畾涔夌殑杩唬鍣ㄦ槸涓€涓湁鐢ㄧ殑宸ュ叿锛屼絾鐢变簬闇€瑕佹樉寮忓湴缁存姢鍏跺唴閮ㄧ姸鎬侊紝鍥犳闇€瑕佽皑鎱庡湴鍒涘缓銆傜敓鎴愬櫒鍑芥暟鎻愪緵浜嗕竴涓己澶х殑閫夋嫨锛氬畠鍏佽浣犲畾涔変竴涓寘鍚嚜鏈夎凯浠ｇ畻娉曠殑鍑芥暟锛?鍚屾椂瀹冨彲浠ヨ嚜鍔ㄧ淮鎶よ嚜宸辩殑鐘舵€併€傜敓鎴愬櫒鍑芥暟浣跨敤 function*^[2]璇硶缂栧啓銆傛渶鍒濊皟鐢ㄦ椂锛岀敓鎴愬櫒鍑芥暟涓嶆墽琛屼换浣曚唬鐮侊紝鑰屾槸杩斿洖涓€绉嶇О涓篏enerator鐨勮凯浠ｅ櫒銆傞€氳繃璋冪敤鐢熸垚鍣ㄧ殑涓嬩竴涓柟娉曟秷鑰楀€兼椂锛孏enerator鍑芥暟灏嗘墽琛岋紝鐩村埌閬囧埌yield鍏抽敭瀛椼€?/p>

鍙互鏍规嵁闇€瑕佸娆¤皟鐢ㄨ鍑芥暟锛屽苟涓旀瘡娆￠兘杩斿洖涓€涓柊鐨凣enerator锛屼絾姣忎釜Generator鍙兘杩唬涓€娆°€?/p>

鎵€浠ユ垜浠彲浠ユ湁浠ヤ笅渚嬪瓙锛?/p>

function* makeRangeIterator(start = 0, end = Infinity, step = 1) {
    for (let i = start; i < end; i += step) {
        yield i;
    }
}
var a = makeRangeIterator(1,10,2)
a.next() // {value: 1, done: false}
a.next() // {value: 3, done: false}
a.next() // {value: 5, done: false}
a.next() // {value: 7, done: false}
a.next() // {value: 9, done: false}
a.next() // {value: undefined, done: true}

Set/WeakSet

Set 瀵硅薄鍏佽浣犲瓨鍌ㄤ换浣曠被鍨嬬殑鍞竴鍊硷紝鏃犺鏄師濮嬪€兼垨鑰呮槸瀵硅薄寮曠敤銆?/p>

鎵€浠ユ垜浠彲浠ラ€氳繃Set瀹炵幇鏁扮粍鍘婚噸

const numbers = [2,3,4,4,2,3,3,4,4,5,5,6,6,7,5,32,3,4,5]
console.log([...new Set(numbers)]) 
// [2, 3, 4, 5, 6, 7, 32]

WeakSet 缁撴瀯涓?Set 绫讳技锛屼絾鍖哄埆鏈変互涓嬩袱鐐癸細

鈥?code>WeakSet 瀵硅薄涓彧鑳藉瓨鏀惧璞″紩鐢? 涓嶈兘瀛樻斁鍊? 鑰?Set 瀵硅薄閮藉彲浠ャ€傗€?code>WeakSet 瀵硅薄涓瓨鍌ㄧ殑瀵硅薄鍊奸兘鏄寮卞紩鐢ㄧ殑, 濡傛灉娌℃湁鍏朵粬鐨勫彉閲忔垨灞炴€у紩鐢ㄨ繖涓璞″€? 鍒欒繖涓璞″€间細琚綋鎴愬瀮鍦惧洖鏀舵帀. 姝ｅ洜涓鸿繖鏍? WeakSet 瀵硅薄鏄棤娉曡鏋氫妇鐨? 娌℃湁鍔炴硶鎷垮埌瀹冨寘鍚殑鎵€鏈夊厓绱犮€?/p>

鎵€浠ヤ唬鐮佸涓嬶細

var ws = new WeakSet()
var obj = {}
var foo = {}

ws.add(window)
ws.add(obj)

ws.has(window) // true
ws.has(foo)    // false, 瀵硅薄 foo 骞舵病鏈夎娣诲姞杩?ws 涓?

ws.delete(window) // 浠庨泦鍚堜腑鍒犻櫎 window 瀵硅薄
ws.has(window)    // false, window 瀵硅薄宸茬粡琚垹闄や簡

ws.clear() // 娓呯┖鏁翠釜 WeakSet 瀵硅薄

Map/WeakMap

Map 瀵硅薄淇濆瓨閿€煎銆備换浣曞€?瀵硅薄鎴栬€呭師濮嬪€? 閮藉彲浠ヤ綔涓轰竴涓敭鎴栦竴涓€笺€?/p>

渚嬪瓙濡備笅锛屾垜浠敋鑷冲彲浠ヤ娇鐢?code>NaN鏉ヤ綔涓洪敭鍊硷細

var myMap = new Map();
myMap.set(NaN, "not a number");

myMap.get(NaN); // "not a number"

var otherNaN = Number("foo");
myMap.get(otherNaN); // "not a number"

WeakMap 瀵硅薄鏄竴缁勯敭/鍊煎鐨勯泦鍚堬紝鍏朵腑鐨勯敭鏄急寮曠敤鐨勩€傚叾閿繀椤绘槸瀵硅薄锛岃€屽€煎彲浠ユ槸浠绘剰鐨勩€?/p>

璺?code>Map鐨勫尯鍒笌Set璺?code>WeakSet鐨勫尯鍒浉浼硷紝鍏蜂綋浠ｇ爜濡備笅锛?/p>

var wm1 = new WeakMap(),
    wm2 = new WeakMap(),
    wm3 = new WeakMap();
var o1 = {},
    o2 = function(){},
    o3 = window;

wm1.set(o1, 37);
wm1.set(o2, "azerty");
wm2.set(o1, o2); // value鍙互鏄换鎰忓€?鍖呮嫭涓€涓璞?
wm2.set(o3, undefined);
wm2.set(wm1, wm2); // 閿拰鍊煎彲浠ユ槸浠绘剰瀵硅薄,鐢氳嚦鍙﹀涓€涓猈eakMap瀵硅薄
wm1.get(o2); // "azerty"
wm2.get(o2); // undefined,wm2涓病鏈塷2杩欎釜閿?
wm2.get(o3); // undefined,鍊煎氨鏄痷ndefined

wm1.has(o2); // true
wm2.has(o2); // false
wm2.has(o3); // true (鍗充娇鍊兼槸undefined)

wm3.set(o1, 37);
wm3.get(o1); // 37
wm3.clear();
wm3.get(o1); // undefined,wm3宸茶娓呯┖
wm1.has(o1);   // true
wm1.delete(o1);
wm1.has(o1);   // false

Proxy/Reflect

Proxy 瀵硅薄鐢ㄤ簬瀹氫箟鍩烘湰鎿嶄綔鐨勮嚜瀹氫箟琛屼负锛堝灞炴€ф煡鎵撅紝璧嬪€硷紝鏋氫妇锛屽嚱鏁拌皟鐢ㄧ瓑锛夈€?/p>

Reflect 鏄竴涓唴缃殑瀵硅薄锛屽畠鎻愪緵鎷︽埅 JavaScript 鎿嶄綔鐨勬柟娉曘€傝繖浜涙柟娉曚笌 Proxy 鐨勬柟娉曠浉鍚屻€?code>Reflect涓嶆槸涓€涓嚱鏁板璞★紝鍥犳瀹冩槸涓嶅彲鏋勯€犵殑銆?/p>

Proxy璺?code>Reflect鏄潪甯稿畬缇庣殑閰嶅悎锛屼緥瀛愬涓嬶細

const observe = (data, callback) => {
      return new Proxy(data, {
            get(target, key) {
                return Reflect.get(target, key)
            },
            set(target, key, value, proxy) {
                  callback(key, value);
                  target[key] = value;
                    return Reflect.set(target, key, value, proxy)
            }
      })
}

const FooBar = { open: false };
const FooBarObserver = observe(FooBar, (property, value) => {
  property === 'open' && value 
          console.log('FooBar is open!!!') 
          : console.log('keep waiting');
});
console.log(FooBarObserver.open) // false
FooBarObserver.open = true // FooBar is open!!!

褰撶劧涔熶笉鏄粈涔堥兘鍙互琚唬鐞嗙殑锛屽鏋滃璞″甫鏈?code>configurable: false 璺?code>writable: false 灞炴€э紝鍒欎唬鐞嗗け鏁堛€?/p>

Regex瀵硅薄鐨勬墿灞?/h3>

姝ｅ垯鏂板绗﹀彿

鈥?code>i 淇グ绗?/p>

 // i 淇グ绗?
  /[a-z]/i.test('\u212A') // false
  /[a-z]/iu.test('\u212A') // true

鈥淇グ绗?/p>

// y淇グ绗?
  var s = 'aaa_aa_a';
  var r1 = /a+/g;
  var r2 = /a+/y;

  r1.exec(s) // ["aaa"]
  r2.exec(s) // ["aaa"]

  r1.exec(s) // ["aa"]
  r2.exec(s) // null

鈥tring.prototype.flags

  // 鏌ョ湅RegExp鏋勯€犲嚱鏁扮殑淇グ绗?
  var regex = new RegExp('xyz', 'i')
  regex.flags // 'i'

鈥nicode妯″紡

  var s = '馉'
  /^.$/.test(s) // false
  /^.$/u.test(s) // true

鈥杞箟

 // u杞箟
  /\,/ // /\,/
  /\,/u // 鎶ラ敊 娌℃湁u淇グ绗︽椂锛岄€楀彿鍓嶉潰鐨勫弽鏂滄潬鏄棤鏁堢殑锛屽姞浜唘淇グ绗﹀氨鎶ラ敊銆?

鈥㈠紩鐢?/p>

  const RE_TWICE = /^(?<word>[a-z]+)!\k<word>$/;
  RE_TWICE.test('abc!abc') // true
  RE_TWICE.test('abc!ab') // false

  const RE_TWICE = /^(?<word>[a-z]+)!$/;
  RE_TWICE.test('abc!abc') // true
  RE_TWICE.test('abc!ab') // false

瀛楃涓叉柟娉曠殑瀹炵幇鏀逛负璋冪敤RegExp鏂规硶

鈥?code>String.prototype.match 璋冪敤 RegExp.prototype[Symbol.match]鈥?code>String.prototype.replace 璋冪敤 RegExp.prototype[Symbol.replace]鈥?code>String.prototype.search 璋冪敤 RegExp.prototype[Symbol.search]鈥?code>String.prototype.split 璋冪敤 RegExp.prototype[Symbol.split]

姝ｅ垯鏂板灞炴€?/h3>

鈥?code>RegExp.prototype.sticky 琛ㄧず鏄惁鏈?code>y淇グ绗?/p>

  /hello\d/y.sticky // true

鈥?code>RegExp.prototype.flags鑾峰彇淇グ绗?/p>

  /abc/ig.flags // 'gi'

Math瀵硅薄鐨勬墿灞?/h3>

鈥?code>浜岃繘鍒惰〃绀烘硶 : 0b鎴?B寮€澶?/code>琛ㄧず浜岃繘鍒?0bXX鎴?code>0BXX)

鈥?code>浜岃繘鍒惰〃绀烘硶 : 0b鎴?B寮€澶?/code>琛ㄧず浜岃繘鍒?0bXX鎴?code>0BXX)

鈥?code>鍏繘鍒惰〃绀烘硶 : 0o鎴?O寮€澶?/code>琛ㄧず浜岃繘鍒?0oXX鎴?code>0OXX)

鈥?code>Number.EPSILON : 鏁板€兼渶灏忕簿搴?/p>

鈥?code>Number.MIN_SAFE_INTEGER : 鏈€灏忓畨鍏ㄦ暟鍊?-2^53)

鈥?code>Number.MAX_SAFE_INTEGER : 鏈€澶у畨鍏ㄦ暟鍊?2^53)

鈥?code>Number.parseInt() : 杩斿洖杞崲鍊肩殑鏁存暟閮ㄥ垎

鈥?code>Number.parseFloat() : 杩斿洖杞崲鍊肩殑娴偣鏁伴儴鍒?/p>

鈥?code>Number.isFinite() : 鏄惁涓烘湁闄愭暟鍊?/p>

鈥?code>Number.isNaN() : 鏄惁涓篘aN

鈥?code>Number.isInteger() : 鏄惁涓烘暣鏁?/p>

鈥?code>Number.isSafeInteger() : 鏄惁鍦ㄦ暟鍊煎畨鍏ㄨ寖鍥村唴

鈥?code>Math.trunc() : 杩斿洖鏁板€兼暣鏁伴儴鍒?/p>

鈥?code>Math.sign() : 杩斿洖鏁板€肩被鍨?姝ｆ暟1銆?code>璐熸暟-1銆?code>闆?)

鈥?code>Math.cbrt() : 杩斿洖鏁板€肩珛鏂规牴

鈥?code>Math.clz32() : 杩斿洖鏁板€肩殑32浣嶆棤绗﹀彿鏁存暟褰㈠紡

鈥?code>Math.imul() : 杩斿洖涓や釜鏁板€肩浉涔?/p>

鈥?code>Math.fround() : 杩斿洖鏁板€肩殑32浣嶅崟绮惧害娴偣鏁板舰寮?/p>

鈥?code>Math.hypot() : 杩斿洖鎵€鏈夋暟鍊煎钩鏂瑰拰鐨勫钩鏂规牴

鈥?code>Math.expm1() : 杩斿洖e^n - 1

鈥?code>Math.log1p() : 杩斿洖1 + n鐨勮嚜鐒跺鏁?Math.log(1 + n))

鈥?code>Math.log10() : 杩斿洖浠?0涓哄簳鐨刵鐨勫鏁?/p>

鈥?code>Math.log2() : 杩斿洖浠?涓哄簳鐨刵鐨勫鏁?/p>

鈥?code>Math.sinh() : 杩斿洖n鐨勫弻鏇叉寮?/p>

鈥?code>Math.cosh() : 杩斿洖n鐨勫弻鏇蹭綑寮?/p>

鈥?code>Math.tanh() : 杩斿洖n鐨勫弻鏇叉鍒?/p>

鈥?code>Math.asinh() : 杩斿洖n鐨勫弽鍙屾洸姝ｅ鸡

鈥?code>Math.acosh() : 杩斿洖n鐨勫弽鍙屾洸浣欏鸡

鈥?code>Math.atanh() : 杩斿洖n鐨勫弽鍙屾洸姝ｅ垏

Array瀵硅薄鐨勬墿灞?/h3>

鈥?code>Array.prototype.from锛氳浆鎹㈠叿鏈?code>Iterator鎺ュ彛鐨勬暟鎹粨鏋勪负鐪熸鏁扮粍锛岃繑鍥炴柊鏁扮粍銆?/p>

  console.log(Array.from('foo')) // ["f", "o", "o"]
  console.log(Array.from([1, 2, 3], x => x + x)) // [2, 4, 6]

鈥rray.prototype.of()锛氳浆鎹竴缁勫€间负鐪熸鏁扮粍锛岃繑鍥炴柊鏁扮粍銆?/p>

  Array.of(7)       // [7] 
  Array.of(1, 2, 3) // [1, 2, 3]

  Array(7)          // [empty, empty, empty, empty, empty, empty]
  Array(1, 2, 3)    // [1, 2, 3]

鈥rray.prototype.copyWithin()锛氭妸鎸囧畾浣嶇疆鐨勬垚鍛樺鍒跺埌鍏朵粬浣嶇疆锛岃繑鍥炲師鏁扮粍

  const array1 = ['a', 'b', 'c', 'd', 'e']

  console.log(array1.copyWithin(0, 3, 4)) // ["d", "b", "c", "d", "e"]

  console.log(array1.copyWithin(1, 3)) // ["d", "d", "e", "d", "e"]

鈥rray.prototype.find()锛氳繑鍥炵涓€涓鍚堟潯浠剁殑鎴愬憳

  const array1 = [5, 12, 8, 130, 44]

  const found = array1.find(element => element > 10)

  console.log(found) // 12

鈥rray.prototype.findIndex()锛氳繑鍥炵涓€涓鍚堟潯浠剁殑鎴愬憳绱㈠紩鍊?/p>

  const array1 = [5, 12, 8, 130, 44]

  const isLargeNumber = (element) => element > 13

  console.log(array1.findIndex(isLargeNumber)) // 3

鈥?code>Array.prototype.fill()锛氭牴鎹寚瀹氬€煎～鍏呮暣涓暟缁勶紝杩斿洖鍘熸暟缁?/p>

  const array1 = [1, 2, 3, 4]

  console.log(array1.fill(0, 2, 4)) // [1, 2, 0, 0]

  console.log(array1.fill(5, 1)) // [1, 5, 5, 5]

  console.log(array1.fill(6)) // [6, 6, 6, 6]

鈥?code>Array.prototype.keys()锛氳繑鍥炰互绱㈠紩鍊间负閬嶅巻鍣ㄧ殑瀵硅薄

  const array1 = ['a', 'b', 'c']
  const iterator = array1.keys()

  for (const key of iterator) {
        console.log(key)
  }

  // 0
  // 1
  // 2

鈥?code>Array.prototype.values()锛氳繑鍥炰互灞炴€у€间负閬嶅巻鍣ㄧ殑瀵硅薄

  const array1 = ['a', 'b', 'c']
  const iterator = array1.values()

  for (const key of iterator) {
        console.log(key)
  }

  // a
  // b
  // c

鈥?code>Array.prototype.entries()锛氳繑鍥炰互绱㈠紩鍊煎拰灞炴€у€间负閬嶅巻鍣ㄧ殑瀵硅薄

  const array1 = ['a', 'b', 'c']
  const iterator = array1.entries()

  console.log(iterator.next().value) // [0, "a"]
  console.log(iterator.next().value) // [1, "b"]

鈥㈡暟缁勭┖浣?code>锛欵S6鏄庣‘灏嗘暟缁勭┖浣嶈浆涓?/code>undefined鎴栬€?/code>empty

  Array.from(['a',,'b']) // [ "a", undefined, "b" ]
  [...['a',,'b']] // [ "a", undefined, "b" ]
  Array(3) //  [empty 脳 3]
  [,'a'] // [empty, "a"]

ES7(ES2016)

Array.prototype.includes()

includes() 鏂规硶鐢ㄦ潵鍒ゆ柇涓€涓暟缁勬槸鍚﹀寘鍚竴涓寚瀹氱殑鍊硷紝鏍规嵁鎯呭喌锛屽鏋滃寘鍚垯杩斿洖 true锛屽惁鍒欒繑鍥瀎alse銆?/p>

浠ｇ爜濡備笅锛?/p>

const array1 = [1, 2, 3]
console.log(array1.includes(2)) // true

const pets = ['cat', 'dog', 'bat']
console.log(pets.includes('cat')) // true
console.log(pets.includes('at')) // false

骞傝繍绠楃**

骞傝繍绠楃**锛屽叿鏈変笌Math.pow()涓€鏍风殑鍔熻兘锛屼唬鐮佸涓嬶細

console.log(2**10) // 1024
console.log(Math.pow(2, 10)) // 1024

妯℃澘瀛楃涓诧紙Template string锛?/h3>

鑷狤S7璧凤紝甯︽爣绛剧殑妯＄増瀛楅潰閲忛伒瀹堜互涓嬭浆涔夊簭鍒楃殑瑙勫垯锛?/p>

鈥nicode瀛楃浠?\u"寮€澶达紝渚嬪\u00A9鈥nicode鐮佷綅鐢?\u{}"琛ㄧず锛屼緥濡?code>\u{2F804}鈥㈠崄鍏繘鍒朵互"\x"寮€澶达紝渚嬪\xA9鈥㈠叓杩涘埗浠?"鍜屾暟瀛楀紑澶达紝渚嬪1

杩欒〃绀虹被浼间笅闈㈣繖绉嶅甫鏍囩鐨勬ā鐗堟槸鏈夐棶棰樼殑锛屽洜涓哄浜庢瘡涓€涓狤CMAScript璇硶锛岃В鏋愬櫒閮戒細鍘绘煡鎵炬湁鏁堢殑杞箟搴忓垪锛屼絾鏄彧鑳藉緱鍒拌繖鏄竴涓舰寮忛敊璇殑璇硶锛?/p>

latex`\unicode`
// 鍦ㄨ緝鑰佺殑ECMAScript鐗堟湰涓姤閿欙紙ES2016鍙婃洿鏃╋級
// SyntaxError: malformed Unicode character escape sequence

ES8(ES2017)

async/await

铏界劧Promise鍙互瑙ｅ喅鍥炶皟鍦扮嫳鐨勯棶棰橈紝浣嗘槸閾惧紡璋冪敤澶锛屽垯浼氬彉鎴愬彟涓€绉嶅舰寮忕殑鍥炶皟鍦扮嫳 鈥斺€?闈㈡潯鍦扮嫳锛屾墍浠ュ湪ES8閲屽垯鍑虹幇浜?code>Promise鐨勮娉曠硸async/await锛屼笓闂ㄨВ鍐宠繖涓棶棰樸€?/p>

鎴戜滑鍏堢湅涓€涓嬩笅闈㈢殑Promise浠ｇ爜锛?/p>

fetch('coffee.jpg')
    .then(response => response.blob())
    .then(myBlob => {
          let objectURL = URL.createObjectURL(myBlob)
          let image = document.createElement('img')
          image.src = objectURL
          document.body.appendChild(image)
    })
    .catch(e => {
          console.log('There has been a problem with your fetch operation: ' + e.message)
    })

鐒跺悗鍐嶇湅鐪?code>async/await鐗堢殑锛岃繖鏍风湅璧锋潵鏄笉鏄洿娓呮櫚浜嗐€?/p>

async function myFetch() {
      let response = await fetch('coffee.jpg')
      let myBlob = await response.blob()

      let objectURL = URL.createObjectURL(myBlob)
      let image = document.createElement('img')
      image.src = objectURL
      document.body.appendChild(image)
}

myFetch()

褰撶劧锛屽鏋滀綘鍠滄锛屼綘鐢氳嚦鍙互涓よ€呮贩鐢?/p>

async function myFetch() {
      let response = await fetch('coffee.jpg')
      return await response.blob()
}

myFetch().then((blob) => {
      let objectURL = URL.createObjectURL(blob)
      let image = document.createElement('img')
      image.src = objectURL
      document.body.appendChild(image)
})

Object.values()

Object.values()鏂规硶杩斿洖涓€涓粰瀹氬璞¤嚜韬殑鎵€鏈夊彲鏋氫妇灞炴€у€肩殑鏁扮粍锛屽€肩殑椤哄簭涓庝娇鐢╢or...in寰幆鐨勯『搴忕浉鍚?( 鍖哄埆鍦ㄤ簬 for-in 寰幆鏋氫妇鍘熷瀷閾句腑鐨勫睘鎬?)銆?/p>

浠ｇ爜濡備笅锛?/p>

const object1 = {
      a: 'somestring',
      b: 42,
      c: false
}
console.log(Object.values(object1)) // ["somestring", 42, false]

Object.entries()

Object.entries()鏂规硶杩斿洖涓€涓粰瀹氬璞¤嚜韬彲鏋氫妇灞炴€х殑閿€煎鏁扮粍锛屽叾鎺掑垪涓庝娇鐢?for...in 寰幆閬嶅巻璇ュ璞℃椂杩斿洖鐨勯『搴忎竴鑷达紙鍖哄埆鍦ㄤ簬 for-in 寰幆杩樹細鏋氫妇鍘熷瀷閾句腑鐨勫睘鎬э級銆?/p>

浠ｇ爜濡備笅锛?/p>

const object1 = {
      a: 'somestring',
      b: 42
}

for (let [key, value] of Object.entries(object1)) {
      console.log(`${key}: ${value}`)
}

// "a: somestring"
// "b: 42"

padStart()

padStart() 鏂规硶鐢ㄥ彟涓€涓瓧绗︿覆濉厖褰撳墠瀛楃涓?閲嶅锛屽鏋滈渶瑕佺殑璇?锛屼互渚夸骇鐢熺殑瀛楃涓茶揪鍒扮粰瀹氱殑闀垮害銆傚～鍏呬粠褰撳墠瀛楃涓茬殑寮€濮?宸︿晶)搴旂敤鐨勩€?/p>

浠ｇ爜濡備笅锛?/p>

const str1 = '5'
console.log(str1.padStart(2, '0')) // "05"

const fullNumber = '2034399002125581'
const last4Digits = fullNumber.slice(-4)
const maskedNumber = last4Digits.padStart(fullNumber.length, '*') 
console.log(maskedNumber) // "************5581"

padEnd()

padEnd() 鏂规硶浼氱敤涓€涓瓧绗︿覆濉厖褰撳墠瀛楃涓诧紙濡傛灉闇€瑕佺殑璇濆垯閲嶅濉厖锛夛紝杩斿洖濉厖鍚庤揪鍒版寚瀹氶暱搴︾殑瀛楃涓层€備粠褰撳墠瀛楃涓茬殑鏈熬锛堝彸渚э級寮€濮嬪～鍏呫€?/p>

const str1 = 'Breaded Mushrooms'
console.log(str1.padEnd(25, '.')) // "Breaded Mushrooms........"
const str2 = '200'
console.log(str2.padEnd(5)) // "200  "

鍑芥暟鍙傛暟缁撳熬閫楀彿锛團unction parameter lists and calls trailing commas锛?/h3>

鍦‥S5閲屽氨娣诲姞浜嗗璞＄殑灏鹃€楀彿锛屼笉杩囧苟涓嶆敮鎸佸嚱鏁板弬鏁帮紝浣嗘槸鍦‥S8涔嬪悗锛屼究寮€濮嬫敮鎸佽繖涓€鐗规€э紝浠ｇ爜濡備笅锛?/p>

// 鍙傛暟瀹氫箟
function f(p) {}
function f(p,) {} 

(p) => {}
(p,) => {}

class C {
  one(a,) {},
  two(a, b,) {},
}

var obj = {
  one(a,) {},
  two(a, b,) {},
};

// 鍑芥暟璋冪敤
f(p)
f(p,)

Math.max(10, 20)
Math.max(10, 20,)

浣嗘槸浠ヤ笅鐨勬柟寮忔槸涓嶅悎娉曠殑锛?/p>

浠呬粎鍖呭惈閫楀彿鐨勫嚱鏁板弬鏁板畾涔夋垨鑰呭嚱鏁拌皟鐢ㄤ細鎶涘嚭 SyntaxError銆傝€屼笖锛屽綋浣跨敤鍓╀綑鍙傛暟鐨勬椂鍊欙紝骞朵笉鏀寔灏惧悗閫楀彿锛屼緥瀛愬涓嬶細

function f(,) {} // SyntaxError: missing formal parameter
(,) => {}       // SyntaxError: expected expression, got ','
f(,)             // SyntaxError: expected expression, got ','

function f(...p,) {} // SyntaxError: parameter after rest parameter
(...p,) => {}        // SyntaxError: expected closing parenthesis, got ','

鍦ㄨВ鏋勯噷涔熷彲浠ヤ娇鐢紝浠ｇ爜濡備笅锛?/p>

// 甯︽湁灏惧悗閫楀彿鐨勬暟缁勮В鏋?
[a, b,] = [1, 2]

// 甯︽湁灏惧悗閫楀彿鐨勫璞¤В鏋?
var o = {
  p: 42, 
  q: true,
}
var {p, q,} = o

鍚屾牱鍦帮紝鍦ㄤ娇鐢ㄥ墿浣欏弬鏁版椂锛屼細鎶涘嚭 SyntaxError锛屼唬鐮佸涓嬶細

var [a, ...b,] = [1, 2, 3] // SyntaxError: rest element may not have a trailing comma

ShareArrayBuffer锛堝洜瀹夊叏闂锛屾殏鏃跺湪Chrome璺烣ireFox涓绂佺敤锛?/h3>

SharedArrayBuffer 瀵硅薄鐢ㄦ潵琛ㄧず涓€涓€氱敤鐨勶紝鍥哄畾闀垮害鐨勫師濮嬩簩杩涘埗鏁版嵁缂撳啿鍖猴紝绫讳技浜?ArrayBuffer 瀵硅薄锛屽畠浠兘鍙互鐢ㄦ潵鍦ㄥ叡浜唴瀛橈紙shared memory锛変笂鍒涘缓瑙嗗浘銆備笌 ArrayBuffer 涓嶅悓鐨勬槸锛孲haredArrayBuffer 涓嶈兘琚垎绂汇€?/p>

浠ｇ爜濡備笅锛?/p>

et sab = new SharedArrayBuffer(1024) // 蹇呴』瀹炰緥鍖?
worker.postMessage(sab)

Atomics瀵硅薄

Atomics瀵硅薄 鎻愪緵浜嗕竴缁勯潤鎬佹柟娉曠敤鏉ュ SharedArrayBuffer^[3] 瀵硅薄杩涜鍘熷瓙鎿嶄綔銆?/p>

鏂规硶濡備笅锛?/p>

鈥?strong>Atomics.add() 锛氬皢鎸囧畾浣嶇疆涓婄殑鏁扮粍鍏冪礌涓庣粰瀹氱殑鍊肩浉鍔狅紝骞惰繑鍥炵浉鍔犲墠璇ュ厓绱犵殑鍊笺€?/p>

鈥?strong>Atomics.and()锛氬皢鎸囧畾浣嶇疆涓婄殑鏁扮粍鍏冪礌涓庣粰瀹氱殑鍊肩浉涓庯紝骞惰繑鍥炰笌鎿嶄綔鍓嶈鍏冪礌鐨勫€笺€?/p>

鈥?strong>Atomics.compareExchange()锛氬鏋滄暟缁勪腑鎸囧畾鐨勫厓绱犱笌缁欏畾鐨勫€肩浉绛夛紝鍒欏皢鍏舵洿鏂颁负鏂扮殑鍊硷紝骞惰繑鍥炶鍏冪礌鍘熷厛鐨勫€笺€?/p>

鈥?strong>Atomics.exchange()锛氬皢鏁扮粍涓寚瀹氱殑鍏冪礌鏇存柊涓虹粰瀹氱殑鍊硷紝骞惰繑鍥炶鍏冪礌鏇存柊鍓嶇殑鍊笺€?/p>

鈥?strong>Atomics.load()锛氳繑鍥炴暟缁勪腑鎸囧畾鍏冪礌鐨勫€笺€?/p>

鈥?strong>Atomics.or()锛氬皢鎸囧畾浣嶇疆涓婄殑鏁扮粍鍏冪礌涓庣粰瀹氱殑鍊肩浉鎴栵紝骞惰繑鍥炴垨鎿嶄綔鍓嶈鍏冪礌鐨勫€笺€?/p>

鈥?strong>Atomics.store()锛氬皢鏁扮粍涓寚瀹氱殑鍏冪礌璁剧疆涓虹粰瀹氱殑鍊硷紝骞惰繑鍥炶鍊笺€?/p>

鈥?strong>Atomics.sub()锛氬皢鎸囧畾浣嶇疆涓婄殑鏁扮粍鍏冪礌涓庣粰瀹氱殑鍊肩浉鍑忥紝骞惰繑鍥炵浉鍑忓墠璇ュ厓绱犵殑鍊笺€?/p>

鈥?strong>Atomics.xor()锛氬皢鎸囧畾浣嶇疆涓婄殑鏁扮粍鍏冪礌涓庣粰瀹氱殑鍊肩浉寮傛垨锛屽苟杩斿洖寮傛垨鎿嶄綔鍓嶈鍏冪礌鐨勫€笺€?/p>

鈥?strong>Atomics.wait()锛氭娴嬫暟缁勪腑鏌愪釜鎸囧畾浣嶇疆涓婄殑鍊兼槸鍚︿粛鐒舵槸缁欏畾鍊硷紝鏄垯淇濇寔鎸傝捣鐩村埌琚敜閱掓垨瓒呮椂銆傝繑鍥炲€间负 "ok"銆?not-equal" 鎴?"time-out"銆傝皟鐢ㄦ椂锛屽鏋滃綋鍓嶇嚎绋嬩笉鍏佽闃诲锛屽垯浼氭姏鍑哄紓甯革紙澶у鏁版祻瑙堝櫒閮戒笉鍏佽鍦ㄤ富绾跨▼涓皟鐢?wait()锛夈€?/p>

鈥?strong>Atomics.wake()锛氬敜閱掔瓑寰呴槦鍒椾腑姝ｅ湪鏁扮粍鎸囧畾浣嶇疆鐨勫厓绱犱笂绛夊緟鐨勭嚎绋嬨€傝繑鍥炲€间负鎴愬姛鍞ら啋鐨勭嚎绋嬫暟閲忋€?/p>

鈥?strong>Atomics.isLockFree(size)锛氬彲浠ョ敤鏉ユ娴嬪綋鍓嶇郴缁熸槸鍚︽敮鎸佺‖浠剁骇鐨勫師瀛愭搷浣溿€傚浜庢寚瀹氬ぇ灏忕殑鏁扮粍锛屽鏋滃綋鍓嶇郴缁熸敮鎸佺‖浠剁骇鐨勫師瀛愭搷浣滐紝鍒欒繑鍥?true锛涘惁鍒欏氨鎰忓懗鐫€瀵逛簬璇ユ暟缁勶紝Atomics 瀵硅薄涓殑鍚勫師瀛愭搷浣滈兘鍙兘鐢ㄩ攣鏉ュ疄鐜般€傛鍑芥暟闈㈠悜鐨勬槸鎶€鏈笓瀹躲€?/p>

Object.getOwnPropertyDescriptors()

Object.getOwnPropertyDescriptors() 鏂规硶鐢ㄦ潵鑾峰彇涓€涓璞＄殑鎵€鏈夎嚜韬睘鎬х殑鎻忚堪绗︺€備唬鐮佸涓嬶細

const object1 = {
  property1: 42
}

const descriptors1 = Object.getOwnPropertyDescriptors(object1)

console.log(descriptors1.property1.writable) // true

console.log(descriptors1.property1.value) // 42

// 娴呮嫹璐濅竴涓璞?
Object.create(
  Object.getPrototypeOf(obj), 
  Object.getOwnPropertyDescriptors(obj) 
)

// 鍒涘缓瀛愮被
function superclass() {}
superclass.prototype = {
  // 鍦ㄨ繖閲屽畾涔夋柟娉曞拰灞炴€?
}
function subclass() {}
subclass.prototype = Object.create(superclass.prototype, Object.getOwnPropertyDescriptors({
  // 鍦ㄨ繖閲屽畾涔夋柟娉曞拰灞炴€?
}))

ES9(ES2018)

for await...of

for await...of 璇彞浼氬湪寮傛鎴栬€呭悓姝ュ彲杩唬瀵硅薄涓婂垱寤轰竴涓凯浠ｅ惊鐜紝鍖呮嫭 String锛?code>Array锛?code>Array-like 瀵硅薄锛堟瘮濡?code>arguments 鎴栬€?code>NodeList)锛?code>TypedArray锛?code>Map锛?Set鍜岃嚜瀹氫箟鐨勫紓姝ユ垨鑰呭悓姝ュ彲杩唬瀵硅薄銆傚叾浼氳皟鐢ㄨ嚜瀹氫箟杩唬閽╁瓙锛屽苟涓烘瘡涓笉鍚屽睘鎬х殑鍊兼墽琛岃鍙ャ€?/p>

閰嶅悎杩唬寮傛鐢熸垚鍣紝渚嬪瓙濡備笅锛?/p>

async function* asyncGenerator() {
      var i = 0
      while (i < 3) {
            yield i++
      }
}

(async function() {
      for await (num of asyncGenerator()) {
            console.log(num)
      }
})()
// 0
// 1
// 2

妯℃澘瀛楃涓诧紙Template string锛?/h3>

ES9寮€濮嬶紝妯℃澘瀛楃涓插厑璁稿祵濂楁敮鎸佸父瑙佽浆涔夊簭鍒楋紝绉婚櫎瀵笶CMAScript鍦ㄥ甫鏍囩鐨勬ā鐗堝瓧绗︿覆涓浆涔夊簭鍒楃殑璇硶闄愬埗銆?/p>

涓嶈繃锛岄潪娉曡浆涔夊簭鍒楀湪"cooked"褰撲腑浠嶇劧浼氫綋鐜板嚭鏉ャ€傚畠浠皢浠?code>undefined鍏冪礌鐨勫舰寮忓瓨鍦ㄤ簬"cooked"涔嬩腑锛屼唬鐮佸涓嬶細

function latex(str) { 
 return { "cooked": str[0], "raw": str.raw[0] }
} 

latex`\unicode` // { cooked: undefined, raw: "\unicode" }

姝ｅ垯琛ㄨ揪寮忓弽鍚?lookbehind)鏂█

棣栧厛鎴戜滑寰楀厛鐭ラ亾浠€涔堟槸鏂█(Assertion)銆?/p>

鏂█(Assertion)鏄竴涓褰撳墠鍖归厤浣嶇疆涔嬪墠鎴栦箣鍚庣殑瀛楃鐨勬祴璇曪紝 瀹冧笉浼氬疄闄呮秷鑰椾换浣曞瓧绗︼紝鎵€浠ユ柇瑷€涔熻绉颁负鈥滈潪娑堣€楁€у尮閰嶁€濇垨鈥滈潪鑾峰彇鍖归厤鈥濄€?/p>

姝ｅ垯琛ㄨ揪寮忕殑鏂█涓€鍏辨湁 4 绉嶅舰寮忥細

鈥?code>(?=pattern) 闆跺姝ｅ悜鑲畾鏂█(zero-width positive lookahead assertion)鈥?code>(?!pattern) 闆跺姝ｅ悜鍚﹀畾鏂█(zero-width negative lookahead assertion)鈥?code>(?<=pattern) 闆跺鍙嶅悜鑲畾鏂█(zero-width positive lookbehind assertion)鈥?code>(?<!pattern) 闆跺鍙嶅悜鍚﹀畾鏂█(zero-width negative lookbehind assertion)

鍦‥S9涔嬪墠锛孞avaScript 姝ｅ垯琛ㄨ揪寮忥紝鍙敮鎸佹鍚戞柇瑷€銆傛鍚戞柇瑷€鐨勬剰鎬濇槸锛氬綋鍓嶄綅缃悗闈㈢殑瀛楃涓插簲璇ユ弧瓒虫柇瑷€锛屼絾鏄苟涓嶆崟鑾枫€備緥瀛愬涓嬶細

'fishHeadfishTail'.match(/fish(?=Head)/g) // ["fish"]

鍙嶅悜鏂█鍜屾鍚戞柇瑷€鐨勮涓轰竴鏍凤紝鍙槸鏂瑰悜鐩稿弽銆備緥瀛愬涓嬶細

'abc123'.match(/(?<=(\d+)(\d+))$/) //  ["", "1", "23", index: 6, input: "abc123", groups: undefined]

姝ｅ垯琛ㄨ揪寮?Unicode 杞箟

姝ｅ垯琛ㄨ揪寮忎腑鐨刄nicode杞箟绗﹀厑璁告牴鎹甎nicode瀛楃灞炴€у尮閰峌nicode瀛楃銆傚畠鍏佽鍖哄垎瀛楃绫诲瀷锛屼緥濡傚ぇ鍐欏拰灏忓啓瀛楁瘝锛屾暟瀛︾鍙峰拰鏍囩偣绗﹀彿銆?/p>

閮ㄥ垎渚嬪瓙浠ｇ爜濡備笅锛?/p>

// 鍖归厤鎵€鏈夋暟瀛?
const regex = /^\p{Number}+$/u;
regex.test('虏鲁鹿录陆戮') // true
regex.test('銐涖墱銐?) // true
regex.test('鈪犫叀鈪⑩叄鈪も叆鈪︹収鈪ㄢ叐鈪叓') // true

// 鍖归厤鎵€鏈夌┖鏍?
\p{White_Space}

// 鍖归厤鍚勭鏂囧瓧鐨勬墍鏈夊瓧姣嶏紝绛夊悓浜?Unicode 鐗堢殑 \w
[\p{Alphabetic}\p{Mark}\p{Decimal_Number}\p{Connector_Punctuation}\p{Join_Control}]

// 鍖归厤鍚勭鏂囧瓧鐨勬墍鏈夐潪瀛楁瘝鐨勫瓧绗︼紝绛夊悓浜?Unicode 鐗堢殑 \W
[^\p{Alphabetic}\p{Mark}\p{Decimal_Number}\p{Connector_Punctuation}\p{Join_Control}]

// 鍖归厤 Emoji
/\p{Emoji_Modifier_Base}\p{Emoji_Modifier}?|\p{Emoji_Presentation}|\p{Emoji}\uFE0F/gu

// 鍖归厤鎵€鏈夌殑绠ご瀛楃
const regexArrows = /^\p{Block=Arrows}+$/u;
regexArrows.test('鈫愨啈鈫掆啌鈫斺啎鈫栤啑鈫樷啓鈬忊噽鈬戔噿鈬撯嚁鈬曗嚃鈬椻嚇鈬欌嚙鈬?) // true

鍏蜂綋鐨勫睘鎬у垪琛ㄥ彲鏌ョ湅锛歨ttps://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions/Unicode_Property_Escapes

姝ｅ垯琛ㄨ揪寮?s/dotAll 妯″紡

鍦ㄤ互寰€鐨勭増鏈噷锛孞S鐨勬鍒欑殑.鍙兘鍖归厤emoji璺熻缁堢粨绗︿互澶栫殑鎵€鏈夋枃鏈紝渚嬪锛?/p>

let regex = /./;

regex.test('\n');       // false
regex.test('\r');       // false
regex.test('\u{2028}'); // false
regex.test('\u{2029}'); // false

regex.test('\v');       // true
regex.test('\f');       // true
regex.test('\u{0085}'); // true

/foo.bar/.test('foo\nbar');     // false
/foo[^]bar/.test('foo\nbar');   // true

/foo.bar/.test('foo\nbar');     // false
/foo[\s]bar/.test('foo\nbar');   // true

浣嗘槸鍦‥S9涔嬪悗锛孞S姝ｅ垯澧炲姞浜嗕竴涓柊鐨勬爣蹇?s 鐢ㄦ潵琛ㄧず dotAll锛岃繖鍙互鍖归厤浠绘剰瀛楃銆備唬鐮佸涓嬶細

/foo.bar/s.test('foo\nbar');    // true

const re = /foo.bar/s;  //  绛変环浜?const re = new RegExp('foo.bar', 's');
re.test('foo\nbar');    // true
re.dotAll;      // true
re.flags;       // "s"

姝ｅ垯琛ㄨ揪寮忓懡鍚嶆崟鑾风粍

鍦ㄤ互寰€鐨勭増鏈噷锛孞S鐨勬鍒欏垎缁勬槸鏃犳硶鍛藉悕鐨勶紝鎵€浠ュ鏄撴贩娣嗐€備緥濡備笅闈㈣幏鍙栧勾鏈堟棩鐨勪緥瀛愶紝寰堝鏄撹浜烘悶涓嶆竻鍝釜鏄湀浠斤紝鍝釜鏄勾浠?

const matched = /(\d{4})-(\d{2})-(\d{2})/.exec('2019-01-01')
console.log(matched[0]);    // 2019-01-01
console.log(matched[1]);    // 2019
console.log(matched[2]);    // 01
console.log(matched[3]);    // 01

ES9寮曞叆浜嗗懡鍚嶆崟鑾风粍锛屽厑璁镐负姣忎竴涓粍鍖归厤鎸囧畾涓€涓悕瀛楋紝鏃究浜庨槄璇讳唬鐮侊紝鍙堜究浜庡紩鐢ㄣ€備唬鐮佸涓嬶細

const RE_DATE = /(?<year>\d{4})-(?<month>\d{2})-(?<day>\d{2})/;

const matchObj = RE_DATE.exec('1999-12-31');
const year = matchObj.groups.year; // 1999
const month = matchObj.groups.month; // 12
const day = matchObj.groups.day; // 31

const RE_OPT_A = /^(?<as>a+)?$/;
const matchObj = RE_OPT_A.exec('');

matchObj.groups.as // undefined
'as' in matchObj.groups // true

瀵硅薄鎵╁睍鎿嶄綔绗?/h3>

ES6涓坊鍔犱簡鏁扮粍鐨勬墿灞曟搷浣滅锛岃鎴戜滑鍦ㄦ搷浣滄暟缁勬椂鏇村姞绠€渚匡紝缇庝腑涓嶈冻鐨勬槸骞朵笉鏀寔瀵硅薄鎵╁睍鎿嶄綔绗︼紝浣嗘槸鍦‥S9寮€濮嬶紝杩欎竴鍔熻兘涔熷緱鍒颁簡鏀寔锛屼緥濡傦細

var obj1 = { foo: 'bar', x: 42 };
var obj2 = { foo: 'baz', y: 13 };

var clonedObj = { ...obj1 };
// 鍏嬮殕鍚庣殑瀵硅薄: { foo: "bar", x: 42 }

var mergedObj = { ...obj1, ...obj2 };
// 鍚堝苟鍚庣殑瀵硅薄: { foo: "baz", x: 42, y: 13 }

涓婇潰渚挎槸涓€涓畝渚跨殑娴呮嫹璐濄€傝繖閲屾湁涓€鐐瑰皬鎻愮ず锛屽氨鏄?code>Object.assign() 鍑芥暟浼氳Е鍙?setters锛岃€屽睍寮€璇硶鍒欎笉浼氥€傛墍浠ヤ笉鑳芥浛鎹篃涓嶈兘妯℃嫙Object.assign() 銆?/p>

濡傛灉瀛樺湪鐩稿悓鐨勫睘鎬у悕锛屽彧鏈夋渶鍚庝竴涓細鐢熸晥銆?/p>

Promise.prototype.finally()

finally()鏂规硶浼氳繑鍥炰竴涓?code>Promise锛屽綋promise鐨勭姸鎬佸彉鏇达紝涓嶇鏄彉鎴?code>rejected鎴栬€?code>fulfilled锛屾渶缁堥兘浼氭墽琛?code>finally()鐨勫洖璋冦€?/p>

渚嬪瓙濡備笅锛?/p>

fetch(url)
      .then((res) => {
        console.log(res)
      })
      .catch((error) => { 
        console.log(error)
      })
      .finally(() => { 
        console.log('缁撴潫')
    })

ES10(ES2019)

Array.prototype.flat() / flatMap()

flat() 鏂规硶浼氭寜鐓т竴涓彲鎸囧畾鐨勬繁搴﹂€掑綊閬嶅巻鏁扮粍锛屽苟灏嗘墍鏈夊厓绱犱笌閬嶅巻鍒扮殑瀛愭暟缁勪腑鐨勫厓绱犲悎骞朵负涓€涓柊鏁扮粍杩斿洖銆?/p>

flatMap()涓?map() 鏂规硶鍜屾繁搴︿负1鐨?flat() 鍑犱箮鐩稿悓.锛屼笉杩囧畠浼氶鍏堜娇鐢ㄦ槧灏勫嚱鏁版槧灏勬瘡涓厓绱狅紝鐒跺悗灏嗙粨鏋滃帇缂╂垚涓€涓柊鏁扮粍锛岃繖鏍锋晥鐜囦細鏇撮珮銆?/p>

渚嬪瓙濡備笅锛?/p>

var arr1 = [1, 2, 3, 4]

arr1.map(x => [x * 2]) // [[2], [4], [6], [8]]

arr1.flatMap(x => [x * 2]) // [2, 4, 6, 8]

// 娣卞害涓?
arr1.flatMap(x => [[x * 2]]) // [[2], [4], [6], [8]]

flatMap()鍙互浠ｆ浛reduce() 涓?concat()锛屼緥瀛愬涓嬶細

var arr = [1, 2, 3, 4]
arr.flatMap(x => [x, x * 2]) // [1, 2, 2, 4, 3, 6, 4, 8]
// 绛変环浜?
arr.reduce((acc, x) => acc.concat([x, x * 2]), []) // [1, 2, 2, 4, 3, 6, 4, 8]

浣嗚繖鏄潪甯镐綆鏁堢殑锛屽湪姣忔杩唬涓紝瀹冨垱寤轰竴涓繀椤昏鍨冨溇鏀堕泦鐨勬柊涓存椂鏁扮粍锛屽苟涓斿畠灏嗗厓绱犱粠褰撳墠鐨勭疮鍔犲櫒鏁扮粍澶嶅埗鍒颁竴涓柊鐨勬暟缁勪腑锛岃€屼笉鏄皢鏂扮殑鍏冪礌娣诲姞鍒扮幇鏈夌殑鏁扮粍涓€?/p>

String.prototype.trimStart() / trimLeft() / trimEnd() / trimRight()

鍦‥S5涓紝鎴戜滑鍙互閫氳繃trim()鏉ュ幓鎺夊瓧绗﹂灏剧殑绌烘牸锛屼絾鏄嵈鏃犳硶鍙幓鎺夊崟杈圭殑锛屼絾鏄湪ES10涔嬪悗锛屾垜浠彲浠ュ疄鐜拌繖涓姛鑳姐€?/p>

濡傛灉鎴戜滑瑕佸幓鎺夊紑澶寸殑绌烘牸锛屽彲浠ヤ娇鐢?code>trimStart()鎴栬€呭畠鐨勫埆鍚?code>trimLeft()锛?/p>

鍚屾牱鐨勶紝濡傛灉鎴戜滑瑕佸幓鎺夌粨灏剧殑绌烘牸锛屾垜浠彲浠ヤ娇鐢?code>trimEnd()鎴栬€呭畠鐨勫埆鍚?code>trimRight()銆?/p>

渚嬪瓙濡備笅锛?/p>

const Str = '   Hello world!  '
console.log(Str) // '   Hello world!  '
console.log(Str.trimStart()) // 'Hello world!  '
console.log(Str.trimLeft()) // 'Hello world!  '
console.log(Str.trimEnd()) // '   Hello world!'
console.log(Str.trimRight()) // '   Hello world!'

涓嶈繃杩欓噷鏈変竴鐐硅娉ㄦ剰鐨勬槸锛?code>trimStart()璺?code>trimEnd()鎵嶆槸鏍囧噯鏂规硶锛?code>trimLeft()璺?code>trimRight()鍙槸鍒悕銆?/p>

鍦ㄦ煇浜涘紩鎿庨噷锛堜緥濡侰hrome锛夛紝鏈変互涓嬬殑绛夊紡锛?/p>

String.prototype.trimLeft.name === "trimStart"

String.prototype.trimRight.name === "trimEnd"

Object.fromEntries()

Object.fromEntries() 鏂规硶鎶婇敭鍊煎鍒楄〃杞崲涓轰竴涓璞★紝瀹冩槸Object.entries()鐨勫弽鍑芥暟銆?/p>

渚嬪瓙濡備笅锛?/p>

const entries = new Map([
  ['foo', 'bar'],
  ['baz', 42]
])

const obj = Object.fromEntries(entries)

console.log(obj) // Object { foo: "bar", baz: 42 }

Symbol.prototype.description

description 鏄竴涓彧璇诲睘鎬э紝瀹冧細杩斿洖Symbol瀵硅薄鐨勫彲閫夋弿杩扮殑瀛楃涓层€備笌 Symbol.prototype.toString() 涓嶅悓鐨勬槸瀹冧笉浼氬寘鍚?code>Symbol()鐨勫瓧绗︿覆銆備緥瀛愬涓嬶細

Symbol('desc').toString();   // "Symbol(desc)"
Symbol('desc').description;  // "desc"
Symbol('').description;      // ""
Symbol().description;        // undefined

// 鍏峰悕 symbols
Symbol.iterator.toString();  // "Symbol(Symbol.iterator)"
Symbol.iterator.description; // "Symbol.iterator"

//鍏ㄥ眬 symbols
Symbol.for('foo').toString();  // "Symbol(foo)"
Symbol.for('foo').description; // "foo"

String.prototype.matchAll

matchAll() 鏂规硶杩斿洖涓€涓寘鍚墍鏈夊尮閰嶆鍒欒〃杈惧紡鐨勭粨鏋滃強鍒嗙粍鎹曡幏缁勭殑杩唬鍣ㄣ€傚苟涓旇繑鍥炰竴涓笉鍙噸鍚殑杩唬鍣ㄣ€備緥瀛愬涓嬶細

var regexp = /t(e)(st(\d?))/g
var str = 'test1test2'

str.match(regexp) // ['test1', 'test2']
str.matchAll(regexp) // RegExpStringIterator {}
[...str.matchAll(regexp)] // [['test1', 'e', 'st1', '1', index: 0, input: 'test1test2', length: 4], ['test2', 'e', 'st2', '2', index: 5, input: 'test1test2', length: 4]]

Function.prototype.toString() 杩斿洖娉ㄩ噴涓庣┖鏍?/h3>

鍦ㄤ互寰€鐨勭増鏈腑锛?code>Function.prototype.toString()寰楀埌鐨勫瓧绗︿覆鏄幓鎺夌┖鐧界鍙风殑锛屼絾鏄粠ES10寮€濮嬩細淇濈暀杩欎簺绌烘牸锛屽鏋滄槸鍘熺敓鍑芥暟鍒欒繑鍥炰綘鎺у埗鍙扮湅鍒扮殑鏁堟灉锛屼緥瀛愬涓嬶細

function sum(a, b) {
      return a + b;
}

console.log(sum.toString())
// "function sum(a, b) {
//         return a + b;
//  }"

console.log(Math.abs.toString()) // "function abs() { [native code] }"

try-catch

鍦ㄤ互寰€鐨勭増鏈腑锛?code>try-catch閲?code>catch鍚庨潰蹇呴』甯﹀紓甯稿弬鏁帮紝渚嬪锛?/p>

// ES10涔嬪墠
try {
// tryCode
} catch (err) {
// catchCode
}

浣嗘槸鍦‥S10涔嬪悗锛岃繖涓弬鏁板嵈涓嶆槸蹇呴』鐨勶紝濡傛灉鐢ㄤ笉鍒帮紝鎴戜滑鍙互涓嶇敤浼狅紝渚嬪锛?/p>

try {
      console.log('Foobar')
} catch {
      console.error('Bar')
}

BigInt

BigInt 鏄竴绉嶅唴缃璞★紝瀹冩彁渚涗簡涓€绉嶆柟娉曟潵琛ㄧず澶т簬 253 - 1 鐨勬暣鏁般€傝繖鍘熸湰鏄?Javascript涓彲浠ョ敤 Number 琛ㄧず鐨勬渶澶ф暟瀛椼€?strong>BigInt 鍙互琛ㄧず浠绘剰澶х殑鏁存暟銆?/p>

鍙互鐢ㄥ湪涓€涓暣鏁板瓧闈㈤噺鍚庨潰鍔?n 鐨勬柟寮忓畾涔変竴涓?BigInt 锛屽锛?code>10n锛屾垨鑰呰皟鐢ㄥ嚱鏁?code>BigInt()銆?/p>

鍦ㄤ互寰€鐨勭増鏈腑锛屾垜浠湁浠ヤ笅鐨勫紛绔細

// 澶т簬2鐨?3娆℃柟鐨勬暣鏁帮紝鏃犳硶淇濇寔绮惧害
2 ** 53 === (2 ** 53 + 1)
// 瓒呰繃2鐨?024娆℃柟鐨勬暟鍊硷紝鏃犳硶琛ㄧず
2 ** 1024 // Infinity

浣嗘槸鍦‥S10寮曞叆BigInt涔嬪悗锛岃繖涓棶棰樹究寰楀埌浜嗚В鍐炽€?/p>

浠ヤ笅鎿嶄綔绗﹀彲浠ュ拰 BigInt 涓€璧蜂娇鐢細 +銆?code>*銆?code>-銆?code>**銆?code>% 銆傞櫎 >>> 锛堟棤绗﹀彿鍙崇Щ锛変箣澶栫殑浣嶆搷浣滀篃鍙互鏀寔銆傚洜涓?BigInt 閮芥槸鏈夌鍙风殑锛?>>> 锛堟棤绗﹀彿鍙崇Щ锛変笉鑳界敤浜?BigInt銆?code>BigInt 涓嶆敮鎸佸崟鐩?(+) 杩愮畻绗︺€?/p>

/ 鎿嶄綔绗﹀浜庢暣鏁扮殑杩愮畻涔熸病闂銆傚彲鏄洜涓鸿繖浜涘彉閲忔槸 BigInt 鑰屼笉鏄?BigDecimal 锛岃鎿嶄綔绗︾粨鏋滀細鍚戦浂鍙栨暣锛屼篃灏辨槸璇翠笉浼氳繑鍥炲皬鏁伴儴鍒嗐€?/p>

BigInt 鍜?Number涓嶆槸涓ユ牸鐩哥瓑鐨勶紝浣嗘槸瀹芥澗鐩哥瓑鐨勩€?/p>

鎵€浠ュ湪BigInt鍑烘潵浠ュ悗锛孞S鐨勫師濮嬬被鍨嬩究澧炲姞鍒颁簡7涓紝濡備笅锛?/p>

鈥oolean鈥ull鈥ndefined鈥umber鈥tring鈥ymbol (ES6)鈥igInt (ES10)

globalThis

globalThis灞炴€у寘鍚被浼间簬鍏ㄥ眬瀵硅薄 this鍊笺€傛墍浠ュ湪鍏ㄥ眬鐜涓嬶紝鎴戜滑鏈夛細

globalThis === this // true

import()

闈欐€佺殑import 璇彞鐢ㄤ簬瀵煎叆鐢卞彟涓€涓ā鍧楀鍑虹殑缁戝畾銆傛棤璁烘槸鍚﹀０鏄庝簡 涓ユ牸妯″紡锛屽鍏ョ殑妯″潡閮借繍琛屽湪涓ユ牸妯″紡涓嬨€傚湪娴忚鍣ㄤ腑锛?code>import 璇彞鍙兘鍦ㄥ０鏄庝簡 type="module" 鐨?script 鐨勬爣绛句腑浣跨敤銆?/p>

浣嗘槸鍦‥S10涔嬪悗锛屾垜浠湁鍔ㄦ€?import()锛屽畠涓嶉渶瑕佷緷璧?type="module" 鐨剆cript鏍囩銆?/p>

鎵€浠ユ垜浠湁浠ヤ笅渚嬪瓙锛?/p>

const main = document.querySelector("main")
for (const link of document.querySelectorAll("nav > a")) {
      link.addEventListener("click", e => {
            e.preventDefault()

            import('/modules/my-module.js')
              .then(module => {
                    module.loadPageInto(main);
              })
              .catch(err => {
                    main.textContent = err.message;
              })
      })
}

绉佹湁鍏冪礌涓庢柟娉?/h3>

鍦‥S10涔嬪墠锛屽鏋滄垜浠瀹炵幇涓€涓畝鍗曠殑璁℃暟鍣ㄧ粍浠讹紝鎴戜滑鍙兘浼氳繖涔堝啓锛?/p>

// web component 鍐欐硶
class Counter extends HTMLElement {
      get x() { 
              return this.xValue
      }
      set x(value) {
              this.xValue = value
              window.requestAnimationFrame(this.render.bind(this))
      }

      clicked() {
            this.x++
      }

      constructor() {
            super()
            this.onclick = this.clicked.bind(this)
            this.xValue = 0
      }

      connectedCallback() { 
              this.render()
      }

      render() {
            this.textContent = this.x.toString()
      }
}
window.customElements.define('num-counter', Counter)

浣嗘槸鍦‥S10涔嬪悗鎴戜滑鍙互浣跨敤绉佹湁鍙橀噺杩涜缁勪欢灏佽锛屽涓嬶細

class Counter extends HTMLElement {
      #xValue = 0

      get #x() { 
          return #xValue
      }
      set #x(value) {
            this.#xValue = value
            window.requestAnimationFrame(this.#render.bind(this))
      }

      #clicked() {
            this.#x++
      }

      constructor() {
            super();
            this.onclick = this.#clicked.bind(this)
      }

      connectedCallback() { 
              this.#render()
      }

      #render() {
            this.textContent = this.#x.toString()
      }
}
window.customElements.define('num-counter', Counter)

鍙傝€冭祫鏂?/h2>

1.ECMAScript 6 鍏ラ棬^[4]
2.1.5涓囧瓧姒傛嫭ES6鍏ㄩ儴鐗规€?sup>[5]
3.MDN^[6]
4.ES2018 鏂扮壒寰佷箣锛氶潪杞箟搴忓垪鐨勬ā鏉垮瓧绗︿覆^[7]
5.姝ｅ垯琛ㄨ揪寮忓弽鍚?lookbehind)鏂█^[8]
6.Unicode property escapes^[9]
7.exnext鎻愭^[10]
8.ES7銆丒S8銆丒S9銆丒S10鏂扮壒鎬уぇ鐩樼偣
9.Ecma TC39^[11]
10.[ECMAScript] TC39 process^[12]
11.The TC39 Process^[13]

References

[1]KRISACHAN: https://github.com/KRISACHAN
[2] function*: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/function*
[3] SharedArrayBuffer: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/SharedArrayBuffer
[4]ECMAScript 6 鍏ラ棬: https://es6.ruanyifeng.com/#docs/
[5]1.5涓囧瓧姒傛嫭ES6鍏ㄩ儴鐗规€? https://juejin.im/post/5d9bf530518825427b27639d
[6]MDN: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript
[7]ES2018 鏂扮壒寰佷箣锛氶潪杞箟搴忓垪鐨勬ā鏉垮瓧绗︿覆: https://segmentfault.com/a/1190000013519526
[8]姝ｅ垯琛ㄨ揪寮忓弽鍚?lookbehind)鏂█: https://esnext.justjavac.com/proposal/regexp-lookbehind.html
[9]Unicode property escapes: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions/Unicode_Property_Escapes
[10]exnext鎻愭: https://esnext.justjavac.com/proposal/exponentiation-operator.html
[11]Ecma TC39: https://github.com/tc39
[12][ECMAScript] TC39 process: https://www.jianshu.com/p/b0877d1fc2a4
[13] The TC39 Process: https://tc39.es/process-document/