оригинал:Check out these useful ECMAScript 2015 (ES6) tips and tricks
Пожалуйста, указывайте на ошибки в комментариях, большое спасибо.
EcmaScript 2015 (ES6) существует уже много лет, и мы можем использовать некоторые из его новых функций.
1. Установите необходимые параметры функции
ES6 предоставляет значения параметров по умолчанию, которые позволяют указать значения по умолчанию в параметрах функции, когда параметру не передается его значение.
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) //3
add(1) // Error: Missing parameter.
В этом примере у нас есть функцияaddпараметрыaа такжеbУстановлено значение по умолчанию, и это значение по умолчанию является функцией. когда функцияaddвыполняется, и параметрaа такжеbКогда значение не передается, этоrequiredФункция выполнится и мы получим ошибкуError: Missing parameter.
2. Очень мощное «уменьшение»
ArrayМетодыreduceочень полезная функция. Его очень репрезентативная роль — преобразовать массив в значение. Но вы можете сделать гораздо больше с ним.
🔥 Совет: начальным значением этих трюков является массив или объект, а не простое значение, такое как строка.
2.1 Используйте сокращение, чтобы иметь как функции карты, так и функции фильтра
Предположим, есть такой сценарий, у вас есть список с некоторыми элементами в нем, вам нужно обновить эти элементы, а после обновления вам нужно использовать фильтр, чтобы отфильтровать ненужные вам элементы. Но тогда вам нужно дважды перебрать массив!
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]
В этом примере мы хотим удвоить значение в массиве, а затем нам нужно только значение в массиве больше, чем50Элементы. Обратите внимание, как мы используемreduceМетод также удваивает значение элемента, а затем фильтрует его.
2.2 Используйте «уменьшить» вместо «карты» и «фильтра»
Эта часть кода не отражена в исходном тексте, упоминается только код 2.1. Здесь я добавляю эту часть кода:
2.2.1 Используйте «уменьшить» вместо «карты»
function map(arr, exec) {
var res = arr.reduce((res, item, index) => {
var newItem = exec(item, index)
res.push(newItem)
return res
}, [])
return res
}
[1, 2, 3].map((item) => item * 2) // [2, 4, 6]
map([1, 2, 3], item => item * 2) // [2, 4, 6]
2.2.2 Используйте «уменьшить» вместо «фильтровать»
function filter(arr, exec) {
var res = arr.reduce((res, item, index) => {
if (exec(item, index)) {
res.push(item)
}
return res
}, [])
return res
}
[1, 2, 3].filter((item, index) => index < 2) // [1, 2]
filter([1, 2, 3], (item, index) => index < 2) // [1, 2]
2.3 Используйте «redece», чтобы определить, совпадают ли круглые скобки
Это также пример для иллюстрацииreduceСила этой функции. Учитывая строку, вы хотите знать, совпадают ли круглые скобки строки.
Обычной практикой является использование стека для сопоставления, но здесь мы используемreduceЭто можно сделать, нам просто нужна переменнаяcounter, начальное значение этой переменной равно 0 при встрече(когда,counter ++при встрече)когда,counter --. Если скобки совпадают, то этоcounterОкончательное значение равно 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.4 Подсчитать количество вхождений элемента в массив (преобразовать массив в объект)
Если вы хотите подсчитать количество вхождений элемента в массив или хотите преобразовать массив в объект, вы можете использоватьreduceсделать это.
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, чтобы узнать и увидеть больше примеров.MDN
// Я также взглянул на MDN и обнаружил, что сокращение действительно черная технология Применение сериализации промисов очень быстрое.
3. Деструктуризация объекта
3.1 Удаление нежелательных свойств
Иногда вы хотите удалить некоторые нежелательные свойства из объекта, возможно, объект содержит некоторую конфиденциальную информацию или просто потому, что объект слишком большой. Вместо перебора этих свойств мы можем использовать деструктурирование.
let {_internal, tooBig, ...cleanObject} = {el1: '1', _internal:"secret", tooBig:{}, el2: '2', el3: '3'};
console.log(cleanObject); // {el1: '1', el2: '2', el3: '3'}
В этом примере мы хотим удалить_internalа такжеtooBigЭти два свойства, мы можем присвоить их переменным_internalа такжеtooBig, остальные свойства хранятся вcleanObject, чего мы и хотим.
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
В этом примереengineявляется вложеннымcarобъект внутри, если нам нужно толькоengineсвойства внутриvinМы можем это сделать.
3.3 Объединение объектов
ES6 добавляет оператор распространения,...Обозначаемый тремя точками, он часто используется для деструктурирования значений массива, но также может использоваться в объектах.
В этом примере мы используем оператор распространения для нового объекта, и значение свойства более позднего объекта перезапишет значение свойства предыдущего объекта.
свойства во втором объектеbа такжеcпоместить значение первого объекта в свойствоbа такжеcзначение перезаписывается
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
4.1 Используйте set для дедупликации массива
В ES6 очень удобно использовать Set для дедупликации массива, потому что Set представляет собой коллекцию, а элемент в коллекции появится один раз.
let arr = [1, 1, 2, 2, 3, 3];
let deduped = [...new Set(arr)] // [1, 2, 3]
4.2 Методы использования массива
Оператор спреда (...) можно использовать для преобразованияSetПеревести вArrayто что мы можемSetиспользовать всеArrayметод.
В этом примере показано, какSetиспользуется вfilterметод
let mySet = new Set([1,2, 3, 4, 5]);
var filtered = [...mySet].filter((x) => x > 3) // [4, 5]
5. Деструктуризация массива
5.1 Поменять местами 2 значения
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 Функции, возвращающие несколько значений
async function getFullPost(){
return await Promise.all([
fetch('/post'),
fetch('/comments')
]);
}
// const [post, comments] = getFullPost();
const [post, comments] = await getFullPost();
// 注释掉的那一行是作者写的，但是我跑不通，我觉得getFullPost是个Promise，所以需要加await。
Мы используемasync\awaitполучить данные 2-х интерфейсов/postа также/comments, функция возвращает массив, поэтому можно использовать деструктуризацию для получения возвращаемых значений этих двух интерфейсов.
Содержание оригинальной статьи автора находится здесь, но я хотел бы добавить карту.
6. Map
в объектеkeyможет быть толькоstringне могу принять одинObjectтак какkeyбудет автоматически преобразовано в строку, например:
const data = {};
const element = document.getElementById('myDiv');
data[element] = 'metadata';
data['[object HTMLDivElement]'] // "metadata"
Таким образом, для键值对деконструкция данных,mapСравниватьObjectболее подходящий.
6.1 Использование объектов в качестве ключей на картах
const M = new Map()
let o = {p: 'Hello World'}
M.set(o, 'hello world')
M.get(o) // hello world
let O = {p: 'Hello World'}
M.get(O) // undefined
Уведомление:O != oтак этоM.get(O)даundefined
6.2 Роль WeakMap
На обычной карте, еслиobjectрассматриваться какkeyСсылка, когда все переменные, кроме карты, отбрасываются в этомobjectссылка, карта по-прежнему будет препятствовать повторному использованию этого механизма сбора мусора.objectЭто может привести к утечкам памяти. Итак, есть WeakMap.
Буквально ключ в WeakMap — это слабая ссылка, а WeakMap может использовать толькоObjectтак какkeyПотому что с Map можно делать и другие вещи~~ Тогда несколько советов по WeakMap.
6.2.1 Использование узлов DOM в качестве ключей
let myElement = document.getElementById('logo');
let myWeakmap = new WeakMap();
myWeakmap.set(myElement, {timesClicked: 0});
myElement.addEventListener('click', function() {
let logoData = myWeakmap.get(myElement);
logoData.timesClicked++;
}, false);
Приведенный выше пример взят из Ruanyifeng.
Мы используем WeakMap для хранения определенных состояний DOM-узлов.Когда этот DOM-узел удаляется, myElement теряет свою ссылку, и весь мир теряет свою ссылку.Состояние, хранящееся в WeakMap, исчезнет, поэтому не будет проблемы с утечкой памяти.
6.2.2 Использование WeakMap для развертывания частных свойств
Все мы знаем, что в JS трудно реализовать приватные свойства экземпляров.Один из способов — использовать замыкания, но с замыканиями есть проблема.Экземпляры сильно ссылаются и не могут быть обработаны механизмом сборки мусора. Следующий код:
var Person = (function() {
var privateData = {},
privateId = 0;
function Person(name) {
Object.defineProperty(this, "_id", { value: privateId++ });
privateData[this._id] = {
name: name
};
}
Person.prototype.getName = function() {
return privateData[this._id].name;
};
return Person;
}());
privateData — это строгая ссылка на каждый экземпляр, поэтому механизм сборки мусора не может ее обработать.
Мы можем очень хорошо решить эту проблему с помощью weakMap.
var privateData = new WeakMap();
var Person = (function() {
function Person(name) {
privateData.set(this, { name: name });
}
Person.prototype.getName = function() {
return privateData.get(this).name;
};
return Person;
}());
Приведенный выше код weakMap не вызовет сильной ссылки на экземпляр, то есть механизм сборки мусора может перезапустить этот экземпляр, если ни один другой человек не сохранит ссылку на этот экземпляр, он будет переработан и не вызовет памяти. просочился.
Приведенный выше пример исходит изJavaScript реализует частные свойства