es6features
1.0.0
ECMAScript 6 หรือที่เรียกว่า ECMAScript 2015 เป็นเวอร์ชันล่าสุดของมาตรฐาน ECMAScript ES6 เป็นการอัปเดตที่สำคัญสำหรับภาษา และเป็นการอัปเดตครั้งแรกสำหรับภาษานับตั้งแต่ ES5 ได้รับมาตรฐานในปี 2009 การนำคุณสมบัติเหล่านี้ไปใช้งานในเอ็นจิ้น JavaScript หลักกำลังดำเนินการอยู่ในขณะนี้
ดูมาตรฐาน ES6 สำหรับข้อกำหนดฉบับสมบูรณ์ของภาษา ECMAScript 6
ES6 มีคุณสมบัติใหม่ดังต่อไปนี้:
ลูกศรเป็นฟังก์ชันชวเลขโดยใช้ไวยากรณ์ => มีลักษณะทางวากยสัมพันธ์คล้ายคลึงกับคุณลักษณะที่เกี่ยวข้องใน C#, Java 8 และ CoffeeScript รองรับทั้งเนื้อหาบล็อกคำสั่งและเนื้อหานิพจน์ที่ส่งคืนค่าของนิพจน์ ลูกศรต่างใช้ this ศัพท์เดียวกันกับโค้ดที่อยู่รอบๆ ซึ่งแตกต่างจากฟังก์ชันต่างๆ
// Expression bodies
var odds = evens . map ( v => v + 1 ) ;
var nums = evens . map ( ( v , i ) => v + i ) ;
var pairs = evens . map ( v => ( { even : v , odd : v + 1 } ) ) ;
// Statement bodies
nums . forEach ( v => {
if ( v % 5 === 0 )
fives . push ( v ) ;
} ) ;
// Lexical this
var bob = {
_name : "Bob" ,
_friends : [ ] ,
printFriends ( ) {
this . _friends . forEach ( f =>
console . log ( this . _name + " knows " + f ) ) ;
}
}ข้อมูลเพิ่มเติม: ฟังก์ชันลูกศร MDN
คลาส ES6 เป็นคลาสที่เรียบง่ายเหนือรูปแบบ OO ที่ใช้ต้นแบบ การมีแบบฟอร์มประกาศที่สะดวกเพียงรูปแบบเดียวทำให้รูปแบบคลาสใช้งานได้ง่ายขึ้น และส่งเสริมการทำงานร่วมกัน คลาสรองรับการสืบทอดตามต้นแบบ การเรียกขั้นสูง อินสแตนซ์และวิธีสแตติกและตัวสร้าง
class SkinnedMesh extends THREE . Mesh {
constructor ( geometry , materials ) {
super ( geometry , materials ) ;
this . idMatrix = SkinnedMesh . defaultMatrix ( ) ;
this . bones = [ ] ;
this . boneMatrices = [ ] ;
//...
}
update ( camera ) {
//...
super . update ( ) ;
}
get boneCount ( ) {
return this . bones . length ;
}
set matrixType ( matrixType ) {
this . idMatrix = SkinnedMesh [ matrixType ] ( ) ;
}
static defaultMatrix ( ) {
return new THREE . Matrix4 ( ) ;
}
}ข้อมูลเพิ่มเติม: คลาส MDN
ตัวอักษรออบเจ็กต์ได้รับการขยายเพื่อรองรับการตั้งค่าต้นแบบในการก่อสร้าง การจดชวเลขสำหรับ foo: foo การมอบหมาย การกำหนดวิธีการ การโทรขั้นสูง และชื่อคุณสมบัติการคำนวณด้วยนิพจน์ เมื่อรวมกันแล้ว สิ่งเหล่านี้ยังนำอ็อบเจกต์ลิเทอรัลและการประกาศคลาสเข้ามาใกล้กันมากขึ้น และให้การออกแบบตามอ็อบเจ็กต์ได้ประโยชน์จากความสะดวกสบายบางอย่างที่เหมือนกัน
var obj = {
// __proto__
__proto__ : theProtoObj ,
// Shorthand for ‘handler: handler’
handler ,
// Methods
toString ( ) {
// Super calls
return "d " + super . toString ( ) ;
} ,
// Computed (dynamic) property names
[ 'prop_' + ( ( ) => 42 ) ( ) ] : 42
} ;ข้อมูลเพิ่มเติม: ไวยากรณ์และประเภท MDN: ตัวอักษรของวัตถุ
สตริงเทมเพลตจัดเตรียมน้ำตาลเชิงวากยสัมพันธ์สำหรับการสร้างสตริง ซึ่งคล้ายกับคุณลักษณะการแก้ไขสตริงใน Perl, Python และอื่นๆ คุณสามารถเลือกเพิ่มแท็กเพื่อให้สามารถปรับแต่งโครงสร้างสตริงได้ หลีกเลี่ยงการโจมตีแบบฉีดหรือสร้างโครงสร้างข้อมูลระดับที่สูงกว่าจากเนื้อหาสตริง
// Basic literal string creation
`In JavaScript 'n' is a line-feed.`
// Multiline strings
`In JavaScript this is
not legal.`
// String interpolation
var name = "Bob" , time = "today" ;
`Hello ${ name } , how are you ${ time } ?`
// Construct an HTTP request prefix is used to interpret the replacements and construction
POST `http://foo.org/bar?a= ${ a } &b= ${ b }
Content-Type: application/json
X-Credentials: ${ credentials }
{ "foo": ${ foo } ,
"bar": ${ bar } }` ( myOnReadyStateChangeHandler ) ;ข้อมูลเพิ่มเติม: สตริงเทมเพลต MDN
การทำลายล้างช่วยให้สามารถเชื่อมโยงโดยใช้การจับคู่รูปแบบ พร้อมรองรับอาร์เรย์และอ็อบเจ็กต์ที่ตรงกัน การทำลายโครงสร้างเป็นแบบ Fail-Soft คล้ายกับการค้นหาวัตถุมาตรฐาน foo["bar"] ทำให้เกิดค่า undefined เมื่อไม่พบ
// list matching
var [ a , , b ] = [ 1 , 2 , 3 ] ;
// object matching
var { op : a , lhs : { op : b } , rhs : c }
= getASTNode ( )
// object matching shorthand
// binds `op`, `lhs` and `rhs` in scope
var { op , lhs , rhs } = getASTNode ( )
// Can be used in parameter position
function g ( { name : x } ) {
console . log ( x ) ;
}
g ( { name : 5 } )
// Fail-soft destructuring
var [ a ] = [ ] ;
a === undefined ;
// Fail-soft destructuring with defaults
var [ a = 1 ] = [ ] ;
a === 1 ;ข้อมูลเพิ่มเติม: การมอบหมายการทำลายโครงสร้าง MDN
ค่าพารามิเตอร์เริ่มต้นที่ประเมินโดยผู้โทร เปลี่ยนอาร์เรย์ให้เป็นอาร์กิวเมนต์ที่ต่อเนื่องกันในการเรียกใช้ฟังก์ชัน ผูกพารามิเตอร์ต่อท้ายกับอาร์เรย์ ส่วนที่เหลือเข้ามาแทนที่ความจำเป็นใน arguments และจัดการกับกรณีทั่วไปได้โดยตรงมากขึ้น
function f ( x , y = 12 ) {
// y is 12 if not passed (or passed as undefined)
return x + y ;
}
f ( 3 ) == 15 function f ( x , ... y ) {
// y is an Array
return x * y . length ;
}
f ( 3 , "hello" , true ) == 6 function f ( x , y , z ) {
return x + y + z ;
}
// Pass each elem of array as argument
f ( ... [ 1 , 2 , 3 ] ) == 6ข้อมูล MDN เพิ่มเติม: พารามิเตอร์เริ่มต้น พารามิเตอร์ที่เหลือ ตัวดำเนินการสเปรด
โครงสร้างการผูกขอบเขตแบบบล็อก let เป็น var ใหม่ const เป็นการมอบหมายครั้งเดียว ข้อจำกัดแบบคงที่ป้องกันการใช้งานก่อนมอบหมาย
function f ( ) {
{
let x ;
{
// okay, block scoped name
const x = "sneaky" ;
// error, const
x = "foo" ;
}
// error, already declared in block
let x = "inner" ;
}
}ข้อมูล MDN เพิ่มเติม: คำสั่ง la, คำสั่ง const
ออบเจ็กต์ตัววนซ้ำเปิดใช้งานการวนซ้ำแบบกำหนดเอง เช่น CLR IEnumerable หรือ Java Iterable วางหลักเกณฑ์ for..in เป็นการวนซ้ำตามตัววนซ้ำแบบกำหนดเองด้วย for..of ไม่ต้องใช้อาร์เรย์ ทำให้สามารถใช้งานรูปแบบการออกแบบแบบ Lazy Design เช่น LINQ ได้
let fibonacci = {
[ Symbol . iterator ] ( ) {
let pre = 0 , cur = 1 ;
return {
next ( ) {
[ pre , cur ] = [ cur , pre + cur ] ;
return { done : false , value : cur }
}
}
}
}
for ( var n of fibonacci ) {
// truncate the sequence at 1000
if ( n > 1000 )
break ;
console . log ( n ) ;
}การวนซ้ำจะขึ้นอยู่กับอินเทอร์เฟซแบบเป็ดเหล่านี้ (ใช้ไวยากรณ์ประเภท TypeScript เพื่ออธิบายเท่านั้น):
interface IteratorResult {
done : boolean ;
value : any ;
}
interface Iterator {
next ( ) : IteratorResult ;
}
interface Iterable {
[ Symbol . iterator ] ( ) : Iterator
}ข้อมูลเพิ่มเติม: MDN สำหรับ...ของ
ตัวสร้างทำให้การเขียนตัววนซ้ำง่ายขึ้นโดยใช้ function* และ yield ฟังก์ชันที่ประกาศเป็นฟังก์ชัน* ส่งคืนอินสแตนซ์ตัวสร้าง ตัวสร้างเป็นประเภทย่อยของตัววนซ้ำซึ่งรวมถึง next และ throw เพิ่มเติม สิ่งเหล่านี้ช่วยให้ค่าไหลกลับเข้าไปในตัวสร้าง ดังนั้น yield จึงเป็นรูปแบบนิพจน์ที่ส่งคืนค่า (หรือพ่น)
หมายเหตุ: ยังสามารถใช้เพื่อเปิดใช้งานการเขียนโปรแกรมแบบอะซิงโครนัสแบบ 'รอ' ได้ โปรดดูข้อเสนอ ES7 await ด้วย
var fibonacci = {
[ Symbol . iterator ] : function * ( ) {
var pre = 0 , cur = 1 ;
for ( ; ; ) {
var temp = pre ;
pre = cur ;
cur += temp ;
yield cur ;
}
}
}
for ( var n of fibonacci ) {
// truncate the sequence at 1000
if ( n > 1000 )
break ;
console . log ( n ) ;
}อินเทอร์เฟซตัวสร้างคือ (ใช้ไวยากรณ์ประเภท TypeScript สำหรับการแสดงออกเท่านั้น):
interface Generator extends Iterator {
next ( value ?: any ) : IteratorResult ;
throw ( exception : any ) ;
}ข้อมูลเพิ่มเติม: โปรโตคอลการทำซ้ำ MDN
การเพิ่มเติมที่ไม่ขาดตอนเพื่อรองรับ Unicode เต็มรูปแบบ รวมถึงรูปแบบตัวอักษร Unicode ใหม่ในสตริงและโหมด RegExp u ใหม่เพื่อจัดการจุดโค้ด เช่นเดียวกับ API ใหม่ในการประมวลผลสตริงที่ระดับจุดโค้ด 21 บิต ส่วนเพิ่มเติมเหล่านี้รองรับการสร้างแอปทั่วโลกใน JavaScript
// same as ES5.1
"?" . length == 2
// new RegExp behaviour, opt-in ‘u’
"?" . match ( / . / u ) [ 0 ] . length == 2
// new form
"u{20BB7}" == "?" == "uD842uDFB7"
// new String ops
"?" . codePointAt ( 0 ) == 0x20BB7
// for-of iterates code points
for ( var c of "?" ) {
console . log ( c ) ;
}ข้อมูลเพิ่มเติม: MDN RegExp.prototype.unicode
การสนับสนุนระดับภาษาสำหรับโมดูลสำหรับการกำหนดส่วนประกอบ เข้ารหัสรูปแบบจากตัวโหลดโมดูล JavaScript ยอดนิยม (AMD, CommonJS) ลักษณะการทำงานรันไทม์ที่กำหนดโดยตัวโหลดเริ่มต้นที่โฮสต์กำหนด โมเดลอะซิงก์โดยปริยาย – ไม่มีการเรียกใช้โค้ดจนกว่าโมดูลที่ร้องขอจะพร้อมใช้งานและประมวลผล
// lib/math.js
export function sum ( x , y ) {
return x + y ;
}
export var pi = 3.141593 ; // app.js
import * as math from "lib/math" ;
alert ( "2π = " + math . sum ( math . pi , math . pi ) ) ; // otherApp.js
import { sum , pi } from "lib/math" ;
alert ( "2π = " + sum ( pi , pi ) ) ; คุณสมบัติเพิ่มเติมบางอย่างรวมถึง export default และ export * :
// lib/mathplusplus.js
export * from "lib/math" ;
export var e = 2.71828182846 ;
export default function ( x ) {
return Math . log ( x ) ;
} // app.js
import ln , { pi , e } from "lib/mathplusplus" ;
alert ( "2π = " + ln ( e ) * pi * 2 ) ;ข้อมูล MDN เพิ่มเติม: คำชี้แจงการนำเข้า, คำชี้แจงการส่งออก
ตัวโหลดโมดูลรองรับ:
ตัวโหลดโมดูลเริ่มต้นสามารถกำหนดค่าได้ และตัวโหลดใหม่สามารถสร้างเพื่อประเมินและโหลดโค้ดในบริบทที่แยกหรือจำกัดได้
// Dynamic loading – ‘System’ is default loader
System . import ( 'lib/math' ) . then ( function ( m ) {
alert ( "2π = " + m . sum ( m . pi , m . pi ) ) ;
} ) ;
// Create execution sandboxes – new Loaders
var loader = new Loader ( {
global : fixup ( window ) // replace ‘console.log’
} ) ;
loader . eval ( "console.log('hello world!');" ) ;
// Directly manipulate module cache
System . get ( 'jquery' ) ;
System . set ( 'jquery' , Module ( { $ : $ } ) ) ; // WARNING: not yet finalizedโครงสร้างข้อมูลที่มีประสิทธิภาพสำหรับอัลกอริทึมทั่วไป WeakMaps ให้ตารางด้านข้างที่มีคีย์วัตถุที่ปราศจากการรั่วไหล
// Sets
var s = new Set ( ) ;
s . add ( "hello" ) . add ( "goodbye" ) . add ( "hello" ) ;
s . size === 2 ;
s . has ( "hello" ) === true ;
// Maps
var m = new Map ( ) ;
m . set ( "hello" , 42 ) ;
m . set ( s , 34 ) ;
m . get ( s ) == 34 ;
// Weak Maps
var wm = new WeakMap ( ) ;
wm . set ( s , { extra : 42 } ) ;
wm . size === undefined
// Weak Sets
var ws = new WeakSet ( ) ;
ws . add ( { data : 42 } ) ;
// Because the added object has no other references, it will not be held in the setข้อมูล MDN เพิ่มเติม: แผนที่, ตั้งค่า, WeakMap, WeakSet
พรอกซีช่วยให้สามารถสร้างออบเจ็กต์ที่มีพฤติกรรมเต็มรูปแบบสำหรับโฮสต์ออบเจ็กต์ สามารถใช้สำหรับการสกัดกั้น การจำลองเสมือนของวัตถุ การบันทึก/การทำโปรไฟล์ ฯลฯ
// Proxying a normal object
var target = { } ;
var handler = {
get : function ( receiver , name ) {
return `Hello, ${ name } !` ;
}
} ;
var p = new Proxy ( target , handler ) ;
p . world === 'Hello, world!' ; // Proxying a function object
var target = function ( ) { return 'I am the target' ; } ;
var handler = {
apply : function ( receiver , ... args ) {
return 'I am the proxy' ;
}
} ;
var p = new Proxy ( target , handler ) ;
p ( ) === 'I am the proxy' ;มีกับดักสำหรับการดำเนินการเมตาระดับรันไทม์ทั้งหมด:
var handler =
{
get :... ,
set :... ,
has :... ,
deleteProperty :... ,
apply :... ,
construct :... ,
getOwnPropertyDescriptor :... ,
defineProperty :... ,
getPrototypeOf :... ,
setPrototypeOf :... ,
enumerate :... ,
ownKeys :... ,
preventExtensions :... ,
isExtensible :...
}ข้อมูลเพิ่มเติม: พร็อกซี MDN
สัญลักษณ์ช่วยให้สามารถควบคุมการเข้าถึงสถานะออบเจ็กต์ได้ สัญลักษณ์อนุญาตให้คีย์คุณสมบัติด้วย string (เช่นใน ES5) หรือ symbol สัญลักษณ์เป็นประเภทดั้งเดิมใหม่ พารามิเตอร์ description เพิ่มเติมที่ใช้ในการแก้ไขจุดบกพร่อง - แต่ไม่ได้เป็นส่วนหนึ่งของข้อมูลประจำตัว สัญลักษณ์มีเอกลักษณ์เฉพาะตัว (เช่น gensym) แต่ไม่เป็นส่วนตัวเนื่องจากถูกเปิดเผยผ่านคุณสมบัติการสะท้อนเช่น Object.getOwnPropertySymbols
var MyClass = ( function ( ) {
// module scoped symbol
var key = Symbol ( "key" ) ;
function MyClass ( privateData ) {
this [ key ] = privateData ;
}
MyClass . prototype = {
doStuff : function ( ) {
... this [ key ] . . .
}
} ;
return MyClass ;
} ) ( ) ;
var c = new MyClass ( "hello" )
c [ "key" ] === undefinedข้อมูลเพิ่มเติม: สัญลักษณ์ MDN
ใน ES6 สามารถจัดคลาสย่อยบิวท์อินเช่น Array , Date และ DOM Element ได้
การสร้างวัตถุสำหรับฟังก์ชันชื่อ Ctor ตอนนี้ใช้สองเฟส (ทั้งสองส่งแบบเสมือน):
Ctor[@@create] เพื่อจัดสรรอ็อบเจ็กต์ โดยติดตั้งลักษณะการทำงานพิเศษใดๆ สัญลักษณ์ @@create ที่รู้จักมีให้ใช้งานผ่าน Symbol.create ตอนนี้บิวด์อินเปิดเผย @@create ของพวกเขาอย่างชัดเจน
// Pseudo-code of Array
class Array {
constructor ( ... args ) { /* ... */ }
static [ Symbol . create ] ( ) {
// Install special [[DefineOwnProperty]]
// to magically update 'length'
}
}
// User code of Array subclass
class MyArray extends Array {
constructor ( ... args ) { super ( ... args ) ; }
}
// Two-phase 'new':
// 1) Call @@create to allocate object
// 2) Invoke constructor on new instance
var arr = new MyArray ( ) ;
arr [ 1 ] = 12 ;
arr . length == 2ไลบรารีใหม่ๆ มากมายที่เพิ่มเข้ามา รวมถึงไลบรารี Math หลัก, ตัวช่วยในการแปลง Array, ตัวช่วยสตริง และ Object.assign สำหรับการคัดลอก
