1. Обязательно используйте ключевое слово var впервые как переменное назначение
Если переменная не объявляется и назначена напрямую напрямую, она будет использоваться в качестве новой глобальной переменной по умолчанию, и использование глобальных переменных следует избегать как можно больше.
2. === == заменено
Операторы == и != при необходимости автоматически преобразуют типы данных. Но === и !== нет, они сравнивают значения и типы данных одновременно, что также делает их быстрее, чем == и !=.
[10] === 10 // is false
[10] == 10 // is true
'10' == 10 // is true
'10' === 10 // is false
[] == 0 // is true
[] === 0 // is false
'' == false // is true but true == "a" is false
'' === false // is false
Логический результат 3. подчеркнуто, ноль, 0, ложь, NaN, пустая строка ложна
4. Используйте точки с запятой в конце строк
На практике лучше всего использовать точку с запятой, ее можно забыть написать, в большинстве случаев интерпретатор JavaScript добавит ее автоматически. О том, почему следует использовать точки с запятой, см. в статье Правда о точках с запятой в JavaScript.
5. Использование конструктора объектов
function Person(firstName, lastName){
this.firstName = firstName;
this.lastName = lastName;
}
var Saad = new Person("Saad", "Mousliki");
6. Будьте осторожны с typeof, instanceof и конструктором
typeof: унарный оператор JavaScript, используемый для возврата исходного типа переменной в виде строки. Обратите внимание, что typeof null также возвращает объект, и большинство типов объектов (массив, массив, время, дата и т. д.) также возвращают объект. конструктор: внутреннее свойство прототипа, может быть переопределено кодом instanceof: оператор JavaScript, будет искать в конструкторе в цепочке прототипов, возвращать true, если найден, иначе возвращать false
var arr = ["a", "b", "c"];
typeof arr; // 返回 "object"
arr instanceof Array // true
arr.constructor(); //[]
7. Используйте самовызывающиеся функции
Функции автоматически выполняются сразу после создания, обычно называемые самовызываемой анонимной функцией или выражением немедленно вызываемой функции. Формат следующий:
(function(){
// 置于此处的代码将自动执行
})();
(function(a,b){
var result = a+b;
return result;
})(10,20)
8. Получить случайные элементы из массива
var items = [12, 548 , 'a' , 2 , 5478 , 'foo' , 8852, , 'Doe' , 2145 , 119];
var randomItem = items[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; numbersArray.push(i++) < max;); // numbers = [1,2,3 ... 100]
11. Генерировать случайную буквенно-цифровую строку
function 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 = numbers.sort(function(){ return Math.random() - 0.5});
/* numbers 数组将类似于 [120, 5, 228, -215, 400, 458, -85411, 122205] */
Здесь используется встроенная в JavaScript функция сортировки массивов. Лучше реализовать ее с помощью специализированного кода (например, алгоритма Фишера-Йейтса). См. это обсуждение на StackOverFlow.
13. Строка для удаления пробелов
В таких языках, как Java, C# и PHP, реализована специальная функция удаления пробела из строки, но в JavaScript такой функции нет.Вы можете использовать следующий код для работы функции обрезки для объекта String:
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(arguments);
16. Проверьте, является ли это числом
function isNumber(n){
return !isNaN(parseFloat(n)) && isFinite(n);
}
17. Проверьте, является ли это массивом
function isArray(obj){
return Object.prototype.toString.call(obj) === '[object Array]' ;
}
Но если метод toString() переопределен, он работать не будет. Вы также можете использовать следующие методы:
Array.isArray(obj); // its a new Array method
Если в браузере нет фрейма, то можно использовать instanceof, но если слишком сложный контекст, то тут может быть ошибка.
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 的构造器已经丢失，instanceof 的结果将不正常
// 构造器是不能跨 frame 共享的
arr instanceof Array; // false
18. Получить максимальный и минимальный массив
var numbers = [5, 458 , 120 , -215 , 228 , 400 , 122205, -85411];
var maxInNumbers = Math.max.apply(Math, numbers);
var minInNumbers = Math.min.apply(Math, numbers);
var myArray = [12 , 222 , 1000 ];
myArray.length = 0; // myArray will be equal to [].
20. Не удаляйте и не удаляйте элементы непосредственно из массива.
Если вы используете удаление непосредственно для элемента массива, оно на самом деле не удаляет его, а просто устанавливает для элемента значение undefined. Для удаления элемента массива следует использовать сращивание. Не делайте:
var items = [12, 548 ,'a' , 2 , 5478 , 'foo' , 8852, , 'Doe' ,2154 , 119 ];
items.length; // return 11
delete items[3]; // return true
items.length; // return 11
/* items 结果为 [12, 548, "a", undefined × 1, 5478, "foo", 8852, undefined × 1, "Doe", 2154, 119] */
Вместо:
var items = [12, 548 ,'a' , 2 , 5478 , 'foo' , 8852, , 'Doe' ,2154 , 119 ];
items.length; // return 11
items.splice(3,1) ;
items.length; // return 10
/* items 结果为 [12, 548, "a", 5478, "foo", 8852, undefined × 1, "Doe", 2154, 119]
delete может использоваться для удаления свойств объекта.
21. Обрезать массив, используя свойство длины
Свойство length использовалось для очистки массива в предыдущем примере, но его также можно использовать для усечения массива:
var myArray = [12 , 222 , 1000 , 124 , 98 , 10 ];
myArray.length = 4; // myArray will be equal to [12 , 222 , 1000 , 124].
В то же время, если свойство length сделать больше, значение длины массива будет увеличиваться, и для заполнения новых элементов будет использоваться значение undefined. length является перезаписываемым свойством.
myArray.length = 10; // the new array length is 10
myArray[myArray.length - 1] ; // undefined
22. Используйте логическое И или в условиях
var foo = 10;
foo == 10 && doSomething(); // is the same thing as if (foo == 10) doSomething();
foo == 5 || doSomething(); // is the same thing as if (foo != 5) doSomething();
Логическое или также может использоваться для установки значений по умолчанию, таких как значения по умолчанию для параметров функции.
function doSomething(arg1){
arg1 = arg1 || 10; // arg1 will have 10 as a default value if it’s not already set
}
23. Сделайте так, чтобы метод функции map() зацикливался на данных.
var squares = [1,2,3,4].map(function (val) {
return val * val;
});
// squares will be equal to [1, 4, 9, 16]
24. Сохраняйте указанное количество знаков после запятой
var num =2.443242342;
num = num.toFixed(4); // num will be equal to 2.4432
Обратите внимание, что toFixec() возвращает строку, а не число.
25. Проблемы с вычислениями с плавающей запятой
0.1 + 0.2 === 0.3 // is false
9007199254740992 + 1 // is equal to 9007199254740992
9007199254740992 + 2 // is equal to 9007199254740994
Зачем? Потому что 0,1+0,2 равно 0,300000000000000004. Числа JavaScript создаются в соответствии со стандартом IEEE 754 и внутренне представлены 64-битными десятичными числами с плавающей запятой.Подробнее см. в разделе Как числа кодируются в JavaScript.
Эту проблему можно решить, используя toFixed() и toPrecision().
Проверка свойств объекта через цикл for-in
Следующее использование может предотвратить ввод свойства прототипа объекта при итерации.
for (var name in object) {
if (object.hasOwnProperty(name)) {
// do something with name
}
}
27. Оператор запятой
var a = 0;
var b = ( a++, 99 );
console.log(a); // a will be equal to 1
console.log(b); // b is equal to 99
28. Временно хранить переменные для расчетов и запросов
В jQuery Selector вы можете временно хранить все элементы 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) ; // false
isFinite("foo"); // false
isFinite("10"); // true
isFinite(10); // true
isFinite(undefined); // false
isFinite(); // false
isFinite(null); // true，这点当特别注意
30. Избегайте использования отрицательных чисел в качестве индексов в массивах.
var numbersArray = [1,2,3,4,5];
var from = numbersArray.indexOf("foo") ; // from is equal to -1
numbersArray.splice(from,2); // will return [5]
Обратите внимание, что параметр index, передаваемый в splice, не должен быть отрицательным, если он отрицательный, элемент будет удален из конца массива.
31. Сериализация и десериализация с помощью JSON
var person = {name :'Saad', age : 26, department : {ID : 15, name : "R&D"} };
var stringFromPerson = JSON.stringify(person);
/* stringFromPerson 结果为 "{"name":"Saad","age":26,"department":{"ID":15,"name":"R&D"}}" */
var personFromString = JSON.parse(stringFromPerson);
/* personFromString 的值与 person 对象相同 */
32. Не используйте eval() или конструкторы функций
Накладные расходы eval() и конструктора функций (конструктор функций) велики, и движок JavaScript должен преобразовывать исходный код в исполняемый код каждый раз, когда он вызывается.
var func1 = new Function(functionCode);
var func2 = eval(functionCode);
33. Избегайте использования с ()
Использование with() может добавить переменные в глобальную область видимости, поэтому, если есть другие переменные с таким же именем, легко запутаться, и значение будет перезаписано.
34. Не используйте for-in с массивами
избегать:
var sum = 0;
for (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 находятся в первом объявлении цикла for, и они будут инициализированы только один раз, что быстрее, чем следующий способ записи:
for (var i = 0; i < arrayNumbers.length; i++)
35. Используйте функции вместо строк при переходе к setInterval() и setTimeout()
Если вы передадите строку в setTimeout() и setInterval(), они будут преобразованы аналогично eval, что определенно будет медленнее, поэтому не используйте:
setInterval('doSomethingPeriodically()', 1000);
setTimeout('doSomethingAfterFiveSeconds()', 5000);
Вместо этого используйте:
setInterval(doSomethingPeriodically, 1000);
setTimeout(doSomethingAfterFiveSeconds, 5000);
36. Используйте switch/case вместо связки if/else
Быстрее использовать switch/case, когда предполагается, что ветвей больше двух, а также это более элегантно и удобно для организации кода.Конечно, если ветвей больше 10, не используйте переключатель/корпус.
37. Использование числовых диапазонов в switch/case
На самом деле условие case в switch/case тоже можно записать так:
function getCategory(age) {
var category = "";
switch (true) {
case isNaN(age):
category = "not an age";
break;
case (age >= 50):
category = "Old";
break;
case (age <= 20):
category = "Baby";
break;
default:
category = "Young";
break;
};
return category;
}
getCategory(5); // 将返回 "Baby"
38. Использование объектов в качестве прототипов объектов
Ниже этого вы можете дать объект в качестве параметра для создания нового объекта в качестве прототипа:
function clone(object) {
function OneShotConstructor(){};
OneShotConstructor.prototype = object;
return new OneShotConstructor();
}
clone(Array).prototype ; // []
39. Функция преобразования полей HTML
function escapeHTML(text) {
var replacements= {"<": "<", ">": ">","&": "&", "\"": """};
return text.replace(/[<>&"]/g, function(character) {
return replacements[character];
});
}
40. Не используйте внутри циклов try-catch-finally
Часть catch try-catch-finally присваивает исключение переменной во время выполнения, и эта переменная конструируется как новая переменная в области выполнения. Не делайте:
var object = ['foo', 'bar'], i;
for (i = 0, len = object.length; i <len; i++) {
try {
// do something that throws an exception
}
catch (e) {
// handle exception
}
}
Вместо:
var object = ['foo', 'bar'], i;
try {
for (i = 0, len = object.length; i <len; i++) {
// do something that throws an exception
}
}
catch (e) {
// handle exception
}
Когда XMLHttpRequests выполняется, когда нет ответа в течение длительного времени (например, проблемы с сетью и т. д.), соединение должно быть прервано, что можно сделать с помощью setTimeout():
var xhr = new XMLHttpRequest ();
xhr.onreadystatechange = function () {
if (this.readyState == 4) {
clearTimeout(timeout);
// do something with response data
}
}
var timeout = setTimeout( function () {
xhr.abort(); // call error callback
}, 60*1000 /* timeout after a minute */ );
xhr.open('GET', url, true);
xhr.send();
В то же время следует отметить, что не следует инициировать несколько запросов XMLHttpRequests одновременно.
42. Обработка тайм-аутов для WebSockets
Обычно после создания соединения WebSocket, если в течение 30 секунд не происходит никаких действий, сервер прерывает соединение по тайм-ауту, и брандмауэр также может таймаутить соединение, в котором нет активности за единицу периода.
Чтобы этого не произошло, вы можете через регулярные промежутки времени отправлять пустое сообщение на сервер. Это требование может быть достигнуто с помощью следующих двух функций: одна для поддержания соединения в рабочем состоянии, а другая специально для завершения этого состояния.
var timerID = 0;
function keepAlive() {
var timeout = 15000;
if (webSocket.readyState == webSocket.OPEN) {
webSocket.send('');
}
timerId = setTimeout(keepAlive, timeout);
}
function cancelKeepAlive() {
if (timerId) {
cancelTimeout(timerId);
}
}
Функция keepalive () может быть помещена в конце метода ONOPEN () соединения Websocket, и отменить ускорение () можно разместить в конце метода 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). Примечание: UglifyJS (GitHub.com/Секретарь, о, о, УГ в…)
45. JavaScript широк и глубок, вот несколько хороших учебных ресурсов
Код Академии Ресурсы:woohoo.code CA key.com/tracks/java…
Красноречивый JavaScript от Марджина Хавербекекса:eloquentjavascript.net/
Расширенный JavaScript от Джона Резига:ejohn.org/apps/learn/
наконец
Добро пожаловать, чтобы обратить внимание на мою общедоступную учетную запись WeChat [Hot Front End], чтобы общаться и расти вместе.