ECMAScript 6 (ES6): What’Новый В следующей версии JavaScript

Вы, наверное, слышали о ECMAScript 6(или ES6) уже.Это следующая версия JavaScript, и она имеет некоторые новые функции.Особенности иметь различную степень сложности и полезны в обоих простых скриптов и сложных приложений.В этой статье, мы обсудим подобранный выбор ES6 featuresчто вы можете использовать в своей повседневной JavaScript кодирования .

Пожалуйста, обратите внимание, что поддержка этих новых функций ES6 идет полным ходом в современных браузерах, хотя поддержка варьируется.Если вам нужно поддерживать старые версии браузеров, которые не имеют много возможностей ES6, я затрону решений, которые могут помочь вам начать использовать ES6 сегодня .

Большинство примеров кода поставляются с внешним “запустить этот код” ссылку, так что вы можете увидеть код и играть с ней .

Variables

let

Вы привыкли к объявлению переменных, используя var,Теперь вы можете использовать letтакже.Тонкое различие заключается в рамки.В то время как varРезультаты в переменной с окружающим функции в качестве сферы, сфера переменная, объявленная с помощью letтолько блок это в .

if(true) {
   let x = 1;
}
console.log(x); // undefined

Это может сделать для более чистого кода, в результате чего меньше переменных висит вокруг.Возьмите эту классическую итерации массив:

for(let i = 0, l = list.length; i < l; i++) {
   // do something with list[i]
}

console.log(i); // undefined

Часто можно было бы использовать, например, jпеременная для следующей итерации в том же объеме.Но с let, Вы могли бы смело заявлять iснова, так как это определяется и доступны только в пределах собственной сферы блок .

const

Существует еще один способ объявить переменные.С const, Вы можете объявить неизменяемые переменные.Это означает, что вы не можете изменить его значение, когда он будет установлен.Кроме того, вы должны назначить переменную непосредственно.Если вы попытаетесь изменить значение переменной или, если вы не сразу задать значение, то вы получите сообщение об ошибке:

const MY_CONSTANT = 1;
MY_CONSTANT = 2 // Error
const SOME_CONST; // Error

Стрелка Functions

Arrow функции отличным дополнением к языку JavaScript.Они делают для короткой и лаконичной кода.Мы представляем стрелками функции в начале этой статьи, так что мы можем воспользоваться ими в других примерах позже.На следующий фрагмент кода показывает функцию стрелкой, с той же функции, написанной в знакомом стиле ES5:

let books = [{title: 'X', price: 10}, {title: 'Y', price: 15}];

let titles = books.map( item => item.title );

// ES5 equivalent:
var titles = books.map(function(item) {
   return item.title;
});

Запустить code¹

Если мы посмотрим на синтаксисе стрелками функций, нет functionпо ключевым словам.Остается ноль или больше аргументов, тем “жир” стрелками (=>) и выражение функции.Оператор returnЗаявление неявно добавляется .

С нуля или более чем одним аргументом, вы должны предоставить скобки:

// No arguments
books.map( () => 1 ); // [1, 1]

// Multiple arguments
[1,2].map( (n, index) => n * index ); // [0, 2]

Поставьте функцииВыражение в блоке ({ ... }), если вам нужно больше логики или больше пустого пространства:

let result = [1, 2, 3, 4, 5].map( n => {
   n = n % 3;
   return n;
});

Запустить code²

Не только стрелками функции означает меньше символов типа, но они также ведут себя по разному от обычных функций.Выражение функции стрелка наследует thisи argumentsот окружающего контекста.Это означает, что вы можете избавиться от уродливых отчетности как var that = thisИ вам не нужно будет связать функций в правильном контексте.Вот пример (примечание this.title 60 против ~ | в версии ES5):

let book = {
   title: 'X',
   sellers: ['A', 'B'],
   printSellers() {
      this.sellers.forEach(seller => console.log(seller + ' sells ' + this.title));
   }
}

// ES5 equivalent:
var book = {
   title: 'X',
   sellers: ['A', 'B'],
   printSellers: function() {
      var that = this;
      this.sellers.forEach(function(seller) {
         console.log(seller + ' sells ' + that.title)
      })
   }
}

Запустить code³

Strings

Methods

Пару удобных методов, которые были добавлены к Stringопытный образец.Большинство из них в основном устранить некоторые обходные пути с indexOf()способ добиться того же:

'my string'.startsWith('my'); //true
'my string'.endsWith('my'); // false
'my string'.includes('str'); // true

Простой, но эффективный.Другой удобный метод был добавлен, чтобы создать повторяющуюся последовательность:

'my '.repeat(3); // 'my my my '

Шаблон Literal

Шаблон литералы обеспечивают чистый способ создать строк и выполнение интерполяции строк.Вы, возможно, уже знакомы с синтаксисом;он основан на знак доллара и фигурные скобки ${..},Вот быстрый демонстрационный:

let name = 'John',
   apples = 5,
   pears = 7,
   bananas = function() { return 3; }

console.log(`This is ${name}.`);

console.log(`He carries ${apples} apples, ${pears} pears, and ${bananas()} bananas.`);

// ES5 equivalent:
console.log('He carries ' + apples + ' apples, ' + pears + ' pears, and ' + bananas() +' bananas.');

Запустить code⁴

В данной формы, по сравнению с ES5, они просто удобство для конкатенации.Однако шаблон литералов можно также использовать для строк многострочного.Имейте в виду, что пробел является частью строки:

let x = `1...
2...
3 lines long!`; // Yay

// ES5 equivalents:
var x = "1...\n" + 
"2...\n" +
"3 lines long!";

var x = "1...\n2...\n3 lines long!";

Запустить code⁵

Arrays

Оператор ArrayТеперь объект имеет некоторые новые статические методы класса, а также новые методы на ArrayПрототип .

Во-первых, Array.fromсоздает Arrayслучаи из массива, как и Iterable объектов.Примеры массивов как объектов включают в себя:

argumentsв функции;
а nodeListвозвращается document.getElementsByTagName();
новый Mapи Setструктуры данных .

let itemElements = document.querySelectorAll('.items');
let items = Array.from(itemElements);
items.forEach(function(element) {
    console.log(element.nodeType)
});

// A workaround often used in ES5:
let items = Array.prototype.slice.call(itemElements);

Запустить code⁶

В приведенном выше примере, вы можете увидеть, что itemsМассив имеет forEachМетод, который не доступен в itemElementsКоллекция .

Интересной особенностью Array.fromявляется вторым по желанию mapFunctionАргумент.Это позволяет создать новый распределенный массив в одном вызове:

let navElements = document.querySelectorAll('nav li');
let navTitles = Array.from(navElements, el => el.textContent);

Запустить code⁷

Затем, у нас есть Array.of, Который ведет себя очень как ArrayКонструктор.Он закрепляет особый случай, когда передав ему в качестве аргумента один номер.Это приводит к Array.ofявляется предпочтительным, чтобы new Array(),Тем не менее, в большинстве случаев, вы хотите, чтобы использовать массив литералов .

let x = new Array(3); // [undefined, undefined, undefined]
let y = Array.of(8); // [8]
let z = [1, 2, 3]; // Array literal

Последнее, но не менее важно, несколько методов, которые были добавлены к Arrayопытный образец.Я думаю, что findметоды будут очень рады наиболее JavaScript разработчики .

findвозвращает первый элемент, для которого функция обратного вызова возвращает true.
findIndexвозвращает индекс первого элемента, для которого вызова не возвратит true.
fill“Переписывает” элементы массива с данного аргумента .

[5, 1, 10, 8].find(n => n === 10) // 10

[5, 1, 10, 8].findIndex(n => n === 10) // 2

[0, 0, 0].fill(7) // [7, 7, 7]
[0, 0, 0, 0, 0].fill(7, 1, 3) // [0, 7, 7, 7, 0]

Math

Пара новых методов, которые были добавлены к Mathобъект .

Math.signвозвращает знак числа в 1-1или 0.
Math.truncвозвращает переданный число без дробной части .
Math.cbrtвозвращает кубический корень из числа .

Math.sign(5); // 1
Math.sign(-9); // -1

Math.trunc(5.9); // 5
Math.trunc(5.123); // 5

Math.cbrt(64); // 4

Если вы хотите узнать больше оновые возможности номер и математику в ES6⁸, Аксель Rauschmayer имеет вы охвачены .

Распространение Operator

Оператор распространение (...) является очень удобный синтаксис для расширения элементы массива в определенных местах, например в качестве аргументов в вызовах функций.Показаны несколько примеров, вероятно, лучший способ продемонстрировать, насколько полезными они являются .

Во-первых, давайте посмотрим, как расширить элементы массива в пределах другого массива:

let values = [1, 2, 4];
let some = [...values, 8]; // [1, 2, 4, 8]
let more = [...values, 8, ...values]; // [1, 2, 4, 8, 1, 2, 4]

// ES5 equivalent:
let values = [1, 2, 4];
// Iterate, push, sweat, repeat...
// Iterate, push, sweat, repeat...

Запустить code⁹

Синтаксис распространение также мощным при вызове функций с аргументами:

let values = [1, 2, 4];

doSomething(...values);

function doSomething(x, y, z) {
   // x = 1, y = 2, z = 4
}

// ES5 equivalent:
doSomething.apply(null, values);

Запустить code¹⁰

Как вы можете видеть, это спасает нас от часто используется fn.apply()обходной путь.Синтаксис является очень гибкой, так как оператор распространение может быть использован в любом месте в списке аргументов.Это означает, что следующий вызов дает тот же результат:

let values = [2, 4];
doSomething(1, ...values);

Запустить code¹¹

Мы применяя оператор распространение в массивы и аргументы.На самом деле, он может быть применен ко всем Iterable объектов, таких как NodeList:

let form = document.querySelector('#my-form'),
   inputs = form.querySelectorAll('input'),
   selects = form.querySelectorAll('select');

let allTheThings = [form, ...inputs, ...selects];

Запустить code¹²

Теперь, allTheThingsплоский массив, содержащий <form>узла и его <input>и <select>Ребенок узлы .

Destructuring

DESTRUCTURING обеспечивает удобный способ для извлечения данных из объектов и массивов.Для начала, хороший пример может быть дано с помощью массива:

let [x, y] = [1, 2]; // x = 1, y = 2

// ES5 equivalent:
var arr = [1, 2];
var x = arr[0];
var y = arr[1];

С этого синтаксиса, несколько переменных может быть присвоено значение на одном дыхании.Приятный побочный эффект в том, что вы можете легко поменять значения переменных:

let x = 1,
   y = 2;

[x, y] = [y, x]; // x = 2, y = 1

Запустить code¹³

DESTRUCTURING также работает с объектами.Убедитесь, что имеют соответствующие клавиши:

let obj = {x: 1, y: 2};
let {x, y} = obj; // x = 1, y = 2

Запустить code¹⁴

Вы также можете использовать этот механизм, чтобы изменить имена переменных:

let obj = {x: 1, y: 2};
let {x: a, y: b} = obj; // a = 1, b = 2

Еще один интересный образец для имитации нескольких возвращаемых значений:

function doSomething() {
   return [1, 2]
}

let [x, y] = doSomething(); // x = 1, y = 2

Запустить code¹⁵

DESTRUCTURING может быть использован, чтобы назначить значения по умолчанию для объектов аргументов.С литерал объекта, вы можете имитировать именованные параметры .

function doSomething({y = 1, z = 0}) {
   console.log(y, z);
}
doSomething({y: 2});

Parameters

По умолчанию Values

В ES6, определяя значения по умолчанию для параметров функции можно.Синтаксис выглядит следующим образом:

function doSomething(x, y = 2) {
   return x * y;
}

doSomething(5); // 10
doSomething(5, undefined); // 10
doSomething(5, 3); // 15

Запустить code¹⁶

Выглядит довольно чистый, не так ли?Я уверен, что вы нужны, чтобы заполнить некоторые аргументы в ES5 раньше:

function doSomething(x, y) {
   y = y === undefined ? 2 : y;
   return x * y;
}

Либо undefinedили аргумент не срабатывает значение по умолчанию для этого аргумента .

Отдых Parameters

Мы искали в оператор распространения.Отдых параметры очень похожи.Он также использует ...синтаксис и позволяет хранить задней аргументы в массив:

function doSomething(x, ...remaining) {
   return x * remaining.length;
}

doSomething(5, 0, 0, 0); // 15

Запустить code¹⁷

Modules

Модули, конечно, долгожданное дополнение к языку JavaScript.Я думаю, что только в этом главная особенность стоит копаться в ES6 .

Любой серьезныйПроект сегодня JavaScript использует какой-то модуль системы —может быть, что-то вроде “откровенной модуля рисунком” или более обширных форматов AMD или CommonJS.Тем не менее, браузеры не располагают какой-либо системы модуля.Вы всегда должны шаг сборки или загрузчик для ваших модулей AMD или CommonJS.Инструменты для обработки этого включают RequireJS, Browserify и Webpack .

Спецификация ES6 включает в себя как новый синтаксис и механизм загрузчика модулей.Если вы хотите использовать модули и написать в будущем, это синтаксис вы должны использовать.Современные инструменты для сборки поддерживают этот формат, возможно, через плагин, поэтому вы должны быть хорошо идти.(Не беспокойтесь — мы не будем обсуждать это далее в разделе “Transpilation” позже.)

Теперь, на синтаксисе ES6 модуля.Модули предназначены вокруг exportи importключевые слова.Давайте рассмотрим пример с двумя модулями сразу:

// lib/math.js

export function sum(x, y) {
   return x + y;
}
export var pi = 3.141593;

// app.js

import { sum, pi } from "lib/math";
console.log('2π = ' + sum(pi, pi));

Как вы можете видеть, может быть несколько exportзаявления.Каждый должен явно указать тип экспортируемого значения (function 38 ~ и |, в данном примере) .

Оператор importЗаявление в этом примере используется синтаксис (подобный деструктуризации) явно определить, что импортируется.Чтобы импортировать модуль в целом, то *подстановки можно использовать в сочетании с asКлючевое слово дать модуль локальное имя:

// app.js

import * as math from "lib/math";
console.log('2π = ' + math.sum(math.pi, math.pi));

Модульная система имеет defaultэкспорт.Это также может быть функцией.Чтобы импортировать это значение по умолчанию в модуле, вы просто должны предоставить имя локального (то есть не DESTRUCTURING):

// lib/my-fn.js

export default function() {
   console.log('echo echo');
}

// app.js

import doSomething from 'lib/my-fn';
doSomething();

Пожалуйста, обратите внимание, что importзаявления являются синхронными, но код модуля не выполняется, пока все зависимости не загружается .

Classes

Занятия хорошо обсуждается особенность ES6.Некоторые считают, что о …

Если вы хотите прочитать полностью статью, посетите сайт наших спонсоров

Главная → Программирование → 28.10.2015 by coding.smashingmagazine.com