Трехминутное чтение: дайте себе 3 минуты, чтобы собрать пропущенные знания, выпуск 2.
Цитата статьи:Дэвид Уолш.Тогда/JavaScript-…
Автор: Дэвид Уолш
Перевод: скиннер
Дедупликация массива
var j = [...new Set([1, 2, 3, 3])];
>> [1,2,3]
Этот метод дедупликации просто опьяняет
фильтровать пустые значения
Значения Null относятся к некоторым значениям, которые не имеют конкретного значения, например 0, undefined, null, false, пустые строки и т. д.
let res = [1,2,0,undefined,null,false,''].filter(Boolean);
>> 1,2
Создать пустой объект
Чтобы создать пустой объект, мы, вероятно, будем использовать литерал объекта большую часть времени, поскольку{}образом, однако объект, созданный таким образом, не является чистым, он все же имеет__proto__свойства и унаследованы отObjectНекоторые методы прототипа, созданные таким образом объекты легко модифицируются, например:
let o = {};
let p = Object.create(null);
Object.prototype.say = function(){
console.log('hello')
}
console.log(o.say)
console.log(p.say)
>> f(){}
>> undefined
можно увидеть сквозь{}Созданные объекты могут быть легко изменены с помощьюObject.create(null)Объекты, созданные таким образом, очень чистые, без каких-либо свойств и объектов, очень чистые.
Объединить объекты
пройти через...Оператор распространения позволяет легко комбинировать объекты
const person = { a:1 };
const tools = { b:2 };
const attributes = { c:3 };
const summary = {...person, ...tools, ...attributes};
>> {a:1,b:2,c:3}
должен сказать...Оператор спреда действительно хорош!
Обнаружение ненулевого параметра
Этот метод особенно подходит для использования при инкапсуляции функций.Возможно, мы знаем, что можем напрямую указать значение по умолчанию в параметре функции, например следующее:
function test(parma = 'default'){}
Однако мы также можем назначить функцию напрямую. Если параметры не переданы, мы будем напрямую выдавать напоминание об ошибке. Если в компоненте много методов, мы можем повторно использовать его напрямую, вместо того, чтобы выносить непустое суждение в каждом методе. , иметь дело с.
const isRequired = () => { throw new Error('param is required'); };
const hello = (name = isRequired()) => { console.log(`hello ${name}`) };
// 抛出一个错误，因为参数没有传
hello()；
// 没有问题
hello('hello')
Деструктуризация для добавления псевдонимов
При импорте нескольких модулей, чтобы компоненты, на которые ссылаются, не имели одинакового имени, мы можем напрямую назначить псевдоним при импорте.
const obj = { x: 1 };
const { x: otherName } = require('module');
Вы можете использовать его непосредственно, когда используете его.otherName
Получить параметры строки запроса
Получить значение параметра в url или дописать строку запроса. Раньше мы обычно обрабатывали его через обычное сопоставление, но теперь есть новый API, вы можете проверить детализдесь, что позволяет нам очень просто обрабатывать URL-адреса.
Если у нас есть такой URL-адрес, "?post=1234&action=edit", мы можем обработать этот URL-адрес следующим образом.
var urlParams = new URLSearchParams('?post=1234&action=edit');
console.log(urlParams.has('post'));
console.log(urlParams.get('action')); // "edit"
console.log(urlParams.getAll('action')); // ["edit"]
console.log(urlParams.toString()); // "?post=1234&action=edit"
urlParams.append('active', '1')
console.log(urlParams); // "?post=1234&action=edit&active=1"
Это удобно? Как насчет поддержки браузера? пройти черезЭтот адресПосмотреть вы можете найти, что большинство браузеров поддерживаются! Если вы столкнулись с неподдерживаемой ситуацией,polyfill.