ES6 คืออะไรและโปรแกรมเมอร์ Javascript ต้องรู้อะไรบ้าง

ES6 หมายถึงเวอร์ชัน 6 ของภาษาการเขียนโปรแกรม ECMA Script สคริปต์ ECMA เป็นชื่อมาตรฐานสำหรับ JavaScript และเวอร์ชัน 6 เป็นเวอร์ชันถัดไปหลังจากเวอร์ชัน 5 ซึ่งเผยแพร่ในปี 2011 ซึ่งเป็นการเพิ่มประสิทธิภาพที่สำคัญของภาษา JavaScript และเพิ่มคุณลักษณะอื่นๆ อีกมากมายเพื่อให้การพัฒนาซอฟต์แวร์ขนาดใหญ่ง่ายขึ้น .

ECMAScript หรือ ES6 เผยแพร่ในเดือนมิถุนายน 2015 ต่อมาเปลี่ยนชื่อเป็น ECMAScript 2015 การสนับสนุนเว็บเบราว์เซอร์สำหรับภาษาเต็มยังไม่สมบูรณ์ แม้ว่าส่วนหลักจะได้รับการสนับสนุน เว็บเบราว์เซอร์หลักรองรับคุณสมบัติบางอย่างของ ES6 อย่างไรก็ตาม สามารถใช้ซอฟต์แวร์ที่เรียกว่า a . ได้ ผู้เล่น เพื่อแปลงรหัส ES6 เป็น ES5 ซึ่งรองรับได้ดีกว่าในเบราว์เซอร์ส่วนใหญ่

---

---

ให้เราดูการเปลี่ยนแปลงที่สำคัญบางอย่างที่ ES6 นำมาใช้กับ JavaScript

1. ค่าคงที่

ในที่สุด แนวคิดของค่าคงที่ก็ทำให้มันกลายเป็น JavaScript! ค่าคงที่คือค่าที่สามารถกำหนดได้เพียงครั้งเดียว (ต่อขอบเขต ขอบเขตอธิบายไว้ด้านล่าง) การกำหนดใหม่ภายในขอบเขตเดียวกันทำให้เกิดข้อผิดพลาด

const JOE = 4.0
JOE= 3.5
// results in: Uncaught TypeError: Assignment to constant variable.


คุณสามารถใช้ค่าคงที่ได้ทุกที่ที่คุณสามารถใช้ตัวแปร ( ที่ไหน ).

console.log('Value is: ' + joe * 2)
// prints: 8


2. ตัวแปรและฟังก์ชันขอบเขตบล็อก

ยินดีต้อนรับสู่ศตวรรษที่ 21 JavaScript! ด้วย ES6 ตัวแปรที่ประกาศโดยใช้ ปล่อย (และค่าคงที่ที่อธิบายข้างต้น) ปฏิบัติตามกฎการกำหนดขอบเขตบล็อก เช่นเดียวกับใน Java, C++ เป็นต้น (หากต้องการเรียนรู้เพิ่มเติม โปรดดูวิธีประกาศตัวแปรใน JavaScript )

ก่อนการอัปเดตนี้ ตัวแปรใน JavaScript จะถูกกำหนดขอบเขตของฟังก์ชัน นั่นคือ เมื่อคุณต้องการขอบเขตใหม่สำหรับตัวแปร คุณต้องประกาศมันภายในฟังก์ชัน

---

---

ตัวแปรจะคงค่าไว้จนถึงจุดสิ้นสุดของบล็อก หลังจากบล็อก ค่าในบล็อกภายนอก (ถ้ามี) จะถูกกู้คืน

ฉันไม่ต้องการสมาร์ททีวี

{
let x = 'hello';
{
let x = 'world';
console.log('inner block, x = ' + x);
}
console.log('outer block, x = ' + x);
}
// prints
inner block, x = world
outer block, x = hello


คุณสามารถกำหนดค่าคงที่ใหม่ได้เช่นกันภายในบล็อกดังกล่าว

---

---

{
let x = 'hello';
{
const x = 4.0;
console.log('inner block, x = ' + x);
try {
x = 3.5
} catch(err) {
console.error('inner block: ' + err);
}
}
x = 'world';
console.log('outer block, x = ' + x);
}
// prints
inner block, x = 4
inner block: TypeError: Assignment to constant variable.
outer block, x = world


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

ES6 เปิดตัว ฟังก์ชั่นลูกศร เพื่อจาวาสคริปต์ (สิ่งเหล่านี้คล้ายกับฟังก์ชันดั้งเดิม แต่มีไวยากรณ์ที่ง่ายกว่า) ในตัวอย่างต่อไปนี้ NS เป็นฟังก์ชันที่รับพารามิเตอร์ที่เรียกว่า ถึง และส่งคืนส่วนเพิ่ม:

var x = a => a + 1;
x(4) // returns 5


เมื่อใช้ไวยากรณ์นี้ คุณสามารถกำหนดและส่งอาร์กิวเมนต์ในฟังก์ชันต่างๆ ได้อย่างง่ายดาย

ใช้กับ a แต่ละ() :

[1, 2, 3, 4].forEach(a => console.log(a + ' => ' + a*a))
// prints
1 => 1
2 => 4
3 => 9
4 => 16


กำหนดฟังก์ชันที่รับหลายอาร์กิวเมนต์โดยใส่ไว้ในวงเล็บ:

[22, 98, 3, 44, 67].sort((a, b) => a - b)
// returns
[3, 22, 44, 67, 98]


4. พารามิเตอร์ฟังก์ชันเริ่มต้น

ขณะนี้สามารถประกาศพารามิเตอร์ของฟังก์ชันด้วยค่าเริ่มต้นได้ ดังต่อไปนี้ NS เป็นฟังก์ชันที่มีพารามิเตอร์สองตัว ถึง และ NS . พารามิเตอร์ที่สอง NS จะได้รับค่าเริ่มต้นของ 1 .

var x = (a, b = 1) => a * b
x(2)
// returns 2
x(2, 2)
// returns 4


ไม่เหมือนกับภาษาอื่นๆ เช่น C++ หรือ python พารามิเตอร์ที่มีค่าเริ่มต้นอาจปรากฏก่อนพารามิเตอร์ที่ไม่มีค่าเริ่มต้น โปรดทราบว่าฟังก์ชันนี้ถูกกำหนดให้เป็นบล็อกที่มี a กลับ มูลค่าตามภาพประกอบ

var x = (a = 2, b) => { return a * b }


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

x(2)
// returns NaN
x(1, 3)
// returns 3


เมื่อคุณผ่านเข้ามาโดยชัดแจ้ง ไม่ได้กำหนด เป็นอาร์กิวเมนต์ ค่าเริ่มต้นจะใช้ถ้ามี

x(undefined, 3)
// returns 6


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

เมื่อเรียกใช้ฟังก์ชัน บางครั้งจำเป็นต้องส่งผ่านอาร์กิวเมนต์จำนวนหนึ่งตามอำเภอใจ และประมวลผลอาร์กิวเมนต์เหล่านี้ภายในฟังก์ชันได้ ความต้องการนี้ได้รับการจัดการโดย พารามิเตอร์ฟังก์ชันส่วนที่เหลือ ไวยากรณ์ เป็นวิธีการจับอาร์กิวเมนต์ที่เหลือหลังจากอาร์กิวเมนต์ที่กำหนดโดยใช้ไวยากรณ์ที่แสดงด้านล่าง อาร์กิวเมนต์พิเศษเหล่านี้ถูกจับในอาร์เรย์

var x = function(a, b, ...args) { console.log('a = ' + a + ', b = ' + b + ', ' + args.length + ' args left'); }
x(2, 3)
// prints
a = 2, b = 3, 0 args left
x(2, 3, 4, 5)
// prints
a = 2, b = 3, 2 args left


6. เทมเพลตสตริง

เทมเพลตสตริงหมายถึงการสอดแทรกตัวแปรและนิพจน์ลงในสตริงโดยใช้ไวยากรณ์ เช่น Perl หรือเชลล์ เทมเพลตสตริงถูกปิดด้วยอักขระ back-tick ( `` ). ในทางตรงกันข้ามคำพูดเดี่ยว ( ' ) หรือเครื่องหมายคำพูดคู่ ( ' ) ระบุสตริงปกติ นิพจน์ภายในเทมเพลตจะถูกทำเครื่องหมายระหว่าง $ { และ } . นี่คือตัวอย่าง:

var name = 'joe';
var x = `hello ${name}`
// returns 'hello joe'


แน่นอน คุณสามารถใช้นิพจน์ทั่วไปในการประเมินได้

// define an arrow function
var f = a => a * 4
// set a parameter value
var v = 5
// and evaluate the function within the string template
var x = `hello ${f(v)}`
// returns 'hello 20'


ไวยากรณ์นี้สำหรับการกำหนดสตริงยังสามารถใช้เพื่อกำหนดสตริงหลายบรรทัด

var x = `hello world
next line`
// returns
hello world
next line


7. คุณสมบัติของวัตถุ

ES6 นำรูปแบบการสร้างวัตถุที่ง่ายขึ้น ดูตัวอย่างด้านล่าง:

var x = 'hello world', y = 25
var a = { x, y }
// is equivalent to the ES5:
{x: x, y: y}


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

var x = 'hello world', y = 25
var a = {x: x, y: y}
a['joe' + y] = 4
// a is now:
{x: 'hello world', y: 25, joe25: 4}


ตอนนี้คุณสามารถทำทุกอย่างได้ในนิยามเดียว:

var a = {x, y, ['joe' + y]: 4}
// returns
{x: 'hello world', y: 25, joe25: 4}


และแน่นอน ในการกำหนดวิธีการ คุณสามารถกำหนดได้ด้วยชื่อ:

var a = {x, y, ['joe' + y]: 4, foo(v) { return v + 4 }}
a.foo(2)
// returns
6


8. ไวยากรณ์นิยามคลาสทางการ

คำจำกัดความของคลาส

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

class Circle {
constructor(radius) {
this.radius = radius
}
}
// use it
var c = new Circle(4)
// returns: Circle {radius: 4}


ประกาศวิธีการ

การกำหนดวิธีการก็ค่อนข้างง่ายเช่นกัน ไม่มีเซอร์ไพรส์ที่นั่น

class Circle {
constructor(radius) {
this.radius = radius
}
computeArea() { return Math.PI * this.radius * this.radius }
}
var c = new Circle(4)
c.computeArea()
// returns: 50.26548245743669


Getters และ Setters

ตอนนี้เรามี getters และ setters ด้วยเช่นกัน โดยมีการอัปเดตไวยากรณ์อย่างง่าย ให้เรานิยามใหม่ วงกลม ชั้นเรียนที่มี an พื้นที่ คุณสมบัติ.

class Circle {
constructor(radius) {
this.radius = radius
}
get area() { return Math.PI * this.radius * this.radius }
}
var c = new Circle(4)
// returns: Circle {radius: 4}
c.area
// returns: 50.26548245743669


ให้เราตอนนี้เพิ่ม setter เพื่อให้สามารถกำหนดได้ รัศมี เป็นคุณสมบัติที่ตั้งค่าได้ เราควรกำหนดฟิลด์จริงใหม่เป็น _รัศมี หรือบางอย่างที่ไม่ขัดแย้งกับตัวเซ็ต มิฉะนั้น เราพบข้อผิดพลาดล้นสแต็ก

นี่คือคลาสที่กำหนดใหม่:

class Circle {
constructor(radius) {
this._radius = radius
}
get area() { return Math.PI * this._radius * this._radius }
set radius(r) { this._radius = r }
}
var c = new Circle(4)
// returns: Circle {_radius: 4}
c.area
// returns: 50.26548245743669
c.radius = 6
c.area
// returns: 113.09733552923255


ทั้งหมดนี้เป็นส่วนเสริมที่ดีของ JavaScript เชิงวัตถุ

มรดก

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

class Ellipse {
constructor(width, height) {
this._width = width;
this._height = height;
}
get area() { return Math.PI * this._width * this._height; }
set width(w) { this._width = w; }
set height(h) { this._height = h; }
}
class Circle extends Ellipse {
constructor(radius) {
super(radius, radius);
}
set radius(r) { super.width = r; super.height = r; }
}
// create a circle
var c = new Circle(4)
// returns: Circle {_width: 4, _height: 4}
c.radius = 2
// c is now: Circle {_width: 2, _height: 2}
c.area
// returns: 12.566370614359172
c.radius = 5
c.area
// returns: 78.53981633974483


และนั่นเป็นการแนะนำสั้นๆ เกี่ยวกับคุณลักษณะบางอย่างของ JavaScript ES6

ถัดไป: ทำความคุ้นเคยกับ วิธีการอาร์เรย์ JavaScript ที่สำคัญสองสามวิธี และการเขียนสคริปต์แอนิเมชั่นหุ่นยนต์ที่ไวต่อเสียง ! นอกจากนี้ ให้ค้นหาเกี่ยวกับเฟรมเวิร์กส่วนหน้าที่ยอดเยี่ยมที่เรียกว่า Vue

เครดิตภาพ: micrologia/ ฝากรูปถ่าย

แบ่งปัน แบ่งปัน ทวีต อีเมล Canon กับ Nikon: กล้องยี่ห้อไหนดีกว่ากัน?

Canon และ Nikon เป็นสองชื่อที่ใหญ่ที่สุดในอุตสาหกรรมกล้อง แต่แบรนด์ใดที่มีกล้องและเลนส์รุ่นต่างๆ ที่ดีกว่ากัน?

ภาพยนตร์ฟรีที่ฉันดูบนโทรศัพท์ของฉันได้

อ่านต่อไป หัวข้อที่เกี่ยวข้อง

• การเขียนโปรแกรม
• JavaScript

เกี่ยวกับผู้เขียน เจ ศรีธา(เผยแพร่บทความ 17 บทความ) เพิ่มเติมจาก Jay Sridhar

สมัครรับจดหมายข่าวของเรา

เข้าร่วมจดหมายข่าวของเราสำหรับเคล็ดลับทางเทคนิค บทวิจารณ์ eBook ฟรี และดีลพิเศษ!

คลิกที่นี่เพื่อสมัครสมาชิก