Сам JavaScript можно рассматривать как простой язык, но мы постоянно улучшаем его с мудростью и гибкими закономерностями. Вчера мы применили эти шаблоны в фреймворк JavaScript, и сегодня эти структуры снова заправляют наши веб -приложения. Многие начинающие разработчики привлекают различные мощные рамки JavaScript, но они игнорируют практические навыки JavaScript, которые обширны и обширны за рамки. Эта статья даст вам всеобъемлющее введение в точки знаний.
1. Работа целых чисел JS
Используйте | 0 и ~~ для преобразования плавающей точки в целые числа и быстрее, чем аналогичные Parseint и Math.Round, которые будут полезны при работе с такими эффектами, как пиксели и смещения анимации. Это сравнение производительности.
var foo = (12,4 / 4.13) | 0; // Результат 3var bar = ~~ (12.4/4.13); // Результат 3 - 3
Еще один маленький трюк! ! 2 восклицательные знаки, вы можете поговорить о значении и быстро преобразовать ее в логическое значение. Вы можете проверить это!
var eee = "eee"; alert (!! eee)
Возврат правда, что означает, что ему предшествует любому значению! ! Все могут быть равны истину. Если это значение изначально не является логическим значением или не является неопределенным, нулевым, 0, ложным, NAN, '', потому что неопределенные, нулевые, 0, ложные, NAN, «упомянутые, изначально они ложны, так что два добавляются! ! После этого это все еще Fasle.
2. Перепишите нативное предупреждение и запишите количество всплывающих ящиков
(function () {var oldAlert = window.alert, count = 0; window.alert = function (a) {count ++; oldAlert (a + "/n Вы называли Alert" + count + "times сейчас. Стоп, это зло!");};}) (); alert ("hello haorooms");3. Методы цифрового обмена не объявляют промежуточные переменные
При обмене двумя числами наш общий подход состоит в том, чтобы объявить промежуточную переменную, но сегодняшний подход довольно странный. Вам не нужно объявлять промежуточную переменную и посмотреть, как она реализована!
var a = 1, b = 2; a = [b, b = a] [0]; console.log ('a:'+a+', b:'+b); // Вывод A: 2, B: 1Как насчет этого, у этого метода есть новое чувство?
4. Все является объектом
В мире JavaScript все является объектом. В дополнение к нулевым и неопределенным, другие основные типы чисел, струны и логики имеют соответствующие объекты обертки. Одна особенность объекта заключается в том, что вы можете называть методы непосредственно на нем.
Для числовых основных типов это не удастся при попытке вызовать метод ToString на нем, но он не выйдет из строя после того, как будет заключена в скобки, а затем вызовет. Внутренняя реализация состоит в том, чтобы преобразовать основной тип в объект с соответствующим объектом обертки. Таким образом (1) .toString () эквивалентен новому числу (1) .toString (). Следовательно, вы действительно можете использовать основные типы чисел, строк, логических баллов и т. Д. В качестве объектов, просто обратите внимание на синтаксис, чтобы быть подходящими.
В то же время мы заметили, что цифры в JavaScript не разделены на плавающую точку и формируются. Все числа на самом деле являются типами плавучих точек, просто пропуская десятичную точку. Например, 1, который вы видите, можно записать как 1. Вот почему ошибка сообщается, когда вы пытаетесь 1. toString (), поэтому правильный способ написать это должен быть похож на следующее: 1..toString () или добавить скобки, как упомянуто выше. Цель кронштейнов здесь состоит в том, чтобы исправить анализатор JS и не рассматривать точку после 1 как десятичную точку. Внутренняя реализация, как упоминалось выше, преобразование 1. в объект с объектом обертки, а затем вызывает метод.
5. Деформация оператора IF
Когда вам нужно написать оператор IF, попробуйте еще один более простой метод, используя вместо этого логические операторы в JavaScript.
var day = (новая дата) .getDay () === 0; // традиционный оператор if if (day) {alert ('Сегодня воскресенье!Например, приведенный выше код получает сегодняшнюю дату, если это воскресенье, всплывающее окно, иначе ничего не будет сделано. Мы знаем, что в логических операциях есть короткий замыкание. Для логики и выражений, только в том случае, если оба верны, результат может быть правдой. Если переменная предыдущего дня считается ложной, то результат является ложным для всего выражения, поэтому последующее предупреждение не будет продолжено. Если предыдущий день верен, последующий код должен продолжать выполнять следующий код, чтобы определить подлинность всего выражения. Используя эту точку, эффект IF достигается.
Для традиционных операторов IF, если код корпуса выполнения превышает 1 оператор, требуется вьющиеся скобки и использование выражений запятой, любая полоса кода может быть выполнена без фигурных скобок.
if (contitoin) предупреждение (1), предупреждение (2), консоль.log (3);
6. Используйте ===, не ==
Оператор == (или! =) Автоматически выполнит преобразование типа при необходимости. Операция === (или! ==) не выполняет никакого преобразования. Он будет сравнивать значения и типы, а также считается лучше, чем == с точки зрения скорости.
[10] === 10 // является false [10] == 10 // IS true'10 '== 10 // IS true'10' == 10 // IS false [] == 0 // IS true [] === 0 // IS fals
7. Используйте закрытие для реализации личных переменных
Функция Person (имя, возраст) {this.getName = function () {return name; }; this.setName = function (newName) {name = newName; }; this.getage = function () {return Age; }; this.setage = function (newage) {age = newage; }; // атрибуты, которые не инициализированы в профессии конструктора VAR; this.getoccupation = function () {return Occountation; }; this.setoccupation = function (newocc) {ocppocation = newocc; };}8. Создать конструктор объекта
Функция человека (FirstName, LastName) {this.FirstName = FirstName; this.lastname = lastname;} var saad = new Person ("saad", "mousliki");9. Будьте осторожны в использовании TypeOF, экземпляра и конструктора
var arr = ["a", "b", "c"]; typeof arr; // return "объект" экземпляры Arr Array // truearr.constructor (); // []
10. Создать функцию самостоятельной работы
Это часто называют самостоятельной анонимной функцией или мгновенным выражением функции вызова. Это функция, которая автоматически выполняется сразу после создания, обычно следующим образом:
(function () {// Некоторый частный код, который будет выполнен автоматически}) (); (function (a, b) {var result = a+b; return result;}) (10,20)11. Получите случайный предмет из массива
var elects = [12, 548, 'a', 2, 5478, 'foo', 8852,, 'doe', 2145, 119]; var randomitem = elects [math.floor (math.random () * items.length)];
12. Получите случайное число в определенном диапазоне
Этот фрагмент очень полезен, когда вы хотите генерировать тестовые данные, такие как случайное значение заработной платы между минимальными и максимальными значениями.
var x = math.floor (math.random () * (max - min + 1)) + min;
13. Сгенерируйте массив чисел от 0 до максимального значения установки
var NumbersArray = [], max = 100; for (var i = 1; numbersarray.push (i ++) <max;); // Числа = [0,1,2,3 ... 100]
14. Сгенерировать случайную алфавитную строку.
функция GeneraterAndomalphanum (len) {var rdmstring = ""; for (; rdmstring.length <len; rdmstring += math.random (). toString (36) .substr (2)); return rdmstring.substr (0, len);} // вызовать метод Generaterandomalphanum (15);Пятнадцать. Разраститесь множеством чисел
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, -8541111111120520520520520520520520520520520520520520520520520520520520520520520, 5, 228, -215, 400, 458.16. Функция отделки строки
String.prototype.trim = function () {return this.replace (/^/s+|/s+$/g, "");};17. Добавить (добавить) массив к другому массиву
var array1 = [12, "foo", {name: "joe"}, -2458]; var array2 = ["doe", 555, 100]; array.prototype.push.apply (array1, array2);/ * Array1 будет равным [12, "foo", {name "joe"}, -1, 1, 5, 5, 5, 5, 5, 5,588, ".18. Преобразовать аргументы объекта в массив
var argarray = array.prototype.slice.call (аргументы); [Примечание переводчика: объект аргументов - это объект класса массива, но не настоящий массив]
19. Убедитесь, являются ли параметры числа (число)
Функция isnumber (n) {return! Isnan (parsefloat (n)) && isfinite (n);}20. Убедитесь, являются ли параметры массивами
Функция 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 теряет свой конструктор // конструктор, который не разделяется между экземпляром Framesarr of массива; // ЛОЖЬ[Примечание переводчика: есть много дискуссий о том, как судить массивы в Интернете, вы можете их Google. Эта статья написана подробно. 】
21. Получите максимальное или минимальное значение в массиве чисел
var numbers = [5, 458, 120, -215, 228, 400, 122205, -85411];
var maxinnumbers = math.max.apply (математика, числа);
var mininnumbers = math.min.apply (математика, числа);
[Примечание переводчика: вот навык для передачи параметров с использованием метода function.prototype.apply]
22. Очистить массив
var myarray = [12, 222, 1000]; myarray.length = 0; // myarray будет равен [].
23. Не используйте Delete для удаления элементов в массиве.
Используйте сплайс вместо удаления, чтобы удалить элемент в массиве. Использование Delete просто заменяет исходный элемент неопределенным, не на самом деле удаляет его из массива.
Не используйте этот метод:
var elects = [12, 548, 'a', 2, 5478, 'foo', 8852,, 'doe', 2154, 119]; item.length; // возвращать 11 -делетные элементы [3]; // вернуть trueItems.length; // Возврат 11/ * Предметы будут равны [12, 548, "A", неопределенным × 1, 5478, "Foo", 8852, неопределенным × 1, "Doe", 2154, 119] *//
И использовать:
var elects = [12, 548, 'a', 2, 5478, 'foo', 8852,, 'doe', 2154, 119]; item.length; // return 11items.splice (3,1); item.length; // Возврат 10/ * Предметы будут равны [12, 548, "A", 5478, "foo", 8852, не определен × 1, "Doe", 2154, 119] */////
Метод удаления должен использоваться для удаления свойства объекта.
24. Используйте длину, чтобы усечь массив
Подобно способу очистки массива выше, мы используем атрибут длины, чтобы усечь массив.
var myarray = [12, 222, 1000, 124, 98, 10]; myarray.length = 4; // Myarray будет равен [12, 222, 1000, 124].
Кроме того, если вы установите длину массива на большее значение, чем текущее, длина массива будет изменена, и будет добавлен новый неопределенный элемент для его заполнения. Длина массива не является свойством только для чтения.
myarray.length = 10; // новая длина массива 10myarray [myarray.length - 1]; // неопределенный
25. Используйте логические и/или для вынесения условных суждений
То же самое (пять), если утверждение деформации!
var foo = 10; foo == 10 && dosomething (); // эквивалентно if (foo == 10) dosomething (); foo == 5 || dosomething (); // эквивалентно if (foo! = 5) dosomething ();
Логично и также может использоваться для установки значений по умолчанию для параметров функции
Функция Dosomething (arg1) {arg1 = arg1 || 10; // Если arg1 не установлен, arg1 будет установлен на 10 по умолчанию}26. Используйте метод Map () для прохождения элементов в массиве
var squares = [1,2,3,4] .map (function (val) {return val * val;}); // квадраты будут равны [1, 4, 9, 16]27. округление числа и сохранить в десятичных местах
var num = 2,443242342; num = num.tofixed (4); // num будет равным 2.4432
28. Проблема с номером с плавающей запятой
0,1 + 0,2 === 0,3 // IS FALSE9007199254740992 + 1 // равна 90071992547409929007199254740992 + 2 //
Почему это происходит? 0,1+0,2 равняется 0,300000000000000000000004. Вы должны знать, что все цифры JavaScript внутренне являются внутренними номерами с плавающей запятой, выраженными в 64-битном двоичном языке, соответствующие стандарту IEEE 754. Для получения дополнительной информации вы можете прочитать этот пост в блоге. Вы можете использовать методы toFixed () и toprecision () для решения этой проблемы.
29. При использовании для прохождения внутренних свойств объекта, пожалуйста, проверьте свойства.
Следующий фрагмент кода может избежать доступа к свойствам прототипа при переселении свойства объекта.
for (var name in object) {if (object.hasownproperty (name)) {// сделать что -нибудь с именем}}Тридцать, оператор запятой
var a = 0; var b = (a ++, 99); console.log (a); // A будет равен 1 -nconsole.log (b); // b равен 99
31. Кэш переменные, которые необходимо рассчитать и запросить (расчет или запросы)
Для селекторов jQuery мы лучше кэшируем эти элементы DOM.
var navright = document.queryselector ('#right'); var navleft = document.queryselector ('#left'); var navup = document.queryselector ('#up'); var navdown = document.queryselector ('#down'); var navdown = document.queryselector ('#down');32. Проверьте параметры перед вызовом isfinite ()
Isfinite (0/0); // falseisfinite ("foo"); // falseisfinite ("10"); // trueisfinite (10); // trueiSfinite (undifined); // falseisfinite (); // falseisfinite (null); // истинный !!!33. Избегайте отрицательных индексов в массивах
var numbersArray = [1,2,3,4,5]; var from = numbersarray.indexof ("foo"); // из -за -1numbersarray.splice (от, 2); // вернется [5]Убедитесь, что параметры при вызова индекса не являются отрицательными.
34. сериализация и десериализация на основе JSON
var Person = {name: 'saad', возраст: 26, отдел: {id: 15, имя: "r & d"}}; var stringfromperson = json.stringify (человек);/ * stringFromperson равен "{" name ":" saad "," Age ": 26," Отдел ": {" ID ": 15,": "R & D"} ""/varr ". Json.parse (StringFromperson);/ * PersonfromString равен объекту человека */35. Избегайте использования конструкторов eval () и функций
Использование конструкторов Eval и функций очень дорого, потому что каждый раз, когда они вызывают двигатель скрипта, чтобы преобразовать исходный код в исполняемый код.
var func1 = новая функция (функциональный код); var func2 = eval (functionCode);
36. Избегайте использования с ()
Использование с () будет вставить глобальную переменную. Следовательно, переменные с тем же именем будут перезаписаны и вызывают ненужные проблемы.
37. Избегайте использования в корпусе, чтобы пересечь массив
Избегайте использования этого метода:
var sum = 0; for (var i в ArrayNumbers) {sum += ArrayNumbers [i];}Лучший способ:
var sum = 0; for (var i = 0, len = arraynumbers.length; i <len; i ++) {sum+= arraynumbers [i];}Дополнительным преимуществом является то, что значения переменных I и LEN выполняются только один раз, что будет более эффективным, чем следующий метод:
для (var i = 0; i <arraynumbers.length; i ++)
Почему? Потому что Arraynumbers.Length рассчитывается каждый раз, когда цикл цикл.
38. Пропустите функцию вместо строки при вызове settimeout () и setInterval ().
Если вы передаете строку в SetTimeout () или SetInterval (), строка будет проанализирована так, как если бы она использовалась с Eval, что очень много времени.
Не используйте:
SetInterval ('dosomethingPeriodically ()', 1000); setTimeout ('dosomethingafterfiveseconds ()', 5000)И использовать:
setInterval (dosomething periodicaly, 1000); settimeout (dosomethingafterfiveseconds, 5000);
39. Используйте операторы Switch/Case вместо длинного списка if/else
Судя по тому, что ситуация превышает 2, использование переключения/корпуса является более эффективным и более элегантным (легче организовать код). Но не используйте переключатель/случай, когда существует более 10 суждений.
40. Используйте переключатель/случай при оценке численного диапазона
В следующей ситуации разумно использовать Switch/Case для определения численного диапазона:
функция getCategory (age) {var Category = ""; Switch (true) {case Isnan (возраст): категория = "не возраст"; перерыв; случай (возраст> = 50): категория = "Old"; перерыв; Случай (возраст <= 20): категория = "ребенок"; перерыв; по умолчанию: категория = "Янг"; перерыв; }; return Category;} getCategory (5); // вернется "детка"[Примечание переводчика: вообще говоря, если/иначе будет более целесообразно для оценки численного диапазона. Переключение/дело более подходит для суждения о определении значения]
41. Укажите объект прототипа для созданного объекта
Можно написать функцию, чтобы создать объект, который определяет параметры как прототип:
Функция клона (объект) {function OneShotConstructor () {}; OneShotConstructor.prototype = Object; вернуть новый OneShotConstructor ();} клон (массив) .prototype; // []42. Функция Escape HTML
function recapehtml (text) {var Replacements = {"<": "<", ">": ">", "&": "&", "/" ":" ""}; return Text.Replace (/[<> & "]/g, function (символ) {return Replacements [символ];});}43. Избегайте использования Fycatch-Finally внутри петли
Во время выполнения, каждый раз, когда будет выполнена пункт о уловах, объект захваченного исключения будет назначен переменной, а в структуре Fry-Catch-final эта переменная будет создана каждый раз.
Избегайте написания таким образом:
var object = ['foo', 'bar'], i; for (i = 0, len = object.length; i <len; i ++) {try {// сделать что -то, что бросает исключение} catch (e) {// grade exception}}}}}}}}}}}}}}}}}}}}}}}}}}}И использовать:
var object = ['foo', 'bar'], i; try {for (i = 0, len = object.length; i <len; i ++) {// сделать что -то, что бросает исключение}} catch (e) {// обработка исключения}44. Установите тайм -аут для Xmlhttprequests.
После того, как запрос XHR займет много времени (например, из -за проблем с сетью), вам может потребоваться прервать запрос, чтобы вы могли использовать SetTimeout () для вызова XHR.
var xhr = new xmlhttprequest (); xhr.onreadystatechange = function () {if (this.readystate == 4) {cleartimeout (timeout); // Сделать что -нибудь с помощью данных ответа}} var timeout = setTimeout (function () {xhr.abort (); // обратный вызов по ошибке вызова}, 60*1000/*Тайм -аут через минуту*/); xhr.open ('get', url, true); xhr.send ();Кроме того, обычно вы должны вообще избегать синхронизированных запросов AJAX.
Сорок пять. Обрабатывать тайм -аут WebSocket
Обычно, после создания соединения WebSocket, если вы не активны, сервер отключает (Time Out) ваше соединение через 30 секунд. Брандмауэр также будет отключен после периода бездействия.
Чтобы предотвратить проблемы с тайм -аутом, вам может потребоваться периодически отправлять пустые сообщения на сторону сервера. Чтобы сделать это, вы можете добавить следующие две функции в свой код: одна, чтобы поддерживать соединение, а другая - не повлиять на соединение. С этим трюком вы можете контролировать проблему тайм -аута.
Используйте Timerid:
var timerid = 0; function keepalive () {var timeout = 15000; if (websocket.readystate == websocket.open) {websocket.send (''); } timerid = setTimeout (keepAlive, timeout);} функция decelBearbeAlive () {if (timerId) {canceltimeout (timerid); }}Метод keepalive () должен быть добавлен в конце метода onopen () соединения WebSocket, а в конце метода onclose () добавляется CancelPeePalive ().
46. Помните, что оригинальные операторы всегда более эффективны, чем функциональные вызовы. Используйте vanillajs.
Например, не используйте:
var min = math.min (a, b); a.push (v);
И использовать:
var min = a <b? ab; a [a.length] = v;
47. Из целых чисел, случайным образом выберите значение
Существует следующая формула, которая очень полезна и позволяет нам случайным образом отображать определенные знаменитые цитаты или новостные события!
Value = math.floor (math.random () *Общее количество возможных значений+ первое возможное значение)
Например: чтобы выбрать значение от 2 до 10, мы можем написать его так
var num = math.floor (math.random ()*9+2)
Пожалуйста, помните вышеупомянутую формулу! ~
Использование и функция единой вертикальной панели оператора JS "|" и обработка данных JS
Только сейчас, при эксплуатации целых числа JS, это эквивалентно удалению десятичной точки, Parseint. Когда положительное число эквивалентно math.floor (), и когда отрицательное число эквивалентно math.ceil () Примечание:
1. Math.ceil () используется в качестве вверх по округлую зону. 2. Math.floor () используется как округление вниз. 3. math.round () round () обычно используется в математике. Console.log (0.6 | 0) // 0console.log (1.1 | 0) // 1console.log (3.65555 | 0) // 3console.log (5.99999 | 0) // 5console.log (-7,777 | 0) //-7
ПРИМЕЧАНИЕ. В дополнение к трем методам математики для обработки чисел мы часто используем Parseint (), parsefloat (), tofixed () и toprecision () и т. Д. Краткое объяснение:
Использование метода ToFixed заключается в следующем:
100,456001.tofixed (2); //100.47100.456001.tofixed(3); //100.456number.prototype.tofixed.call(100.456001,2); //100.47
Недостатки: после использования это станет строкой.
Использование Toprecision заключается в следующем:
99.456001.toprision (5); //99.456100.456001.toprecision(5); //100.46number.prototype.toprecision.call(10.456001,5); //10.456
Правила эксплуатации для отдельных вертикальных стержней
Посмотрев на приведенный выше пример, мы обычно знаем, что одна вертикальная полоса может выполнять операцию округления, что означает, что только положительная часть сохраняется и десятичная часть удаляется. Тем не менее, как рассчитывать "| 0"? Почему «| 0» может достичь цели округления? Каким будет единственная вертикальная полоса, если это не 0?
Имея в виду эти вопросы, давайте посмотрим на следующий пример:
Console.log (3 | 4); //7console.log(4|4); //4console.log(8|3); //11console.log(5.3|4.1); //5console.log(9|3455); // 3455
Кажется, что нет шаблона, чтобы найти? Поиск онлайн. http://tools.vevb.com/table/priority
В этом упоминается один вертикальный бар "|" Но нет JavaScript.
Хорошо, я объявлю ответ здесь. На самом деле, единственная вертикальная бар "|" это результат, полученный путем преобразования в 2-значную систему. Например, давайте возьмем простой пример:
3 | 4 преобразуется в двоичный файл, а 011 | 100 добавление дается 111 = 74 | 4 преобразуется в двоичный файл, а 100 | 100 - 100 = 48 | 3 преобразуется в двоичный, а 1000 | 011 - 1011 = 11
И так далее, я не буду перечислять их здесь один за другим. Одиночная вертикальная бар "|" Операция-это результат, полученный путем преобразования в 2-значную систему! Вы все это узнали?