Как быстро приступить к работе с VUE3.0: Начните с изучения
«Если вы знаете, как использовать ES6, тогда используйте его!»: это «рев», который лидер издал членам команды во время проверки кода, потому что он обнаружил много места во время ревью кода. Лучше использовать метод написания ES5. Это не значит, что писать на ES5 не получится и будут ошибки. Это просто вызывает увеличение объёма кода и плохую читаемость.
Так уж получилось, что у этого лидера был фетиш кода. Он был крайне недоволен участниками, имеющими от 3 до 5 лет опыта написания кода на этом уровне, и продолжал жаловаться на код. Тем не менее, я чувствую, что все же получил много пользы от его жалоб, поэтому я записал жалобы лидера и поделился ими с другими копателями. Если вы считаете, что они полезны, поставьте им палец вверх. Если есть ошибки или есть лучшие способы написать. Вы можете оставить комментарий.
ps: Синтаксис JS после ES5 вместе называется ES6! ! !
1. Tucao о сборе значений
Значение очень распространено в программах, например, для получения значения из объекта obj .
константный объект = {
а:1,
б:2,
с:3,
д:4,
е:5,
} Tucao :
const a = obj.a; const b = obj.b; константа с = объект.с; 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} = объект;
константа f = а + 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. Жалобы на слияние данных
, например слияние двух массивов и двух объектов.
константа = [1,2,3];
константа б = [1,5,6];
const c = a.concat(b);//[1,2,3,1,5,6]
константный объект1 = {
а:1,
}
константный объект2 = {
б:1,
}
const obj = Object.assign({}, obj1, obj2);//{a:1,b:1} пожаловался на
то, что оператор расширения ES6 забыли, и при слиянии массивов дедупликация не учитывается?
Улучшенная
const a = [1,2,3];
константа б = [1,5,6];
const c = [...new Set([...a,...b])];//[1,2,3,5,6]
константный объект1 = {
а:1,
}
константный объект2 = {
б:1,
}
const obj = {...obj1,...obj2};//{a:1,b:1} 3. Тукао о сращивании строк
const name = 'Xiao Ming';
константный балл = 59;
пусть результат = '';
если(оценка > 60){
result = `${name} имеет проходной балл за экзамен`;
}еще{
result = `${name} провалил экзамен`;
} Если вы жалуетесь на
использование строковых шаблонов ES6, лучше их не использовать. Вы понятия не имеете, какие операции можно выполнять в ${} . В ${} вы можете поместить любое выражение JavaScript, выполнять операции и ссылаться на свойства объекта.
Улучшено
const name = 'Сяо Мин';
константный балл = 59;
const result = `${name}${score > 60?' результат теста пройден':' результат теста не пройден'}` 4. Комментарии к условиям оценки в if
(;
тип == 1 ||
тип == 2 ||
тип == 3 ||
тип == 4 ||
){
//...
} Жалоба на то
, будет ли в ES6 использоваться метод экземпляра массива includes ?
Улучшено
константное условие = [1,2,3,4];
если( условие.включает(тип) ){
//...
} 5. Жалобы на поиск по спискам
В проекте функция поиска по некоторым ненумерованным спискам реализована во внешнем интерфейсе. Поиск обычно делится на точный поиск и нечеткий поиск. Поиск также называется фильтрацией и обычно реализуется с помощью filter .
константа а = [1,2,3,4,5];
const result = a.filter(
предмет =>{
вернуть товар === 3
}
) Если вы хотите пожаловаться
на точный поиск, разве вы не воспользуетесь find в ES6? Вы понимаете оптимизацию производительности? Если в методе find найден элемент, соответствующий условиям, он не будет продолжать перемещаться по массиву.
Улучшенная
константа a = [1,2,3,4,5];
константный результат = a.find(
предмет =>{
вернуть товар === 3
}
) 6. Жалобы на сглаженные массивы
В данных отдела в формате JSON именем атрибута является идентификатор отдела, а значением атрибута является набор идентификаторов членов отдела. Теперь нам нужно извлечь все идентификаторы членов отдела в коллекцию массивов.
константа депс = {
«Отдел закупок»:[1,2,3],
'Отдел кадров':[5,8,12],
«Административный отдел»:[5,14,79],
«Министерство транспорта»:[3,64,105],
}
пусть член = [];
for (пусть элемент будет в deps){
константное значение = deps[элемент];
если(Array.isArray(значение)){
член = [...член,...значение]
}
}
member = [...new Set(member)] Необходимо ли пройти, чтобы получить все значения атрибутов объекта
?
Object.values забыли? Существует также процесс выравнивания массивов. Почему бы не использовать метод flat , предусмотренный ES6? К счастью, на этот раз глубина массива не превышает двух измерений. Если вы встретите массивы с 4- или 5-мерной глубиной, необходимо ли это? Цикл вложенный цикл для выравнивания?
Улучшить
const deps = {
«Отдел закупок»:[1,2,3],
'Отдел кадров':[5,8,12],
«Административный отдел»:[5,14,79],
«Министерство транспорта»:[3,64,105],
}
letmember = Object.values(deps). Flat(Infinity); flat Infinity нет необходимости знать размеры сглаженного массива.
Дополнено, что
flat метод не поддерживает браузер IE.
7. Tucao о получении значения атрибута объекта
const
name = obj && obj.name;
Будет ли использоваться необязательный оператор цепочки в ES6?
Улучшено
const name = obj?.name;
8. Комментарии к добавлению атрибутов объекта.
Что следует делать при добавлении атрибутов к объекту, если имя атрибута меняется динамически.
пусть объект = {};
пусть индекс = 1;
let key = `topic${index}`;
obj[key] = 'содержание темы'; Tucao
, почему нам нужно создать дополнительную переменную. Интересно, можно ли использовать выражения для имен свойств объектов в ES6?
Улучшить
let obj = {};
пусть индекс = 1;
obj[`topic${index}`] = 'содержание темы'; 9. Решение о том, не пусто ли поле ввода
. При обработке бизнеса, связанного с полем ввода, часто считается, что поле ввода не имеет входного значения.
if(значение !== ноль && значение !== неопределенное && значение !== ''){
//...
} Слышали ли вы о новом операторе слияния нулевых значений в ES6? Вам нужно писать так много условий
?
if((значение??'') !== ''){
//...
} 10. Жалобы на асинхронные функции
Асинхронные функции очень распространены и часто реализуются с помощью Promise.
const fn1 = () =>{
вернуть новое обещание((разрешить, отклонить) => {
setTimeout(() => {
решить(1);
}, 300);
});
}
const fn2 = () =>{
вернуть новое обещание((разрешить, отклонить) => {
setTimeout(() => {
решить(2);
}, 600);
});
}
const fn = () =>{
fn1().then(res1 =>{
консоль.журнал(рез1); // 1;
fn2().then(res2 =>{
консоль.log(res2)
})
})
} Если вы вызовете
асинхронную функцию вот так, адского обратного вызова вы не боитесь!
Улучшить
const fn = async () =>{
const res1 = ожидание fn1();
const res2 = ожидание fn2();
консоль.журнал(рез1); // 1;
console.log(res2);// 2
} Дополнение
: при выполнении одновременных запросов все равно необходимо использовать Promise.all() .
const fn = () =>{
Promise.all([fn1(),fn2()]).then(res =>{
console.log(res);//[1,2]
})
} Если есть одновременные запросы, пока одна из асинхронных функций завершена, результат будет возвращен, и необходимо использовать Promise.race() .
11.
Вы можете опровергнуть приведенные выше десять пунктов жалоб лидера. Если ваше опровержение обосновано, я опровергну его для вас на следующей встрече кода.
Кроме того, если в приведенном выше организованном содержании есть какие-либо ошибки, пожалуйста, исправьте их в комментариях. Большое спасибо.
Эта статья воспроизведена по адресу: https://juejin.cn/post/7016520448204603423
Автор: Hongchen Lianxin
[Рекомендации по соответствующему видеоуроку: веб-интерфейс]
Выше вы сказали, что можете использовать ES6, а затем используйте его быстро! Для получения более подробной информации, пожалуйста, обратите внимание на другие статьи по теме на китайском сайте php!
