от rajaraodv

EcmaScript 2015 (он же ES6) существует уже несколько лет, и разные новые функции можно использовать в разумные способы. Я хотел перечислить и обсудить некоторые из них, поскольку, думаю, они будут полезны для вас.

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

1. Соблюдение необходимых параметров

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

В следующем примере мы устанавливаем required() функционирует как значение по умолчанию для обоих a и b параметры Это означает, что если или a или b не пройдено, в required() вызывается функция, и вы получите уведомление об ошибке.

const required = () => {throw new Error('Missing parameter')};

//The below function will trow an error if either "a" or "b" is missing.const add = (a = required(), b = required()) => a + b;

add(1, 2) //3add(1) // Error: Missing parameter.

2. Мощное «снижение»

Метод уменьшения Array чрезвычайно универсален. Обычно он используется для превращения массива элементов в одно значение. Но вы можете сделать с ним гораздо больше.

?Совет: большинство этих трюков полагаются на то, что начальное значение является массивом или объектом, а не простым значением, таким как строка или переменная.

2.1 Использование уменьшить для одновременного отображения и фильтрации

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

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

const numbers = [10, 20, 30, 40];

const doubledOver50 = numbers.reduce((finalList, num) => {    num = num * 2; //double each number (i.e. map)    //filter number > 50  if (num > 50) {    finalList.push(num);  }  return finalList;}, []);

doubledOver50; // [60, 80]

2.2 Использование «уменьшить» вместо «карта» или «фильтр»

Если вы внимательно посмотрите на приведенный выше пример (с 2.1), вы узнаете, что уменьшить можно использовать для фильтрации или отображения элементов! ?

2.3 Использование функции уменьшения для сбалансирования круглые скобки

Вот еще один пример того, насколько универсальна функция уменьшения. Дана строка со скобками, мы хотим знать, сбалансированы ли они, то есть есть равное количество «(» и «)», и или «(» стоит перед «)».

Мы можем легко сделать это в уменьшении, как показано ниже. Мы просто сохраняем переменную counter с начальным значением 0. Мы подсчитываем, если попадем ( и отсчитывать, если мы попадем ) . Если они сбалансированы, то должны закончить 0.

//Returns 0 if balanced.const isParensBalanced = (str) => {  return str.split('').reduce((counter, char) => {    if(counter < 0) { //matched ")" before "("      return counter;    } else if(char === '(') {      return ++counter;    } else if(char === ')') {      return --counter;    }  else { //matched some other char      return counter;    }      }, 0); //<-- starting value of the counter}

isParensBalanced('(())') // 0 <-- balancedisParensBalanced('(asdfds)') //0 <-- balanced

isParensBalanced('(()') // 1 <-- not balancedisParensBalanced(')(') // -1 <-- not balanced

2.4 Подсчет повторяющихся элементов массива (преобразование массива → объект)

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

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

var cars = ['BMW','Benz', 'Benz', 'Tesla', 'BMW', 'Toyota'];

var carsObj = cars.reduce(function (obj, name) {    obj[name] = obj[name] ? ++obj[name] : 1;  return obj;}, {});

carsObj; // => { BMW: 2, Benz: 2, Tesla: 1, Toyota: 1 }

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

3. Деструктуризация объекта

3.1 Удаление нежелательных свойств

Бывают случаи, когда нужно удалить нежелательные свойства — возможно потому, что они содержат конфиденциальную информацию или просто слишком большие. Вместо итерации по всему объекту, чтобы удалить их, мы можем просто извлечь такие свойства к переменным и сохранить полезные в *отдохнуть* параметр.

В следующем примере мы хотим удалить _internal и tooBig свойства. Мы можем назначить их_internal и tooBig переменные и сохраните остальные в a *rest* параметр cleanObject которые мы можем использовать позже.

let {_internal, tooBig, ...cleanObject} = {el1: '1', _internal:"secret", tooBig:{}, el2: '2', el3: '3'};

console.log(cleanObject); // {el1: '1', el2: '2', el3: '3'}

3.2 Деструктурирование вложенных объектов в параметрах функции

В следующем примере engine свойство является вложенным объектом car объект. Если нас интересует, скажем, vin собственность engineмы можем легко деструктурировать его, как показано ниже.

var car = {  model: 'bmw 2018',  engine: {    v6: true,    turbo: true,    vin: 12345  }}

const modelAndVIN = ({model, engine: {vin}}) => {  console.log(`model: ${model} vin: ${vin}`);}

modelAndVIN(car); // => model: bmw 2018  vin: 12345

3.3 Объединение объектов

ES6 поставляется с оператором расширения (обозначен тремя точками). Обычно он используется для деконструирования значений массива, но также можно использовать его для объектов.

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

В нижеприведенном примере ключи свойств b and c от object2переопределять те из object1

let object1 = { a:1, b:2,c:3 }let object2 = { b:30, c:40, d:50}let merged = {…object1, …object2} //spread and re-add into mergedconsole.log(merged) // {a:1, b:30, c:40, d:50}

4. Наборы

4.1 Дедупинг массивов с помощью наборов

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

let arr = [1, 1, 2, 2, 3, 3];let deduped = [...new Set(arr)] // [1, 2, 3]

4.2 Использование методов Array

Превращение множеств в массив так же просто, как использование оператора расширения (… ). Вы также можете легко использовать все методы Array на Sets!

Скажем, у нас есть набор, как показано ниже, и мы хотим filter он должен содержать только элементы более 3.

let mySet = new Set([1,2, 3, 4, 5]);

var filtered = [...mySet].filter((x) => x > 3) // [4, 5]

5. Деструктуризация массива

Во много раз ваша функция может возвращать несколько значений в массиве. Мы можем легко увлечь их с помощью деструктуризации массива.

5.1 Обменять значение

let param1 = 1;let param2 = 2;

//swap and assign param1 & param2 each others values[param1, param2] = [param2, param1];

console.log(param1) // 2console.log(param2) // 1

5.2. Получение и назначение нескольких значений от функции

В примере ниже мы получаем публикацию по адресу /post и соответствующие комментарии на /comments . Поскольку мы используем async / await , функция возвращает результат в виде массива Используя деструктуризацию массива, мы можем просто назначить результат непосредственно в соответствующие переменные.

async function getFullPost(){  return await Promise.all([    fetch('/post'),    fetch('/comments')  ]);}

const [post, comments] = getFullPost();

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

Другие мои сообщения

https://medium.com/@rajaraodv/latest

ECMAScript 2015+

1. Примеры всего *НОВОГО* в ECMAScript 2016, 2017 и 2018
2. Просмотрите эти полезные советы и рекомендации по ECMAScript 2015 (ES6).
3. 5 «плохих» частей JavaScript, исправленных в ES6
4. Является ли «Класс» в ES6 новой «плохой» частью?

Улучшение терминала

1. Как улучшить терминал — Пошаговое руководство с изображениями
2. Совершенствуйте свой терминал «ZSH» в семи шагах — наглядное руководство

WWW

1. Увлекательная и беспорядочная история Интернета и JavaScript

Виртуальный DOM

1. Внутренняя работа виртуального DOM

Производительность React

1. Два быстрых способа уменьшить размер программы React в производстве
2. Использование Preact вместо React

Функциональное программирование

1. JavaScript завершен по Turing — объяснение
2. Функциональное программирование в JS – с практическими примерами (часть 1)
3. Функциональное программирование в JS – с практическими примерами (часть 2)
4. Почему Redux нуждается в том, чтобы редукторы были «чистыми функциями»

WebPack

1. Webpack — непонятные части
2. Webpack и горячая замена модуля [HMR] (под капотом)
3. Webpack HMR и React-Hot-Loader – отсутствует руководство

Draft.js

1. Почему Draft.js и почему вы должны внести вклад
2. Как Draft.js представляет форматированные текстовые данные

React и Redux:

1. Пошаговое руководство по созданию программ React Redux
2. Руководство по созданию программы React Redux CRUD (3-страничное приложение)
3. Использование промежуточного программного обеспечения в React Redux
4. Добавление надежной формы для React Redux
5. Защита приложений React Redux с помощью токенов JWT
6. Обработка транзакционных электронных писем в программах React Redux
7. Анатомия программы React Redux
8. Почему Redux нуждается в том, чтобы редукторы были «чистыми функциями»
9. Два быстрых способа уменьшить размер программы React в производстве