es6features
1.0.0
ECMAScript 2015라고도 알려진 ECMAScript 6은 ECMAScript 표준의 최신 버전입니다. ES6은 언어에 대한 중요한 업데이트이며 2009년 ES5가 표준화된 이후 언어에 대한 첫 번째 업데이트입니다. 현재 주요 JavaScript 엔진에서 이러한 기능의 구현이 진행 중입니다.
ECMAScript 6 언어의 전체 사양은 ES6 표준을 참조하세요.
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 템플릿 문자열
구조 분해를 사용하면 패턴 일치를 사용한 바인딩이 가능하며 배열 및 객체 일치도 지원됩니다. 구조 분해는 표준 객체 조회 foo["bar"] 와 유사한 페일 소프트(fail-soft)이며, 찾을 수 없는 경우 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 정보: 기본 매개변수, 나머지 매개변수, Spread Operator
블록 범위 바인딩 구성. 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 정보: let 문, const 문
Iterator 객체는 CLR IEnumerable 또는 Java Iterable과 같은 사용자 정의 반복을 가능하게 합니다. for..in 사용하여 for..of 사용하여 사용자 정의 반복자 기반 반복으로 일반화합니다. 배열을 구현할 필요가 없으며 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 for...of
생성기는 function* 및 yield 사용하여 반복자 작성을 단순화합니다. function*으로 선언된 함수는 Generator 인스턴스를 반환합니다. 생성기는 추가 next 및 throw 포함하는 반복자의 하위 유형입니다. 이를 통해 값이 생성기로 다시 흐를 수 있으므로 yield 값을 반환(또는 발생)하는 표현식 형식입니다.
참고: 'await'와 같은 비동기 프로그래밍을 활성화하는 데에도 사용할 수 있습니다. 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 반복 프로토콜
문자열의 새로운 유니코드 리터럴 형식과 코드 포인트를 처리하기 위한 새로운 RegExp u 모드, 21비트 코드 포인트 수준에서 문자열을 처리하기 위한 새로운 API를 포함하여 전체 유니코드를 지원하는 중단 없는 추가 기능입니다. 이러한 추가 기능은 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 정보: import 문, 내보내기 문
모듈 로더는 다음을 지원합니다:
기본 모듈 로더를 구성할 수 있으며 격리되거나 제한된 컨텍스트에서 코드를 평가하고 로드하기 위해 새 로더를 구성할 수 있습니다.
// 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 정보: Map, Set, 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 매개변수이지만 ID의 일부는 아닙니다. 기호는 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핵심 수학 라이브러리, 배열 변환 도우미, 문자열 도우미, 복사용 Object.할당을 포함한 많은 새로운 라이브러리가 추가되었습니다.
