Советы и подсказки ES6, чтобы сделать ваш код чище, короче и легче для чтения!

1666299622 sovety i podskazki es6 chtoby sdelat vash kod chishhe koroche

Сэм Уильямс

AEOLhZTlWk1OgK8hBoQETJ8X-P0dpJSJnkpm

Литералы шаблона

Литералы шаблонов делают работу со строчками гораздо легче, чем раньше. Они начинаются с обратной галочки и могут иметь переменные, вставленные с помощью ${variable}. Сравните эти две строки кода:

var fName="Peter", sName="Smith", age = 43, job= 'photographer';var a="Hi, I\"m ' + fName + ' ' + sName + ', I\'m ' + age + ' and work as a ' + job + '.';var b = `Hi, I'm ${ fName } ${ sName }, I'm ${ age } and work as a ${ job }.`;

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

Область синтаксиса блока

JavaScript всегда ограничивался функциями, поэтому стало привычным заворачивать весь файл JavaScript в пустое немедленно вызванное выражение функции (IIFE). Это делается для изоляции всех переменных в файле, чтобы не было конфликтов переменных.

Теперь у нас есть область видимости блока и два новых объявления переменных, которые привязаны к блоку.

Декларация «Пусть».

Это похоже на var но имеет несколько заметных отличий. Поскольку это блочная область, новую переменную с тем же именем можно объявить без влияния на внешние переменные.

var a="car" ;{    let a = 5;    console.log(a) // 5}console.log(a) // car

Поскольку он связан с блочной областью, он решает этот классический вопрос интервью:
«что такое выход, и как вы заставите его работать так, как вы ожидаете?»

for (var i = 1; i < 5; i++){    setTimeout(() => { console.log(i); }, 1000);}

В этом случае он выводит «5 5 5 5 5», потому что переменная i меняется на каждой итерации.

Если вы выключите var для let потом все меняется. Теперь каждый цикл создает новую область блока со значением i, привязанным к этому циклу. Хотя Вы написали:

{let i = 1; setTimeout(() => { console.log(i) }, 1000)} {let i = 2; setTimeout(() => { console.log(i) }, 1000)} {let i = 3; setTimeout(() => { console.log(i) }, 1000)} {let i = 4; setTimeout(() => { console.log(i) }, 1000)} {let i = 5; setTimeout(() => { console.log(i) }, 1000)} 

Еще одно отличие между var и let или это let не поднимается как var есть.

{     console.log(a); // undefined    console.log(b); // ReferenceError    var a="car";    let b = 5;}

Некоторые люди говорят, что вам следует использовать из-за более узкого охвата и более предполагаемого поведения let вместо varза исключением случаев, когда вам особенно нужен подъем или более свободный объем var Декларация.

Конст

Если раньше вы хотели объявить постоянную переменную в JavaScript, было принято называть переменную заглавными буквами. Однако это не защитит переменную — просто даст другим разработчикам знать, что это константа и ее не следует менять.

Теперь мы имеем const Декларация.

{    const c = "tree";    console.log(c);  // tree    c = 46;  // TypeError! }

const не делает переменную неизменной, только блокирует ее назначение. Если у вас есть сложное предназначение (объект или массив), значение все равно можно изменить.

{    const d = [1, 2, 3, 4];    const dave = { name: 'David Jones', age: 32};    d.push(5);     dave.job = "salesman";    console.log(d);  // [1, 2, 3, 4, 5]    console.log(dave);  // { age: 32, job: "salesman", name: 'David Jones'}}

Проблема с функциями определения области блока

Объявление функций теперь связано с областью видимости блока.

{    bar(); // works    function bar() { /* do something */ }}bar();  // doesn't work

Проблема возникает, когда вы объявляете функцию внутри if заявление.

Рассмотрим это:

if ( something) {    function baz() { console.log('I passed') }} else {    function baz() { console.log('I didn\'t pass') } } baz();

До ES6 оба объявления функций были бы подняты, и результат был бы 'I didn\'t pass' не имеет значения что something был.
Теперь мы получаем 'ReferenceError'как baz всегда привязан к области блока.

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

ES6 представляет ... оператор, который называется «оператором распространения». Он имеет два основных применения: расширение массива или объекта в новый массив или объект и объединение нескольких параметров в массив.

Первый вариант использования – это тот, с которым вы, вероятно, чаще всего сталкиваетесь, поэтому мы рассмотрим его сначала.

let a = [3, 4, 5];let b = [1, 2, ...a, 6];console.log(b);  // [1, 2, 3, 4, 5, 6]

Это может быть очень полезным для передачи набора переменных в функцию из массива.

function foo(a, b, c) { console.log(`a=${a}, b=${b}, c=${c}`)} let data = [5, 15, 2];foo( ...data); // a=5, b=15, c=2

Объект можно расширить, введя каждую из пар ключ-значения в новый объект. ( Распространение объектов фактически находится на стадии 4 предложения и будет официально в ES2018. Он поддерживается только Chrome 60 или более поздней версии, Firefox 55 или более поздней версии и Node 6.4.0 или более поздней версии)

let car = { type: 'vehicle ', wheels: 4};let fordGt = { make: 'Ford', ...car, model: 'GT'};console.log(fordGt); // {make: 'Ford', model: 'GT', type: 'vehicle', wheels: 4}

Другой особенностью оператора распространения является то, что он создает новый массив или объект. В примере ниже создается новый массив для bно c просто ссылается на тот же массив.

let a = [1, 2, 3];let b = [ ...a ];let c = a;b.push(4);console.log(a);  // [1, 2, 3]console.log(b);  // [1, 2, 3, 4] referencing different arraysc.push(5);console.log(a);  // [1, 2, 3, 5] console.log(c);  // [1, 2, 3, 5] referencing the same array

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

function foo(...args) {    console.log(args); } foo( 'car', 54, 'tree');  //  [ 'car', 54, 'tree' ] 

Параметры по умолчанию

Теперь функции можно определять по параметрам по умолчанию. Отсутствующие или неопределенные значения инициализируются по умолчанию. Просто будьте осторожны, поскольку значения null и false приводят к 0.

function foo( a = 5, b = 10) {    console.log( a + b);} foo();  // 15foo( 7, 12 );  // 19foo( undefined, 8 ); // 13foo( 8 ); // 18foo( null ); // 10 as null is coerced to 0

Значения по умолчанию могут быть не просто значениями, они могут быть выражениями или функциями.

function foo( a ) { return a * 4; }function bar( x = 2, y = x + 4, z = foo(x)) {    console.log([ x, y, z ]);}bar();  // [ 2, 6, 8 ]bar( 1, 2, 3 ); //[ 1, 2, 3 ] bar( 10, undefined, 3 );  // [ 10, 14, 3 ]

Деструктуризация

Деструктуризация – это процесс разборки массива или объекта слева от знака равенства. Массив или объект может происходить от переменной, функции или уравнения.

let [ a, b, c ] = [ 6, 2, 9];console.log(`a=${a}, b=${b}, c=${c}`); //a=6, b=2, c=9
function foo() { return ['car', 'dog', 6 ]; } let [ x, y, z ] = foo();console.log(`x=${x}, y=${y}, z=${z}`);  // x=car, y=dog, z=6

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

function bar() { return {a: 1, b: 2, c: 3}; }let { a, c } = bar();console.log(a); // 1console.log(c); // 3console.log(b); // undefined

Иногда нужно извлечь значение, но назначить их новой переменной. Это делается с помощью пары «ключ: переменная» слева от знака равенства.

function baz() {     return {        x: 'car',        y: 'London',        z: { name: 'John', age: 21}    }; }let { x: vehicle, y: city, z: { name: driver } } = baz();
console.log(    `I'm going to ${city} with ${driver} in their ${vehicle}.`); // I'm going to London with John in their car. 

Еще одна вещь, которую разрешает деструктуризация объектов, это присвоение значения нескольким переменным.

let { x: first, x: second } = { x: 4 };console.log( first, second ); // 4, 4

Объектные литералы и краткие параметры

Когда вы создаете литерал объекта из переменных, ES6 позволяет опускать ключ, если он совпадает с названием переменной.

let a = 4, b = 7;let c = { a: a, b: b };let concise = { a, b };console.log(c, concise) // {a: 4, b: 7}, {a: 4, b: 7}

Это также можно использовать в сочетании с деструктуризацией, чтобы сделать ваш код гораздо проще и чище.

function foo() {    return {        name: 'Anna',         age: 56,       job: { company: 'Tesco', title: 'Manager' }    };} 
// pre ES6let a = foo(), name = a.name, age = a.age, company = a.job.company;
// ES6 destructuring and concise parameters let { name, age, job: {company}} = foo();

Его можно использовать для деструктурирования объектов, переданных в функции. Методы 1 и 2 – это то, как вы это делали в ES6, а метод 3 использует деструктуризацию и сжатые параметры.

let person = {    name: 'Anna',     age: 56,    job: { company: 'Tesco', title: 'Manager' }};
// method 1function old1( person) {    var yearOfBirth = 2018 - person.age;    console.log( `${ person.name } works at ${ person.job.company } and was born in ${ yearOfBirth }.`);}
// method 2function old1( person) {    var age = person.age,        yearOfBirth = 2018 - age,         name = person.name,        company = person.job.company;    console.log( `${ name } works at ${ company } and was born in ${ yearOfBirth }.`);} 
// method 3function es6({ age, name, job: {company}}) {    var yearOfBirth = 2018 - age;    console.log( `${ name } works at ${ company } and was born in ${ yearOfBirth }.`);} 

Используя ES6, мы можем извлечь age, name и company без объявления дополнительной переменной.

Динамические имена свойств

ES6 позволяет создавать или добавлять свойства с динамически назначенными ключами.

let  city= 'sheffield_';let a = {    [ city + 'population' ]: 350000};a[ city + 'county' ] = 'South Yorkshire';console.log(a); // {sheffield_population: 350000, sheffield_county: 'South Yorkshire' }

Функции стрелок

Функции стрелок имеют два основных аспекта: их структуру и их this привязка.

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

var foo = function( a, b ) {    return a * b;} 
let bar = ( a, b ) => a * b;

Если функция требует больше, чем просто вычисления, можно использовать фигурные скобки, и функция возвращает все возвращаемое из области блока.

let baz = ( c, d ) => {    let length = c.length + d.toString().length;    let e = c.join(', ');    return `${e} and there is a total length of  ${length}`;}

Одним из самых полезных мест для функций со стрелками являются следующие функции массива .map, .forEach или .sort.

let arr = [ 5, 6, 7, 8, 'a' ];let b = arr.map( item => item + 3 );console.log(b); // [ 8, 9, 10, 11, 'a3' ]

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

var clickController = {    doSomething: function (..) {        var self = this;        btn.addEventListener(            'click',             function() { self.doSomething(..) },             false       );   } };

Это нужно было сделать потому, что this привязка динамическая. Это означает, что this внутри слушателя событий и this внутри doSomething не относятся к одному и тому же.

Внутренние функции стрелок this привязка лексическая, а не динамическая. Это была основная конструктивная изюминка функции стрелки.

Пока лексический this связывание может быть отличным, иногда это не то, что нужно.

let a = {    oneThing: ( a ) => {         let b = a * 2;         this.otherThing(b);    },     otherThing: ( b ) => {....} };
a.oneThing(6);

Когда мы используем a.oneThing(6), this.otherThing( b ) ссылка не удается как this не указывает на a объекта, но к окружающему пространству. Если вы переписываете устаревший код с помощью синтаксиса ES6, обратите на это внимание.

for … of Петли

ES6 добавляет способ перебора каждого значения в массиве. Это отличается от существующего for ... in цикл, перебирающий ключ/индекс.

let a = ['a', 'b', 'c', 'd' ];// ES6 for ( var val of a ) {    console.log( val );} // "a" "b" "c" "d"// pre-ES6 for ( var idx in a ) {    console.log( idx );}  // 0 1 2 3

Использование нового for … of цикл сохраняет добавление a let val = a[idx] внутри каждой петли.

Массивы, строчки, генераторы и коллекции можно итерировать в стандартном JavaScript. Обычные объекты обычно нельзя повторять, если вы не определили для них итератор.

Числовые литералы

Код ES5 хорошо обрабатывал десятичные и шестнадцатеричные форматы чисел, но восьмеричная форма не была определена. Фактически это было активно запрещено в строгом режиме.

ES6 добавил новый формат, добавив o после начального 0 чтобы объявить число восьмеричным. Они также добавили двоичный формат.

Number( 29 )  // 29Number( 035 ) // 35 in old octal form. Number( 0o35 ) // 29 in new octal form Number( 0x1d ) // 29 in hexadecimal Number( 0b11101 ) // 29 in binary form

И гораздо больше…

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

Если вы не можете ждать так долго, прочтите книгу Кайла Симпсона «You Don’t Know JS» на ES6 или посмотрите этот замечательный маленький веб-сайт!

Хотите стать разработчиком и получить свою первую работу в программном обеспечении? Скачайте 7 шагов, чтобы стать разработчиком и получить первую работу.

ДАЛЬШЕ -> Как найти работу своей мечты. Освойте процесс собеседования

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

YteINwvwgVVGxTMs5umIsksyix1ILkn-W0dD
w12a6mIA8-w7GgPNcl2wD7rHCVlNKVYHpuEB
bs1er3gxQhRoQ1WIfxT6fZLLBUFNIdAR9ER5

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *