После многих лет написания кода JavaScript, может ли ваш код быть более элегантным? Ниже приведены некоторые предложения по оптимизации кода. Вы можете ссылаться на них по мере необходимости, надеясь оказать вам некоторую помощь.
1. Рекомендуется использовать конгруэнтные и неконгруэнтные операторы
ECMAScript предоставляет два набора операторов: равенство и неравенство (== и !=) — преобразование перед сравнением, и равенство и неравенство (=== и !==) — только сравнение без преобразования
Операторы равенства и неравенства ничем не отличаются от операторов равенства и неравенства, за исключением того, что операнды не преобразуются перед сравнением.
Следующим образом:
var result1 = ("66" == 66); //true，因为转换后相等
var result2 = ("66" === 66); //false，因为不同的数据类型不相等
Помните: null == undefined вернет true, потому что они похожи, но null === undefined вернет значение. возвращает false, потому что это разные типы значений.
Поскольку операторы равенства и неравенства имеют проблемы с преобразованием типов, для сохранения целостности типов данных в коде рекомендуется использовать операторы равенства и неравенства. Если тип переменной уже определен, то использовать == вообще не нужно, если тип неясен, то преобразование нужно сделать вручную:
var code = "5";
if(parseInt(code) === 0){
}
2. Не рекомендуется изменять тип значения, хранящегося в переменной
Переменные имеют свободный тип, и так называемый свободный тип может использоваться для хранения данных любого типа. Другими словами, каждая переменная является просто заполнителем для хранения значения; такой код:
var message = "hi";
Инициализация такой переменной не помечает ее как строку; инициализация так же проста, как присвоение значения переменной. Следовательно, можно изменить тип значения одновременно со значением переменной:
var message = "hi";
message = 100; // 有效，但不推荐
Это производит впечатление слишком произвольного, а читабельность слишком плохой, в то же время движок js также требует дополнительного времени для компиляции, что не способствует производительности. Рекомендуемый способ — присвоить переменной значение по умолчанию при ее инициализации:
var message = "hi",
found = false,
age = 29
3. Избегайте расширения цепочки областей видимости
Расширение цепочки областей видимости происходит в двух случаях:
- блок catch оператора try-catch;
- с заявлением
Оба этих оператора добавляют переменный объект в начало цепочки областей видимости. Для оператора with добавляет указанный объект в цепочку областей видимости. Для операторов catch создается новый объект переменной, который содержит объявление сгенерированного объекта ошибки.
Как мы знаем, разрешение идентификаторов — это процесс поиска идентификаторов по одному уровню за раз по всей цепочке областей видимости. Процесс поиска всегда начинается в начале цепочки областей и работает в обратном направлении, пока не будет найден идентификатор, поэтому чем длиннее цепочка областей, тем медленнее поиск.
4. Переменные кэша
Например, длина массива:
for (let j = 0; j < area.geo.length; j++) {
}
Это должно быть записано в переменную, чтобы избежать поиска этого объекта и вычисления длины каждый раз, когда цикл
let geoLength = area.geo.length
for (let j = 0; j < geoLength; j++) {
}
Кроме того, переменные кеша можно оптимизировать для dom:
let odiv=document.getElementById('content');
//接下来是一些操作dom的代码。。。
Это позволяет избежать многократных поисков элементов DOM, что может повысить эффективность кода.
5. Об операторе if
Оператор, который обычно используется в большинстве языков программирования, — это оператор if.Вот три предложения:
(1) Всегда используйте кодовые блоки
Общепринятая передовая практика в отрасли — всегда использовать блоки кода, даже если нужно выполнить только одну строку кода. Потому что это устраняет недоразумения, которые в противном случае могли бы затруднить определение того, какие операторы выполняются в разных условиях.
if (i > 25)
alert("Greater than 25."); // 单行语句
else {
alert("Less than or equal to 25."); // 代码块中的语句
}
(2) Замените простой if-else тройным оператором
Например, простая функция:
lightBackground () {
if(this.mode === 'dark'){
return normal
}else {
return light
}
}
Написанное с тернарным оператором не будет выглядеть раздутым и даст людям очень ясное ощущение.
lightBackground () {
return this.mode === 'dark' ? 'normal' : 'light'
}
Исходным пяти строкам кода теперь требуется только одна строка, а эффективность выполнения кода также выше, чем раньше.
(3) Оптимизация вложенных условных операторов
Например, есть много операторов if-else:
if (index === 0) {
fn0();
} else if (index === 1) {
fn1();
} else if (index === 2) {
fn2();
} else if (index === 3) {
fn3();
}
Вы можете использовать операторы switch для оптимизации кода. По сути, оператор switch предназначен для того, чтобы избавить разработчика от написания кода, подобного приведенному выше.
switch(index){
case 0:
fn0();
break;
case 1:
fn(1);
break;
case 2:
fn2();
break;
case 3:
fn3();
break;
default:
fn()
}
Или вместо этого используйте методы объекта:
let idxObj = {
0: fn0,
1: fn1,
2: fn2,
3: fn3,
4: fn
}
if(num in idxObj){
idxObj[num]()
}
6. Используйте операторы короткого замыкания с умом
Логические операции ИЛИ и логические И являются короткими, то есть если первый операнд может определить результат, то второй операнд не будет оцениваться.
(1) Мы можем использовать поведение логического ИЛИ, чтобы избежать присвоения нулевых или неопределенных значений переменным.
Например:
const hmsr = this.$route.query.hmsr || query.hmsr || ''
Операторы присваивания в программах ECMAScript часто используют этот шаблон.
(2) Логическое И позволяет избежать ошибок при вызове неопределенных свойств.
watch: {
carList (to) {
this.swiper && this.swiper.slideTo(0)
},
},
7. Оптимизация функций
В разработке JavaScript функции в большинстве случаев неотделимы друг от друга.Что касается функций, вот несколько советов:
(1) Название функции
Имена функций должны начинаться с глагола, такого как getName(). Функции, которые возвращают логические значения, обычно начинаются с is, например isEnable().
(2) Укажите возвращаемый тип функции
Например такой код:
function getPrice(num){
if(num < 0) return "";
else return num * 20;
}
Иногда эта функция возвращает пустую строку, а иногда возвращает целое число. Хотя запись таким образом не сообщит об ошибке, она может таить в себе скрытые опасности для кода. Если вы случайно выполните операцию, вы получите NaN в случае возврата строки, o(╯□╰)o. . Рекомендуемое написание:
function getPrice(num){
if(num < 0) return -1;
else return num * 20;
}
Такой способ написания позволяет избежать ненужных ошибок и делает функцию более понятной и менее запутанной.
(3) О параметрах функции
В реальной разработке передача параметров в функции неизбежна, но если функции нужно передать большой набор параметров, это кажется очень страшным.Люди, которые используют эту функцию, должны не только понимать значение каждого параметра, но и уметь не ошибетесь, когда вы зарегистрируетесь.
Таким образом, мы должны максимально уменьшить параметры функции, поместить все параметры в объект, а затем передать объект в функцию.
8. Некоторые варианты использования ES6
Использование ES6 в вашем коде может сделать ваш код более лаконичным, таких конечно много. Вот некоторые из наиболее часто используемых:
(1) Обратные кавычки (`)
Строки шаблона — это расширенные строки, обозначаемые обратными кавычками (`). Его можно использовать как обычную строку, его также можно использовать для определения многострочных строк или для встраивания переменных в строки.
На традиционном языке JavaScript шаблон вывода обычно записывается так:
citys="<li value="+item.xzqh+">"+item.name+"</li>";
Чтобы встроить переменные в строку шаблона, вам нужно написать имя переменной в ${}.
citys=`<li value="${xzqh}">${name}</li>`;
Используйте строки шаблона для представления многострочных строк, и все пробелы и отступы будут сохранены в выходных данных.
$('#list').html(`
<ul>
<li>first</li>
<li>second</li>
</ul>
`);
В приведенном выше коде зарезервированы пробелы и новые строки всех строк шаблона, например, перед тегом ul будет новая строка.
(2) Функция стрелки
Стрелочные функции делают выражения более краткими.
const isEven = n => n % 2 === 0;
const square = n => n * n;
Приведенный выше код использует всего две строки для определения двух простых служебных функций. Если вы не используете стрелочные функции, это может занять несколько строк, и это не так бросается в глаза, как сейчас.
Одним из применений стрелочных функций является упрощение функций обратного вызова.
// 正常函数写法
[1,2,3].map(function (x) {
return x * x;
});
// 箭头函数写法
[1,2,3].map(x => x * x);
Java использует стрелку ->, C# использует ту же стрелку, что и JS: =>, эта стрелка называется «лямбда-оператором».
Говорят, что лямбда-выражения (стрелочные функции) являются наиболее кратким способом определения функций, почти не содержащим избыточности в синтаксисе. Из-за слабого типа JS лямбда-выражения в JS более лаконичны, чем в C# и Java.
(3) Используйте класс ES6
Хотя принципиальной разницы между классом ES6 и прототипом функции нет, оба используют прототип. Класс может реализовать наследование через ключевое слово extends, что гораздо понятнее и удобнее, чем реализация наследования путем изменения цепочки прототипов.
Например:
function Person(name, age){
this.name = name;
this.age = age;
}
Person.prototype.addAge = function(){
this.age++;
};
Person.prototype.setName = function(name){
this.name = name;
};
Код выглядит кратко и легко понять, если вы используете классы
class Person{
constructor(name, age){
this.name = name;
this.age = age;
}
addAge(){
this.age++;
}
setName(name){
this.name = name;
}
}
Суммировать
Выше приведены некоторые советы по тому, как сделать код более элегантным. Конечно, речь идет не только о том, чтобы выглядеть элегантно. Иногда одно или два предложения кода, которые вы пишете наугад, могут по-разному влиять на производительность, большую или маленькую. Поэтому рекомендуется писать в соответствии с определенными спецификациями.Более краткий и эффективный код является не только отражением личных способностей, ваша команда также должна написать вам, чтобы написать элегантный и эффективный код для повышения общей эффективности команды.