JavaScript-это язык программирования мирового класса, который можно использовать для разработки веб-разработки, разработки мобильных приложений (PhoneGap, Appcelerator), разработки на стороне сервера (node.js и wakanda) и т. Д. JavaScript также является первым языком для многих новичков для входа в мир программирования. Его можно использовать для отображения простых ящиков в браузере или для управления роботом через Nodebot или Noderuino. Разработчики, которые могут написать хорошо структурированный и эффективный код JavaScript, теперь являются самыми востребованными людьми на рынке найма.
В этой статье я поделюсь некоторыми советами, советами и лучшими практиками Javascript. За исключением некоторых, оба являются двигателем JavaScript для браузера и интерпретатором JavaScript на стороне сервера.
Пример кода в этой статье прошел тест на последней версии Google Chrome 30 (V8 3.20.17.15).
1. Обязательно используйте ключевое слово var при назначении значения переменной в первый раз.
Если переменная не объявлена и напрямую присваивается значению, она будет использоваться в качестве новой глобальной переменной по умолчанию. Старайтесь не использовать глобальные переменные.
2. Использовать === Заменить ==
Операторы == и! = Автоматически преобразуют тип данных, если это необходимо. Но === И! == не будет, они будут сравнивать значения и типы данных одновременно, что также делает их быстрее, чем == и! =.
Кода -копия выглядит следующим образом:
[10] === 10 // является ложным
[10] == 10 // это правда
'10' == 10 // это правда
'10' === 10 // ложно
[] == 0 // это правда
[] === 0 // является ложным
'' == false // это правда, но истинно == "a"
'' === false // является ложным
3. Логические результаты недостаточных, нулевых, 0, ложных, НАН и пустых струн - это ложные
4. Используйте полуколоны в конце линии
На практике лучше всего использовать полуколоны. Можно забыть написать их. В большинстве случаев интерпретатор JavaScript будет автоматически добавлен. Для того, почему вы хотите использовать полуколон, вы можете ссылаться на правду о полуколонах в статье JavaScript.
5. Используйте конструктор объектов
Кода -копия выглядит следующим образом:
Функция Человека (FirstName, Lastname) {
this.firstname = FirstName;
this.lastName = lastName;
}
var saad = новый человек ("saad", "mousliki");
6. Будьте осторожны с TypeOF, экземпляром и конструктором
TypeOF: JavaScript Unary Operator, используемый для возврата исходного типа переменной в форме строки. Обратите внимание, что TypeOf NULL также вернет объект, и большинство типов объектов (массив, дата времени и т. Д.) Также вернет объект.
Конструктор: внутренние свойства прототипа, которые можно переписать через код
ExanceOf: оператор JavaScript, будет искать в конструкторе в цепочке прототипа, верните True, если найдено, в противном случае верните false, если false.
Кода -копия выглядит следующим образом:
var arr = ["a", "b", "c"];
TypeOf arr; // возвращать "объект"
Arr Antesmentof Array // true
arr.constructor (); // []
7. Используйте функции самообладания
Функции автоматически выполняются непосредственно после создания, что обычно называют самостоятельной анонимной функцией или выражением функции прямого вызова (немедленно вызванное выражение функции). Формат заключается в следующем:
Кода -копия выглядит следующим образом:
(function () {
// Код, размещенный здесь
}) ();
(функция (a, b) {
var result = a+b;
результат возврата;
}) (10,20)
8. Случайно получайте участников из массива
Кода -копия выглядит следующим образом:
var ements = [12, 548, 'a', 2, 5478, 'foo', 8852,, 'doe', 2145, 119];
var randomitem = elects [math.floor (math.random () * items.length)];
9. Получите случайные числа в указанном диапазоне
Эта функция особенно числовая при создании ложных данных для тестирования, таких как количество заработной платы в указанном диапазоне.
Кода -копия выглядит следующим образом:
var x = math.floor (math.random () * (max - min + 1)) + min;
10. Сгенерировать массив чисел от 0 до указанных значений
Кода -копия выглядит следующим образом:
var numbersArray = [], max = 100;
for (var i = 1; numberArray.push (i ++) <max;); // числа = [1,2,3 ... 100]
11. генерировать случайные буквенно -цифровые строки
Кода -копия выглядит следующим образом:
функция GeneraterAndomalphanum (Len) {
var rdmstring = "";
for (; rdmstring.length <len; rdmstring += math.random (). toString (36) .substr (2));
return rdmstring.substr (0, len);
12. Разрушение порядка массивов чисел
Кода -копия выглядит следующим образом:
var numbers = [5, 458, 120, -215, 228, 400, 122205, -85411];
numbers = number.sort (function () {return math.random () - 0,5});
/ * Массив чисел будет похож на [120, 5, 228, -215, 400, 458, -85411, 122205] */
Здесь мы используем встроенную функцию сортировки массива JavaScript. Лучший способ-реализовать его со специальным кодом (например, алгоритм Фишер-Йейтс). Вы можете обратиться к этому обсуждению на Stackoverflow.
13. Снимите пробелы из струн
Такие языки, как Java, C# и PHP, все реализуют функции специальных строк Despace, но нет такой вещи, как JavaScript. Вы можете использовать следующий код для создания функции TRIM для функции объекта строки:
Кода -копия выглядит следующим образом:
String.prototype.trim = function () {return this.replace (/^/s+|/s+$/g, "");};
Новый двигатель JavaScript уже имеет собственную реализацию trim ().
14. Добавление между массивами
Кода -копия выглядит следующим образом:
var array1 = [12, "foo", {name "Joe"}, -2458];
var array2 = ["doe", 555, 100];
Array.prototype.push.apply (Array1, Array2);
/ * Значение Array1 -[12, "foo", {name "joe"}, -2458, "doe", 555, 100] *//
15. Преобразовать объекты в массивы
Кода -копия выглядит следующим образом:
var argarray = array.prototype.slice.call (аргументы);
16. Убедитесь, что это число
Кода -копия выглядит следующим образом:
функция isnumber (n) {
возврат! isnan (parsefloat (n)) && isfinite (n);
}
17. Убедитесь, что это массив
Кода -копия выглядит следующим образом:
функция isarray (obj) {
return object.prototype.tostring.call (obj) === '[object array]';
}
Но если метод ToString () переписан, он не сработает. Вы также можете использовать следующий метод:
Кода -копия выглядит следующим образом:
Array.isarray (obj); // это новый метод массива
Если вы не используете кадр в своем браузере, вы также можете использовать экземпляр, но если контекст слишком сложный, вы также можете допустить ошибку.
Кода -копия выглядит следующим образом:
var myframe = document.createElement ('iframe');
document.body.appendchild (myframe);
var myarray = window.frames [window.frames.length-1] .Array;
var arr = new myarray (a, b, 10); // [a, b, 10]
// конструктор Myarray был потерян, результат экземпляра будет ненормальным
// конструкторы не могут быть разделены по кадрам
Arr экземпляр массива; // ЛОЖЬ
18. Получите максимальные и минимальные значения в массиве
Кода -копия выглядит следующим образом:
var numbers = [5, 458, 120, -215, 228, 400, 122205, -85411];
var maxinnumbers = math.max.apply (математика, числа);
var mininnumbers = math.min.apply (математика, числа);
19. Очистить массив
Кода -копия выглядит следующим образом:
var myarray = [12, 222, 1000];
myarray.length = 0; // myarray будет равен [].
20. Не удаляйте и не удаляйте элементы непосредственно из массива
Если вы используете удаление непосредственно на элементах массива, это на самом деле не удалено, а просто установите элемент как неопределенный. Сплайс должен использоваться для удаления элементов массива.
Не:
Кода -копия выглядит следующим образом:
var ements = [12, 548, 'a', 2, 5478, 'foo', 8852,, 'doe', 2154, 119];
items.length; // возврат 11
Удалить элементы [3]; // вернуть истину
items.length; // возврат 11
/ * Результат предметов [12, 548, "A", неопределенное × 1, 5478, "Foo", 8852, не определенный × 1, "Doe", 2154, 119] *///////
Что касается:
Кода -копия выглядит следующим образом:
var ements = [12, 548, 'a', 2, 5478, 'foo', 8852,, 'doe', 2154, 119];
items.length; // возврат 11
items.splice (3,1);
items.length; // возврат 10
/* Результат предметов [12, 548, "A", 5478, "foo", 8852, не определен × 1, "Doe", 2154, 119]
Вы можете использовать удаление при удалении свойств объекта.
21. Используйте атрибут длины, чтобы усечь массив
В предыдущем примере используйте атрибут длины, чтобы очистить массив, и вы также можете использовать его для усечения массива:
Кода -копия выглядит следующим образом:
var myarray = [12, 222, 1000, 124, 98, 10];
myarray.length = 4; // Myarray будет равен [12, 222, 1000, 124].
В то же время, если атрибут длины увеличивается, значение длины массива увеличится, и не определено будет использоваться в качестве нового элемента для заполнения. Длина - это недвижимость.
Кода -копия выглядит следующим образом:
myarray.length = 10; // новая длина массива 10
myarray [myarray.length - 1]; // неопределенный
22. Используйте логику или в условиях
Кода -копия выглядит следующим образом:
var foo = 10;
foo == 10 && dosomething (); // это то же самое, как если бы (foo == 10) dosomething ();
foo == 5 || dosomething (); // это то же самое, как если бы (foo! = 5) dosomething ();
Логично или также может использоваться для установки значений по умолчанию, таких как значения по умолчанию параметров функции.
Кода -копия выглядит следующим образом:
Функция Dosomething (arg1) {
arg1 = arg1 || 10; // arg1 будет иметь 10 в качестве значения по умолчанию, если оно еще не установлено
}
23. Сделайте метод функции Map ()
Кода -копия выглядит следующим образом:
var squares = [1,2,3,4] .map (function (val) {
вернуть val * val;
});
// квадраты будут равны [1, 4, 9, 16]
24. Держите указанное количество десятичных знаков
Кода -копия выглядит следующим образом:
var num = 2,443242342;
num = num.tofixed (4); // num будет равным 2.4432
Обратите внимание, что tofixec () возвращает строку, а не число.
25. Проблемы расчета плавающей запятой
Кода -копия выглядит следующим образом:
0,1 + 0,2 === 0,3 // является ложным
9007199254740992 + 1 // равна 9007199254740992
9007199254740992 + 2 // равен 9007199254740994
Почему? Потому что 0,1+0,2 равна 0,3000000000000000000004. Номера JavaScript построены в соответствии со стандартом IEEE 754 и представлены внутренне 64-битными десятичными десятичными. Для получения подробной информации, пожалуйста, обратитесь к тому, как цифры в JavaScript кодированы.
Эта проблема может быть решена с помощью toFixed () и toprecision ().
26. Проверьте свойства объекта через петлю в форме
Следующее использование может помешать ему войти в свойства прототипа объекта во время итерации.
Кода -копия выглядит следующим образом:
for (var name in object) {
if (object.hashownproperty (name)) {
// Сделай что -нибудь с именем
}
}
27. Оператор запятой
Кода -копия выглядит следующим образом:
var a = 0;
var b = (a ++, 99);
console.log (a); // а будет равен 1
console.log (b); // b равен 99
28. Временное хранение переменных, используемых для расчета и запроса
В селекторе jQuery весь элемент DOM может быть временно храниться.
Кода -копия выглядит следующим образом:
var navright = document.queryselector ('#right');
var navleft = document.queryselector ('#Left');
var navup = document.queryselector ('#up');
var navdown = document.queryselector ('#down');
29. Проверьте параметры, передаваемые в isfinite () заранее
Кода -копия выглядит следующим образом:
Isfinite (0/0); // ЛОЖЬ
Isfinite ("foo"); // ЛОЖЬ
Isfinite ("10"); // истинный
Isfinite (10); // истинный
Isfinite (неопределенная); // ЛОЖЬ
iSfinite (); // ЛОЖЬ
Isfinite (NULL); // Правда, обратите на это особое внимание
30. Избегайте использования отрицательных чисел в качестве индексации в массивах
Кода -копия выглядит следующим образом:
var numbersArray = [1,2,3,4,5];
var from = numbersarray.indexof ("foo"); // из -за -1 равен -1
numbersArray.splice (от, 2); // вернется [5]
Обратите внимание, что параметр индекса, передаваемый сплайке, не является отрицательным числом. Когда это отрицательное число, элемент будет удален с конца массива.
31. Используйте JSON для сериализации и десериализации
Кода -копия выглядит следующим образом:
var person = {name: 'saad', возраст: 26, отдел: {id: 15, имя: "r & d"}};
var stringFromperson = json.stringify (человек);
/ * Результат StringFromperson - «{" name ":" saad "," AGE ": 26," Отдел ": {" ID ": 15," name ":" R & D "}}" */
var personfromString = json.parse (StringFromperson);
/* Значение PersonfromString такое же, как и у человека объекта*/
32. Не используйте eval () или конструктор функции
Накладные расходы eval () и функциональных конструкторов высоки. Каждый раз, когда они вызываются, двигатель JavaScript должен преобразовать исходный код в исполняемый код.
Кода -копия выглядит следующим образом:
var func1 = новая функция (функциональный код);
var func2 = eval (functionCode);
33. Избегайте использования с ()
Используйте с (), чтобы добавить переменные в глобальную область. Поэтому, если есть и другие переменные с тем же именем, их легко запутать, и значение также будет перезаписано.
34. Не используйте для массивов
избегать:
Кода -копия выглядит следующим образом:
var sum = 0;
для (var i in arraynumbers) {
sum += arraynumbers [i];
}
Вместо:
Кода -копия выглядит следующим образом:
var sum = 0;
for (var i = 0, len = arraynumbers.length; i <len; i ++) {
sum += arraynumbers [i];
}
Другое преимущество заключается в том, что две переменные I и Len находятся в первом объявлении цикла FO, и обе будут инициализироваться только один раз, что быстрее, чем следующий метод написания:
Кода -копия выглядит следующим образом:
для (var i = 0; i <arraynumbers.length; i ++)
35. Используйте функции вместо строк при прохождении в setInterval () и settimeout ()
Если вы передадите строку в settimeout () и setInterval (), они будут конвертировать аналогичным образом в Eval, что определенно будет медленнее, так что не используйте:
Кода -копия выглядит следующим образом:
setInterval ('dosomethingPeriodically ()', 1000);
setTimeout ('dosomethingafterfiveseconds ()', 5000);
Вместо этого используйте:
Кода -копия выглядит следующим образом:
setInterval (dosomething periodicaly, 1000);
settimeout (dosomethingafterfiveseconds, 5000);
36. Используйте переключатель/корпус вместо большой стеки IF/ELSE
Судя по тому, что существует более двух филиалов, используйте переключатель/случай, чтобы быть быстрее, более элегантно, и более способствует организации кода. Конечно, если есть более 10 ветвей, не используйте переключатель/корпус.
37. Используйте цифровые интервалы в переключении/корпусе
Фактически, условия случая в переключении/случае также могут быть написаны так:
Кода -копия выглядит следующим образом:
функция getCategory (возраст) {
var Category = "";
Switch (true) {
Случай Инань (возраст):
категория = "не возраст";
перерыв;
случай (возраст> = 50):
категория = "Old";
перерыв;
случай (возраст <= 20):
категория = "детка";
перерыв;
по умолчанию:
категория = "молодой";
перерыв;
};
возвращение категории;
}
GetCategory (5); // вернется "детка"
38. Используйте объекты в качестве прототипов
Таким образом, вы можете создать новый объект на основе этого как параметра:
Кода -копия выглядит следующим образом:
Функция клона (объект) {
функция OneShotConstructor () {};
OneShotConstructor.prototype = Object;
вернуть новый OneShotConstructor ();
}
клон (массив) .prototype; // []
39. Функция преобразования поля HTML
Кода -копия выглядит следующим образом:
Функция recomehtml (text) {
var Replacements = {"<": "<", ">": ">", "&": "&", "/": "" "};
return text.replace (/[<> & "]/g, function (символ) {
возвращать замены [символ];
});
}
4.
Часть подъема в Try-Catch-Finally назначит исключения из переменной при выполнении, и эта переменная будет построена в новую переменную в рамках действия времени выполнения.
Не:
Кода -копия выглядит следующим образом:
var object = ['foo', 'bar'], i;
for (i = 0, len = object.length; i <len; i ++) {
пытаться {
// Сделайте что -нибудь, что бросает исключение
}
поймать (e) {
// обрабатывать исключение
}
}
Вместо:
Кода -копия выглядит следующим образом:
var object = ['foo', 'bar'], i;
пытаться {
for (i = 0, len = object.length; i <len; i ++) {
// Сделайте что -нибудь, что бросает исключение
}
}
поймать (e) {
// обрабатывать исключение
}
41. Обратите внимание на установку тайм -аута при использовании xmlhttprequests
Когда xmlhttprequests выполняется, когда в течение долгого времени нет ответа (например, проблемы с сетью и т. Д.), Соединение должно быть прервано. Эта работа может быть выполнена с помощью SetTimeout ():
Кода -копия выглядит следующим образом:
var xhr = new xmlhttprequest ();
xhr.onreadystatechange = function () {
if (this.readystate == 4) {
ClearTimeout (тайм -аут);
// Сделайте что -нибудь с данными ответа
}
}
var timeout = setTimeout (function () {
xhr.abort (); // обратный вызов звонка
}, 60*1000 /*Тайм -аут через минуту* /);
xhr.open ('Get', url, true);
xhr.send ();
В то же время следует отметить, что несколько запросов xmlhttprequests не должны быть инициированы одновременно.
42. Обработайте время ожидания WebSocket
Вообще говоря, после создания соединения WebSocket, если в течение 30 секунд не будет активности, сервер будет время отключить соединение, и брандмауэр также может снять подключение, которое не активно активно в единичном цикле.
Чтобы предотвратить это, пустое сообщение может быть отправлено на сервер каждый время. Это требование может быть достигнуто с помощью следующих двух функций, одна для поддержания активного соединения, а другая специально для окончания этого состояния.
Кода -копия выглядит следующим образом:
var timerid = 0;
функция keepAlive () {
Тайм -аут var = 15000;
if (websocket.readystate == websocket.open) {
websocket.send ('');
}
timerid = settimeout (Keepalive, Timeout);
}
функция CancelPeePAlive () {
if (timerid) {
Canceltimeout (Timerid);
}
}
Функция KeepAlive () может быть размещена в конце метода OnoPen () соединения WebSocket, и CancelBearBealive () может быть размещен в конце метода onClose ().
43. Обратите внимание на время, а оригинальный оператор быстрее, чем вызов функции. Используйте vanillajs
Например, в целом не так:
Кода -копия выглядит следующим образом:
var min = math.min (a, b);
A.Push (V);
Это можно использовать вместо этого:
Кода -копия выглядит следующим образом:
var min = a <b? A: B;
A [a.length] = v;
44. Обратите внимание на структуру кода во время разработки, проверки и сжатия кода JavaScript перед выходом в Интернет
Вы можете использовать такие инструменты, как JSLINT или JSMIN для проверки и сжатия кода.