Рубрики
Без рубрики

Советы ES6 и трюки, чтобы сделать ваш кодовый очиститель, короче и проще читать!

Sam Williams ES6 советы и трюки, чтобы сделать ваш кодовый очиститель, короче и проще читать! Шаблон буквенные таблицы литералы делают работу с строками намного проще, чем раньше. Они начинаются с задней галочки, и могут иметь переменные, вставленные с помощью $ {переменная}. Сравните эти две строки кода: var fname

Автор оригинала: FreeCodeCamp Community Member.

Сэм Уильямс

Шаблонные литералы

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

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 }.`;

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

Синтаксисный блок Scoping.

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

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

«Пусть» объявление

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

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», потому что переменная Я изменения на каждой итерации.

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

{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 и Пусть Это Пусть не поднимается как var является.

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

Из-за его более жесткого охвата и более предсказуемого поведения некоторые люди сказали, что вы должны использовать Пусть вместо 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'}}

Проблема с блочными функциями Scoping

Декларации функций теперь указаны, чтобы быть обязаны заблокировать навес.

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

Проблема приходит, когда вы объявляете функцию внутри Если утверждение.

Учти это:

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

До ES6 обе декларации функций были бы подняты, и результат был бы «Я не прошел» Неважно, что что-то было. Теперь мы получаем «Освещающий сертификат» , как Баз всегда связан с помощью блока.

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

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 или более поздней версии, а узел 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' ] 

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

Функции теперь могут быть определены с параметрами по умолчанию. Отсутствующие или неопределенные значения инициализируются с значением по умолчанию. Просто будьте осторожны – потому что нулевые и ложные значения принуждены к 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, мы можем извлечь возраст , Имя и Компания без дополнительной переменной декларации.

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

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

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

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

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

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

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' ]

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

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

Это должно было быть сделано, потому что это Привязка динамическая. Это означает, что это Внутри слушателя события и это внутри Досметочное не обращайтесь к тому же.

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

Хотя Лексическое это Связывание может быть здорово, иногда это не то, что хочет.

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

Когда мы используем A. Monthing (6) , Это все (б) Ссылка сбой как это не указывает на А Объект, но к окрестностям. Если вы переписываете Legacy Code, используя синтаксис ES6, это что-то, чтобы осмотреть.

для … петлей

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

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

Используя новый для ... из Цикл экономит добавление Пусть [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.

Если вы не можете дождаться этого долго, прочитайте Кайл Симпсона Вы не знаете книгу JS на ES6 или проверить это Блестящий маленький сайт !

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

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