10 жалоб от моего босса, которые помогли мне многому научиться.
Предисловие
Вот как мой босс орал на членов команды во время совещаний по проверке кода. Причина в том, что он обнаружил, что многие части проекта все еще используют ES5. Не то, чтобы ES5 был плохим, будут баги, но он увеличит объем кода и снизит читабельность.
Так уж получилось, что у моего босса есть привычка к чистоте кода. Что касается сотрудников со стажем от 3 до 5 лет, то он крайне недоволен кодом такого уровня и постоянно жалуется на код. Тем не менее, я все еще чувствую, что многое выиграл от его жалоб, поэтому я решил записать жалобы босса и поделиться ими с вами.
1. Жалобы на извлечение значений объекта
Извлечение значений атрибутов очень распространено в программах, например получение значений из объекта obj.
const obj = {
a: 1,
b: 2,
c: 3,
d: 4,
e: 5,
}
const a = obj.a
const b = obj.b
const c = obj.c
const d = obj.d
const e = obj.e
// or
const f = obj.a + obj.d
const g = obj.c + obj.e
Жалоба BOSS: почему вы не используете назначение деструктуризации ES6, чтобы получить значение? Не лучше ли сделать это одной строкой кода?
const { a, b, c, d, e } = obj
const f = a + d
const g = c + e
Я возражаю: я не использую ES6, потому что имя свойства интерфейса API не то, что мне нужно.
БОСС жалуется: похоже, вы недостаточно хорошо освоили назначение деструктуризации ES6. Если имя переменной, которую вы хотите создать, не соответствует имени свойства объекта, вы можете написать это:
const { a: a1 } = obj || {}
console.log(a1)// 1
2. Жалобы на слияние данных
Например, объединение двух массивов или объединение двух объектов.
const a = [ 1, 2, 3 ]
const b = [ 1, 5, 6 ]
const c = a.concat(b) // [ 1, 2, 3, 1, 5, 6]
const obj1 = {
a:1,
}
const obj2 = {
b:1,
}
const obj = Object.assign({}, obj1, obj2) // { a: 1, b: 1}
Жалоба BOSS: вы забыли оператор распространения ES6, а объединение массивов не учитывает дедупликацию?
const a = [ 1, 2, 3 ]
const b = [ 1, 5, 6 ]
const c = [...new Set([...a,...b])] // [ 1, 2, 3, 5, 6 ]
const obj1 = {
a:1,
}
const obj2 = {
b:1,
}
const obj = {...obj1,...obj2} // { a: 1, b: 1 }
3. Жалобы на сращивание струны.
const name = 'fatfish'
const score = 59
let result = ''
if(score > 60){
result = `${name}passed the exam`
}else{
result = `${name}failed in the exam`
}
жалуется BOSS: лучше не использовать строковые шаблоны ES6, как вы. Вы не знаете, что операции можно делать в ${}? Мы можем выполнять произвольные выражения JavaScript в ${}, выполнять операции и обращаться к свойствам объекта.
const name = 'fatfish'
const score = 59
const result = `${name}${score > 60 ? 'passed the exam' : 'failed in the exam'}`
4. Жалобы на использование if
if(
type == 1 ||
type == 2 ||
type == 3 ||
type == 4 ||
){
//...
}
Жалоба BOSS: не лучше ли нам использовать метод include для массивов в ES6?
const condition = [ 1, 2, 3, 4 ]
if( condition.includes(type) ){
//...
}
5. Жалобы на поиск по списку.
В проекте функция поиска некоторых списков реализована фронтендом, причем поиск в целом делится на два типа: точный и нечеткий. Как правило, для этого мы используем метод фильтра.
const a = [ 1, 2, 3, 4, 5 ]
const result = a.filter(
item => {
return item === 3
}
)
Жалоба BOSS: не могли бы вы использовать метод find в ES6 для точного поиска? Вы понимаете оптимизацию производительности? Если соответствующий элемент найден в методе find, он не будет продолжать обход массива.
const a = [ 1, 2, 3, 4, 5 ] const result = a.find(item => item === 3)
6. Жалобы на плоские массивы.
В данных JSON имя атрибута — это идентификатор отдела, а значение — массив идентификаторов сотрудников отдела. Теперь нам нужно извлечь все идентификаторы членов отдела в коллекцию массивов.
const deps = {
'department_1':[ 1, 2, 3 ],
'department_2':[ 5, 8, 12 ],
'department_3':[ 5, 14, 79 ],
'department_4':[ 3, 64, 105 ],
}
let member = []
for (let item in deps){
const value = deps[item]
if(Array.isArray(value)){
member = [...member,...value]
}
}
member = [...new Set(member)]
Жалоба BOSS: нужно ли мне проходить, чтобы получить все значения свойств объекта? Вы забыли про Object.values? Почему бы не использовать плоский метод, предоставляемый ES6?
const deps = {
'department_1':[ 1, 2, 3 ],
'department_2':[ 5, 8, 12 ],
'department_3':[ 5, 14, 79 ],
'department_4':[ 3, 64, 105 ],
}
let member = Object.values(deps).flat(Infinity)
Примечания: В качестве параметра flat используется бесконечность, поэтому нам не нужно знать размеры сглаженного массива.
7. Жалобы на получение значений атрибутов объекта.
const name = obj && obj.name
Жалоба BOSS: не будете ли вы использовать необязательный оператор цепочки в ES6?
const name = obj?.name
8. Жалобы на добавление свойств объекта.
Когда мы добавляем свойства к объекту, что нам делать, если имена свойств меняются динамически?
let obj = {}
let index = 1
let key = `topic${index}`
obj[key] = 'content'
Жалоба BOSS: зачем создавать лишнюю переменную. Разве вы не знаете, что имена свойств объекта в ES6 могут использовать выражения?
let obj = {}
let index = 1
obj[`topic${index}`] = 'content'
9. Жалобы на непустое судебное решение
При обработке пользовательского ввода часто оценивается, было ли введено поле ввода.
if(value !== null && value !== undefined && value !== ''){
//...
}
Жалоба BOSS: вы слышали о новом операторе объединения нулевых значений в ES6, вам нужно писать так много условий?
if((value ?? '') !== ''){
//...
}
10. Жалобы на асинхронные функции
Асинхронные функции распространены и часто реализуются как обещания.
const fn1 = () =>{
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve(1)
}, 300)
})
}
const fn2 = () =>{
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve(2)
}, 600)
})
}
const fn = () =>{
fn1().then(res1 =>{
console.log(res1) // 1
fn2().then(res2 =>{
console.log(res2)
})
})
}
Жалоба BOSS: если вы используете подобные асинхронные функции, вы не боитесь создать ад обратных вызовов!
const fn = async () =>{
const res1 = await fn1()
const res2 = await fn2()
console.log(res1) // 1
console.log(res2) // 2
}
Окончательно
Вы можете попытаться опровергнуть 10 жалоб BOSS, приведенных выше. Если ваше опровержение разумно, я опровергну его для вас на следующей встрече по обзору кода.
Перевод этой статьи был одобрен первоначальным автором (Hong chenlianxin).
Исходный адрес: https://juejin.cn/post/7016520448204603423
Спасибо, что прочитали.
Дополнительные материалы на PlainEnglish.io.
Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter, LinkedIn, YouTube и Discord .
Заинтересованы в масштабировании запуска вашего программного обеспечения? Ознакомьтесь с разделом Схема.
