ES6 for humans
1.0.0
? 완전한 가이드는 이제 아마존에서 사용할 수 있습니다
const 와 Block Scoping을 let 블록 스코핑이라는 블록에 묶인 선언을 만들 수 let . 기능 범위를 제공하는 var 을 사용하는 대신 ES6에서 블록 스코프 변수 ( let 또는 const )를 사용하는 것이 좋습니다.
var a = 2 ;
{
let a = 3 ;
console . log ( a ) ; // 3
let a = 5 ; // TypeError: Identifier 'a' has already been declared
}
console . log ( a ) ; // 2 블록 점령 선언의 또 다른 형태는 상수를 생성하는 const 입니다. ES6에서, const 값에 대한 지속적인 참조를 나타냅니다. 다시 말해, Object 's and Array 의 내용은 변경 될 수 있으며 변수의 재 할당 만 방지됩니다. 간단한 예는 다음과 같습니다.
{
const b = 5 ;
b = 10 ; // TypeError: Assignment to constant variable
const arr = [ 5 , 6 ] ;
arr . push ( 7 ) ;
console . log ( arr ) ; // [5,6,7]
arr = 10 ; // TypeError: Assignment to constant variable
arr [ 0 ] = 3 ; // value is mutable
console . log ( arr ) ; // [3,6,7]
}명심해야 할 몇 가지 사항 :
let 와 const 의 호이 스팅은 변수와 기능의 전통적인 호이스트와 다릅니다. let and const 모두 들어 올려 지지만 일시적인 데드 존으로 인해 선언 전에 접근 할 수 없습니다.let and const 가장 가까운 인공 블록으로 범위를 지정합니다.const PI = 3.14 )const 선언으로 정의되어야합니다.const Over let 사용하십시오. 화살표 기능은 ES6의 작문 기능에 대한 짧은 표기법입니다. 화살표 함수 정의는 매개 변수 목록 ( ... ) 으로 구성되며 => 마커 및 기능 본문이 이어집니다. 단일 연계 함수의 경우 괄호를 생략 할 수 있습니다.
// Classical Function Expression
function addition ( a , b ) {
return a + b ;
} ;
// Implementation with arrow function
const addition = ( a , b ) => a + b ;
// With single argument, no parentheses required
const add5 = a => 5 + a ; 위의 예에서는 addition 화살표 기능이 명시 적 반환 문이 필요하지 않은 "Concise Body"로 구현됩니다. => 이후 생략 된 { } 에 유의하십시오.
다음은 일반적인 "블록 바디"의 예입니다. 곱슬 브레이스 포장지를 포함하여.
const arr = [ 'apple' , 'banana' , 'orange' ] ;
const breakfast = arr . map ( fruit => {
return fruit + 's' ;
} ) ;
console . log ( breakfast ) ; // ['apples', 'bananas', 'oranges']보다! 더 많은 ...
화살표 기능은 코드를 짧게 만들지 않습니다. 그들은 this 결합 행동과 밀접한 관련이 있습니다.
this 키워드의 화살표 기능 동작은 정상 함수와 다릅니다. JavaScript의 각 함수는 자체 자체의 this 를 정의하지만 화살표 기능은 가장 가까운 동봉 컨텍스트 의이 this 을 캡처합니다. 다음 코드를 확인하십시오.
function Person ( ) {
// The Person() constructor defines `this` as an instance of itself.
this . age = 0 ;
setInterval ( function growUp ( ) {
// In non-strict mode, the growUp() function defines `this`
// as the global object, which is different from the `this`
// defined by the Person() constructor.
this . age ++ ;
} , 1000 ) ;
}
var p = new Person ( ) ; ECMAScript 3/5 에서이 문제는 this 문제를 닫을 수있는 변수에 할당하여 수정되었습니다.
function Person ( ) {
const self = this ;
self . age = 0 ;
setInterval ( function growUp ( ) {
// The callback refers to the `self` variable of which
// the value is the expected object.
self . age ++ ;
} , 1000 ) ;
}위에서 언급했듯이 화살표 함수는 가장 가까운 동봉 컨텍스트 의이 값을 캡처하므로 중첩 된 화살표 기능에서도 다음 코드가 예상대로 작동합니다.
function Person ( ) {
this . age = 0 ;
setInterval ( ( ) => {
setTimeout ( ( ) => {
this . age ++ ; // `this` properly refers to the person object
} , 1000 ) ;
} , 1000 ) ;
}
let p = new Person ( ) ;화살표 기능에서 'lexical this'에 대해 자세히 알아보십시오
ES6을 사용하면 기능 정의에서 기본 매개 변수를 설정할 수 있습니다. 여기 간단한 그림이 있습니다.
const getFinalPrice = ( price , tax = 0.7 ) => price + price * tax ;
getFinalPrice ( 500 ) ; // 850 ... 운영자는 사용 방법 및 위치에 따라 스프레드 또는 레스트 작업자라고합니다.
반복 가능한 모든 것을 사용하면 개별 요소로 "확산"하는 역할을합니다.
const makeToast = ( breadType , topping1 , topping2 ) => {
return `I had ${ breadType } toast with ${ topping1 } and ${ topping2 } ` ;
} ; const ingredients = [ 'wheat' , 'butter' , 'jam' ] ;
makeToast ( ... ingredients ) ;
// "I had wheat toast with butter and jam"
makeToast ( ... [ 'sourdough' , 'avocado' , 'kale' ] ) ;
// "I had sourdough toast with avocado and kale"스프레드는 또한 다른 객체에서 새 개체를 형성하는 데 유용합니다.
const defaults = { avatar : 'placeholder.jpg' , active : false }
const userData = { username : 'foo' , avatar : 'bar.jpg' }
console . log ( { created : '2017-12-31' , ... defaults , ... userData } )
// {created: "2017-12-31", avatar: "bar.jpg", active: false, username: "foo"}새로운 배열도 표현 적으로 형성 될 수 있습니다.
const arr1 = [ 1 , 2 , 3 ] ;
const arr2 = [ 7 , 8 , 9 ] ;
console . log ( [ ... arr1 , 4 , 5 , 6 , ... arr2 ] ) // [1, 2, 3, 4, 5, 6, 7, 8, 9] 다른 일반적인 사용법은 ... 모든 인수를 배열로 함께 모으는 것입니다. 이것을 "휴식"연산자라고합니다.
function foo ( ... args ) {
console . log ( args ) ;
}
foo ( 1 , 2 , 3 , 4 , 5 ) ; // [1, 2, 3, 4, 5]ES6을 사용하면 변수에서 속성을 초기화하고 함수 메소드를 정의하기위한 속기 구문을 제공하여 객체 리터럴을 선언 할 수 있습니다. 또한 객체 문자 그럴 정의에서 속성 키를 계산할 수 있습니다.
function getCar ( make , model , value ) {
return {
// with property value shorthand
// syntax, you can omit the property
// value if key matches variable
// name
make , // same as make: make
model , // same as model: model
value , // same as value: value
// computed values now work with
// object literals
[ 'make' + make ] : true ,
// Method definition shorthand syntax
// omits `function` keyword & colon
depreciate ( ) {
this . value -= 2500 ;
}
} ;
}
let car = getCar ( 'Kia' , 'Sorento' , 40000 ) ;
console . log ( car ) ;
// {
// make: 'Kia',
// model:'Sorento',
// value: 40000,
// makeKia: true,
// depreciate: function()
// } ES6은 옥탈 및 이진 리터럴을 새로운 지원합니다. 0o 또는 0O 로 숫자를 선불로 전환하면이를 Octal 값으로 변환합니다. 다음 코드를 살펴보십시오.
let oValue = 0o10 ;
console . log ( oValue ) ; // 8
let bValue = 0b10 ; // 0b or 0B for binary
console . log ( bValue ) ; // 2파괴는 객체 및 어레이를 다룰 때 온도 변수의 필요성을 피하는 데 도움이됩니다.
function foo ( ) {
return [ 1 , 2 , 3 ] ;
}
let arr = foo ( ) ; // [1,2,3]
let [ a , b , c ] = foo ( ) ;
console . log ( a , b , c ) ; // 1 2 3 function getCar ( ) {
return {
make : 'Tesla' ,
model : 'g95' ,
metadata : {
vin : '123abc' ,
miles : '12000'
}
} ;
}
const { make , model } = getCar ( ) ;
console . log ( make , model ) ; // Tesla g95
const { make , metadata : { miles } } = getCar ( ) ;
console . log ( make , miles ) ; // Tesla 12000
ES6은 프로토 타입과 함께 (클래스리스) 객체에서 super 메소드를 사용할 수 있습니다. 다음은 간단한 예입니다.
const parent = {
foo ( ) {
console . log ( "Hello from the Parent" ) ;
}
}
const child = {
foo ( ) {
super . foo ( ) ;
console . log ( "Hello from the Child" ) ;
}
}
Object . setPrototypeOf ( child , parent ) ;
child . foo ( ) ; // Hello from the Parent
// Hello from the ChildES6은 자동으로 평가되는 보간을 추가하는 더 쉬운 방법을 소개합니다.
`${ ... }` 변수를 렌더링하는 데 사용됩니다.` 백 티크는 구분 기호로 사용됩니다. let user = 'Kevin' ;
console . log ( `Hi ${ user } !` ) ; // Hi Kevin!for...of . const nicknames = [ 'di' , 'boo' , 'punkeye' ] ;
nicknames . size = 3 ;
for ( let nickname of nicknames ) {
console . log ( nickname ) ;
}
// di
// boo
// punkeyefor...in 객체의 모든 열거 가능한 속성에 반복. const nicknames = [ 'di' , 'boo' , 'punkeye' ] ;
nicknames . size = 3 ;
for ( let nickname in nicknames ) {
console . log ( nickname ) ;
}
// 0
// 1
// 2
// size ES6은 Map 및 WeakMap 이라는 새로운 데이터 구조 세트를 소개합니다. 이제 우리는 실제로 JavaScript의 맵을 항상 사용합니다. 실제로 모든 객체는 Map 으로 간주 될 수 있습니다.
객체는 키 (항상 문자열)와 값으로 만들어지는 반면, Map 에서는 값 (객체와 기본 값 모두)이 키나 값으로 사용할 수 있습니다. 이 코드를 살펴보십시오.
const myMap = new Map ( ) ;
const keyString = "a string" ,
keyObj = { } ,
keyFunc = ( ) => { } ;
// setting the values
myMap . set ( keyString , "value associated with 'a string'" ) ;
myMap . set ( keyObj , "value associated with keyObj" ) ;
myMap . set ( keyFunc , "value associated with keyFunc" ) ;
myMap . size ; // 3
// getting the values
myMap . get ( keyString ) ; // "value associated with 'a string'"
myMap . get ( keyObj ) ; // "value associated with keyObj"
myMap . get ( keyFunc ) ; // "value associated with keyFunc"약점
WeakMap 키가 약하게 참조되는 맵으로, 키가 쓰레기를 수집하는 것을 막지 않는지입니다. 즉, 메모리 누출에 대해 걱정할 필요가 없습니다.
여기에 주목해야 할 또 다른 사항 Map WeakMap 에서 모든 키는 객체 여야합니다 .
WeakMap 에는 4 가지 메소드 delete(key) , has(key) , get(key) 및 set(key, value) 만 있습니다.
const w = new WeakMap ( ) ;
w . set ( 'a' , 'b' ) ;
// Uncaught TypeError: Invalid value used as weak map key
const o1 = { } ,
o2 = ( ) => { } ,
o3 = window ;
w . set ( o1 , 37 ) ;
w . set ( o2 , "azerty" ) ;
w . set ( o3 , undefined ) ;
w . get ( o3 ) ; // undefined, because that is the set value
w . has ( o1 ) ; // true
w . delete ( o1 ) ;
w . has ( o1 ) ; // false세트 객체는 고유 한 값의 모음입니다. 컬렉션에는 모든 고유 한 값이 있어야하므로 중복 값은 무시됩니다. 값은 원시 유형 또는 객체 참조 일 수 있습니다.
const mySet = new Set ( [ 1 , 1 , 2 , 2 , 3 , 3 ] ) ;
mySet . size ; // 3
mySet . has ( 1 ) ; // true
mySet . add ( 'strings' ) ;
mySet . add ( { a : 1 , b : 2 } ) ; forEach 메소드 또는 for...of 루프를 사용하여 삽입 순서로 세트를 반복 할 수 있습니다.
mySet . forEach ( ( item ) => {
console . log ( item ) ;
// 1
// 2
// 3
// 'strings'
// Object { a: 1, b: 2 }
} ) ;
for ( let value of mySet ) {
console . log ( value ) ;
// 1
// 2
// 3
// 'strings'
// Object { a: 1, b: 2 }
} 세트에는 delete() 및 clear() 메소드도 있습니다.
약세 세트
WeakMap 과 마찬가지로 WeakSet 객체를 사용하면 컬렉션에 약한 개체를 저장할 수 있습니다. WeakSet 의 객체는 한 번만 발생합니다. 약점 컬렉션에서 독특합니다.
const ws = new WeakSet ( ) ;
const obj = { } ;
const foo = { } ;
ws . add ( window ) ;
ws . add ( obj ) ;
ws . has ( window ) ; // true
ws . has ( foo ) ; // false, foo has not been added to the set
ws . delete ( window ) ; // removes window from the set
ws . has ( window ) ; // false, window has been removedES6은 새로운 클래스 구문을 소개합니다. 여기서 주목해야 할 것은 ES6 클래스가 새로운 객체 지향 상속 모델이 아니라는 것입니다. 그들은 단지 JavaScript의 기존 프로토 타입 기반 상속에 대한 구문 설탕 역할을합니다.
ES6에서 클래스를 보는 한 가지 방법은 ES5에서 사용하는 프로토 타입 및 생성자 기능을 사용하는 새로운 구문입니다.
static 키워드를 사용하여 정의 된 함수 클래스에서 정적/클래스 함수를 구현합니다.
class Task {
constructor ( ) {
console . log ( "task instantiated!" ) ;
}
showId ( ) {
console . log ( 23 ) ;
}
static loadAll ( ) {
console . log ( "Loading all tasks.." ) ;
}
}
console . log ( typeof Task ) ; // function
const task = new Task ( ) ; // "task instantiated!"
task . showId ( ) ; // 23
Task . loadAll ( ) ; // "Loading all tasks.."수업에서 확장하고 슈퍼
다음 코드를 고려하십시오.
class Car {
constructor ( ) {
console . log ( "Creating a new car" ) ;
}
}
class Porsche extends Car {
constructor ( ) {
super ( ) ;
console . log ( "Creating Porsche" ) ;
}
}
let c = new Porsche ( ) ;
// Creating a new car
// Creating Porsche ES6의 부모 수업에서 아동 클래스가 상속받을 수 있도록 허용 extends . 파생 생성자는 super() 호출해야한다는 점에 유의해야합니다.
또한 super.parentMethodName() 사용하여 Child Class의 메소드에서 Parent Class의 메소드를 호출 할 수 있습니다.
수업에 대해 자세히 알아보십시오
명심해야 할 몇 가지 사항 :
function 키워드를 사용할 필요가 없습니다. Symbol ES6에 도입 된 독특하고 불변의 데이터 유형입니다. 기호의 목적은 고유 식별자를 생성하는 것이지만 해당 식별자에 액세스 할 수는 없습니다.
기호를 만드는 방법은 다음과 같습니다.
const sym = Symbol ( "some optional description" ) ;
console . log ( typeof sym ) ; // symbol Symbol(…) 와 함께 new 사용할 수 없습니다.
기호가 객체의 속성/키로 사용되는 경우, 특수한 방식으로 저장되어 속성이 객체 속성의 정상 열거에 나타나지 않을 것입니다.
const o = {
val : 10 ,
[ Symbol ( "random" ) ] : "I'm a symbol" ,
} ;
console . log ( Object . getOwnPropertyNames ( o ) ) ; // val 객체의 기호 속성을 검색하려면 Object.getOwnPropertySymbols(o) 사용하십시오.
반복자는 한 번에 하나씩 컬렉션에서 항목에 액세스하고 해당 시퀀스 내에서 현재 위치를 추적합니다. 다음 항목을 순서로 반환하는 next() 메소드를 제공합니다. 이 메소드는 두 가지 속성이있는 객체를 반환합니다 : 완료와 값.
ES6에는 객체의 기본 반복기를 지정하는 Symbol.iterator 가 있습니다. 객체를 반복해야 할 때마다 (예 : for..of 루프의 시작 부분), @@ iterator 메소드는 인수가없는 호출되며 반환 된 반복자는 반복 할 값을 얻는 데 사용됩니다.
반복 가능한 배열과 그 값을 소비하기 위해 생성 할 수있는 반복기를 살펴 보겠습니다.
const arr = [ 11 , 12 , 13 ] ;
const itr = arr [ Symbol . iterator ] ( ) ;
itr . next ( ) ; // { value: 11, done: false }
itr . next ( ) ; // { value: 12, done: false }
itr . next ( ) ; // { value: 13, done: false }
itr . next ( ) ; // { value: undefined, done: true } obj[Symbol.iterator]() 객체 정의로 정의하여 사용자 정의 반복자를 작성할 수 있습니다.
Generator 함수는 ES6의 새로운 기능으로, 함수는 한 번에 한 값 씩 함수에서 값을 가져 오도록 반복 할 수있는 객체를 반복하여 시간이 지남에 따라 많은 값을 생성 할 수 있습니다.
발전기 함수는 호출되면 반복 가능한 객체를 반환합니다. 새로운 * 구문과 ES6에 소개 된 새로운 yield 키워드를 사용하여 작성되었습니다.
function * infiniteNumbers ( ) {
let n = 1 ;
while ( true ) {
yield n ++ ;
}
}
const numbers = infiniteNumbers ( ) ; // returns an iterable object
numbers . next ( ) ; // { value: 1, done: false }
numbers . next ( ) ; // { value: 2, done: false }
numbers . next ( ) ; // { value: 3, done: false }수율이 호출 될 때마다, 수율 값은 시퀀스에서 다음 값이됩니다.
또한 발전기는 수요가 수익률을 계산하여 계산하는 데 비용이 많이 걸리는 서열을 효율적으로 표현하거나 심지어 무한한 서열을 효율적으로 표현할 수 있습니다.
ES6은 약속에 대한 기본 지원을 가지고 있습니다. 약속은 비동기 작업이 완료되기를 기다리는 대상이며, 해당 작업이 완료되면 약속이 이행 (해결)되거나 거부됩니다.
약속을 만드는 표준 방법은 두 가지 기능을 매개 변수로 제공하는 핸들러를 수용하는 new Promise() 생성자를 사용하는 것입니다. 첫 핸들러 (일반적으로 resolve 라는 이름으로)는 준비가되었을 때 미래의 가치를 호출하는 기능입니다. 그리고 중간 핸들러 (일반적으로 이름이 지정된 reject )는 미래의 가치를 해결할 수없는 경우 약속을 거부하기 위해 전화하는 기능입니다.
const p = new Promise ( ( resolve , reject ) => {
if ( /* condition */ ) {
resolve ( /* value */ ) ; // fulfilled successfully
} else {
reject ( /* reason */ ) ; // error, rejected
}
} ) ; 모든 약속에는 한 쌍의 콜백을 취하는 then 이 지정된 방법이 있습니다. 약속이 해결되면 첫 번째 콜백이 호출되며, 약속이 거부되면 두 번째 콜백이 호출됩니다.
p . then ( ( val ) => console . log ( "Promise Resolved" , val ) ,
( err ) => console . log ( "Promise Rejected" , err ) ) ; then 에서 값을 반환하면 다음 값이 then 콜백으로 전달됩니다.
const hello = new Promise ( ( resolve , reject ) => { resolve ( "Hello" ) } ) ;
hello . then ( ( str ) => ` ${ str } World` )
. then ( ( str ) => ` ${ str } !` )
. then ( ( str ) => console . log ( str ) ) // Hello World!약속을 되돌릴 때, 약속의 해결 된 가치는 다음 콜백으로 전달되어 효과적으로 쇄도 할 것입니다. 이것은 "콜백 지옥"을 피하는 간단한 기술입니다.
const p = new Promise ( ( resolve , reject ) => { resolve ( 1 ) } ) ;
const eventuallyAdd1 = ( val ) => new Promise ( ( resolve , reject ) => { resolve ( val + 1 ) } ) ;
p . then ( eventuallyAdd1 )
. then ( eventuallyAdd1 )
. then ( ( val ) => console . log ( val ) ) ; // 3
