Добавить Автора Переводчик: Front-end Xiaozhi Источник: разработчик
Если у вас есть мечты, у вас есть галантерея, вы можете поискать в WeChat [Великое переселение в мир] Следуйте за этой Шуванжи, которая все еще моет посуду ранним утром. Эта статьяGitHubGitHub.com/QQ449245884…Включено, и есть полные тестовые площадки, материалы и мой цикл статей для интервью с производителями первой линии.
В этой статье я поделюсь с вами некоторыми советами по JS, которые могут улучшить ваши навыки работы с JS.
1. Избегайтеifслишком долго
Если оценочное значение соответствует нескольким условиям, мы можем написать:
if (value === 'a' || value === 'b' || value === 'c') { ... }
Вот так, если есть несколько условий,ifУсловие будет очень удобочитаемым, да и читабельность уменьшится, можно упростить так:
if (['a', 'b', 'c'].includes(value)) { ... }
2. Двойной!оператор преобразует любую переменную в логическое значение
Оператор !(NOT) можно использовать дважды!!, который преобразует любую переменную в логическое значение (например, логическую функцию), что удобно, когда вам нужно проверить значение перед его обработкой.
const toto = null
!!toto // false
Boolean(toto) // false
if (!!toto) { } // toto is not null or undefined
3. Дополнительно (?)
В JS нам нужно постоянно проверять, существуют ли какие-то свойства объекта, прежде чем мы сможем его обработать, иначе мы сообщим об ошибке. Вначале мы могли бы сделать что-то вроде этого:
const toto = { a: { b: { c: 5 } } }
if (!!toto.a && !!toto.a.b && !!toto.a.b.c) { ... } // toto.a.b.c exist
Если объекты глубоко вложены, наш способ записи трудно читать, то мы можем использовать?чтобы упростить:
if (!!toto.a?.b?.c) { ... } // toto.a.b.c exist
// 如果键不存在，返回 `undefined`。
const test = toto.a?.b?.c?.d // undefined
4. ЕслиifПри возврате значения в , не пишитеelse
Его часто видят таким образом:
if (...) {
return 'toto'
} else {
return 'tutu'
}
еслиifЕсть возвращаемое значение, вы можете написать его так:
if (...) {
return 'toto'
}
return 'tutu'
5. ИзбегайтеforEach, используйте большеfilter,map,reduce,every,some
Как новички, мы используем многоforEachфункций, но JS дает нам массу возможностей, и эти функции — ФП (функциональное программирование).
filter
filter()метод создает новый массив, содержащий все элементы теста, реализованного предоставленной функцией.
const toto = [1, 2, 3, 4]
// 过滤奇数
const evenValue = toto.filter(currentValue => {
return currentValue % 2 == 0
}) // [2, 4]
map
map()Метод создает новый массив, результатом которого является то, что каждый элемент в массиве является возвращаемым значением одного вызова предоставленной функции.
const toto = [1, 2, 3, 4]
const valueMultiplied = toto.map(currentValue => {
return currentValue * 2
}) // [2, 4, 6, 8]
reduce
reduce()метод выполняетreducerФункция (выполняемая в порядке возрастания), которая объединяет свои результаты в одно возвращаемое значение.
const toto = [1, 2, 3, 4]
const sum = toto.reduce((accumulator, currentValue) => {
return accumulator += currentValue
}, 0) // 10
Some & Every
some()Метод проверки наличия в массиве хотя бы1элементы прошли предусмотренный функциональный тест. Он возвращает значение логического типа.
every()Метод проверяет, проходят ли все элементы массива тест указанной функции. Он возвращает логическое значение.
Когда он используется?
Все предметы соответствуют одному условию и могут быть использованыevery
const toto = [ 2, 4 ]
toto.every(val => val % 2 === 0) // true
const falsyToto = [ 2, 4, 5 ]
falsyToto.every(val => val % 2 === 0) // false
Пока кто-то соответствует условиям, используйтеsome
const toto = [ 2, 4, 5 ]
toto.some(val => val % 2 !== 0) // return true
6. Не используйтеdeleteудалить атрибуты
от объектаdeleteСвойство очень плохое (плохая производительность), к тому же оно может иметь массу побочных эффектов.
Но если вам нужно удалить свойство, что вы должны делать?
Новый объект без этого свойства может быть создан функционально следующим образом:
const removeProperty = (target, propertyToRemove) => {
const { [propertyToRemove]: _, ...newTarget } = target
return newTarget
}
const toto = { a: 55, b: 66 }
const totoWithoutB = removeProperty(toto, 'b') // { a: 55 }
7. Добавляйте свойства к объекту, только если он существует
Иногда, если у объекта уже определены свойства, и нам нужно добавить свойства к объекту, мы можем написать:
const toto = { name: 'toto' }
const other = { other: 'other' }
// The condition is not important
const condition = true
if (condition) {
other.name = toto.name
}
❌ Не очень хороший код
✅ Могли бы использовать что-то более элегантное!
const condition = true
const other = {
other: 'other',
...condition && { name: 'toto' }
}
8. Использование строк шаблона
При изучении строк в JS нам нужно объединить их с переменными
const toto = 'toto'
const message = 'hello from ' + toto + '!' // hello from toto!
Если есть другие переменные, приходится писать очень длинные выражения, которые можно оптимизировать с помощью шаблонных строк.
const toto = 'toto'
const message = `hello from ${toto}!` // hello from toto!
9. Сокращение условия
когда условиеtrue, чтобы выполнить некоторые операции, мы могли бы написать:
if(condition){
toto()
}
Таким образом, вы можете использовать&&Сокращение:
condition && toto()
10. Установите значения по умолчанию для переменных
Если вам нужно установить значение по умолчанию для переменной, вы можете сделать это:
let toto
console.log(toto) //undefined
toto = toto ?? 'default value'
console.log(toto) //default value
toto = toto ?? 'new value'
console.log(toto) //default value
11. Используйте консольный таймер
Если вам нужно узнать время выполнения функции, вы можете сделать это:
for (i = 0; i < 100000; i++) {
// some code
}
console.timeEnd() // x ms
Ошибки, которые могут существовать после развертывания кода, нельзя узнать в режиме реального времени.Чтобы решить эти ошибки впоследствии, много времени тратится на отладку логов.Кстати, всем рекомендую полезный инструмент мониторинга ошибок.Fundebug.
оригинал:Dev.to/code oz/IM PR…
общаться с
Есть мечта, есть галантерейные товары, поиск в WeChat【Переезд в мир】Обратите внимание на эту мудрость чаши-щетки, которая все еще моет посуду ранним утром.
Эта статьяGitHubGitHub.com/QQ449245884…Включено, и есть полные тестовые площадки, материалы и мой цикл статей для интервью с производителями первой линии.