Проверьте эти полезные советы и трюки Ecmascript 2015 (ES6)

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

Раджараодомв

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

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

1. Обеспечение необходимых параметров

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

В следующем примере мы устанавливаем Требуется () Функция как значение по умолчанию для обоих А и B Параметры. Это означает, что если либо А или B не прошло, Требуется () Функция называется, и вы получите ошибку.

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’s R Едус Метод чрезвычайно универсален. Обычно используется для преобразования массива элементов в одно значение. Но вы можете сделать намного больше с этим.

2.1 Использование уменьшения, чтобы сделать как карту, так и фильтр * одновременно *

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

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

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 Использование уменьшения к складным скобкам

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

Мы можем легко сделать это в уменьшении, как показано ниже. Мы просто держим переменную счетчик с начальным значением 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 }

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

3. Разрушение объекта

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

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

В приведенном ниже примере мы хотим удалить _Internal и Toobig характеристики. Мы можем назначить их на _Internal и Toobig Переменные и хранить оставшиеся в * 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 Разрушение вложенных объектов в функциональных параграфах

В приведенном ниже примере двигатель Собственность – это вложенный объект Автомобиль объект. Если нас интересуют, скажем, Вин Собственность двигатель Мы можем легко разрушать его, как показано ниже.

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 и C от объект2 переопределить тех из объект1.

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 Массивы DE-DUPING с использованием наборов

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

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

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

Преобразование наборов на массив так же просто, как и использование оператора SPRECT ( ... ). Вы можете легко использовать все методы массива, а также наборы!

Допустим, у нас есть набор, как показано ниже, и мы хотим Фильтр Это только содержать предметы, превышающие 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 Прием и назначьте несколько значений из функции

В приведении ниже мы выбираем пост на /пост и связанные с ними комментарии на /Комментарии Отказ Так как мы используем Async/await Функция возвращает результат в массиве. Используя деструктурирующую массив, мы можем просто назначить результат непосредственно в соответствующие переменные.

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

const [post, comments] = getFullPost();

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

Мои другие посты

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

Ecmascript 2015+

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

Www.

Увлекательная и грязная история Интернета и JavaScript