предисловие
Эта статья переведена сCheck out these useful ECMAScript 2015 (ES6) tips and tricks
Эта статья была впервые опубликована в моем личном блоге:woohoo.Fe record.com/check-vomit-he…. При перепечатке прикрепите исходный адрес, чтобы можно было обновить источник.
EcmaScript 2015 (также известный как ES6) выпускается уже более двух лет, и многие его новые функции можно использовать умело. В этой статье перечислены некоторые советы, которые, я надеюсь, будут вам полезны.
1. Обязательные параметры
ES6 предоставляет концепцию параметров по умолчанию.Если параметр функции не передан или входящее значение не определено, будет применено значение параметра по умолчанию.
Значение по умолчанию может быть выражением, поэтому мы можем установить значение по умолчанию в качестве функции выполнения, и если параметру не будет передано значение, будет выполнена наша функция по умолчанию:
const required = () => {throw new Error('Missing parameter')};
//The below function will throw an error if either "a" or "b" is missing.
const add = (a = required(), b = required()) => a + b;
add(1, 2) //3
add(1) // Error: Missing parameter.
2. Мощное сокращение
сокращение — это универсальный метод массива, пожалуйста, следуйте за мной.
2.1 Используйте уменьшение вместо карты + фильтр
Предположим, у вас есть такое требование: вы хотите вычислить значения в массиве, отфильтровать некоторые значения, а затем вывести новый массив. Очевидно, что для этой цели мы обычно используем комбинацию методов отображения и фильтрации, но это также означает, что вам нужно дважды перебрать массив.
Давайте посмотрим, как мы можем использовать сокращение для повторения массива только один раз, чтобы получить тот же результат. Вот пример, где нам нужно умножить значения в массиве на 2 и вернуть значение больше 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 Используйте сокращение, чтобы определить, выровнены ли круглые скобки и закрыты ли они
В следующем примере мы используем сокращение, чтобы определить, закрыты ли круглые скобки в строке до и после.
Идея состоит в том, чтобы определитьcounterпеременная, ее начальное значение равно 0, а затем перебирает строку, встречая(Просто добавьте 1, если встретите)Просто вычтите 1, если скобки соответствуют друг другу, окончательныйcouterбудет 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 <-- balanced
isParensBalanced('(asdfds)') //0 <-- balanced
isParensBalanced('(()') // 1 <-- not balanced
isParensBalanced(')(') // -1 <-- not balanced
2.3 Использование сокращения для подсчета дубликатов в массиве
Если вы хотите подсчитать, сколько дубликатов имеет каждое значение в массиве, редукторы также могут вам быстро помочь. В следующем примере мы подсчитываем количество повторений каждого значения в массиве и выводим объект для отображения:
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 Удалить лишние свойства объектов
Иногда вам может понадобиться удалить некоторые свойства объекта, обычно мы перебираем объект (например, цикл for..in), чтобы удалить те свойства, которые нам не нужны. На самом деле, мы можем извлечь ненужные свойства с помощью метода деструктуризации объекта и сохранить переменные, которые мы хотим сохранить, в параметре *rest*.
В приведенном ниже примере мы удаляем из объекта_internalа такжеtooBigЭти два свойства:
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вложенные объекты внутри. Мы можем быстро получить его с помощью деструктуризации объекта.engineсвойства, такие какvin:
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 добавлен оператор расширения (то есть три точки), который часто используется для деструктуризации массива, а также для деструктуризации объектов.
В следующем примере мы объединяем два объекта, те же свойства в новом объекте будут перезаписаны объектом, расположенным позади:
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 merged
console.log(merged) // {a:1, b:30, c:40, d:50}
4. Используйте массив Sets для дедупликации
Использование наборов позволяет быстро дедуплицировать массив, поскольку значения в наборах не повторяются.
let arr = [1, 1, 2, 2, 3, 3];
let deduped = [...new Set(arr)] // [1, 2, 3]
5. Деструктуризация массива
5.1 Замена значений переменных
let param1 = 1;
let param2 = 2;
//swap and assign param1 & param2 each others values
[param1, param2] = [param2, param1];
console.log(param1) // 2
console.log(param2) // 1
5.2 Принятие и присвоение нескольких значений из функций
Много раз ваша функция будет помещать несколько данных в массив, чтобы вернуть одно значение (например, функция Promise, ее значение разрешения может быть только одним значением), мы можем использовать деструктуризацию массива, чтобы легко получить эти значения из возвращаемого результата.
В приведенном ниже примере мы отправляем два запроса, используя fetch и usePromise.all()Два результата хранятся в массиве, и результатом выполнения функции является возврат этого массива.
function getFullPost(){
return Promise.all([
fetch('/post'),
fetch('/comments')
]);
}
// 在 async 函数中
const [post, comments] = await getFullPost();
Эта статья закончилась. хорошего дня (￣▽￣)~*