แผ่นโกง JavaScript ที่รวดเร็วและใช้งานได้จริงของ Toptal: ES6 and Beyond

ค่าคงที่

ให้ vs var

> const EULER = 2.7182818284
> EULER = 13
> EULER
> 2.7182818284

> ค่าเฉลี่ย = 5
> var เฉลี่ย = (เฉลี่ย + 1) / 2
> เฉลี่ย
> 3
> ให้ค่า = 'สวัสดีชาวโลก'
> ให้ค่า = 'มีอะไรใหม่'
// -> พ่น TypeError: 'ค่า' ของตัวระบุได้รับการประกาศแล้ว

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

> ค่าคงที่ = []
> CONSTANTS.push(EULER)
> ค่าคงที่
> [ 2.7182818284]
> ค่าคงที่ = { 'ออยเลอร์': 2.7182818284 }
> ค่าคงที่
> [ 2.7182818284]

ระวัง Temporal Dead Zones :

> console.log (val) // -> 'ไม่ได้กำหนด'
> วา วาล = 3
> console.log(val) // -> 3

เพราะมันเทียบเท่ากับ:

เลขฐานสอง เลขฐานแปด และเลขฐานสิบหก

> var val
> console.log(val)
> วาล = 3
> console.log(val)

> 0b1001011101 // 605
> 0o6745 // 3557
> 0x2f50a // 193802

ตัวแปรที่ประกาศด้วย "let/const" ไม่ได้รับการยก:

ประเภทใหม่

> console.log(val)
// -> โยน ReferenceError
> ให้วาล = 3
> console.log(val) // -> 3

สัญลักษณ์ แผนที่ จุดอ่อนและชุด

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

ฟังก์ชันกำหนดขอบเขตใหม่

> setTimeout(() => {
… console.log('ล่าช้า')
… }, 1,000)

> {
… let cue = 'ลุคฉันเป็นพ่อของคุณ'
… console.log (คิว)
… }
> 'ลุคฉันเป็นพ่อของคุณ'

เทียบเท่ากับฟังก์ชันนิรนาม

เทียบเท่ากับนิพจน์ฟังก์ชันที่เรียกใช้ทันที (IIFE)

> setTimeout (ฟังก์ชัน () {
… console.log('ล่าช้า')
… }.bind(นี่) 1,000)

> (ฟังก์ชัน () {
… var cue = 'Luke, I am your Father' … console.log(cue) // 'ลุค ฉันคือ –
… }())
> console.log(cue) // ข้อผิดพลาดในการอ้างอิง

นวนิยายสัญกรณ์วัตถุ

การแก้ไขสตริงด้วยตัวอักษรเทมเพลต

// คุณสมบัติการคำนวณ
> ให้คีย์ = วันที่ใหม่ ().getTime()
> ให้ obj = { [คีย์]: "ค่า" }
> obj
> { '1459958882881': 'ค่า' }

// ตัวอักษรวัตถุ
บอลลูน = { สี, ขนาด };

// เหมือนกับ
บอลลูน = {
สี: สี,
ขนาด: ขนาด

}

// สัญกรณ์วิธีที่ดีกว่า
วัตถุ = {
foo (a, b) { … },
แถบ (x, y) { … }
}

> ชื่อ const = 'เสือ'
> อายุ const = 13
> console.log (`แมวของฉันชื่อ ${name} และอายุ ${age} ปี`)
> แมวของฉันชื่อไทเกอร์ และอายุ 13 ปี

// เราสามารถรักษาการขึ้นบรรทัดใหม่…
ให้ ข้อความ = ( `cat
หมา
ตู้เพลง'
)

พารามิเตอร์เริ่มต้น

> ฟังก์ชั่น howAreYou (คำตอบ = 'ตกลง') {
console.log (คำตอบ) // อาจ 'ตกลง'
}

สัญญา

คลาส, มรดก, เซ็ตเตอร์, Getters

สัญญาใหม่ ((แก้ไข, ปฏิเสธ) => {
request.get(url, (ข้อผิดพลาด, การตอบสนอง,
ร่างกาย) => {
ถ้า (ร่างกาย) {
แก้ไข (JSON.parse (เนื้อหา));
} อื่น {
แก้ไข ({});
}
})
}).แล้ว(() => { ... })
.catch((err) => โยนผิดพลาด)

// งานขนาน
Promise.all([
สัญญา1, สัญญา2, สัญญา3
]).จากนั้น(() => {
// งานทั้งหมดเสร็จสิ้น
})

คลาสสี่เหลี่ยมผืนผ้าขยายรูปร่าง {
ตัวสร้าง (id, x, y, w, h) {
สุดยอด (id, x, y)
this.width = w
this.height = h
}
// Getter และ setter
กำหนดความกว้าง (w) { this._width = w }
รับความกว้าง () { ส่งคืน this._width }
}

คลาส Circle ขยายรูปร่าง {
ตัวสร้าง (id, x, y, รัศมี) {
สุดยอด (id, x, y)
this.radius = รัศมี
}
do_a (x) {
ให้ = 12;
super.do_a(x + a);
}
do_b() คงที่ { ... }
}
วงกลม.do_b()

อาร์เรย์การทำลายล้าง

วัตถุทำลายล้าง

> ให้ [a, b, c, d] = [1, 2, 3, 4];
> console.log(a);
> 1
> ข
> 2

> ให้ลุค = { อาชีพ: 'เจได',
พ่อ: 'อนาคิน' }
> ให้ {อาชีพ พ่อ} = ลูกา
> console.log(อาชีพพ่อ)
> เจดีย์อนากิน

ตัวดำเนินการสเปรด

...ไปทำลายล้างอย่างบอส

// เปลี่ยนอาร์เรย์ให้คั่นด้วยจุลภาค
// ค่าและอื่น ๆ
> ตัวบันทึกฟังก์ชัน (...args) {
console.log('%s อาร์กิวเมนต์',
args.ความยาว)
args.forEach(console.log)
// หาเรื่อง[0], หาเรื่อง[1], หาเรื่อง[2]
}

> const [ แมว หมา ...ปลา ] = [
'schroedinger', 'Laika', 'Nemo', 'Dori']
> ปลา // -> ['นีโม', 'โดริ']

หรือทำดีกว่าผลักดัน

...และการทำลายล้างในอนาคต ES7

> ให้ arr = [1, 2, 3]
> [...arr, 4, 5, 6]
> [1, 2, 3, 4, 5, 6]

{a, b, ...rest} = {a:1, b:2, c:3, d:4}

อะซิงโครนัส ES7

รอ ES7

ฟังก์ชัน async schrodinger () {
ส่งคืน Promise ใหม่ ((แก้ไข, ปฏิเสธ)
=> {
ผลลัพธ์ const = Math.random > 0.5
setTimeout(() => {
ผลตอบแทน ? แก้ไข('มีชีวิตอยู่')
: ปฏิเสธ('ตาย')
})
})
}

พยายาม {
console.log(รอ schrodinger())
// -> 'มีชีวิต'
} จับ (ผิดพลาด) {
console.log(ผิดพลาด)
// -> 'ตาย'
}

ส่งออก ES7

กำลังนำเข้า ES7

ฟังก์ชันการส่งออก sumTwo (a, b) {
ส่งคืน a + b;
}
การส่งออกคอนสต EULER = 2.7182818284
ให้สิ่งของ = { sumTwo, EULER }
ส่งออก { สิ่งที่เป็นค่าเริ่มต้น }

นำเข้าปฏิกิริยาจาก 'ปฏิกิริยา'
นำเข้า { EULER } จาก './myexports'
นำเข้า * เป็นสิ่งของจาก './myexports'
// เทียบเท่ากับ
นำเข้าสิ่งของจาก './myexports'
// { sumTwo, EULER }

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

พวกเขา ส่งคืนวัตถุที่ใช้โปรโตคอลการวนซ้ำ กล่าวคือมีเมธอด next() ที่คืนค่า { value: < some value>, done: <true or false> }

ฟังก์ชั่น * incRand (สูงสุด) { // เครื่องหมายดอกจันกำหนดสิ่งนี้เป็นเครื่องกำเนิด
ในขณะที่ (จริง) {
// หยุดการทำงานชั่วคราวหลังจากให้ผลตอบแทน ดำเนินการต่อ
// เมื่อ next(<something>) ถูกเรียก
// และกำหนด <something> ให้กับ x
ให้ x = ให้ผล Math.floor(Math.random() * max + 1);
สูงสุด += x;
}
}

> var rng = incRand(2) // ส่งกลับวัตถุกำเนิด
> rng.next() // { ค่า: <ระหว่าง 1 ถึง 2> เสร็จสิ้น: false }
> rng.next(3) // ดังข้างบน แต่ระหว่าง 1 ถึง 5
> rng.next() // NaN ตั้งแต่ 5 + ผลลัพธ์ที่ไม่ได้กำหนดใน NaN
> rng.next(20) // ไม่มีใครคาดหวัง NaN อีกเลยหรือ
> rng.throw (ข้อผิดพลาดใหม่ ('สถานะตัวสร้างที่ไม่สามารถกู้คืนได้'))
// จะถูกโยนทิ้งไป