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

5 менее известных функций JavaScript, о которых вы должны знать о

JavaScript – это постоянно развивающийся язык программирования, с ежегодным версиями Ecmascript, дебютируя новые … Помечено JavaScript, Codequality, CodeNewie, WebDev.

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

1. JavaScript String Padding.

Первая функция JavaScript, о которой я хотел поговорить о результате инцидента, который произошел еще в 2016 году в экосистеме JavaScript.

Инцидент включал пакет JavaScript под названием Left-Pad, который был опубликован в NPM. Целью упаковки было накладки строки с дополнительными персонажами, а также простые в природе, упаковка была зависимостью тысяч проектов JavaScript по всему миру.

Инцидент произошел, когда он был удален из NPM, и, поскольку он был зависел от многих пакетов, это вызвало программное обеспечение для разбития эффекта домино в мире.

В то время как NPM исправил проблему, это стало очевидно для народа на TC39, что многие люди предпочитают использовать библиотеку на струны накладки, чем писать код, таким образом, как часть ES2017, они представили .padstart () и .padend .padtart () и .padend ().

Чтобы добавить 0 в начало строки, мы бы использовали .padstart (), передавая целевую длину для строки и строки, чтобы прокладывать текущую строку. В приведенном ниже примере я прокладываю струну «1» так, что она имеет длину «4».

let str = "1";
str = str.padStart(4,0);
console.log(str) // output is 0001

В качестве альтернативы, мы могли бы захотеть заполнить конец нашей строки и для этого мы можем использовать .PADEND () .

Похоже на приведенный выше пример, мы передаем как целевую длину для строки, так и строки для прокладки текущей строки с помощью .PADEND () . В приведенном ниже примере я прокладываю струну «1» так, что она имеет длину «4». На этот раз, однако это добавит прокладку до конца.

let str = "1";
str = str.padEnd(4,0);
console.log(str) // result is 1000

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

Оператор по распространению не является новейшим и искренним из функций JavaScript, возвращающихся в 2015 году в рамках спецификации ES2015, однако некоторые из его случаев использования часто упускают из виду.

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

const arr1 = ["Apple", "Orange", "Pear"]
const arr2 = [...arr1, "Banana"]
console.log(arr2) // ["Apple", "Orange", "Pear", "Banana"]

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

const personA = {
  name: "Jonathan",
  age: 21,
}
const personB = {
  ...personA,
  name: 'Charlie'
}
console.log(personB) // {name: "Charlie", age: 21}

3. Параметр отдыха

Следуя от оператора SPRECT, у нас есть параметр покоя, который видел его наоборот. Остальный синтаксис собирает несколько элементов и «конденсирует» их в один элемент.

Хороший вариант использования для параметра отдыха – для группировки оставшихся элементов массива, когда он разрушается. В приведенном ниже примере у нас есть некоторые фрукты, которые мы разрушаем, так что Apple самостоятельно сам, причем остальные фрукты остаются в массиве фруктов.

const [apple, ...fruits] = ["apple", "orange", "pear"];
console.log(apple); // output is "apple"
console.log(fruits); // output is ["orange", "pear"]

4. Array.Prototype.includes.

Следующая функция, о которой я хочу поговорить, это Array.prototype.includes, эта функция позволяет найти, содержит ли массив элемент.

Перед array.prototype.includes, это было бы достигнуто путем зацикливания через массив и установить переменную к true, если элемент найден, см. Ниже:

const fruits = ["Dragonfruit", "Kiwi", "Mango", "Pear", "Starfruit"];
let found = false;
fruits.forEach(function(fruit) {
  if (fruit === 'Kiwi') {
    found = true;
  }
});
console.log(found); // Outputs `true`

Теперь, с Array.prototype.includes, мы можем значительно сократить это в следующем.

const fruits = ["Dragonfruit", "Kiwi", "Mango", "Pear", "Starfruit"];
const found = fruits.includes("Kiwi");
console.log(found); // Outputs `true`

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

5. Дополнительное цепочка

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

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

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

const jonathan = {
  name: "Jonathan",
  meta: {
    age: 21
  }
}
const age = jonathan.meta.age;
const gender = jonathan.other.gender; // Will throw error
console.log(age);
console.log(gender);

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

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

const jonathan = {
  name: "Jonathan",
  meta: {
    age: 21
  }
}
const age = jonathan?.meta?.age;
const gender = Jonathan?.other?.gender;
console.log(age); // outputs 21
console.log(gender); // outputs "undefined"

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

Упаковка

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

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

Оригинал: “https://dev.to/jonthanfielding/5-less-known-javascript-features-that-you-should-know-about-2e4p”