Эта статья участвовала в "Проект «Звезда раскопок»”, чтобы выиграть творческий подарочный пакет и бросить вызов творческим поощрительным деньгам.
Это не титульная вечеринка, это "рев" от лидера к членам команды во время код-ревью. Причина в том, что в код-ревью обнаруживается, что ES5 до сих пор используется во многих местах. Это просто вызывает количество кода увеличивается, а читабельность ухудшается.
По совпадению, этот лидер имеет привычку чистотой кода. Столкнувшись с членами с 3 до 5 лет опыта, он все еще пишет код этого уровня. Он чрезвычайно недоволен и постоянно жалуется на код. Тем не менее, я все еще чувствую, что набрал много на жалоб, поэтому я записал жалобы лидера и поделился их с копателями. Я чувствую, что я много набрал и дал. Если есть ошибки или лучшие способы написания, Комментарии очень приветствуются. Сообщение в.
ps: синтаксис JS после ES5 в совокупности называется ES6! ! !
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;
или
const f = obj.a + obj.d;
const g = obj.c + obj.e;
Тукао: «Разве вы не можете использовать назначение деструктурирования ES6, чтобы получить значение? Разве не хорошо использовать 5 строк кода с 1 строкой кода? Просто используйте имя объекта и имя атрибута, чтобы получить значение. Если объект имя короткое, это нормально, но оно очень длинное? Имя объекта повсюду в коде».
Улучшать:
const {a,b,c,d,e} = obj;
const f = a + d;
const g = c + e;
опровергнуть
Дело не в том, что назначение деструктурирования ES6 не используется, а в том, что имя атрибута в объекте данных, возвращаемом сервером, не то, что мне нужно, поэтому для получения значения нет необходимости воссоздавать назначение обхода.
Подавать жалобы
Кажется, что ваше понимание назначения деструктуризации ES6 недостаточно тщательно. Если имя переменной, которую вы хотите создать, не соответствует имени свойства объекта, вы можете написать:
const {a:a1} = obj;
console.log(a1);// 1
Пополнить
Назначение деструктуризации ES6 простое в использовании. Но обратите внимание, что деструктурированный объект не может бытьundefined,null. В противном случае будет сообщено об ошибке, поэтому деконструированному объекту должно быть присвоено значение по умолчанию.
const {a,b,c,d,e} = obj || {};
2. Tucao о слиянии данных
Например, объединение двух массивов, объединение двух объектов.
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}
Подавать жалобы
Не забыт ли оператор распространения 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}
В-третьих, Тукао о конкатенации строк
const name = '小明';
const score = 59;
let result = '';
if(score > 60){
result = `${name}的考试成绩及格`;
}else{
result = `${name}的考试成绩不及格`;
}
Подавать жалобы
Лучше не использовать строковые шаблоны ES6, как вы, вы вообще не знаете${}Что можно сделать в . существует${}В него можно помещать произвольные выражения JavaScript, которые могут выполнять операции и ссылаться на свойства объекта.
Улучшать
const name = '小明';
const score = 59;
const result = `${name}${score > 60?'的考试成绩及格':'的考试成绩不及格'}`;
4. Tucao об условиях решения в случае если
if(
type == 1 ||
type == 2 ||
type == 3 ||
type == 4 ||
){
//...
}
Подавать жалобы
Методы экземпляра массива в ES6includesБудет ли он использоваться?
Улучшать
const condition = [1,2,3,4];
if( condition.includes(type) ){
//...
}
5. Tucao о поиске по списку
В проекте функция поиска некоторых невыгружаемых списков реализована фронтендом, а поиск в целом делится на точный поиск и нечеткий поиск. Поиск также называют фильтрацией, обычно используемойfilterреализовать.
const a = [1,2,3,4,5];
const result = a.filter(
item =>{
return item === 3
}
)
Подавать жалобы
Если это точный поиск, он не будет использовать ES6.find? Вы понимаете оптимизацию производительности?findЕсли в методе найден соответствующий элемент, он не будет продолжать обход массива.
Улучшать
const a = [1,2,3,4,5];
const result = a.find(
item =>{
return item === 3
}
)
6. Tucao о сглаженных массивах
В данных JSON отдела имя атрибута — это идентификатор отдела, а значение атрибута — это набор массивов идентификаторов членов отдела.Теперь нам нужно извлечь все идентификаторы членов с отделами в коллекцию массивов.
const deps = {
'采购部':[1,2,3],
'人事部':[5,8,12],
'行政部':[5,14,79],
'运输部':[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)]
Подавать жалобы
Нужно ли мне проходить, чтобы получить все значения свойств объекта?Object.valuesЗабыли? Также есть выравнивание массивов, почему бы не использовать ES6?flatЧто касается метода, к счастью, глубина массива на этот раз составляет всего 2 измерения максимум, и если мы встретим массивы с глубиной 4 и 5 измерений, нужно ли нам зацикливать вложенные циклы, чтобы сплющить их?
Улучшать
const deps = {
'采购部':[1,2,3],
'人事部':[5,8,12],
'行政部':[5,14,79],
'运输部':[3,64,105],
}
let member = Object.values(deps).flat(Infinity);
которые используютInfinityтак какflatПараметр, так что размеры сплющенного массива не должны быть известны.
Пополнить
flatМетод не поддерживает браузер IE.
7. Tucao о получении значений атрибутов объекта
const name = obj && obj.name;
Подавать жалобы
Будет ли использоваться необязательный оператор цепочки в ES6?
Улучшать
const name = obj?.name;
8. Tucao о добавлении атрибутов объекта
Что делать при добавлении свойств к объекту, если имя свойства изменяется динамически.
let obj = {};
let index = 1;
let key = `topic${index}`;
obj[key] = '话题内容';
Подавать жалобы
Зачем создавать лишнюю переменную. Я не знаю, можно ли использовать имя свойства объекта в ES6 как выражение?
Улучшать
let obj = {};
let index = 1;
obj[`topic${index}`] = '话题内容';
9. Решение о том, что поле ввода не пусто
При работе с бизнесом, связанным с полем ввода, часто считается, что в поле ввода не введено значение.
if(value !== null && value !== undefined && value !== ''){
//...
}
Подавать жалобы
Вы поняли новый оператор объединения нулевых значений в ES6, вам нужно написать так много условий?
if((value??'') !== ''){
//...
}
10. Tucao об асинхронных функциях
Асинхронные функции распространены и часто реализуются как обещания.
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)
})
})
}
Подавать жалобы
Если вы вызываете асинхронную функцию таким образом, вы не боитесь сформировать адский обратный вызов!
Улучшать
const fn = async () =>{
const res1 = await fn1();
const res2 = await fn2();
console.log(res1);// 1
console.log(res2);// 2
}
Пополнить
Но при выполнении одновременных запросов вам все еще нужно использоватьPromise.all().
const fn = () =>{
Promise.all([fn1(),fn2()]).then(res =>{
console.log(res);// [1,2]
})
}
Если есть параллельный запрос, пока обрабатывается одна из асинхронных функций, будет возвращен результат, который используется дляPromise.race().
Одиннадцать, продолжение
Добро пожаловать в опровержение вышеперечисленных десяти пунктов жалоб лидера.Если ваше опровержение разумно, я опровергну его для вас на следующей встрече по обзору кода.
Кроме того, если есть какие-либо ошибки в приведенной выше аранжировке, пожалуйста, поправьте меня в комментариях, большое спасибо.
Если у вас есть еще что-то, на что можно пожаловаться, вы также можете оставлять свои жалобы в комментариях.
Прочитав это полезно, вы можете обратить на него внимание и поддержать его.