Що нового в ecmascript 6?

Відео: ECMAScript 6

Всім привіт! Сьогодні ми розглянемо деякі нові можливості і зміна старих в EcmaScript6 у порівнянні з EcmaScript5.

визначення методів

В EcmaScript5 методи - властивості, значеннями яких є функція.

var obj ={ 
 method:function(){ 
 
} 
} -

В EcmaScript6 методи також є функціями, однак ви можете оголошувати їх більш компактно

let obj { 
 method(){ 
 
} 
} -

Геттери і Сетери продовжують працювати, як вони працювали в EcmaScript 5

let obj ={ 
get foo(){ 
 console.log(`GET foo`) - 
return123- 
}, 
set bar(value){ 
 console.log(`SET bar to`+value) - 
// повертає значення ігнорується 
} 
} -

Давайте використовувати об`єкт

gt; obj.foo 
GET foo 
123 
gt; obj.bar =true 
SET bar to true 
true

Існує також спосіб коротко визначити властивості, значення яких є функціями генератора

let obj ={ 
* myGeneratorMethod(){ 
 
} 
} -

Цей код дорівнює цьому

let obj ={ 
 myGeneratorMethod:function*(){ 
 
} 
} -

Скорочення значень властивостей

Скорочення дозволяють вам скоротити оголошення властивості в літералі об`єкта. Якщо назва змінної, яка визначає значення властивості, також ключове слово, ви можете опустити ключ. Ось, як це виглядає

let x =4- let y =1- let obj ={ x, y } -

Останній рядок дорівнює цій

let obj ={ x: x, y: y } -

Скорочення значень властивостей прекрасно працюють з деструкцією

Відео: ECMAScript 6 - # 1 - Знайомство з EcmaScript 6, let, const

let obj ={ x:4, y:1} - 
let {x,y}= obj- 
console.log(x) -// 4 
console.log(y) -// 1

Обчислені ключі властивостей

Існує 2 способи визначити ключ для властивості.

через певне ім`я: obj.foo = true
через вираз: obj [ `b` + `ar`] = 123

У літералі об`єкта ви можете використовувати тільки перший спосіб в ES5. В ES6 додали і другий спосіб

let propKey =`Foo`- 
 let obj ={ 
[propKey]:true, 
[`B`+`Ar`]:123 
} -

Цей новий синтаксис може бути поєднаний з оголошенням методу

let obj ={ 
[`H`+`Ello`] (){ 
return`Hi`- 
} 
} - 
console.log(obj.hello()) -// hi

Нові методи для об`єктів

Object.assign (target, source_1, source_2, ...)

Відео: ECMAScript 6 - # 2 - Функції

Цей метод поєднує sources в target. це змінює target, по-перше, копіює все перелічуваних власні властивості source_1 в target, потім те ж саме з source_2. В кінці повертається target.

let obj ={ foo:123} - 
Object.assign(obj,{ bar:true}) - 
console.log(JSON.stringify(obj)) - 
// { "foo": 123, "bar": true}

Object.getOwnPropertySymbols (obj)

В ES6 ключ властивості може бути або рядком, або символом. Тепер є 5 методів, які витягують ключі об`єкта

Object.keys (obj) - витягує всі строкові перераховуються ключі властивостей
Object.getOwnPropertyNames (obj) - витягує всі строкові ключі властивостей
Object.getOwnPropertySymbols (obj) - повертає всі символьні ключі властивостей
Reflect.ownKeys (obj) - витягує всі ключі всіх своїх якостей
Reflect.enumerate (obj) - витягує всі рядкові значення ключів всіх перераховуються властивостей

Object.is (value1, value2)

Строгий оператор еквівалентності розглядає два значення інакше, ніж можна було очікувати

перше: NaN НЕ дорівнює самому собі. Це дуже сумно, тому що це часто заважає нам виявити NaN

[0,NaN,2].indexOf(NaN)-1

Друге: в jаvascript 2 нуля, але суворе порівняння відноситься до них однаково

-0===+0 
true

Object.is () надає можливість порівняння значень трохи більше точно, ніж звичайне суворо порівняння.

Object.is(NaN,NaN) 
true 
Object.is(-0,+0) 
false

Все інше порівнюється так само, як і суворе порівняння.

Якщо ми сумісний Object.is () з новим ES6 методом масивів findIndex (), то отримаємо NaN.

[0,NaN,2].findIndex(x = Gt;Object.is(x,NaN)) 
1

Object.setPrototypeOf (obj, proto)

Цей метод встановлює прототип proto для об`єкта obj. В ES5 ми повинні були робити це через Object.create (), тепер же ми можемо робити це через зручний метод.

На цьому я закінчую цю статтю. Якщо у кого-то, можливо, виникло питання, що таке let, то можете почитати тут про це тут Дякую за увагу і удачі!

Поділися в соціальних мережах:

Схожі