От автора: как и в любом другом языке программирования, для решения в JavaScript простых и сложных задач есть множество приемов. Некоторые трюки широко известны, другие — настолько неожиданные, что могут взорвать ваш мозг. Давайте рассмотрим семь приемов JavaScript, которые вы можете начать использовать сегодня!
Получение уникальных значений массива
Получить массив уникальных значений, вероятно, проще, чем вы думаете:
|
1 2 |
var j = [...new Set([1, 2, 3, 3])] >> [1, 2, 3] |
Я люблю сочетать выражения rest и Set!
Массив и логическое значение
Вам нужно отфильтровать недействительные значения (0, undefined, null, false и т.д.) из массива? Возможно, вы не знали этого трюка:
|
1 2 3 4 5 6 |
myArray .map(item => { // ... }) // Избавляемся от плохих значений .filter(Boolean); |
Просто передайте Boolean, и все эти ложные значения будут убраны!
Создание пустых объектов
Конечно, вы можете создать объект, который кажется пустым {}, но у этого объекта все еще есть __proto__ и стандартный hasOwnProperty, и другие методы объекта. Однако есть способ создать пустой словарь:
|
1 2 3 4 |
let dict = Object.create(null); // dict.__proto__ === "undefined" // Свойств объекта не существует, пока вы их не добавите |
В этом объекте нет абсолютно никаких ключей или методов!
Объединение объектов
Необходимость объединения нескольких объектов в JavaScript существует всегда, особенно когда мы начинаем создавать классы и виджеты с параметрами:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
const person = { name: 'David Walsh', gender: 'Male' }; const tools = { computer: 'Mac', editor: 'Atom' }; const attributes = { handsomeness: 'Extreme', hair: 'Brown', eyes: 'Blue' }; const summary = {...person, ...tools, ...attributes}; /* Object { "computer": "Mac", "editor": "Atom", "eyes": "Blue", "gender": "Male", "hair": "Brown", "handsomeness": "Extreme", "name": "David Walsh", } */ |
Эти три точки сделали задачу намного проще!
Подключение обязательных параметров функции
Возможность устанавливать значения по умолчанию для аргументов функции была отличным дополнением к JavaScript, но попробуйте этот прием, чтобы подключить обязательные значения для данного аргумента:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
const isRequired = () => { throw new Error('param is required'); }; const hello = (name = isRequired()) => { console.log(`hello ${name}`) }; // Это выдает ошибку, потому что не предоставлено имя hello(); // Это тоже выдает ошибку hello(undefined); // Это работает! hello(null); hello('David'); |
Это валидация и использование JavaScript следующего уровня!
Деструктуризация псевдонимов
Деструктуризация — это очень полезное дополнение к JavaScript, но иногда мы предпочитаем ссылаться на эти свойства под другим именем, поэтому мы можем использовать псевдонимы:
|
1 2 3 4 5 6 7 |
const obj = { x : 1 } ; // Захватываем obj.x, как {x} const { x } = obj ; // Захватываем obj.x, как {otherName} const { x : otherName } = obj ; |
Полезно для предотвращения конфликтов имен с существующими переменными!
Получение параметров строки запроса
В течение многих лет мы писали грубые регулярные выражения для получения значений строки запроса, но те времена прошли — с введением удивительного URLSearchParams API:
|
1 2 3 4 5 6 7 8 |
// Предполагая, что "?post=1234&action=edit" var urlParams = new URLSearchParams(window.location.search); console.log(urlParams.has('post')); // true console.log(urlParams.get('action')); // "edit" console.log(urlParams.getAll('action')); // ["edit"] console.log(urlParams.toString()); // "?post=1234&action=edit" console.log(urlParams.append('active', '1')); // "?post=1234&action=edit&active=1" |
Намного проще, чем то, с чем мы привыкли бороться! С годами JavaScript сильно изменился, но мне больше всего нравится в JavaScript скорость улучшения языка, которую мы наблюдаем. Однако несмотря на эту динамику, нам все еще нужно использовать некоторые приемы; держите эти трюки в вашем наборе инструментов! Какие ваши любимые приемы JavaScript?
Автор: David Walsh
Источник: //davidwalsh.name
Редакция: Команда webformyself.
