คำอธิบายอย่างรวดเร็วและละเอียดเกี่ยวกับฟีเจอร์ทั้งหมดของ ES6~ES12 ในบทความเดียว!

ผู้เขียน：Eve Cole เวลาอัปเดต：2022-07-25 13:51:38

บทความนี้จะจัดเรียงและแบ่งปันคุณลักษณะของ ECMAScript กับคุณ โดยจะใช้เวลาหนึ่งชั่วโมงในการทำความเข้าใจคุณลักษณะทั้งหมดของ ES6~ES12 อย่างรวดเร็ว มันมีค่าอ้างอิงที่แน่นอน เพื่อน ๆ ที่ต้องการสามารถอ้างอิงถึงมันได้ ฉันหวังว่ามันจะเป็นประโยชน์กับทุกคน

ในฐานะเด็กที่ชอบพิมพ์รหัสด้วยมือฉันคิดว่ารหัสควรพิมพ์ด้วยตัวเองเพื่อที่จะจดจำได้ดีขึ้นด้วยหัวใจดังนั้นวันนี้ฉันจะแนะนำคุณสมบัติของ ES6 ~ ES12 หากคุณมีจุดบอดในการใช้ ES หรือไม่รู้เกี่ยวกับคุณสมบัติใหม่มากนัก ฉันเชื่อว่าบทความนี้ควรจะช่วยคุณได้ดีมาก ~

เพื่อให้เข้าใจได้ดีขึ้นเราจะอธิบายในโหมด กรณี ดังนั้น เพื่อให้มีความเข้าใจที่ดีขึ้นและในเวลาเดียวกันกรณีนี้ยังรองรับการดีบักในโหมดนักพัฒนาฉันหวังว่าคุณจะสามารถสนับสนุน ~

ECMASCript

ECMASCRIPT เป็นภาษาการเขียนโปรแกรมสคริปต์ที่ได้มาตรฐานโดย ECMA International -262. นอกจากนี้ยังสามารถกล่าวได้ว่ามี JavaScript เพียงสองเวอร์ชันเป็นมาตรฐาน

ในโลกของโปรแกรมเมอร์: ES5 และ ES6 ES5 ES6

ES6

ครู

Ruan

Yifeng

โปรโมชั่นตัวแปร: ไม่ว่าจะมีการเรียกตัวแปรก่อนที่
จะประกาศ VAR หรือ
ไม่

และ Const ประกาศตัวแปรอ่าน

อย่าง const

และ จะต้องได้ รับการกำหนดค่า

วัตถุ

วิธีการเป็นของการจับคู่รูปแบบและ

สามารถ

แยก
undefined
ส่วนโดยใช้ ... เพื่อแสดงถึงสิ่งที่เหลือทั้งหมด

A, B, C] = [1, 2, 3]
 console.log (a, b, c) // 1 2 3
 
 ให้ [A ,, C] = [1, 2, 3]
 console.log (a ,, c) // 1 3
 
 ให้ [A, B, ... C] = [1, 2, 3, 4, 5]
 console.log (a, b, c) // 1 2 [3, 4, 5]
 
 ให้ [A, B, ... C] = [1]
 console.log (a, b, c) // 1 undefined []
 
 ให้ [a = 1, b = a] = []
 const.log (a, b) // 1 1
 
 ให้ [a = 1, b = a] = [2]
 const.log (a, b) // 2 2

โครงสร้างของวัตถุ

ไม่
ได้อยู่ในลำดับเท่านั้น
ค่าของตัวแปรจะ undefined
:

กำหนด
 console.log (a, b);
 
 ให้ {a} = {b: 2};
 console.log (a);
 
 ให้ {a, b = 2} = {a: 1};
 console.log (a, b);
 
 ให้ {a: b = 2} = {a: 1};

console.log (

a
length

; // ตัวแปร A ไม่มี console.log (b)

;

, เป็นตัวแทนของหมายเลข

LET [A, B, C, D, E] = "Hello"
 console.log (a, b, c, d, e) // สวัสดี
 
 ให้ {ความยาว} = "สวัสดี"
 console.log (ความยาว) // 5

การทำลายของตัวเลขและค่าบูลีน

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

วัตถุ TOSTRING: S} = 123;
 console.log (s === number.prototype.toString) // true
 
 ให้ {toString: s} = true;
 console.log (s === boolean.prototype.toString) //

deconstruction

จริง

ของ
พารามิเตอร์
ฟังก์ชัน

สองวิธีใน

การ

ระบุค่าเริ่มต้น

 ให้ res = arr.map ([a, b] => a + b)
 console.log (res) // [3, 7]
 
 ให้ arr = [1, ไม่ได้กำหนด, 2]
 ให้ res = arr.map ((a = 'test') => a);
 console.log (res) // [1, 'ทดสอบ', 2]
 
 ให้ func = ({x, y} = {x: 0, y: 0}) => {
    กลับ [x, y]
 -
 console.log (func (1, 2)) // [ไม่ได้กำหนด, ไม่ได้กำหนด]
 console.log (func ()) // [0, 0]
 console.log (func ({})) // [ไม่ได้กำหนด, ไม่ได้กำหนด]
 console.log (func ({x: 1})) // [1, ไม่ได้กำหนด]
 
 
 ให้ func = ({x = 0, y = 0}) => {
    กลับ [x, y]
 -
 
 console.log (func ({x: 1, y: 2})) // [1, 2]
 console.log (func ()) // ข้อผิดพลาด
 console.log (func ({})) // [0, 0]
  console.log (func ({x: 1})) // [1, 0]

ความสม่ำเสมอ

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

เป็นจุดความรู้ที่ยากมากที่จะเข้าใจ ก่อนอื่น

มันแบ่งออกเป็น

สอง

รูปแบบ: JS Grid

และ

JS分格perl 分格

ให้ re

ใหม่ regexp

(

'a', 'i');

/a/; // ค้นหาว่ามีอยู่ในสตริง

ให้ re =/a/i; // สิ่ง

แรก

คือวัตถุที่จะค้นหาที่

大括号包含คือ

ตัว

เลือก

大括号包含อักขระ Unicode
codepointat () : ส่งคืนจุดรหัสที่สอดคล้องกับอักขระซึ่งสอดคล้องกับสตริง FromCharcode ()
FromCharcode () : ส่งคืนจุดรหัสที่สอดคล้องกันเป็นอักขระสอดคล้องกับ codepointat ()
สตริง. อักขระผลลัพธ์ของการแทนที่ตัวแปรทั้งหมดในสตริงและหลบ Slashes
Startswith () : ส่งคืนค่าบูลีนที่ระบุว่าสตริงพารามิเตอร์อยู่ที่หัวของสตริงต้นฉบับหรือไม่
endswith () : ส่งคืนค่าบูลีนระบุว่าสตริงพารามิเตอร์อยู่ที่ส่วนท้ายของสตริงต้นฉบับหรือไม่
ทำซ้ำ () : วิธีการส่งคืนสตริงใหม่ซึ่งหมายถึงการทำซ้ำสตริงต้นฉบับ n ครั้ง
: สำหรับ
การรวม () : ส่งคืนค่าบูลีนซึ่งระบุว่าพบสตริงพารามิเตอร์หรือไม่
TRIMSTART () : วิธีการลบช่องว่างออกจากจุดเริ่มต้นของสตริง Trimleft () เป็นนามแฝงสำหรับวิธีนี้
trimend () : เมธอดลบอักขระช่องว่างออกจากปลายสตริง Trimright () เป็นนามแฝงสำหรับวิธีนี้

// Unicode
 console.log("a", "u0061"); // aa
 console.log ("d", " u {4e25}");
 
 // codepointat ()
 console.log(str.codePointAt(0)) // 68
 
 //string.FromCharcode ()
 console.log(String.fromCharCode(68)) // D
 
 //string.raw ()
 console.log(String.raw`Hin${1 + 2}`); // Hin3
 console.log (`hi  n $ {1 + 2}`);
 
 ให้ str = 'domesy'
 
 // startswith ()
 console.log (str.startswith ("d")) // true
 console.log (str.startswith ("s")) // false

 // endswith ()
 console.log (str.endswith ("y")) // true
 console.log(str.endsWith("s")) // false
 
 // ซ้ำ (): พารามิเตอร์ที่ผ่านมาจะถูกปัดเศษขึ้นโดยอัตโนมัติ
 console.log (str.repeat (2.9)) // domesydomesy
 
 // traversal: สำหรับ
  สำหรับ (ให้รหัสของ Str) {
    console.log (รหัส) // return d omesy หนึ่งครั้ง
  -
  
  //รวมถึง()
  console.log (str.includes ("s")) // true
  console.log (str.includes ("a")) // false
  
  // trimstart ()
  สตริง const = "สวัสดีโลก!";
  console.log (string.trimstart ());
  console.log (String.trimleft ());
  
  // trimend ()
  สตริง const = "สวัสดีโลก!";
  console.log (string.trimend ());
  console.log (string.trimright (

)

;
    sy`
 console.log (str) // จะห่อเส้นโดยอัตโนมัติ // dome
 //

เทมเพลตฉลาก SY:

const str = {
     ชื่อ: 'Little Dudu',
     ข้อมูล: 'สวัสดีทุกคน'
 -

console.log (`$ {str.info}, ฉันคือ` $ {str.name} `) // สวัสดีทุกคนฉันคือ Xiao Dudu

Array

Agray.of () : แปลงชุดค่าเป็นอาร์เรย์ และส่งคืนอาร์เรย์ใหม่โดยไม่คำนึงถึงจำนวนหรือประเภทของอาร์กิวเมนต์
CopyWithIn () : คัดลอกสมาชิกที่ตำแหน่งที่ระบุไปยังตำแหน่งอื่นและส่งคืน อาร์เรย์ดั้งเดิม
find () : ส่งคืนค่าแรกที่ผ่านการรับรอง
findIndex () : ส่งคืนคีย์ดัชนีที่ผ่านการรับรองครั้งแรก
() : ข้ามชื่อคีย์ส่งคืนวัตถุ Traverser ซึ่งสามารถใช้ใน การวนรอบ
สำหรับ
ค่า
คู่

Fill (): เติมอาร์เรย์ด้วยองค์ประกอบ

ที่

ระบุ และส่งคืน อาร์เรย์
ดั้งเดิม

1, 2, 3, 4, 5]

 //array.of ()
 ให้ arr1 = array.of (1, 2, 3);
 console.log (arr1) // [1, 2, 3]
 
 // copywithin (): พารามิเตอร์สามตัว (เป้าหมาย, start = 0, end = this.length)
 // เป้าหมาย: ตำแหน่งของเป้าหมาย // เริ่มต้น: ตำแหน่งเริ่มต้นซึ่งสามารถละเว้นได้และอาจเป็นจำนวนลบ
 // สิ้นสุด: ตำแหน่งสิ้นสุดสามารถละเว้นได้อาจเป็นจำนวนลบตำแหน่งจริงคือ end-1
 console.log (arr.copywithin (0, 3, 5)) // [4, 5, 3, 4, 5]
 
 //หา()
 console.log(arr.find((item) => item > 3 )) // 4
 
 // findIndex ()
 console.log (arr.findindex ((รายการ) => รายการ> 3)) // 3
 
 // คีย์ ()
 สำหรับ (ให้ดัชนีของ arr.keys ()) {
     console.log (ดัชนี);
 -
 
 // ค่า ()
 for (let index of arr.values()) {
     console.log (ดัชนี);
 -
 
 // รายการ ()
 สำหรับ (ให้ดัชนีของ arr.entries ()) {
     console.log (ดัชนี);
 -
 
  ให้ arr = [1, 2, 3, 4, 5]
 
 // array.from (): traversal สามารถเป็นอาร์เรย์ pseudo เช่นสตริงโครงสร้างชุดโหนดโหนดให้ arr1 = array.from ([1, 3, 5], (รายการ) => {
     รายการส่งคืน * 2;
 -
 console.log (arr1) // [2, 6, 10] 
 
 // fill (): สามพารามิเตอร์ (เป้าหมาย, start = 0, end = this.length)
 // เป้าหมาย: ตำแหน่งของเป้าหมาย // เริ่มต้น: ตำแหน่งเริ่มต้นซึ่งสามารถละเว้นได้และอาจเป็นจำนวนลบ
 // สิ้นสุด: ตำแหน่งสิ้นสุดสามารถละเว้นได้อาจเป็นจำนวนลบตำแหน่งจริงคือ end-1
 console.log (arr.fill (7)) // [7, 7, 7, 7, 7]
 console.log (arr.fill (7, 1, 3)) // [1, 7, 7, 4, 5]
 
 ให้ arr = [1, 2, 3, 4]
 
 //รวมถึง()
 console.log (arr.includes (3)) // true

console.log

[1, 2,

Nan

]

.

รวม (NAN));

 console.log (... arr) // 3 4 5
 
 ให้ arr1 = [1, 2, ... arr]
 console.log (... arr1) // 1 2 3 4 5

Object Extension

Object.getPrototypeof () : ส่งคืนวัตถุต้นแบบของวัตถุวัตถุ
SetPrototypeof () : ตั้งค่าวัตถุต้นแบบของวัตถุ
proto : ส่งคืนหรือตั้งค่า วัตถุต้นแบบของวัตถุ
วัตถุ GetownPropertyNames ()
:
ส่ง คืนคีย์คุณสมบัติที่ไม่ใช่สัญลักษณ์ของวัตถุเอง
ส่ง คืน
อาร์เรย์ของคีย์คุณสมบัติทั้งหมดของวัตถุเอง
.
Traversal: for-in
object.keys () : ส่งคืนชื่อแอตทริบิวต์
Object.Assign () : ใช้เพื่อกำหนดค่าทั้งหมดที่สามารถคัดลอกได้ของแอตทริบิวต์จากวัตถุต้นฉบับหนึ่งรายการหรือมากกว่าไปยังวัตถุเป้าหมายและส่งคืน วัตถุ เป้าหมาย เวลานี้วัตถุเป้าหมายจะเปลี่ยน

//object.is ()
console.log (object.is ('abc', 'abc'))) // true
console.log (object.is ([], [])) // false 

// Traverse: for-in
let obj = { name: 'Domesy', value: 'React' }

สำหรับ (ให้กุญแจใน obj) {
    console.log (คีย์);
    console.log (obj [key]);
-

//object.keys ()
console.log (object.keys (obj)) // ['ชื่อ', 'value']

 //object.assign ()
 const target = {a: 1, b: 2};
 const source = { b: 4, c: 5 };
 
 const result = Object.assign(target, source)
 
 console.log(result) // {a: 1, b: 4, c: 5}
 console.log (เป้าหมาย) // {a: 1, b: 4, c: 5}

นิพจน์ที่กระชับ

อื่น ๆ

ให้ A = 1;
  ให้ b = 2;
  ให้ obj = {a, b}
  console.log (obj) // {a: 1, b: 2}
  
  ให้เมธอด = {
      สวัสดี() {
          console.log ('สวัสดี')
      -
  -
  console.log (method.hello ()) // hello

attribute expression: ใช้ตัวแปรหรือนิพจน์โดยตรงเพื่อกำหนดคีย์ของวัตถุ

ให้ A = "B"
 ให้ obj = {
     [A]: "C"
 -
 console.log (obj) // {b: "c"}

ตัวดำเนินการขยาย ...

เพิ่มฟังก์ชั่นเพิ่มเติมมากมายใน ES9 เช่นการรวมการหลบหนีสตริง ฯลฯ

// ฟังก์ชั่นของมันคือการขยายอาร์เรย์ให้ {a, b , ... c} = {a: 1, b: 2, c: 3, d: 4};
 console.log (c) // {c: 3, d: 4}
 
 ให้ obj1 = {c: 3}
 ให้ obj = {a: 1, b: 2, ... obj1}
 console.log (obj) // {a: 1, b: 2, c: 3}

ตัวเลขไบนารี

ขยายตัวเลข

: 0b 0B
ด้วย 00 หรือ 0O , ระบุ
ไบนารี
หากต้องการตรวจสอบว่าค่ามี จำกัด หรือไม่ให้ส่งคืน
หมายเลขค่าบูลีน Isnan () : ใช้เพื่อตรวจสอบว่าค่าเป็น NAN หรือไม่คืนค่า
หมายเลข
Number.IssafeInteger
() : ใช้เพื่อตรวจสอบว่าค่าเป็น "จำนวนเต็มที่ปลอดภัย" หรือไม่คืนค่า boolean value
math.cbrt () : ส่งคืน cube และ
math.abrt () () : ส่งคืน cube และ
math.cbrt ( ) ส่งคืนคิวบ์และ
clz32
)
: ส่งคืนรูปแบบจำนวนเต็ม 32 บิตที่ไม่ได้ลงนามของค่า
แบบ
จุด
ของ
ค่า
ลอการิทึมของ 1 + n (math.log (1 + n))
math.log10 () : ส่งคืนลอการิทึมธรรมชาติของ 1 + n ลอการิทึมของ n ด้วยฐาน 2
math.log2 () : ส่งคืนลอการิทึมของ n ด้วยฐาน 2 ฐาน 2
math.trunc () : ลบส่วนทศนิยมของจำนวนออกจากส่วนจำนวนเต็มส่วน
Math.sign () : ส่งคืน正数为1负数为-1 ,正零0 ,负零-0 , NaN
Math.Abrt () : ส่งคืนรูทคิวบ์
Math.sinh () : ส่งคืนไฮเพอร์โบลิกไซน์
Math.cosh () : ส่งคืน Hyperbolic Cosine
Math.tanh () : ส่งคืน Hyperbolic Tangent
Math.asinh () : ส่งคืน Hyperbolic Sine
Math.acosh () : ส่งคืนคณิตศาสตร์ Hyperbolic Cosine Inverse Hyperbolic
Math.atanh ()
: ส่งคืนหมายเลขแทนเจนต์แบบไฮเพอร์โบ parseInt
ก : ส่งคืนส่วนจุดลอยตัวของค่าวิธีนี้เทียบเท่ากับ parseFloat

// binary console.log (0b101) // 5
 console.log (0o151) // 105
 
 //number.isfinite ()
 console.log (number.isfinite (7));
 console.log (number.isfinite (จริง));
 
 //number.isnan ()
 console.log (number.isnan (nan));
 console.log (number.isnan ("true" / 0));
 console.log (number.isnan (จริง));
 
 //number.isinteger ()
 console.log (number.isinteger (17));
 console.log (number.isinteger (17.58));
 
 //number.issafeinteger ()
 console.log (number.issafeinteger (3));
 console.log(Number.isSafeInteger(3.0)); // true
 console.log (number.issafeinteger ("3"));
 console.log(Number.isSafeInteger(3.1)); // false
 
  //math.trunc ()
 console.log (math.trunc (13.71));
 console.log (math.trunc (0));
 console.log (math.trunc (จริง));
 console.log (math.trunc (เท็จ)); 
 
 //math.sign ()
 console.log (Math.Sign (3));
 console.log (math.sign (-3));
 console.log (Math.Sign (0));
 console.log (math.sign (-0));
 console.log (Math.Sign (NAN));
 console.log (Math.Sign (จริง));
 console.log (math.sign (false));
 
 //math.abrt ()
 console.log (math.cbrt (8));
 
  //number.parseint ()
 console.log (number.parseint ("6.71"));
 console.log (parseint ("6.71"));
 
 //number.parsefloat ()
 console.log (number.parsefloat ("6.71@"));
 console.log (parsefloat ("6.71@"));

Comma พารามิเตอร์ของฟังก์ชั่น: อนุญาต

ให้

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

 ฟังก์ชั่นสนุก (x, y = x) {
    console.log (x, y)
 -
 ฟังก์ชั่น fun1 (c, y = x) {
    console.log (c, x, y)
 -
 สนุก (2);
 fun1 (

1

;

   console.log (arg) // [1, 2, 3, 4]
 -
 
 ความสนุก (1, 2, 3, 4)

ฟังก์ชั่นลูกศร

ถูกกำหนดเป็น =>

let Arrow = (v) => v + 2
 console.log (ลูกศร (1)) // 3

ความแตกต่างระหว่างฟังก์ชั่นลูก

ศร และฟังก์ชั่นทั่วไป และฟังก์ชั่นทั่วไปเป็น ฟังก์ชั่นที่กำหนดไว้
Set ไม่มีคีย์ค่า
เท่านั้น การทำงาน.
ฟังก์ชั่นลูกศรไม่มีข้อโต้แย้งของตัวเอง การเข้าถึงอาร์กิวเมนต์ในฟังก์ชั่นลูกศรได้รับค่าในสภาพแวดล้อมการดำเนินการด้านนอก (ฟังก์ชั่น) ด้านนอก
การโทรใช้และการผูก จะไม่ส่งผลกระทบต่อทิศทางของสิ่งนี้
The this of the arrow function points to the context , but the this of the ordinary function does not point to the context. Add bind(this) when needed.

Set

Set is a new data structure in ES6, which is similar to an array,

แต่

ค่า

ของ

สมาชิก

นั้น

ไม่ซ้ำกัน

และ

ไม่มี

const set = new Set() ประกาศ

ค่าซ้ำ ๆ

จุดสิ้นสุดของวัตถุที่ตั้งไว้ ส่งคืนวัตถุที่กำหนด
ลบ () : ลบองค์ประกอบในชุดที่เท่ากับค่านี้ส่งคืนจริงหากมีมิฉะนั้นจะส่งคืน False
Clear () : ล้างองค์ประกอบทั้งหมดของชุด
มี () : ค่านี้มีอยู่หรือไม่ ถ้าเป็นเช่นนั้นเป็นอย่างอื่น
คีย์เท็จ () : วัตถุของตัววนซ้ำที่มีค่าแอตทริบิวต์
() : วัตถุของตัววนซ้ำที่มีรายการค่าแอตทริบิวต์
() : วัตถุของตัววนซ้ำที่มีค่าแอตทริบิวต์และ
ค่า
foreach () : วนซ้ำแต่ละองค์ประกอบ

หมายเหตุ:

Traverser
เป็นวัตถุ iterator
"มีสองค่าที่แตกต่างกัน
ภายในชุดพวกเขาจะถูกส่งผ่าน === เพื่อตัดสินกล่าวคือวัตถุสองวัตถุไม่สามารถเหมือนกันได้เพราะที่อยู่แตก
ต่าง

กัน
 
 //เพิ่ม()
 list.add ("1")
 list.add (1)
 คอนโซล (รายการ) // set (2) {1, "1"}
 
 //ขนาด
 คอนโซล (list.size) // 2
 
 //ลบ()
 list.delete ("1")
 คอนโซล (รายการ) // set (1) {1}
 
 //มี()
 list.has (1) // true
 list.has (3) // false
 
 //ชัดเจน()
 list.clear ()
 คอนโซล (รายการ) // set (0) {}
 
 ให้ arr = [{id: 1}, {id: 2}, {id: 3}]
 ให้รายการ = ชุดใหม่ (arr)
 
 // คีย์ ()
 สำหรับ (ให้คีย์ของ list.keys ()) {
    console.log (คีย์);
 -
 
 // ค่า ()
 for (let key of list.values()) {
    console.log (คีย์);
 -
 
 // รายการ ()
 สำหรับ (ให้ข้อมูลของ list.entries ()) {
    console.log (ข้อมูล); ]
 -
 
 // foreach
 list.foreach ((รายการ) => {
    console.log (รายการ) // พิมพ์สิ่งนี้: {id: 1} {id: 2} {id: 3}

}

)

new Set

ไม่ได้กำหนด, null, null, nan, nan, 'nan', 0, 0, 'a', 'a'];
 
 console.log ([... ชุดใหม่ (arr)]) 
 // หรือ console.log (array.from (ชุดใหม่ (arr)))
 // [1, 'true', true, 15, false, undefined, null, nan, 'nan', 0, 'a']

สามารถค้นหาสหภาพ, แยกและความแตกต่าง

ให้ A = ชุดใหม่ ([1, 2, 3])
 ให้ b = ชุดใหม่ ([2, 3, 4])
 
 // Union Console.log (ชุดใหม่ ([... a, ... b]))) // set (4) {1, 2, 3, 4}
 
 // intersection console.log (ชุดใหม่ ([... a] .filter (v => b.has (v))))) // set (2) {2, 3}
 
 // ชุดความแตกต่างตั้งค่าใหม่ ([... a] .filter (v =>! b.has (v))) // set (1) {1}

ชุดการแมป

let set = ชุดใหม่ ([1,2, 3])
 console.log (ชุดใหม่ ([... set] .map (v => v * 2))) // set (3) {2, 4, 6}

นิยาม

ความอ่อนแอ

: โครงสร้างเดียวกันกับชุด แต่ สมาชิก ค่าสามารถประกาศได้เฉพาะ

สำหรับวัตถุ: const set = new WeakSet()

วิธี:

เพิ่ม () : เพิ่มองค์ประกอบไปยังจุดสิ้นสุดของวัตถุอ่อนแอ ส่งคืนอินสแตนซ์
ลบ () : ลบองค์ประกอบในความอ่อนแอที่เท่ากับค่านี้
มี () : ไม่ว่าค่านี้จะมีอยู่ถ้ามันมีอยู่มันเป็นความจริงมิฉะนั้นจะ

เป็น

เท็จ

การอ้างอิงที่อ่อนแอทั้งหมดนั่นคือการรวบรวมขยะกลไกไม่ได้คำนึงถึงการประยุกต์ใช้วัตถุ

พูดง่ายๆ

คือ

ข้อได้เปรียบของวัตถุเว็บเซ็

ต

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

จำ คีย์คือการประกาศค่าของประเภทใด ๆ

: const map = new Map()

แอตทริบิวต์:

ตัวสร้าง : ตัวสร้าง, ส่งคืนขนาดแผนที่
: ส่งคืนจำนวนของค่าใน

วิธีการแผนที่อินสแตนซ์:

set () : เพิ่มคู่คีย์-ค่า แผนที่ส่งคืนอินสแตนซ์
get () : ส่งคืนค่าคีย์สำหรับ
การลบ () : ลบองค์ประกอบในแผนที่ที่เท่ากับค่านี้ส่งคืนจริงถ้ามีมิฉะนั้นจะส่งคืน false
clear () : ล้างองค์ประกอบทั้งหมดของ แผนที่
มี () : ไม่ว่าค่านี้จะมีอยู่หรือไม่ถ้ามีอยู่มันเป็นความจริงมิฉะนั้นจะเป็น
คีย์เท็จ () : วัตถุของ Traverser ที่มี
ค่าคีย์แอตทริบิวต์ () : วัตถุของ Traverser ด้วย
รายการค่าแอตทริบิวต์ () : วัตถุของ Traverser ที่มีคีย์แอตทริบิวต์และค่าแอตทริบิวต์
foreach () : traverses แต่ละองค์ประกอบ

พิเศษหมายเหตุ:

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

ทับแผนที่ = แผนที่ใหม่ ()
 
 //ชุด()
 map.set ('a', 1)
 map.set ('B', 2)
 console.log (แผนที่) // แผนที่ (2) {'a' => 1, 'b' => 2}
 
 //รับ
 map.get ("a") // 1
 
 //ขนาด
 console.log (map.size) // 2
 
 //ลบ()
 map.delete ("a") // true
 console.log (แผนที่) // แผนที่ (1) {'b' => 2}
 
 //มี()
 map.has ('b') // true
 map.has (1) // false
 
 //ชัดเจน()
 map.clear ()
 console.log (แผนที่) // แผนที่ (0) {}
 
 ให้ arr = [["a", 1], ["b", 2], ["c", 3]
 ให้แผนที่ = แผนที่ใหม่ (arr)
 
 // คีย์ ()
 สำหรับ (ให้คีย์ของ map.keys ()) {
    console.log(key); // 以此打印：abc
 -
 
 // ค่า ()
 สำหรับ (ให้ค่าของ map.values ()) {
    console.log(value); // 以此打印：1 2 3
 -
 
 // รายการ ()
 for (let data of map.entries()) {
    console.log (ข้อมูล);
 -
 
 // foreach
 map.foreach ((รายการ) => {
    console.log (รายการ) // พิมพ์สิ่งนี้: 1 2 3
 });

คำจำกัดความ

ที่อ่อนแอ

: และโครงสร้างแผนที่ แต่ ค่าสมาชิกสามารถ

ประกาศได้สำหรับวัตถุเท่านั้น: const set = new WeakMap()

วิธี:

set
() : เพิ่มคู่คีย์-ค่า
คู่ค้า
)
: ลบคู่คีย์

สัญลักษณ์ (ประเภทดั้งเดิม)

เป็น

ประเภทข้อมูลดั้งเดิมที่แนะนำใน ES6 ซึ่ง独一无二

ถึง

const sy = Stmbol()

เป็น Symbol值พารามิเตอร์นี้มีอยู่ให้ส่งคืน Symbol值ดั้งเดิม (ค้นหาก่อนจากนั้นสร้างลงทะเบียนในสภาพแวดล้อมทั่วโลก)
symbol.keyfor () : ส่งคืนคำอธิบายของ Symbol值ที่ลงทะเบียน (เฉพาะ key ของ Symbol.for() สามารถส่งคืนได้)
Object.getOwnPropertySymbols () : ส่งคืนอาร์เรย์ของ Symbol值ทั้งหมดที่ใช้เป็นชื่อคุณสมบัติในวัตถุ

// ประกาศให้ A = symbol ();
 ให้ b = symbol ();
 console.log (a === b);
 
 //symbol.for ()
 ให้ c = symbol.for ("domesy");
 ให้ d = symbol.for ("domesy");
 console.log (c === d);
 
 //symbol.keyfor ()
 const e = symbol.for ("1");
 console.log (symbol.keyfor (e));
 
 //symbol.description
 ให้สัญลักษณ์ = สัญลักษณ์ ("es");
 console.log (symbol.description);
 console.log (สัญลักษณ์ ("es") === สัญลักษณ์ ("es"));
 console.log (สัญลักษณ์ === สัญลักษณ์);
 console.log(symbol.description === "es"); // true

Proxy

Proxy is used to modify the default behavior of certain operations, which is equivalent to making changes at the language level, so it is a kind of "meta การเขียนโปรแกรม ") นั่นคือการเขียนโปรแกรมในภาษาการเขียนโปรแกรม

สามารถเข้าใจได้ด้วยวิธีนี้พร็อกซีเป็นเลเยอร์ของ拦截ก่อนวัตถุเป้าหมายโลกภายนอกจะต้องผ่านการสกัดกั้นเลเยอร์นี้หากพวกเขาต้องการเข้าถึงดังนั้น กลไกมีไว้เพื่อกรองและการเข้าถึงตัวกรองจากโลกภายนอก

พร็อกซีสามารถเข้าใจได้ที่นี่ว่า代理器

ประกาศพร็อกซี: const proxy = new Proxy(target, handler)

เป้าหมาย : ตัวจัดการวัตถุที่สกัดกั้น
: กำหนด

วิธีการสกัดกั้น:

รับ (
) , returns a Boolean value
has() : intercepts the operation of propKey in proxy, returns a Boolean value
ownKeys() : intercepts object property traversal, returns an array
deleteProperty() : intercepts the operation of delete proxy[propKey], returns a Boolean value ()
ใช้ () : การเรียกใช้ฟังก์ชันการเรียกใช้การโทรและใช้การดำเนินการ
สร้าง () : สกัดกั้นคำสั่งใหม่, ส่งคืนวัตถุ: สกัดกั้นคำสั่งใหม่, ส่งคืนวัตถุ

ให้ OBJ = {
  ชื่อ: 'Domesy',
  เวลา: '2022-01-27'
  value: 1
 -
 
 ให้ data = new proxy (obj, {
     //รับ()
     รับ (target, key) {
         Return Target [key]. แทนที่ ("2022", '2015')
     -
     
     //ชุด()
     ตั้งค่า (เป้าหมาย, คีย์, ค่า) {
        if (key === "ชื่อ") {
           return (target [key] = value);
        } อื่น {
           คืนเป้าหมาย [คีย์];
         -
     -
     
     // มี()
    มี (เป้าหมาย, คีย์) {
        if (key === "name") {
            return target[key];
        } อื่น {
            กลับเท็จ;
        -
    -
    // deleteProperty()
    deleteProperty (target, key) {
        if (key.indexof ("_")> -1) {
            delete target[key];
            กลับเป็นจริง;
        } อื่น {
            return target[key];
        -
    -
    // ownKeys()
    ownKeys(target) {
        return object.keys (เป้าหมาย) .filter ((รายการ) => รายการ! = "เวลา");
    -
 -
 
 console.log (data.time) // 2015-01-27
 
 data.time = '2020'
 data.name = 'React'
 console.log (ข้อมูล) // พร็อกซี {ชื่อ: 'ตอบสนอง', เวลา: '2022-01-27', ค่า: 1}
 
 // 拦截has()
 console.log ("ชื่อ" ในข้อมูล) // true
 console.log ("เวลา" ในข้อมูล) // false
 
 // 删除deleteProperty()
 delete data.time; // true
 
 // Traverse Ownkeys ()
 console.log (object.keys (data));

 //นำมาใช้()
 let sum = (...args) => {
    ให้ num = 0;
    args.foreach ((รายการ) => {
        num += รายการ;
    -
    หมายเลขส่งคืน;
 -

 sum = new Proxy(sum, {
    ใช้ (เป้าหมาย, ctx, args) {
        return target(...args) * 2;
    -
 -
 
 console.log(sum(1, 2)); // 6
 console.log(sum.call(null, 1, 2, 3)); // 12
 console.log (sum.apply (null, [1, 2, 3]));
 
 //constructor()
 let User = class {
    ตัวสร้าง (ชื่อ) {
        this.name = ชื่อ;
    -
 -
 user = new Proxy (ผู้ใช้ {
    สร้าง (Target, Args, Newtarget) {
        คืนเป้าหมายใหม่ (... args);
    -
  -

console.log

Object

ผู้ใช้

ใหม่

(

"

domesy"));

ภายในภาษา (เช่นวัตถุ. defeleproperty) และวางไว้ในวัตถุสะท้อน
บาง
อย่างจะถูกนำไปใช้กับทั้งวัตถุและสะท้อนวัตถุ
ตัวอย่างเช่น Object.defineProperty (OBJ, NAME, DESC) จะโยนข้อผิดพลาดเมื่อคุณสมบัติไม่สามารถกำหนดได้ในขณะที่ rechorm.defineProperty (OBJ, NAME, DESC) จะส่งคืน FALSE
เพื่อเปลี่ยนการดำเนินการของวัตถุให้เป็นพฤติกรรมการ

ทำงาน and The methods of Proxy correspond one to one, so we will not introduce them here.

Class

Class: abstraction of a class of things with common characteristics (constructor syntax sugar)

constructor() basic definition and generated instance

class Parent {
     Constructor (name = 'ES6') {
         this.name=ชื่อ
     -
 -
 ให้ data = parent ใหม่ ('domesy')
 console.log (data) // parent {name: 'domesy'}

ขยายการสืบทอดพา

เรนต์คลาส {
     constructor(name = 'es6'){
         this.name=ชื่อ
     -
 -
 
 // เด็กชั้นเรียนมรดกธรรมดาขยายตัวแม่ {}
 console.log (เด็กใหม่ ()) // เด็ก {ชื่อ: 'es6'} 
 
 // 传递参数class Child extends Parent {
    constructor(name = "child") {
        super (ชื่อ);
        this.type = "เด็ก";
    -
 -
 console.log (เด็กใหม่ ('domesy')) // child {ชื่อ: 'domesy', type: 'child'}

ทั้งสองวิธี

getter และ setter

หุ้ม
API
attributes, not method

class Parent {
     constructor(name = 'es6'){
         this.name=ชื่อ
     -
     // getter
     รับ getName () {
         ส่งคืน 'sy' + this.name
     - 
     // setter
     set setName(value){
         this.name = value
     -
 -
 
 let data = new Parent()
 console.log(data.getName) // syes6
 
 data.setName = 'domesy'
 console.log (data.getName) // domesy

method static method

วิธีการคงที่ไม่สามารถเรียกได้ในอินสแตนซ์ของคลาส แต่ควรเรียกผ่าน

ชั้นเรียนคลาสของคลาสเอง {
     static getName = (name) => {
         return `你好！${name}`
     -
 -
 
 console.log(Parent.getName('domesy')) // 你好！domesy

静态属性

 class Parent {}
 parent.type = "ทดสอบ";
 
 console.log (parent.type); // สัญญาการทดสอบ

สัญญา

Promise การแก้ปัญหา "การโทรกลับ"

Promise สามารถสนับสนุนคำขอ Promise เกิดขึ้นพร้อมกันหลายครั้งและรับ Promise

ใน
คำขอ

พร้อม

กัน

การดำเนินการที่
ประสบความสำเร็จ: [ปฏิเสธ] การดำเนินการล้มเหลว

หมายเหตุ:

สัญญาจะกำหนดวิธีการที่จะดำเนินการตาม
สถานะ

การ

เปลี่ยนแปลงของรัฐ คือ ทางเดียวและกลับไม่

ได้

โทรกลับ) => {
     console.log ('≈')
     setTimeout(() => {
         การโทรกลับ && callback.call ();
     }, 1,000)
 - 
 ajax(() => {
     console.log ('หมดเวลา')
 -
 // ก่อนอื่นมันจะถูกพิมพ์เพื่อเริ่มดำเนินการจากนั้นการหมดเวลาจะถูกพิมพ์หลังจาก 1s
 
 //สัญญา
 ให้ ajax = () => {
    console.log("开始执行");
    คืนสัญญาใหม่ ((แก้ไข, ปฏิเสธ) => {
        setTimeout(() => {
            แก้ไข ();
        }, 1,000);
    -
 -
 ajax().then(() => {
    console.log ("หมดเวลา"); 
 -
 // ก่อนอื่นมันจะถูกพิมพ์เพื่อเริ่มดำเนินการจากนั้นการหมดเวลาจะถูกพิมพ์หลังจาก 1s
 
 //แล้ว()
 let ajax = () => {
    console.log("开始执行");
    คืนสัญญาใหม่ ((แก้ไข, ปฏิเสธ) => {
        setTimeout(() => {
            แก้ไข ();
        }, 1,000);
    -
 -
 Ajax ()
 .แล้ว(() => {
     คืนสัญญาใหม่ ((แก้ไข, ปฏิเสธ) => {
        setTimeout(() => {
            resolve();
        }, 2000);
    -
 -
 .แล้ว(() => {
     console.log("timeout")
 -
 // ก่อนอื่นจะพิมพ์เพื่อเริ่มการดำเนินการจากนั้นการหมดเวลาจะพิมพ์หลังจาก 3s (1+2)
 
 // จับ()
 let ajax = (num) => {
    console.log("开始执行");
    คืนสัญญาใหม่ ((แก้ไข, ปฏิเสธ) => {
        if (num > 5) {
            resolve();
        } อื่น {
            throw new Error("出错了");
        -
    -
 -
 
 ajax(6)
 .then(function () {
    console.log ("หมดเวลา");
 -
 .catch(function (err) {
    console.log ("จับ", err);
 -
 
  ajax(3)
 .then(function () {
    console.log("timeout"); 
 -
 .catch(function (err) {
    console.log ("catch");
 });

Promise.all() Batch operation

Promise.all(arr) is used to package multiple promise instances into a new Promise instance. The returned instance is an ordinary promise,
which receives an array as a parameter.
The array can It is
หรือ
เป็นค่าอื่น ๆ
เท่านั้น

สัญญาล้มเหลวและค่าส่งคืนเป็น

ค่า

แรก

     ส่งคืนสัญญาใหม่ (แก้ไขปฏิเสธ) => {
        ให้ img = document.createelement ("img");
        img.src = src;
        img.onload = function () {
                แก้ไข (IMG);
        -
        img.onerror = function (err) {
                ปฏิเสธ (err);
        -
    -
 -
 
 const showimgs = (imgs) => {
     imgs.foreach ((img) => {
         document.body.appendchild (IMG);
     -
 -
 
 สัญญาทั้งหมด ([
    loadimg ("https://ss0.baidu.com/7PO3DSAG_XI4KHGKO9WTANF6HHHY/ZHIDAO/PIC/ITEM/71CF3BC79F3DF8DCC6551159CD11728B46102889.JPG
    loadimg ("https://ss0.baidu.com/7PO3DSAG_XI4KHGKO9WTANF6HHHY/ZHIDAO/PIC/ITEM/71CF3BC79F3DF8DCC6551159CD11728B46102889.JPG
    loadimg ("https://ss0.baidu.com/7PO3DSAG_XI4KHGKO9WTANF6HHHY/ZHIDAO/PIC/ITEM/71CF3BC79F3DF8DCC6551159CD11728B46102889.JPG
 ]) จากนั้น (showimgs);

Promise.race ()

การแข่งขันนั้นคล้ายกับทั้งหมดยกเว้นว่ามันจะถูกดำเนินการตราบใดที่หนึ่งถูกเรียกใช้งาน

// และโหลดกลับไปที่หน้า {
    ส่งคืนสัญญาใหม่ (แก้ไขปฏิเสธ) => {
       ให้ img = document.createelement ("img");
       img.src = src;
       img.onload = function () {
               แก้ไข (IMG);
       -
       img.onerror = function (err) {
               ปฏิเสธ (err);
       -
   -
-

const showimgs = (imgs) => {
   ให้ p = document.createElement ("P");
   P.AppendChild (IMG);
   document.body.appendchild (P);
-

Promise.race ([
   loadimg ("https://ss0.baidu.com/7PO3DSAG_XI4KHGKO9WTANF6HHHY/ZHIDAO/PIC/ITEM/71CF3BC79F3DF8DCC6551159CD11728B46102889.JPG
   loadimg ("https://ss0.baidu.com/7PO3DSAG_XI4KHGKO9WTANF6HHHY/ZHIDAO/PIC/ITEM/71CF3BC79F3DF8DCC6551159CD11728B46102889.JPG
   loadimg ("https://ss0.baidu.com/7PO3DSAG_XI4KHGKO9WTANF6HHHY/ZHIDAO/PIC/ITEM/71CF3BC79F3DF8DCC6551159CD11728B46102889.JPG
]) จากนั้น (

showimgs
)

;

ฟังก์ชั่นและข้อผิดพลาดที่ถูกโยนลงไปในสัญญาจะไม่สะท้อนให้เห็นว่า
สัญญาภายนอกถูกดำเนินการภายในอย่างไร

เครื่องกำเนิดไฟฟ้า

ที่จะเสร็จสมบูรณ์)

เครื่องกำเนิด

ไฟฟ้า

: ใช่ฟังก์ชั่นที่สามารถใช้ในการควบคุมตัววนซ้ำยังเป็นโซลูชันการเขียนโปรแกรมแบบอะซิงโค รนัส ที่ห่อหุ้มสถานะภายใน

หลาย

สถานะ
done value
value คืน done
เสร็จสิ้นแล้ว)
ถัดไปใช้เพื่อดำเนินการโปรแกรม恢复
ไป

นี้
     ให้ผลผลิต "A";
     ให้ผลผลิต "B";
     กลับ "C"
 -
 
 ให้เครื่องกำเนิด = data ();
 console.log(generator.next()) //{value: 'a', done: false} 
 console.log(generator.next()) //{value: 'b', done: false} 
 console.log(generator.next()) //{value: 'c', done: true} 
 console.log(generator.next()) //{value: undefined, done: true}

Iterator 遍历器

Iterator是一种接口，为各种不同的数据结构提供统一的访问机制。任何数据结构只要部署Iterator接口，就可以完成遍历操作（即依次处理该数据结构的所有成员）。

Iterator的作用：

一是为各种数据结构，提供一个统一的、简便的访问接口
使得数据结构的成员能够按某种次序排列
ES6创造了一种新的遍历命令for...of循环， Iterator接口主要供for...of消费
for-in遍历顺序：不同的引擎已就如何迭代属性达成一致，从而使行为标准化ES11

注意：

在ES6中，有些数据结构原生具备Iterator接口（比如数组），即不用任何处理，就可以被for...of循环遍历，有些就不行（比如对象）
在ES6中，有三类数据结构原生具备Iterator接口：数组、某些类似数组的对象、 Set和Map结构。
一个为对象添加Iterator接口的例子。

 // 基本使用let arr = ["hello", "world"];
 let map = arr[Symbol.iterator]();
 console.log(map.next()); // {value: 'hello', done: false}
 console.log(map.next()); // {value: 'world', done: false}
 console.log(map.next()); // {value: undefined, done: true}
 
 // for of 循环let arr = ["hello", "world"];
 for (let value of arr) {
    console.log(value); // hello world
 -
 
 // 对象处理let obj = {
     start: [1, 5, 2],
     end: [7, 9, 6],
     [สัญลักษณ์.ตัววนซ้ำ](){
         let index = 0;
         let arr = this.start.concat(this.end)
         กลับ {
             ต่อไป(){
                 if(index < arr.length){
                     กลับ {
                         value: arr[index++],
                         done: false
                     -
                 }อื่น{
                     กลับ {
                         value: arr[index++],
                         เสร็จสิ้น: จริง
                     -
                 -
             -
         -
     -
 -
 for (let key of obj) {
    console.log(key); // 1 5 2 7 9 6
 }

Decorator 装饰器

使用@符号,用来扩展，修改类的行为
使用的时候需要引入第三方库如： core-decorators

 const name = (target) => {
     target.name = "domesy"
 -
 
 @ชื่อ
 class Test{}
 
 console.log(Test.name) //domesy

模块化

在早期，使用立即执行函数实现模块化是常见的手段，通过函数作用域解决了命名冲突、污染全局作用域的问题

使用模块化的好处：

解决命名冲突
提供复用性
提高代码可维护性

方案：

CommonJS ：用于服务器(动态化依赖)
AMD ：用于浏览器(动态化依赖，使用的很少)
CMD ：用于浏览器(动态化依赖，使用的很少)
UMD ：用于浏览器和服务器(动态化依赖)
ESM ：用于浏览器和服务器(静态化依赖)

export 导出模块

默认导出： export default Index
单独导出： `export const name = 'domesy'
按需导出（推荐）： `export { name, value, id }'
改名导出： export { name as newName }

import 导入模块

默认导入（推荐）： import Index from './Index'
整体导入： import * as Index from './Index'
按需导入（推荐）： import { name, value, id } from './Index'
改名导入： import { name as newName } from './Index'
自执导入： import './Index'
符合导入（推荐）： import Index, { name, value, id } from './Index'

复合模式

export命令和import命令结合在一起写成一行，变量实质没有被导入当前模块，相当于对外转发接口，导致当前模块无法直接使用其导入变量，适用于全部子模块导出

默认导入导出： `export { default } from './Index'
整体导入导出： `export * from './Index'
按需导入导出： `export { name, value, id } from './Index'
默认改具名导入导出： `export { default as name } from './Index'

ES7

数组扩展

includes() : 在ES6 的基础上增加了一个索引，代表是从哪寻找ES7

 let arr = [1, 2, 3, 4]
 
 //includes() ES6
 console.log(arr.includes(3)) // true
 console.log([1, 2, NaN].includes(NaN)); // true
 
 // includes() ES7
 console.log(arr.includes(1, 0)) // true
 console.log(arr.includes(1, 1)) // false

数值扩展

幂运算符：用**代表Math.pow()

 // 幂运算符ES7
 console.log(Math.pow(2, 3)) // 8
 console.log(2 ** 8) // 256

ES8

字符传扩展

padStart() ：用于头部补全
padEnd() ：用于尾部补全。

 let str = 'Domesy'
 
 //padStart(): 会以空格的形式补位吗，这里用0代替，第二个参数会定义一个模板形式，会以模板进行替换console.log("1".padStart(2, "0")); // 01
 console.log("8-27".padStart(10, "YYYY-0M-0D")); // YYYY-08-27
  
 // padEnd()：与padStart()用法相同console.log("1".padEnd(2, "0")); // 10

对象扩展

Object.values()：返回属性值
Object.entries()：返回属性名和属性值的数组

let obj = { name: 'Domesy', value: 'React' }

//Object.values()
console.log(Object.values(obj)) // ['React', 'React']

//Object.entries()
console.log(Object.entries(obj)) // [['name', 'value'], ['React', 'React']]

async await

作用：将异步函数改为同步函数，（Generator的语法糖）

 const func = async () => {
    let promise = new Promise((resolve, reject) => {
    setTimeout(() => {
          resolve("执行");
        }, 1000);
    -
     
      console.log(await promise);
      console.log(await 0);
      console.log(await Promise.resolve(1));
      คอนโซล.บันทึก(2);
      return Promise.resolve(3);
 -
 
 func().then(val => {
      console.log(val); // 依次执行： 执行0 1 2 3
 });

特别注意：

Async 函数返回Promise对象，因此可以使用then
awit 命令，只能用在async 函数下，否则会报错
数组的forEach()执行async/await会失效，可以使用for-of和Promise.all()代替
无法处理promise 返回的reject对象，需要使用try catch来捕捉

awiait 等到了之后做了什么？

这里分为两种情况：是否为promise 对象

如果不是promise , await会阻塞后面的代码，先执行async外面的同步代码，同步代码执行完，再回到async内部，把这个非promise的东西，作为await表达式的结果。

如果它等到的是一个promise 对象，await 也会暂停async后面的代码，先执行async外面的同步代码，等着Promise 对象fulfilled，然后把resolve 的参数作为await 表达式的运算结果。

async await 与promise 的优缺点

优点：

它做到了真正的串行的同步写法，代码阅读相对容易
对于条件语句和其他流程语句比较友好，可以直接写到判断条件里面
处理复杂流程时，在代码清晰度方面有优势

缺点：

用await 可能会导致性能问题，因为await 会阻塞代码，也许之后的异步代码并不依赖于前者，但仍然需要等待前者完成，导致代码失去了并发性。

ES9

字符传扩展

放松对标签模板里字符串转义的限制：遇到不合法的字符串转义返回undefined ,并且从raw上可获取原字符串。

 // 放松字符串的限制const test = (value) => {
     console.log(value)
 -
 test `domesy` // ['domesy', raw: ["domesy"]]

Promise

Promise.finally()

不管最后状态如何都会执行的回调函数

 let func = time => {
     return new Promise((res, rej) => {
         setTimeout(() => {
             if(time < 500){
                 res(time)
             }อื่น{
                 rej(time)
             -
         }, เวลา)
     -
 -
 
 func(300)
 .then((val) => console.log('res', val))
 .catch((erro) => console.log('rej', erro))
 .finally(() => console.log('完成'))
 // 执行结果： res 300 完成func(700)
 .then((val) => console.log('res', val))
 .catch((erro) => console.log('rej', erro))
 .finally(() => console.log('完成'))
 // 执行结果： rej 700 完成

for-await-of

for-await-of：异步迭代器，循环等待每个Promise对象变为resolved状态才进入下一步

 let getTime = (seconds) => {
     return new Promise(res => {
         setTimeout(() => {
             res(seconds)
         }, seconds)
     -
 -
 
async function test(){
    let arr = [getTime(2000),getTime(500),getTime(1000)]
    for await (let x of arr){
        console.log(x); 
    -
-

test() //以此执行2000 500 1000

ES10

字符传扩展

JSON.stringify() : 可返回不符合UTF-8标准的字符串(直接输入U+2028和U+2029可输入)

 //JSON.stringify() 升级console.log(JSON.stringify("uD83DuDE0E")); 
 console.log(JSON.stringify("u{D800}")); // ud800

数组扩展

flatMap() : 方法首先使用映射函数映射每个元素，然后将结果压缩成一个新数组。(注：它与map 连着深度值为1的flat 几乎相同，但flatMap 通常在合并成一种方法的效率稍微高一些。)
flat : 方法会按照一个可指定的深度递归遍历数组，并将所有元素与遍历到的子数组中的元素合并为一个新数组返回。默认为1.(应用：数组扁平化(当输入Infinity自动解到最底层))

 let arr = [1, 2, 3, 4]
 
 // flatMap()
 console.log(arr.map((x) => [x * 2])); // [ [ 2 ], [ 4 ], [ 6 ], [ 8 ] ]
 console.log(arr.flatMap((x) => [x * 2])); // [ 2, 4, 6, 8 ]
 console.log(arr.flatMap((x) => [[x * 2]])); // [ [ 2 ], [ 4 ], [ 6 ], [ 8 ] ]
 
 const arr1 = [0, 1, 2, [3, 4]];
 const arr2 = [0, 1, 2, [[[3, 4]]]];

 console.log(arr1.flat()); // [ 0, 1, 2, 3, 4 ]
 console.log(arr2.flat(2)); // [ 0, 1, 2, [ 3, 4 ] ]
 console.log(arr2.flat(Infinity)); // [ 0, 1, 2, 3, 4 ]

对象扩展

Object.fromEntries()

返回键和值组成的对象，相当于Object.entries()的逆操作
可以做一些数据类型的转化

Map 转化为Object

 let map = new Map([
    ["a", 1],
    ["b", 2],
 -
 
 let obj = Object.fromEntries(map);
 console.log(obj); // {a: 1, b: 2}

Array 转化为Object

// 注意数组的形式let arr = [
    ["a", 1],
    ["b", 2],
 -
 let obj = Object.fromEntries(arr);
 console.log(obj); // {a: 1, b: 2}

对象转换

 let obj = {
    a: 1,
    b: 2,
    c: 3
 -
 
 let res = Object.fromEntries(
     Object.entries(obj).filter(([key, val]) => value !== 3)
 -
 
 console.log(res) //{a: 1, b: 2}

数值扩展

toString()改造：返回函数原始代码(与编码一致)

 //toString()
 function test () {
     consople.log('domesy')
 -
 console.log(test.toString());
 // function test () {
 // consople.log('domesy')
 // }

可选的Catch参数

在ES10 中，try catch 可忽略catch的参数

 let func = (name) => {
      พยายาม {
         return JSON.parse(name)
      } จับ {
         กลับเท็จ
      -
  -
  
  console.log(func(1)) // 1
  console.log(func({a: '1'})) // false

ES11

BigInt(原始类型)

新的原始数据类型：BigInt，表示一个任意精度的整数，可以表示超长数据，可以超出2的53次方
js 中Number类型只能安全的表示-(2^53-1)至2^53-1 范的值

特别注意：

Number类型的数字有精度限制，数值的精度只能到53 个二进制位（相当于16 个十进制位, 正负9007199254740992），大于这个范围的整数，就无法精确表示了。
Bigint没有位数的限制，任何位数的整数都可以精确表示。但是其只能用于表示整数，且为了与Number进行区分，BigInt 类型的数据必须添加后缀n。
BigInt 可以使用负号，但是不能使用正号
number类型的数字和Bigint类型的数字不能混合计算

 // Number
 console.log(2 ** 53) // 9007199254740992
 console.log(Number.MAX_SAFE_INTEGER) // 9007199254740991
 
 //BigInt
 const bigInt = 9007199254740993n
 console.log(bigInt) // 9007199254740993n
 console.log(typeof bigInt) // bigint
 console.log(1n == 1) // true
 console.log(1n === 1) // false
 const bigIntNum = BigInt(9007199254740993n)
 console.log(bigIntNum) // 9007199254740993n

基本数据类型

在ES6中一共有7种，分别是： srting 、 number 、 boolean 、 object 、 null 、 undefined 、 symbol

其中object包含： Array 、 Function 、 Date 、 RegExp

而在ES11后新增一中，为8中分别是： srting 、 number 、 boolean 、 object 、 null 、 undefined 、 symbol 、 BigInt

Promise

Promise.allSettled():

将多个实例包装成一个新实例，返回全部实例状态变更后的状态数组(齐变更再返回)
无论结果是fulfilled 还是rejected, 无需catch
相当于增强了Promise.all()

 Promise.allSettled([
    Promise.reject({
      code: 500,
      msg: "服务异常",
    -
    Promise.resolve({
      code: 200,
      data: ["1", "2", "3"],
    -
    Promise.resolve({
      code: 200,
      data: ["4", "5", "6"],
    -
  ]).then((res) =>{
      console.log(res) // [{ reason: {code: 500, msg: '服务异常'}, status: "rejected" },
                      // { reason: {code: 200, data: ["1", "2", "3"]}, status: "rejected" },
                      // { reason: {code: 200, data: ["4", "5", "6"]}, status: "rejected" }]
      const data = res.filter((item) => item.status === "fulfilled");
      console.log(data); // [{ reason: {code: 200, data: ["1", "2", "3"]}, status: "rejected" },
                          // { reason: {code: 200, data: ["4", "5", "6"]}, status: "rejected" }]
  })

import(): 动态导入

按需获取的动态import. 该类函数格式（并非继承Function.prototype）返回promise 函数
与require的区别是： require()是同步加载， import()是异步加载

 // then()
 let modulePage = "index.js";
 import(modulePage).then((module) => {
    module.init();
 -
 
 // 结合async await
 (ไม่ตรงกัน () => {
  const modulePage = 'index.js'
  const module = await import(modulePage);
  console.log(module)
 })

globalThis

全局this，无论是什么环境（浏览器，node等），始终指向全局对象

// 浏览器环境console.log(globalThis) // window

// node
console.log(globalThis) // global

可选链

符号？代表是否存在
TypeScript 在3.7 版本已实现了此功能

 const user = { name: 'domesy' }
 //ES11之前let a = user && user.name
 
 //Now let b = user?.name

Null value coalescing operator

Convenience operator for handling default values
Compared with ||, the null value coalescing operator?? will only work when the value on the left is strictly equal to null or undefined .

"" || "default value"; // default value
  "" ?? "default value"; // ""
  
 const b = 0;
 const a = b || 5;
 console.log(a); // 5
 
 const b = null // undefined
 const a = b ?? 123;
 console.log(a); // 123

ES12

字符传扩展

replaceAll()

replace()方法仅替换一个字符串中某模式（pattern）的首个实例
replaceAll()会返回一个新字符串，该字符串中用一个替换项替换了原字符串中所有匹配了某模式的部分。
模式可以是一个字符串或一个正则表达式，而替换项可以是一个字符串或一个应用于每个匹配项的函数。
replaceAll()相当于增强了replace() 的特性，全量替换

 let str = "Hi！，这是ES6~ES12的新特性，目前为ES12"
 
 console.log(str.replace("ES", "SY")); // Hi！，这是SY6~ES12的新特性，目前为ES12
 console.log(str.replace(/ES/g, "Sy")); // Hi！，这是Sy6~Sy12的新特性，目前为Sy12
 
 console.log(str.replaceAll("ES", "Sy")); // Hi！，这是Sy6~Sy12的新特性，目前为Sy12
 console.log(str.replaceAll(/ES/g, "Sy")); // Hi！，这是Sy6~Sy12的新特性，目前为Sy12

Promise

Promise.any()

其区别于Promise.race(), 尽管某个promise 的reject 早于另一个promise 的resolve，Promise.any() 仍将返回那个首先resolve 的promise。

 Promise.any([
    Promise.reject("Third"),
    Promise.resolve("Second"),
    Promise.resolve("First"),
 -
 .then((res) => console.log(res)) // Second
 .catch((err) => console.error(err)); 
 
 Promise.any([
    Promise.reject("Error 1"),
    Promise.reject("Error 2"),
    Promise.reject("Error 3"),
 -
 .then((res) => console.log(res))
 .catch((err) => console.error(err));
 // AggregateError: All promises were rejected
 
 Promise.any([
    Promise.resolve("Third"),
    Promise.resolve("Second"),
    Promise.resolve("First"),
 -
 .then((res) => console.log(res)) // Third
 .catch((err) => console.error(err));

WeakRefs

允许创建对象的弱引用。这样就能够在跟踪现有对象时不会阻止对其进行垃圾回收。 Very useful for caching and object mapping.
You must use the new keyword to create a new WeakRef
deref() to read the referenced object.
The correct use of the WeakRef object requires careful consideration, and it is best to avoid using it as much as เป็นไปได้.避免依赖于规范没有保证的任何特定行为也是十分重要的。何时、如何以及是否发生垃圾回收取决于任何给定JavaScript 引擎的实现。

let weakref = new WeakRef({name: 'domesy', year: 24})
 
 weakref.deref() // {name: 'domesy', year: 24}
 weakref.deref().year // 24

逻辑操作符和赋值表达

&&=

let num1 = 5;
let num2 = 10;
num1 &&= num2;
console.log(num1); // 10

// 等价于num1 && (num1 = num2);
if (num1) {
    num1 = num2;
 }

||=

let num1;
let num2 = 10;
num1 ||= num2;
console.log(num1); // 10

// 等价于num1 || (num1 = num2);
if (!num1) {
   num1 = num2;
}

??=

空值合并运算符?? 只会在左边的值严格等于null 或undefined 时起作用

let num1;
let num2 = 10;
let num3 = null; // undefined

num1 ??= num2;
console.log(num1); // 10

num1 = false;
num1 ??= num2;
console.log(num1); // false

num3 ??= 123;
console.log(num3); // 123

// 等价于// num1 ?? (num1 = num2);

数值分隔符

let num1 = 100000;
let num2 = 100_000;

console.log(num1); // 100000
console.log(num2); // 100000

const num3 = 10.12_34_56
console.log(num3); // 10.123456

คำอธิบายอย่างรวดเร็วและละเอียดเกี่ยวกับฟีเจอร์ทั้งหมดของ ES6~ES12 ในบทความเดียว!

ECMASCript

ครู

Ruan

​

​

โครงสร้างของวัตถุ

;

การทำลายของตัวเลขและค่าบูลีน

deconstruction

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

เลือก

)

)

เทมเพลตฉลาก SY:

Array

Nan

.

Object Extension

นิพจน์ที่กระชับ

อื่น ๆ

attribute expression: ใช้ตัวแปรหรือนิพจน์โดยตรงเพื่อกำหนดคีย์ของวัตถุ

ตัวดำเนินการขยาย ...

ขยายตัวเลข

1

;

ฟังก์ชั่นลูกศร

Set

}

สามารถค้นหาสหภาพ, แยกและความแตกต่าง

ชุดการแมป

ความอ่อนแอ

ต

ที่อ่อนแอ

สัญลักษณ์ (ประเภทดั้งเดิม)

Proxy

"

Class

constructor() basic definition and generated instance

ขยายการสืบทอดพา

getter และ setter

method static method

静态属性

สัญญา

ได้

Promise.all() Batch operation

Promise.race ()

;

ไฟฟ้า

Iterator 遍历器

Decorator 装饰器

模块化

export 导出模块

import 导入模块

复合模式

ES7

数组扩展

数值扩展

ES8

字符传扩展

对象扩展

async await

awiait 等到了之后做了什么？

async await 与promise 的优缺点

ES9

字符传扩展

Promise

for-await-of

ES10

字符传扩展

数组扩展

对象扩展

Object.fromEntries()

Map 转化为Object

Array 转化为Object

对象转换

数值扩展

可选的Catch参数

ES11

BigInt(原始类型)