10 суперпрактичных трюков с Javascript, которым вы научились за выходные!

JavaScript

Автор: Махди Резви Переводчик: Front-end Xiaozhi Источник: среда

Ставьте лайк и смотрите снова, формируйте привычку

эта статьяGitHub GitHub.com/QQ449245884…Он был включен в вышеизложенное, и более ранние статьи с высокими похвалами были классифицированы, а также было систематизировано множество моих документов и учебных материалов. Добро пожаловать в Star and Perfect. Вы можете обратиться в тестовый центр для ознакомления во время собеседования. Надеюсь, у нас что-то получится вместе.

Как мы все знаем, JavaScript быстро меняется. В новом ES2020 так много замечательных функций, большинство из которых нам не терпится попробовать. Честно говоря, иногда мы можем писать код под другим углом и все равно добиваться того же эффекта, а некоторые короче и понятнее.

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

1. Проверка параметров метода

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

const isRequired = () => { 
  throw new Error('param is required')
}

const print = (num = isRequired()) => { 
  console.log(`printing ${num}`) 
}

print(2) //printing 2
print() // error
print(null) //printing null

2. Отформатируйте код JSON

мы все хорошо знакомы сJSON.stringify, но менее известно, что он также может выполнять форматированный вывод.

stringifyМетод имеет три параметра:value,replacerиspace. Среди них последние два являются необязательными параметрами, поэтому мы редко их знаем. Чтобы сделать отступ JSON, вы должны использоватьspaceпараметр.

console.log(JSON.stringify({name:"John",Age:23},null,'\t'));
>>> 
{
 "name": "John",
 "Age": 23
}

3. Получить уникальное значение из массива

Чтобы получить уникальные значения из массива, нужно использоватьfilterметод для фильтрации повторяющихся значений. Но с новымSetС нативными объектами все становится очень просто.

let uniqueArray = [...new Set([1, 2, 3, 3,3,"school","school",'ball',false,false,true,true])];

>>> [1, 2, 3, "school", "ball", false, true]

4. Удалить фиктивные значения из массива

В некоторых случаях мы хотим удалить фиктивные значения из массива. Ложное значение — это значение в JavaScriptFALSEзначение . В JavaScript всего шесть фиктивных значений, и это:

  • undefined
  • null
  • NaN
  • 0
  • '' (нулевой символ)
  • false

Самый простой способ отфильтровать эти ложные значения — использовать следующую функцию:

myArray.filter(Boolean)

Если вы хотите внести некоторые изменения в массив, а затем отфильтровать новый массив, вы можете попробовать что-то вроде этого. Помните, что оригиналmyArrayпостоянный.

myArray
    .map(item => {
        // Do your changes and return the new item
    })
    .filter(Boolean);

Все говорили, что нет проекта для написания резюме, поэтому я помог вам найти проект, и это было с бонусом.【Учебник по строительству】.

5. Объедините несколько объектов

В реальных потребностях нам часто приходится объединять несколько элементов управления. Быстрый способ сделать это выглядит следующим образом:

const user = { 
 name: 'John Ludwig', 
 gender: 'Male' 
}

const college = { 
 primary: 'Mani Primary School', 
 secondary: 'Lass Secondary School' 
}
const skills = { 
 programming: 'Extreme', 
 swimming: 'Average', 
 sleeping: 'Pro' 
}

const summary = {...user, ...college, ...skills}

6. Сортировка массива чисел

Массивы JavaScript поставляются со встроеннымиsortметод. По умолчанию этоsortпреобразует элементы массива в строки и лексикографически сортирует их. Но это проблема при сортировке массива чисел, решение — написать метод сортировки вручную.

[0,10,4,9,123,54,1].sort((a,b) => a-b)

>>> [0, 1, 4, 9, 10, 54, 123]

7. Отключить правую кнопку мыши

В некоторых случаях мы хотим отключить правую кнопку мыши на веб-странице, мы можем использовать следующие методы для отключения:

<body oncontextmenu="return false">
  <div></div>
</body>

Этот простой код отключит правый клик.

8. Используйте псевдонимы в деструктуризации

Деструктурирующее присваивание — это выражение JavaScript, которое разрушает значение в массиве или свойство в объекте в разные переменные. Вместо того, чтобы использовать существующие объектные переменные, мы можем переименовать их по своему вкусу.

const object = { number: 10 }

const { number } = object

// 使用别名
const { number: otherNumber } = object

console.log(otherNumber) //10

9. Получить последний элемент в массиве

Если вы хотите получить последний элемент массива, вы можете использоватьsliceметод.

let array = [0, 1, 2, 3, 4, 5, 6, 7] 
console.log(array.slice(-1))
>>>[7]

console.log(array.slice(-2))
>>>[6, 7]

console.log(array.slice(-3))
>>>[5, 6, 7]

10. Ожидание обещаний

В некоторых случаях нам нужно дождаться несколькихPromiseконец, здесь мы используемPromise.all.

const PromiseArray = [
    Promise.resolve(100),
    Promise.reject(null),
    Promise.resolve("Data release"),
    Promise.reject(new Error('Something went wrong'))];
Promise.all(PromiseArray)
  .then(data => console.log('all resolved! here are the resolve values:', data))
  .catch(err => console.log('got rejected! reason:', err))

оPromise.allСледует отметить, что когдаPromiseПри отклонении метод выдает ошибку. Это означает, что наш код не будет ждать, пока всеPromiseвсе сделано.

Если вы хотите подождать, пока всеPromiseзавершены, независимо от того, отклонены они или успешны, вы можете использоватьPromise.allSettled. Этот метод есть в финальной версии ES2020.

const PromiseArray = [
    Promise.resolve(100),
    Promise.reject(null),
    Promise.resolve("Data release"),
    Promise.reject(new Error('Something went wrong'))];
Promise.allSettled(PromiseArray).then(res =>{
console.log(res);
}).catch(err => console.log(err));
//[
//{status: "fulfilled", value: 100},
//{status: "rejected", reason: null},
//{status: "fulfilled", value: "Data release"},
//{status: "rejected", reason: Error: Something went wrong ...}
//]

Ошибки, которые могут существовать после развертывания кода, нельзя узнать в режиме реального времени.Чтобы решить эти ошибки впоследствии, много времени тратится на отладку логов.Кстати, всем рекомендую полезный инструмент мониторинга ошибок.Fundebug.

оригинал:blog.bit SRC.IO/10-super-US…

общаться

Статья постоянно обновляется каждую неделю. Вы можете выполнить поиск «Big Move to the World» в WeChat, чтобы прочитать и обновить ее как можно скорее (на одну или две статьи раньше, чем в блоге). Эта статья находится на GitHub.GitHub.com/QQ449245884…Он был включен, и многие мои документы были разобраны. Добро пожаловать в Звезду и совершенство. Вы можете обратиться в тестовый центр для ознакомления во время собеседования. Кроме того, обратите внимание на паблик-аккаунт и ответьте в фоновом режиме.Благосостояние, вы можете увидеть преимущества, вы знаете.

Категории