สรุปคุณสมบัติใหม่ทั้งหมดใน JavaScript ECMAScript 6

เป็นเวลาแปดปีแล้วที่ ECMASCRIPT เปิดตัว ES6 อย่างเป็นทางการในปี 2558 ตั้งแต่ปี 2558 จะมีการเผยแพร่เวอร์ชันใหม่ในเดือนมิถุนายนทุกปีโดยมีปีในเวลานั้นเป็นหมายเลขเวอร์ชัน

ฟีเจอร์ใหม่จำนวนมากปรากฏในหลาย ๆ รุ่นเหล่านี้

PS: ข้อมูลบางอย่างบอกว่าทุกรุ่นหลังจาก ES2015 เรียกว่า ES6 และบางคนบอกว่า ES6 หมายถึง ES2015, ES7 หมายถึง ES2016 และอื่น ๆ ซึ่งจะไม่กล่าวถึงที่นี่

ES2015 (ES6)

ES2015 เป็นรุ่นที่มีการเปลี่ยนแปลงที่ใหญ่ที่สุด

var const let

ระดับ

บล็อก

ดังต่อไปนี้:

// ตัวแปรการประกาศให้ V = 100
V = 200
// ประกาศ const const v = 200
// แก้ไขค่าคงที่ // v = 300 //

รายงาน

ข้อ

const let

  var v = 100
-
-
  ให้วาล = 200
-
console.log (v)
console.log (val) // ข้อผิดพลาด Val ไม่ได้กำหนดไว้

เป็นสิ่งที่ควรค่าแก่การสังเกตว่าตัวแปรที่ประกาศใช้คำหลัก let หรือ const ไม่มีลักษณะของการส่งเสริมตัวแปรและมีโซนตายชั่วคราว

ส่วนขยายของฟังก์ชั่น

ช่วยให้ฟังก์ชั่นใช้ค่าเริ่มต้นใน

ES2015
  V = V? V: 100
  กลับ V
-
// ES2015
แถบฟังก์ชัน (v = 100) {
  กลับ V
}

เป็นที่น่าสังเกตว่า หากมีพารามิเตอร์หลายพารามิเตอร์ต้องใช้พารามิเตอร์เริ่มต้นจากด้านหน้าไปด้านหน้า

ฟังก์ชั่นลูกศรจะถูกเพิ่มเข้ามาใน ES2015 ซึ่งเป็นรูปแบบการจดช ว

เลข
  กลับ v``
-
// ฟังก์ชั่นลูกศรเขียน const foo = (v) => {
  กลับ V
-
// ตัวย่อ 1
const foo = v => {// มีพารามิเตอร์เดียวเท่านั้นที่สามารถละเว้นวงเล็บส่งคืน v
-
// ตัวย่อ 2
const foo = v => v // คุณสามารถละเว้นการส่งคืนและการจัดฟันดัดผมเมื่อมีการส่งคืนในคำ

this this .

เมื่อใช้ฟังก์ชั่นลูกศรไม่มีวัตถุอาร์กิวเมนต์ภายใน แต่ใช้พารามิเตอร์ที่เหลือ

อยู่

แทน

  // console.log (อาร์กิวเมนต์) // ReferenceRror: อาร์กิวเมนต์ไม่ได้กำหนดไว้
  console.log (args) // args เป็นอาร์เรย์}
Foo (1, 2, 3, 4) // [1, 2, 3, 4]

มา

ในฟังก์ชันใน ES2015 ชี้ไปที่ชื่อของ

ฟังก์ชัน {
  กลับ V
-
const bar = v => v
console.log (foo.name) // foo

Number Math

ค่า

บาร์

ใน ES2015 มีการใช้ 0b หรือ 0B เพื่อเป็นตัวแทนของไบนารีและ 0o หรือ 0O ใช้เพื่อเป็นตัวแทนของแปดค่า

รหัสตัวอย่างมีดังนี้:

console.log (0b1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111)
console.log (0O777 === 511) //

แอตทริบิวต์และวิธีการขยายโดยจริงสำหรับตัวเลขมีดังนี้:

Number.isinteger

Math.trunc

คืน

จะ

เก็บรูปแบบไว้และสามารถใช้ตัวแปร

ได้

// สตริงเทมเพลตสามารถรักษารูปแบบให้ str2 = `ชามสัปดาห์ '
// สตริงเทมเพลตสามารถใช้ตัวแปร const myname = 'ชามสัปดาห์'
ให้ str3 = `ผู้แต่ง: $ {myname}` // ใช้ $ {} เพื่อห่อ

ES2015 ยังขยายวิธีการบางอย่างสำหรับสตริงและอินสแตนซ์สตริงดังต่อไปนี้:

​

​และแยกออกเป็นเครื่องหมายจุลภาค,

รหัสตัวอย่างดังนี้:

const arr = [1, 2, 3, 4, 5, 6]
const newarr = [... arr] // คัดลอกอาร์เรย์ console.log (math.max.call (null, ... arr)) // ใช้แต่ละรายการในอาร์เรย์เป็นพารามิเตอร์

นอกจากนี้ จัดเตรียมชุดของวิธีการซึ่งจะถูกนำมาใช้ทีละหนึ่ง:

)

Array.from() สร้างวัตถุคล้ายอาร์เรย์หรือวัตถุที่วนซ้ำเป็นอาร์เรย์ใหม่

  return array. จาก (อาร์กิวเมนต์) // แปลงอาร์กิวเมนต์เป็นอาร์เรย์}

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

Array.of() : สร้างอาร์เรย์ใหม่ที่มีจำนวนอาร์กิวเมนต์ตัวแปร ตัวอย่าง รหัสตัวอย่างมีดังนี้:

array.of (1) // [1]
array.of (จริง, 1, 'หนึ่งชามสัปดาห์') // [true, 1, 'หนึ่งชามสัปดาห์']

array.prototype.copywithin (), คัดลอกส่วนหนึ่งของอาร์เรย์ไปยังสถานที่อื่นในอาร์เรย์เดียวกัน และการกลับมามันจะไม่เปลี่ยนความยาวของอาร์เรย์ดั้งเดิม

รหัสตัวอย่างมีดังนี้:

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

// เริ่มต้นที่ดัชนี 2 และคัดลอกเนื้อหาเป็นดัชนี 0 ที่ปลาย arr.copywithin (0, 2) // [3, 4, 3, 4]

Array.prototype.find() ตามฟังก์ชันการเรียกกลับที่กำหนด ค้นหาองค์ประกอบการจับคู่แรกและกลับมาที่ไม่ได้กำหนดหากไม่

พบ
arr.find (item => item === 2) // 2 (องค์ประกอบระบุ),

Array.prototype.findIndex() ตามฟังก์ชั่นการโทรกลับที่กำหนดค้นหาดัชนีขององค์ประกอบการจับคู่แรกกลับมาหากไม่พบ - 1 , รหัสตัวอย่างมีดังนี้:

const arr = [1, 2, 3, 4]
arr.findindex (item => item === 2) // 1 (ระบุดัชนี)

array.prototype.fill

Array.prototype.fill() เติมอาร์เรย์ด้วยค่าที่ กำหนด

, 3, 4]
// เติมดัชนี 1-3 ด้วยค่าที่กำหนด
arr.fill ('ชามสัปดาห์', 1, 3) // [1, 'ชามสัปดาห์', 'ชามสัปดาห์', 4]

Array.prototype.keys() ส่งคืนวัตถุที่วนซ้ำซึ่งมีเนื้อหา เป็นกุญแจสำคัญของอาร์เรย์ รหัสตัวอย่างมีดังนี้:

const arr = [1, จริง, 'ชามสัปดาห์']
คีย์ const = arr.keys ()
สำหรับ (const i of Keys) {
  console.log (I) // ผลการสำรวจ 0 1 2
}

ที่

ซึ่ง

Array.prototype.values() คือค่าของอาร์เรย์

ค่า const = arr.values ​​()
สำหรับ (const i ของค่า) {
  console.log (I) // ผลการสำรวจ 1 จริงชามสัปดาห์}

1 Array.prototype.entries() ส่งคืนวัตถุที่วนซ้ำซึ่งเนื้อหาเป็นอาร์เรย์ 0

ของ

อาร์เรย์

ดั้งเดิม

const iterator = arr.entries ()
console.log (array. จาก (iterator)) // [[0, 1], [1, true], [2, 'ชามสัปดาห์']]

การขยายของวัตถุ

ใน ES2015 อนุญาตให้ชื่อแอตทริบิวต์ของวัตถุและ

สอดคล้อง

กัน

คุณสามารถเขียนชื่อแอตทริบิวต์ได้

อายุ Const = 18
const person = {myName, อายุ}
console.log (บุคคล) // {myname: 'ชามของโจว', อายุ: 18}

นอกจากนี้เมื่อกำหนดวัตถุคุณจะได้รับอนุญาตให้ใช้ [] นิพจน์ที่ห่อเป็นชื่อแอตทริบิวต์

Const myname = 'A Bowl Week'
อายุ Const = 18
const person = {
  myname,
  ['A' + 'G' + 'E']: อายุ,
-
console.log (บุคคล) // {myname: 'หนึ่งชาม zhou', อายุ: 18}

Object.is() : ใช้เพื่อเปรียบเทียบว่าค่าสองค่าเท่ากันหรือไม่ === - 0 ปัญหา

รหัสตัวอย่างมีดังนี้:

console.log (nan === nan) // false
console.log (+0 === -0) // true

console.log (object.is (nan, nan)) // true
console.log (object.is (+0, -0)) // false

Object.assign() : คัดลอกค่าของคุณสมบัติที่สามารถระบุได้ทั้งหมดจากวัตถุแหล่งหนึ่งหรือมากกว่าไปยังวัตถุเป้าหมายและส่งคืนวัตถุเป้าหมาย

ตัวอย่าง รหัสมีดังนี้:

const person = object.assign ({}, {ชื่อ: 'หนึ่งชาม Zhou'}, {อายุ: 18})
console.log (บุคคล) // {ชื่อ: 'หนึ่งชาม Zhou', อายุ: 18}

• Object.setPrototypeOf() (
• Object.getPrototypeOf() : รับวัตถุต้นแบบ ;

ชั้นเรียน

นำเสนอแนวคิดของคลาสใน ES2015 และคลาสมีอยู่ในระดับ

ไวยากรณ์
  ตัวสร้าง (อายุ) {
    // แอตทริบิวต์ this.myname = 'ชามสัปดาห์'
    this.age = อายุ
  -
  // วิธีการพิมพ์แบบสแตติกแบบคงที่ () {
    console.log ()
  -
  // accessor รับ myname () {
    console.log ('getter')
    กลับ 'ชามสัปดาห์'
  -
  ตั้งค่า myName (v) {
    console.log ('setter' + v)
  -
  setName (v) {
    this.myname = v
  -
-
คน const = บุคคลใหม่ (18)

'

ywanzhou') // ทริกเกอร์ setter accessor console.log (person.myname) // ทริกเกอร์ getter

accessor

จำเพาะ

เราได้รับอนุญาตให้ใช้การส่งออกไปยังโมดูลส่งออกและนำเข้าเพื่อแนะนำ

โมดูล
นำเข้า a, {b} จาก 'm' // นำเข้าการส่งออกเริ่มต้นในโมดูล m และนำเข้าสมาชิก B และแยกต่างหาก b
นำเข้า * เป็นจาก 'M' // นำเข้าสมาชิกทั้งหมดในการนำเข้าโมดูล 'M' // ดำเนินการโมดูล M โมดูลส่งออก const b = 1 // ส่งออกแยกออกจากการส่งออกค่าเริ่มต้น B // การส่งออกค่าเริ่มต้น {B} // ส่งออกตามความต้องการ การส่งออก {b เป็น bb} // เปลี่ยนชื่อและส่งออกส่งออก {b} จาก 'm' // นำเข้าสมาชิก B ในโมดูล M และการส่งออก

การกำหนด

โครงสร้าง

ที่

ระบุ

จากวัตถุ

ของ Zhou ', 18]
// สลับค่าของตัวแปรทั้งสองให้ A = 1
ให้ b = 2
; [a, b] = [b, a]
console.log (a, b) // 2 1

// การกำหนดโครงสร้างวัตถุให้ {ชื่อ: objname/* การทำลายโครงสร้างการเปลี่ยนชื่อ*/, sex} = {ชื่อ: 'ชามแห่งสัปดาห์', เพศ: 1}

// การกำหนดโครงสร้างการกำหนดค่าพารามิเตอร์ฟังก์ชันแถบฟังก์ชัน ({ชื่อ, อายุ}) {
  ชื่อคืน + อายุ
-
Bar ({ชื่อ: 'A Bowl of Week', อายุ: 18}) //

สัญลักษณ์

เป็น Symbol() ข้อมูลใหม่ใน ES2015 พารามิเตอร์

​

​
 * ไวยากรณ์ * สัญลักษณ์ ([คำอธิบาย])
 * * คำอธิบาย -> เป็นข้อมูลคำอธิบายเพิ่มเติม *//
// สร้างค่าของประเภทสัญลักษณ์ const mysymbol = symbol ()
console.log (mysymbol) // symbol ()

Const myName = Symbol ('A Bowl of Weeks')
console.log (typeof myname) //

สัญลักษณ์สัญลักษณ์ยังมีชุดของคุณสมบัติและวิธีการที่จะไม่ได้รับการแนะนำที่นี่

สัญญาสัญญา

เป็น วิธีแก้ปัญหาแบบอะซิงโครนัส ที่ให้ไว้ใน ES2015 ซึ่งแก้ปัญหาของการโทรกลับนรก

วัตถุ สัญญา สามารถสร้างได้ผ่านตัวสร้าง Promise()

• )
• ได้รับการแก้ไข: หมายถึงการดำเนินการเสร็จสมบูรณ์
• ปฏิเสธ: หมายถึงการดำเนินการล้มเหลว

มีเพียงสองประเภทของการสลับสถานะคือ:

Promise Promise then

• →
• ที่รอการแก้ไข→

แก้ไข

then เมธอดก็มีอินสแตนซ์ Promise จะถูกส่งคืน

ดังที่แสดงในรูปด้านล่าง:

รหัสตัวอย่างมีดังนี้:

สัญญาใหม่ ((แก้ไข, ปฏิเสธ) => {
    console.log ('ฉันเป็นบันทึกในสัญญาแรก')
    แก้ไข()
-
    .แล้ว(() => {
        console.log ('ฉันเป็นบันทึกในครั้งแรกแล้ว')
    -
    .แล้ว(() => {
        console.log ('ฉันเป็นบันทึกในวินาทีจากนั้น แต่ฉันมีข้อยกเว้น')
        โยนข้อผิดพลาดใหม่ ('ข้อผิดพลาด')
    -
    .แล้ว(() => {
        console.log ('ฉันเป็นบันทึกการโทรกลับครั้งแรกในครั้งที่สาม แต่ฉันจะไม่ดำเนินการเพราะมีข้อยกเว้นที่เกิดขึ้นเหนือฉัน')
    -
        console.log ('ฉันเป็นบันทึกการโทรกลับครั้งที่สองในครั้งที่สามจากนั้นฉันก็ดำเนินการ'))
    -
    .แล้ว(() => {
        console.log ('ฉันเป็นบันทึกในสี่แล้วฉันสามารถดำเนินการตามปกติ')
    -

/* ผลการดำเนินการมีดังนี้: ฉันเป็นบันทึกในสัญญาแรก
ฉันเป็นบันทึกในตอนแรกแล้ว
ฉันเป็นคนที่สองในครั้งที่สอง แต่ฉันได้รับการ

ยกเว้น วิธีการของสัญญามีดังนี้:

Promise.prototype.den
• Promise.prototype.catch() then
• Promise.prototype.then() มันต้องการพารามิเตอร์สองตัวส่วนใหญ่: ฟังก์ชั่นการเรียกกลับของความสำเร็จและความล้มเหลวของสัญญา
• Promise.all() : แพ็คหลายอินสแตนซ์เป็นอินสแตนซ์ใหม่ส่งคืนอาร์เรย์ผลลัพธ์หลังจากการเปลี่ยนแปลงสถานะอินสแตนซ์ทั้งหมด (เปลี่ยนแปลงการเปลี่ยนแปลงทั้งหมดจากนั้นส่งคืน)
• Promise.race() : แพ็คหลายอินสแตนซ์เป็นอินสแตนซ์ใหม่คืนสถานะอินสแตนซ์ทั้งหมดจัดลำดับความสำคัญ เปลี่ยนผลลัพธ์ (เปลี่ยนก่อนและส่งคืนก่อน)
• Promise.resolve() : แปลงวัตถุเป็นวัตถุสัญญา (เทียบเท่ากับ new Promise(resolve => resolve()) )
• Promise.reject() : แปลงวัตถุเป็นสถานะของ rejected วัตถุสัญญา (เทียบเท่ากับ new Promise((resolve, reject) => reject()) )

iterator

iterator เป็นตัววนซ้ำ โครงสร้างการปรับใช้อินเทอร์เฟซการวนซ้ำสามารถข้ามไปได้ด้วยวิธีที่เป็นเอกภาพ

โครงสร้างข้อมูลที่ใช้อินเทอร์เฟซที่วนซ้ำโดยทั่วไปจะใช้ตัวเองหรือสืบทอดแอตทริบิวต์ Symbol.iterator และเป็นวัตถุที่วนซ้ำ คุณสมบัติ Symbol.iterator นั้นเป็นฟังก์ชันซึ่งเป็นฟังก์ชั่นการสร้างตัววนซ้ำเริ่มต้นของโครงสร้างข้อมูลปัจจุบัน

วัตถุที่มีวิธี next() สามารถเรียกได้ว่าเป็นวัตถุที่วนซ้ำ วัตถุ next() จะส่งคืนวัตถุที่มีสองค่า

ดังที่แสดงด้านล่าง:

• value : ค่า JavaScript ใด ๆ ที่ส่งคืนโดยตัววนซ้ำ สามารถละเว้นได้เมื่อ done true
• done true ค่าบู value false

อินเทอร์เฟซตัววนซ้ำที่ให้โดย JavaScript แสดงไว้ในรูปด้านล่าง:

ตอนนี้เราใช้ตัววนซ้ำสำหรับ OBJ รหัสมีดังนี้:

const obj = {
    [symbol.iterator] () {
        กลับ {
            ต่อไป () {
                console.log ('iterator ดำเนินการ');
                กลับ {
                    ค่า: '',
                    ทำ: จริง // ธงไม่ว่าจะจบลงจริงหมายถึงมันจบลง}
            -
        -
    -
}

เพิ่ม

การพิมพ์ในวิธี next()

(

)

คำหลักของ function ใช้ * เครื่องหมายดอกจันระหว่างชื่อฟังก์ชั่นและชื่อฟังก์ชันและใช้คำหลัก yield ภายในฟังก์ชั่นเพื่อกำหนดสถานะที่แตกต่างกัน

โค้ดตัวอย่างมีดังนี้:

function* testGenerator () {
  // ผลผลิตกำหนดอัตราผลตอบแทนของรัฐ 'ชามสัปดาห์'
  ให้ผลผลิต 'คุณสมบัติ ESNEW'
  return 'generator' // terminate generator แม้ว่าจะมีคำหลักในภายหลัง แต่ก็จะไม่ถูกต้อง}
const g = testGenerator () // ส่งคืนวัตถุเครื่องกำเนิดและย้ายสถานะผ่านวิธีถัดไป () วิธี g.next ()
/ * {value: 'A zhou', ทำ: false} *//

G.Next ()
/ * {value: 'es คุณสมบัติใหม่', ทำ: false} *//

G.Next ()
/ * {value: 'Generator', Done: TRUE} */

ซีและ

วัตถุพร็อกซี reffect ถูกใช้เพื่อสร้างวัตถุพร็อกซีเพื่อใช้การสกัดกั้นและการปรับแต่งของการดำเนินการขั้นพื้นฐาน

ก์

Proxy Proxy

<html lang="th">
<หัว>
  <meta charset = "utf-8" />
  <meta http-equiv = "x-ua ที่เข้ากันได้" เนื้อหา = "ie = edge" />
  <meta name = "viewport" content = "width = ความกว้างของอุปกรณ์, ระดับเริ่มต้น = 1.0" />
  <link href = "https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.0.2/css/bootstrap.min.css" rel = "ภายนอก nofoll
  <title> อัปเดต DOM ผ่าน Set </title> โดยอัตโนมัติโดยอัตโนมัติ
</หัว>

<ร่างกาย>
  <p class = "card" style = "ความกว้าง: 300px; มาร์จิ้น: 100px auto">
    <p class = "การ์ดการ์ด">
      <h1 id = "ชื่อ"> </h1>
      <button id = "btn" class = "btn btn-primary"> แก้ไข </button>
    </p>
  </p>
  <สคริปต์>
    // รับ Dom Node const name = document.getElementById ('ชื่อ')
    const btn = document.getElementById ('btn')
    // กำหนดฟังก์ชั่นที่ปรับเปลี่ยนค่า const updatedom = (el, value) => {
      el.innerhtml = ค่า
    -
    const person = proxy ใหม่ ({
      ชื่อ: 'หนึ่งชามโจ๊ก'
    -
      SET (Target, Propkey, Value) {
        // หากค่าภายในการเปลี่ยนแปลงโทรไปที่การอัปเดตของเรา
        อัปเดต (ชื่อ, ค่า)
        เป้าหมาย [propkey] = ค่า
        กลับเป็นจริง
      -
    -
    name.innerhtml = person.name
    // คลิกปุ่มเพื่อทริกเกอร์การดำเนินการแก้ไข btn.addeventListener ('คลิก', () => {
      person.name === 'ชามโจว'?
        (person.name = 'ชามโจ๊ก'):
        (person.name = 'One Bowl Zhou')
    -
  </สคริปต์>
</ร่างกาย>
</html>

รหัสด้านบนใช้วิธีการตั้งค่าสำหรับการเชื่อมโยงข้อมูล

Reflect handlers วัตถุที่จัดทำโดย ECMASCRIPT2015

การไตร่ตรองไม่ใช่ตัวสร้างซึ่งหมายความว่าไม่สามารถสร้างอินสแตนซ์ได้

การดำเนินการสกัดกั้นแต่ละครั้งในวัตถุ Proxy (ตัวอย่างเช่น: get , delete ฯลฯ ) เรียกใช้วิธี Reflect กลับภายใน วิธีการคงที่ที่มันมีให้สอดคล้องกับชื่อวิธีการใน handlers ในพร็อกซี

ดังต่อไปนี้:

ถูก

Map WeakSet Set WeakMap

• Set WeakSet WeakSet คล้าย Set

อาร์เรย์

การ

พัฒนาจริงคือการใช้ข้อมูลซ้ำซ้อน

const set = ชุดใหม่ (arr)
// วัตถุที่ตั้งไว้สามารถใช้ ... เพื่อขยายรายการทั้งหมด console.log ([... set]) // [1, 2, 3, 4, 5]

• Map และ WeakMap คล้ายกับวัตถุและเก็บไว้ใน รูปแบบของคู่คีย์-ค่าใช่ความแตกต่างระหว่างทั้งสองคือคู่คีย์-ค่าของ Map สามารถกำหนดได้ในขณะที่ปุ่มของ WeakMap จะต้องอ้างอิงถึงวัตถุและค่าสามารถเป็นประเภทใดก็ได้

ES2016 (ES7)

ES2016 เผยแพร่คุณสมบัติใหม่ไม่กี่ตัวโดยส่วนใหญ่เป็นคุณสมบัติใหม่สองอย่างดังที่แสดงในรูปด้านล่าง:

ผู้ประกอบการเลขชี้กำลัง

ให้

Math.pow

** )

(2, 10)) // true

array.prototype.includes () วิธี

เพิ่มวิธี includes() ไปยังต้นแบบอาร์เรย์ใน

ES2016 รหัสตัวอย่างมีดังนี้:

const arr = [1, 2, 3, 4, 5, nan]
console.log (arr.indexof (nan)) // -1
console.log (arr.includes (nan)) // จริง

เป็นที่น่าสังเกตว่า NaN และ NaN , +0 และ -0 มีค่าเท่ากันเมื่อใช้ includes()

ES2017 (ES8)

Async/Await Syntax Sugar

Promise จะแก้ปัญหาของการโทรกลับนรกหากมีสายโซ่มากเกินไปความสามารถในการอ่านจะยังคงแย่ลง

คำสัญญาถูกเขียนดังนี้:

; (ฟังก์ชั่น () {
  ฟังก์ชั่นสัญญา (v) {
    คืนสัญญาใหม่ ((แก้ไข, ปฏิเสธ) => {
      แก้ไข (v)
    -
  -
  const p = สัญญา (1)
  P.then (res => {
    Return Promise (res)
  }). จากนั้น (res => {
    console.log (res)
  -
}) ()

หากสัญญาต่อไปขึ้นอยู่กับการเรียกร้องก่อนหน้านี้การโทรนี้จะยาว

มาก
  ฟังก์ชั่นสัญญา (v) {
    คืนสัญญาใหม่ ((แก้ไข, ปฏิเสธ) => {
      แก้ไข (v)
    -
  -
  const r1 = รอสัญญา (1)
  const r2 = รอสัญญา (R1)
  const res = รอสัญญา (R2)
  console.log (res)
}) ()

อย่างที่คุณเห็นเราสามารถใช้ async/รอน้ำตาลวากยสัมพันธ์เพื่อเขียนคำสัญญาเป็นวิธีการเขียนแบบแบน

Atomics Object

ES2017

เพิ่ม

วัตถุอะตอม new

ขยายสำหรับวัตถุใน ES2017 ดังต่อไปนี้:

Object.values ​​():
• Object.entries()
• Object.values() อาร์เรย์ของค่าคุณสมบัติที่สามารถระบุได้ทั้งหมดของวัตถุที่กำหนดเอง;
• วัตถุตัว
• Object.getOwnPropertyDescriptors()

การขยายฟังก์ชั่น

ใน ES2017 ช่วยให้เราสามารถเพิ่มเครื่องหมายจุลภาคในตอนท้ายของรายการพารามิเตอร์ฟังก์ชั่น ต้องเปลี่ยนรหัสสองบรรทัด

รหัสตัวอย่างมีดังนี้:

ฟังก์ชั่นสนุก (
  aaaaa
  BBBBB
  CCCCC
) {}

หากมีเครื่องหมายจุลภาคต่อท้ายคุณจะต้องเพิ่มบรรทัดในตอนท้าย สิ่งนี้เปลี่ยนสองบรรทัดในการจัดการเวอร์ชันไม่ใช่หนึ่งเดียว

การขยายตัวของสตริง

สำหรับ

สตริงใน ES2017 ซึ่งคือ:

:

• padStart() ช่องว่างที่จุด
• padEnd() ต้นของสตริง;

= 'ชามโจว'
console.log (str.padstart (10)) /* ชาม Zhou* / /
console.log (str.padend (10)) /* yiwan zhou* /

es2018 (ES9)

การทำซ้ำแบบอะซิงโครนัส

มีใหม่ for await...of คำสั่งใน ES2018 ซึ่งสามารถใช้ในการสำรวจวัตถุที่ทำซ้ำแบบอะซิงโคร

นั

ส
  [symbol.asynciterator] () {
    กลับ {
      ฉัน: 0,
      ต่อไป() {
        if (this.i <3) {
          return promise.resolve ({value: this.i ++, ทำ: false})
        -

        return promise.resolve ({ทำ: จริง})
      -
    -
  -
-
; (async function () {
  สำหรับการรอคอย (จำนวนของ asynciterable) {
    console.log (num)
  -
-

// 0
// 1
// 2

ส่วนขยายการแสดงออกปกติ

ใน ES2018 ส่วนขยายต่อไปนี้ถูกสร้างขึ้นเพื่อการแสดงออกปกติ:

การตั้งชื่อกลุ่มนิพจน์ทั่วไป:

ก่อน ES2018 เราไม่สามารถตั้งชื่อกลุ่มในการแสดงออกปกติ การอ้างอิง

รหัสตัวอย่างมีดังนี้:

const re_date = /(? <ปี>  d {4})-(? <mony>  d {2})-(? <day>  d {2}) /

const matchobj = re_date.exec ('2022-02-22')
Const Year = Matchobj.groups.year // 2022
เดือน const = matchobj.groups.month // 02
const day = matchobj.groups.day // 22

S Modifier/Dotall Mode: ตัวดัดแปลง S ใหม่ s ให้ใช้งาน . .

การยืนยันย้อนกลับ: มีเพียงการยืนยันล่วงหน้าก่อน ES2018 ในขณะที่ การยืนยันย้อนกลับ และ การยืนยันเชิงลบย้อนกลับ ถูกเพิ่มเข้ามาใน ES2018

Object Spread Operator

มี

การเพิ่มอาร์เรย์ใหม่ใน ES2015

const a = {อายุ: 18}
const person = {... n, ... a}
// ผสาน Object Console.log (บุคคล) // {ชื่อ: 'A Bowl of Zhou', อายุ: 18}

Promise.prototype.finally ()

วิธีการ finally() จะส่งคืนวัตถุ Promise การเปลี่ยนแปลงไม่ว่าจะเป็นการ rejected หรือ fulfilled การโทรกลับ finally() จะถูกดำเนินการ

รหัสตัวอย่างมีดังนี้:

Fetch (URL)
  . แล้ว (res => {
    console.log (res)
  -
  .Catch (error => {
    console.log (ข้อผิดพลาด)
  -
  .Finally (() => {
    console.log ('end')
  })

ES2019 (ES10)

การเพิ่มประสิทธิภาพ

ได้ปรับเนื้อหาสองอย่างต่อไปนี้ใน ES2019:

(

• ) try...catch catch
• Function.prototype.toString() ชั่นที่ส่งคืนมีความคิดเห็นและช่องว่าง;

{
  console.log ('ชามสัปดาห์')
} จับ {
  console.error ('ชามสัปดาห์')
}

trimStart ()/trimleft () และ trimend ()/trimright ()

• String.prototype.trimEnd
• trimStart String.prototype.trimLeft
• String.prototype.trimStart เพื่อลบช่องว่างที่ด้านซ้ายของสตริง;

:

• Array.prototype.flat()

ขวา

• String.prototype.trimEnd
• trimEnd String.prototype.trimRight

• วิธีการจะติดตามการสำรวจอย่างลึกซึ้งในอาร์เรย์และรวมองค์ประกอบทั้งหมดเข้ากับองค์ประกอบในการอาร์เรย์ย่อยที่ผ่านการสำรวจไปยังอาร์เรย์ใหม่และส่งคืน

const arr = [0, 1, 2, [3, 4]]
console.log (arr.flat ()) // [0, 1, 2, 3, 4]

• Array.prototype.flatMap() : วิธีการนี้แผนที่และแบนอาร์เรย์และส่งคืนอาร์เรย์ใหม่ ขยาย)

Object.fromentries ()

(

)

Object.entries() Object.fromEntries() แปลงรายการคู่คีย์-ค่าเป็นวัตถุ

= {
  ชื่อ: 'ชามโจว'
  อายุ: '18',
-
const e = object.entries (บุคคล)

const p = object.fromentries (e)
console.log (p) // {ชื่อ: 'A Bowl of Week', อายุ: '18'}

symbol.prototype.descrption

description เป็นคุณสมบัติแบบอ่านอย่างเดียวที่ส่งคืนสตริงคำอธิบายเพิ่มเติมเมื่อสร้างวัตถุสัญลักษณ์

ES2020 (ES11)

Modularization

ใน

ES2020 ซึ่งหมายความว่าโมดูลจะถูกโหลดเมื่อเราต้องการ

จากนั้น (โมดูล => {
  // ทำอะไรกับโมดูล
})

การนำเข้าแบบไดนามิกใช้วิธี import() ซึ่งส่งคืนสัญญา

ใน ES2020 วัตถุ meta จะถูกเพิ่มเข้าไปใน import ซึ่งจะเปิดเผยวัตถุของคุณลักษณะเมตาดาต้าเฉพาะบริบทไปยังโมดูล JavaScript

ประเภทข้อมูล Bigint

BigInt แก้ปัญหาที่จำนวนสูงสุดที่อนุญาตใน JavaScript คือ 2**53-1

const thebiggestint = 9007199254740991N;
const นอกจากนี้ HAUGE = BIGINT (9007199254740991);
// ↪ 9007199254740991N
const hugestring = bigint ("9007199254740991");
// ↪ 9007199254740991N
const ใหญ่ hex = bigint ("0x1fffffffffffff");
// ↪ 9007199254740991N
const bigbin = bigint ("0b11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111
// ↪ 9007199254740991N

GLOBAL OBJECTHIS GLOBAL

แนะนำ

GlobalThis Window Global globalThis แนะนำวัตถุระดับโลก

var getGlobal = function () { 
  if (typeof self! == 'undefined') {return self; 
  if (typeof window! == 'undefined') {return window;} 
  if (typeof global! == 'undefined') {return global; 
  โยนข้อผิดพลาดใหม่ ('ไม่สามารถค้นหาวัตถุทั่วโลก'); 
- 

var globals = getGlobal (); 

if (typeof globals.settimeout! == 'function') { 
  // ไม่มีการตั้งถิ่นฐานในสภาพแวดล้อมนี้! 
}

// หลังจากถ้า (typeof globalthis.settimeout! == 'function') {
  // ไม่มีการตั้งถิ่นฐานในสภาพแวดล้อมนี้!
}

ผู้ประกอบการรวมค่า NULL

ผู้ดำเนินการรวมตัวกันของค่า NULL แสดงด้วยเครื่องหมายคำถามสองข้อ其计算规则为，只要左运算元为null或者undefined ，则返回右运算元，否则返回左运算元。而逻辑或运算符只有左运算元转换为boolean类型后为false ，就返回右运算元。

示例代码如下：

console.log(null ?? 10) // 10
console.log(undefined ?? 10) // 10
console.log(false ?? 10) // false

该运算符用于为没有值的变量赋值很有用，例如：如果这个数没有值，就为其赋值，否则不赋值，

示例代码如下：

var value

// 如果value的值不为null 或者undefined 为其赋值10
value = value ?? 10
console.log(value) // 10

值得注意的是空值合并运算符与逻辑与和逻辑或不能同时使用，否则会抛出异常，解决方案是通过使用()来表明优先级

可选链操作符

可选链操作符用于读取某对象链下深处属性的值，使用这个操作符不必验证对象下的每个属性必须存在，例如我们想要访问Aab这个属性时，我们首先需要确保A存在，然后需要确保Aa存在，才可以访问Aab这个属性，不然就会报错。

使用可选链操作符就不会出现这样的问题，当我们访问某个属性时，只要有一处不存在，就会返回undefind ，不会报错。

var A = {}

// console.log(Aab) // 报错console.log(Aa?.b) // undefined

可选链操作符也可用于对象下方法的调用，示例代码如下：

var obj = {}

// 如果存在obj.fun() 这个方法，下面则会直接调用，如果不存在则会返回undefined
obj.fun?.A()

Promise.allSettled()

Promise.allSettled()方法返回一个在所有给定的promise 都已经resolved或rejected后的promise，并带有一个对象数组，每个对象表示对应的promise 结果。

ES2021(ES12)

String.prototype.replaceAll()

replaceAll()方法返回一个新字符串，新字符串的内容是经过替换的，实例代码如下：

const str = '一碗粥'
const newStr = str.replaceAll('粥', '周')
console.log(newStr) // 一碗周

数值分隔符

严格意义上讲数值分隔符( _ )并不属于一个运算符，其作用就是使数字更加利于阅读，例如下面的代码

console.log(1_0000_0000) // 100000000

这个符号仅仅起到了便于阅读的目的，有与没有的结果并不影响，看下面的代码

1_1 === 11 // true

WeakRef

ES2021中新增的WeakRef对象允许您保留对另一个对象的弱引用，而不会阻止被弱引用对象被GC回收。

Promise.any()

ES2021中新增的Promise.any()方法，它接受的参数和与promise.all()是一致的，唯一不同的是， Promise.any()方法接受的可迭代对象中没有一个promise成功（即所有的promises都失败/拒绝），就返回一个失败的promise和AggregateError类型的实例。

逻辑赋值操作符

ES2021中新增了一些赋值运算符，具体如下：

• &&=
• ||=
• ??=

实际上它与普通的赋值运算符一致，示例代码如下：

const [f1, f2, f3] = [true, false]
f1 &&= '一碗周' // 等同于str = str && '一碗周'
f2 ||= '一碗周' // 等同于str = str || '一碗周'
f3 ??= '一碗周' // 等同于str = str ?? '一碗周'

ES2022

class的扩展

在ES2022中允许我们并不在constructor中定义类的成员，示例代码如下：

class C {
  myName = '一碗周'
-
/* 两者是一致的*/
class C {
  ตัวสร้าง () {
    myName = '一碗周'
  -
}

如果成员只声明不初始化它的默认值是undefined。

在ES2022中允许我们使用#开头命名的变量作为类的私有成员，

示例代码如下：

class C {
  #myName = '一碗周'
-
const c = new C()
console.log(#myName) // Private field '#myName' must be declared in an enclosing class

await在顶层使用

在ES2022中新增了允许在顶层使用await ，在顶层可以不适用async函数进行包裹，示例代码如下：

import { AsyncFun } from 'module'
await AsyncFun()
console.log(123)

Object.hasOwn()

Object.hasOwn()方法用于判断某个对象上是否具有某个属性，示例代码如下：

const person = {
  name: '一碗周',
  อายุ: 18,
-
console.log(Object.hasOwn(person, 'name')) // true
console.log(Object.hasOwn(person, 'sex')) // false

Array.prototype.at()

ES2022中新增的at()方法，它的作用是获取数组中的某个成员，它的参数是数组的索引，与直接使用索引的方式不同，它允许我们传递负值，等同于从后面倒数，示例代码如下：

const arr = [1, 2, 3, 4, 5, 6]
console.log(arr.at(-1)) // 6
// 等同于arr[arr.length - 1]

d修饰符

正则表达式增加了一个/d修饰符，当使用正则表达式的exec()方法时，如果有/d修饰符，那么结果会多返回一个indices属性，用来表示匹配的结果的在原字符串中的起始index值。

示例代码如下：

const str = 'JavaScript'
const r = /a/d

const m = r.exec(str)
console.log(m.indices[0]) //[ 1, 2 ]

写在最后

这篇文章到这就结束了，这篇文章中整理了ES2015到ES2022的新特性，有可能会有疏漏，望谅解。

脑图如下：