Как вы знаете, JavaScript — язык программирования номер один в мире, это язык Интернета, язык мобильных гибридных приложений (таких как PhoneGap или Appcelerator), это язык серверной части (например, NodeJS или Wakanda), И есть много других реализаций. В то же время это также язык просвещения для многих новичков, поскольку он может не только отображать простое предупреждающее сообщение в браузере, но также может использоваться для управления роботом (с помощью nodebot или nodruino). Разработчики, которые владеют JavaScript и могут писать организованный, стандартизированный и эффективный код, стали востребованы на рынке талантов.
Следует отметить, что фрагменты кода в этой статье были протестированы в последней версии Google Chrome (версия 30), в которой используется движок JavaScript V8 (V8 3.20.17.15).
1 Не забудьте использовать ключевое слово var при первом присвоении значения переменной.
Присвоение значения неопределенной переменной приводит к созданию глобальной переменной. Избегайте глобальных переменных.
2 Используйте === вместо ==
Оператор == (или !=) автоматически выполняет преобразование типов, когда это необходимо. Операция === (или !==) не выполняет никакого преобразования. Он сравнивает значения и типы, а также считается быстрее, чем ==.
Скопируйте код кода следующим образом:
[10] === 10 // неверно
[10] == 10 // верно
'10' == 10 // верно
'10' === 10 // неверно
[] == 0 // верно
[] === 0 // неверно
'' == false // верно, но true == "a" неверно
'' === false // неверно
3. Используйте замыкания для реализации частных переменных
Скопируйте код кода следующим образом:
функция Person(имя, возраст) {
this.getName = function() { возвращаемое имя };
this.setName = функция (новое имя) {имя = новое имя};
this.getAge = function() {возвращает возраст};
this.setAge = функция (newAge) {возраст = newAge};
//Свойства, не инициализированные в конструкторе
вар оккупация;
this.getOccupation = функция () {возврат оккупации};
this.setOccupation = function(newOcc) { оккупация =
новыйОкк;
}
4. Используйте точку с запятой в конце оператора.
Хорошей практикой является использование точки с запятой в конце оператора. Вас не предупредят, если вы забудете его написать, потому что в большинстве случаев интерпретатор JavaScript добавит за вас точку с запятой.
5 Создайте конструктор объекта
Скопируйте код. Код выглядит следующим образом: function Person(firstName, LastName){.
это.ПервоеИмя = ПервоеИмя;
this.lastName = последнее имя;
}
var Saad = new Person("Саад", "Муслики");
6. Осторожно используйте typeof, instanceof и конструктор
Скопируйте код следующим образом: var arr = ["a", "b", "c"];
typeof arr // возвращаем «объект»
arr экземпляр массива // true
арр.конструктор(); //[]
7 Создайте функцию самовызова (Self-calling Function)
Это часто называют самовызываемой анонимной функцией или выражением IIFE-немедленно вызываемой функции. Это функция, которая автоматически выполняется сразу после создания, обычно следующим образом:
Скопируйте код кода следующим образом:
(функция(){
// некоторый приватный код, который будет выполнен автоматически
})();
(функция(а,б){
результат вар = a+b;
вернуть результат;
})(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() * (макс - мин + 1)) + мин;
10. Создайте массив чисел от 0 до установленного максимального значения.
Скопируйте код следующим образом: var NumbersArray = [], max = 100;
for( var i=1; NumbersArray.push(i++) < max;); // числа = [0,1,2,3 ... 100]
11. Создайте случайную буквенно-цифровую строку.
Скопируйте код. Код выглядит следующим образом: functiongenerateRandomAlphaNum(len) {.
вар rdmstring = "";
for(; rdmString.length < len; rdmString += Math.random().toString(36).substr(2));
вернуть rdmString.substr(0, len);
}
12 Перешифруйте массив чисел
Код копирования следующий: номера var = [5, 458, 120, -215, 228, 400, 122205, -85411];
Numbers = Numbers.sort(function(){ return Math.random() - 0,5});
/* номера массива будут равны, например, [120, 5, 228, -215, 400, 458, -85411, 122205] */
13 Функция обрезки струн
В Java, C#, PHP и многих других языках есть классическая функция обрезки, которая используется для удаления пробелов в строках, но ее нет в JavaScript, поэтому нам нужно добавить эту функцию в объект String.
Скопируйте код кода следующим образом:
String.prototype.trim = function(){return this.replace(/^/s+|/s+$/g, "");};//Удаляем начальные и конечные пробелы строки, исключая внутренние пробелы нить
14. Добавьте массив к другому массиву.
Скопируйте код следующим образом: var array1 = [12, "foo", {name: "Joe"}, -2458];
var array2 = ["Доу", 555, 100];
Array.prototype.push.apply(массив1, массив2);
/* array1 будет равен [12, "foo", {name "Joe"}, -2458, "Doe", 555, 100] */
//Фактически, concat может напрямую соединять два массива, но его возвращаемое значение — это новый массив. Вот прямое изменение на array1
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) === '[массив объектов]' ;
}
Примечание. Если метод toString() переопределен, вы не получите желаемых результатов, используя этот метод. Или вы можете использовать:
Скопируйте код кода следующим образом:
Array.isArray(obj); // Это новый метод массива.
Если вы не используете несколько фреймов, вы также можете использовать метод instanceof. Но если у вас несколько контекстов, вы получите неправильные результаты.
Скопируйте код следующим образом: var myFrame = document.createElement('iframe');
document.body.appendChild(myFrame);
вар myArray = window.frames[window.frames.length-1].Array;
вар arr = новый myArray(a,b,10); // [a,b,10];
//instanceof не будет работать корректно, myArray потеряет свой конструктор
// конструктор не является общим для разных фреймов
Арр экземпляра массива // ложь;
18 Получите максимальное или минимальное значение в массиве чисел
Код копирования следующий: номера var = [5, 458, 120, -215, 228, 400, 122205, -85411];
var maxInNumbers = Math.max.apply(Математика, числа);
вар minInNumbers = Math.min.apply(Математика, числа);
//Примечание переводчика: здесь используется метод function.prototype.apply для передачи параметров.
19 Очистить массив
Скопируйте код следующим образом: var myArray = [12, 222, 1000];
myArray.length = 0 // myArray будет равен [].
20 Не используйте команду delete для удаления элементов из массива.
Используйте сращивание вместо удаления, чтобы удалить элемент из массива. Использование удаления только заменяет исходный элемент на неопределенный и фактически не удаляет его из массива.
Не используйте это:
Скопируйте код следующим образом: var items = [12, 548,'a', 2, 5478, 'foo', 8852,, 'Doe', 2154, 119];
предметы.длина // возвращаем 11;
удалить элементы[3] // возвращаем истину
предметы.длина // возвращаем 11;
/* элементы будут равны [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];
предметы.длина // возвращаем 11;
предметы.splice(3,1);
предметы.длина // возвращаем 10;
/* элементы будут равны [12, 548, "a", 5478, "foo", 8852, undefined × 1, "Doe", 2154, 119] */
Метод delete следует использовать для удаления свойства объекта.
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 Используйте логическое И/ИЛИ для вынесения условных суждений
Скопируйте код кода следующим образом:
вар фу = 10;
foo == 10 && doSomething(); // Эквивалентно if (foo == 10) doSomething();
foo == 5 || doSomething(); // Эквивалентно if (foo != 5) doSomething();
Логическое И также можно использовать для установки значений по умолчанию для параметров функции.
Скопируйте код кода следующим образом:
функция doSomething(arg1){
Arg1 = arg1 || 10; // Если arg1 не установлен, Arg1 по умолчанию будет равен 10;
}
23. Используйте метод map() для перебора элементов массива.
Скопируйте код. Код выглядит следующим образом: var Squares = [1,2,3,4].map(function (val) {
вернуть значение * значение;
});
// квадраты будут равны [1, 4, 9, 16]
24 Округляет число до N десятичных знаков.
Скопируйте код следующим образом: var num =2.443242342;
num = num.toFixed(4); // число будет равно 2,4432;
25 Проблема с плавающей запятой
Скопируйте код следующим образом: 0,1 + 0,2 === 0,3 // неверно.
9007199254740992 + 1 // равно 9007199254740992
9007199254740992 + 2 // равно 9007199254740994
Почему это происходит? 0,1+0,2 равно 0,30000000000000004. Вам необходимо знать, что все числа JavaScript внутренне представлены как числа с плавающей запятой в 64-битном двоичном формате, что соответствует стандарту IEEE 754. Для получения дополнительной информации вы можете прочитать этот пост в блоге. Эту проблему можно решить, используя методы toFixed() и toPrecision().
26 При использовании for-in для просмотра внутренних свойств объекта обратите внимание на проверку свойств.
Следующий фрагмент кода позволяет избежать доступа к свойствам прототипа при переборе свойств объекта:
Скопируйте код кода следующим образом:
for (имя переменной в объекте) {
если (object.hasOwnProperty(имя)) {
// делаем что-то с именем
}
}
27 оператор запятая
Скопируйте код кода следующим образом:
вар а = 0;
вар б = (а++, 99);
console.log(a); // 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); // false;
isFinite("фу"); // ложь
isFinite("10"); // правда
isFinite(10); // правда
isFinite(не определено); // ложь;
isFinite(); // ложь
isFinite(ноль); // правда !!!
30. Избегайте отрицательных индексов в массивах
Скопируйте код следующим образом: var NumbersArray = [1,2,3,4,5];
var from = NumbersArray.indexOf("foo") ; // from равно -1
NumberArray.splice(from,2); // вернет [5]
Убедитесь, что параметр при вызове indexOf не отрицательный.
31 Сериализация и десериализация на основе JSON (сериализация и десериализация)
Скопируйте код следующим образом: var person = {имя: «Саад», возраст: 26, отдел: {ID: 15, имя: «НИОКР»} };
вар stringFromPerson = JSON.stringify(person);
/* stringFromPerson равно "{"name":"Saad","age":26,"department":{"ID":15,"name":"R&D"}}" */
вар personFromString = JSON.parse(stringFromPerson);
/* personFromString равен объекту person */
32. Избегайте использования eval() и конструкторов функций.
Использование конструкторов eval и Function — очень дорогостоящие операции, поскольку каждый раз они вызывают механизм сценариев для преобразования исходного кода в исполняемый код.
Скопируйте код следующим образом: var func1 = new Function(functionCode);
вар func2 = eval(functionCode);
33. Избегайте использования with()
Использование with() вставляет глобальную переменную. Таким образом, переменные с одинаковыми именами будут перезаписывать свои значения и вызывать ненужные проблемы.
34. Избегайте использования for-in для перебора массива.
Избегайте использования таких методов:
Скопируйте код следующим образом: var sum = 0;
для (вар я в arrayNumbers) {
сумма += arrayNumbers[i];
}
Лучший способ:
Скопируйте код следующим образом: var sum = 0;
for (var i = 0, len = arrayNumbers.length; i < len; i++) {
сумма += arrayNumbers[i];
}
Дополнительным преимуществом является то, что значения двух переменных i и len выполняются только один раз, что более эффективно, чем следующий метод:
Скопируйте код следующим образом: for (var i = 0; i < arrayNumbers.length; i++)
Почему? Потому что arrayNumbers.length вычисляется каждый раз, когда он зацикливается.
35. Передавайте функции вместо строк при вызове setTimeout() и setInterval().
Если вы передадите строку в функции setTimeout() или setInterval(), она будет проанализирована так же, как если бы вы использовали eval, что отнимает очень много времени.
Не используйте:
Скопируйте код кода следующим образом:
setInterval('doSomethingPeriodically()', 1000);
setTimeOut('doSomethingAfterFiveSeconds()', 5000)
Вместо этого используйте:
Скопируйте код кода следующим образом:
setInterval (doSomethingPeriodically, 1000);
setTimeOut (doSomethingAfterFiveSeconds, 5000);
36. Используйте операторы switch/case вместо длинных операторов if/else.
При оценке более чем двух ситуаций использование переключателя/регистра более эффективно и элегантно (проще организовать код). Но не используйте переключатель/случай, когда необходимо оценить более 10 ситуаций.
37 Используйте переключатель/регистр при оценке числового диапазона
В следующей ситуации разумно использовать переключатель/регистр для определения диапазона значений:
Скопируйте код кода следующим образом:
функция getCategory(возраст) {
категория вар = "";
переключатель (истина) {
случай NaN(возраст):
категория = "не возраст";
перерыв;
случай (возраст >= 50):
категория = «Старый»;
перерыв;
случай (возраст <= 20):
категория = «Детский»;
перерыв;
по умолчанию:
категория = «Молодой»;
перерыв;
};
категория возврата;
}
getCategory(5); // вернет «Ребенок»
//Как правило, для оценки числового диапазона более уместно использовать if/else. переключатель/корпус больше подходит для оценки определенных значений
38 Укажите объект-прототип для создаваемого объекта
Можно написать функцию, создающую объект с указанными параметрами в качестве прототипа:
Скопируйте код следующим образом: function clone(object) {
функция OneShotConstructor(){};
OneShotConstructor.prototype= объект;
вернуть новый OneShotConstructor();
}
клон(Массив).прототип; // []
39 Escape-функция HTML
Скопируйте код следующим образом: function escapeHTML(text) {
var replaces= {"<": "<", ">": ">","&": "&", "/"": """};
return text.replace(/[<>&"]/g, function(character) {
вернуть замены[символ];
});
}
40. Избегайте использования try-catch-finally внутри цикла.
Во время выполнения каждый раз, когда выполняется предложение catch, перехваченный объект исключения будет присвоен переменной, и в структуре try-catch-finally эта переменная будет создаваться каждый раз.
Избегайте писать так:
Скопируйте код следующим образом: var object = ['foo', 'bar'], i;
for (i = 0, len = object.length; i <len; i++) {
пытаться {
// делаем что-то, что вызывает исключение
}
поймать (е) {
//обработка исключения
}
}
Вместо этого используйте:
Скопируйте код следующим образом: var object = ['foo', 'bar'], i;
пытаться {
for (i = 0, len = object.length; i <len; i++) {
// делаем что-то, что вызывает исключение
}
}
поймать (е) {
//обработка исключения
}
41 Установите тайм-аут для XMLHttpRequests.
Если запрос XHR занимает много времени (например, из-за проблем с сетью), вам может потребоваться прервать запрос, а затем использовать setTimeout() с вызовом XHR.
Скопируйте код следующим образом: var xhr = new XMLHttpRequest ();
xhr.onreadystatechange = функция () {
если (this.readyState == 4) {
ClearTimeout (тайм-аут);
// делаем что-то с данными ответа
}
}
вар таймаут = setTimeout(функция () {
xhr.abort(); // обратный вызов ошибки
}, 60*1000 /* тайм-аут через минуту */ );
xhr.open('GET', URL, true);
xhr.отправить();
Кроме того, как правило, вам следует полностью избегать синхронных запросов Ajax.
42 Обработка тайм-аутов WebSocket
Обычно после создания соединения WebSocket сервер отключит ваше соединение через 30 секунд, если вы неактивны. Брандмауэры также отключаются после определенного периода бездействия.
Чтобы предотвратить проблемы с тайм-аутом, вам может потребоваться периодически отправлять на сервер пустые сообщения. Для этого вы можете добавить в свой код следующие две функции: одну для поддержания соединения и одну для отмены удержания соединения. С помощью этого метода вы можете решить проблему тайм-аута.
Используйте идентификатор таймера:
Скопируйте код следующим образом: var timerID = 0;
функция KeepAlive() {
вар тайм-аут = 15000;
если (webSocket.readyState == webSocket.OPEN) {
webSocket.send('');
}
timerId = setTimeout (keepAlive, тайм-аут);
}
функция cancelKeepAlive() {
если (timerId) {
cancelTimeout (идентификатор таймера);
}
}
Метод KeepAlive() следует добавить в конец метода onOpen() соединения webSocket, а метод cancelKeepAlive() — в конец метода onClose().
43 Имейте в виду, что примитивные операторы всегда более эффективны, чем вызовы функций. Используйте vanillaJS.
Например, не используйте:
Скопируйте код. Код выглядит следующим образом: var min = Math.min(a,b);
А.push(v);
Вместо этого используйте:
Скопируйте код следующим образом: var min = a < b ab?
А[А.длина] = v;
44 Не забывайте использовать инструменты очистки кода при написании кода . Прежде чем выходить в Интернет, используйте JSLint и инструменты сжатия кода (минификации) (например, JSMin). «Инструмент экономии времени: инструмент украшения и форматирования кода»
45 JavaScript невероятен.
Подвести итог
Я знаю, что существует множество других советов, приемов и передовых практик, поэтому, если у вас есть что-то еще, что вы хотели бы добавить или оставить отзыв или исправления к тем, которыми я поделился, дайте мне знать в комментариях.