Поделиться 12 очень практичными советами Javascript

В этой статье мы поделимся с вами 12 советами о JavaScript. Эти советы могут помочь вам решить некоторые проблемы в вашей реальной работе.

Используйте !! оператор для преобразования логической стоимости

Иногда нам нужно проверить, существует ли переменная или проверить, имеет ли значение допустимое значение, и если она существует, она возвращает true. Чтобы сделать такую проверку, мы можем использовать !! Оператор для реализации его очень удобен и просто. Для переменных вы можете использовать !! переменная для обнаружения. Пока значение переменной: 0, NULL, "", Undefined или NAN, оно вернется false, в противном случае он вернет true. Например, следующий пример:

 Функциональный счет (наличные) {this.cash = cash; this.hasmoney = !! наличные; } var account = новая учетная запись (100.50); console.log (account.cash); // 100.50 console.log (account.hasmoney); // true var emptyAccount = new Account (0); console.log (emptyaccount.cash); // 0 console.log (emptyaccount.hasmoney); // ЛОЖЬ

В этом примере, до тех пор, пока значение учетной записи. Cash больше 0, значение, возвращаемое Account.hasmoney, является верным.

Используйте + для преобразования строк в числа

Этот трюк очень полезен. Он очень просто и может быть преобразован в числа путем пересечения строковых данных. Тем не менее, он подходит только для строковых данных, в противном случае будет возвращен NAN, например, следующий пример:

 функция tonumber (strnumber) {return +strnumber; } console.log (tonumber ("1234")); // 1234 console.log (tonumber ("acb")); // НАН

Это также работает на дату, в этом случае он вернет номер временной метки:

Скопируйте код следующим образом: Console.log (+new Date ()) // 1461288164385 и условное символ

Если у вас есть такой код:

 if (consed) {login (); }

Вы также можете сократить переменные и использовать && и объединить их вместе. Например, приведенный выше пример можно сократить следующим образом:

Кода кода следующая: conted && login ();

Если в объекте существуют некоторые свойства или функции, вы также можете выполнить обнаружение, как показано в следующем коде:

Копия кода следующим образом: user && user.login ();

Используйте || оператор

В ES6 есть функция параметра по умолчанию. Чтобы имитировать эту функцию в более старых браузерах, || Оператор может быть использован, и значение по умолчанию будет передано в качестве второго параметра. Если значение, возвращаемое первым параметром, является false, второе значение будет считаться значением по умолчанию. Как в следующем примере:

 Пользователь функции (имя, возраст) {this.name = name || «Оливер Квин»; this.age = возраст || 27; } var user1 = new user (); console.log (user1.name); // Oliver Queen Console.log (user1.age); // 27 var user2 = новый пользователь ("Барри Аллен", 25); console.log (user2.name); // Barry Allen Console.log (user2.age); // 25

Кэш -массив.

Этот трюк очень прост, и это окажет очень большое влияние на производительность при работе с большой петлей. По сути, все будут писать множество синхронных итераций, подобных этим:

 for (var i = 0; i <array.length; i ++) {console.log (array [i]); }

Если это небольшой массив, это здорово, если вы имеете дело с большим массивом, этот код пересчитывает размер массива на каждой итерации, что приведет к некоторой задержке. Чтобы избежать этого явления, массив. Длина может использоваться в качестве кэша:

 var length = array.length; for (var i = 0; i <length; i ++) {console.log (массив [i]); }

Вы также можете написать это так:

 for (var i = 0, length = array.length; i <length; i ++) {console.log (array [i]); }

Обнаружить свойства в объектах

Этот трюк полезен, когда вам нужно определить, существуют ли некоторые свойства, и избегать запуска неопределенных функций или свойств. Если вы планируете настроить какой-то кросс-совместимый код браузера, вы также можете использовать этот совет. Например, вы хотите использовать Document.QuerySelector (), чтобы выбрать идентификатор и сделать его совместимым с браузерами IE6, но эта функция не существует в браузерах IE6, поэтому очень полезно использовать этот оператор для определения того, существует ли эта функция, например, в следующем примере:

 if ('Queryselector' в документе) {document.queryselector ("#id"); } else {document.getElementById ("id"); }

В этом примере, если функция QuerySelector не существует в документе, то документ вызван.

Получите последний элемент в массиве

Array.Prototype.Slice (начало, конец) используется для получения элементов массива между началом и конец. Если вы не установите конечный параметр, значение длины по умолчанию массива будет рассматриваться как конечное значение. Но некоторые студенты могут не знать, что эта функция также может принять отрицательные значения в качестве параметров. Если вы установите отрицательное значение в качестве значения начала, то вы можете получить последний элемент массива. нравиться:

 var array = [1,2,3,4,5,6]; console.log (array.slice (-1)); // [6] console.log (array.slice (-2)); // [5,6] console.log (array.slice (-3)); // [4,5,6]

Усечение массива

Этот трюк в основном используется для блокировки размера массива и очень полезен, если он используется для удаления некоторых элементов в массиве. Например, в вашем массиве есть 10 элементов, но вы хотите иметь только первые пять элементов, тогда вы можете усечь массив с помощью массива. Length = 5. Как в следующем примере:

 var array = [1,2,3,4,5,6]; console.log (array.length); // 6 array.length = 3; console.log (array.length); // 3 console.log (массив); // [1,2,3]

Заменить все

Функция string.replace () позволяет использовать строки или регулярные выражения для замены строк. Эта функция сама только заменяет первую строку. Тем не менее, вы можете использовать /g в регулярных выражениях для моделирования функции ReplaceAll ():

 var string = "Джон Джон"; console.log (string.replace (/hn/, "ana")); // "Joana John" console.log (string.replace (/hn/g, "ana")); // "Джоана Джоана"

Слияние массивы

Если вы хотите объединить два массива, вы обычно используете функцию array.concat ():

 var array1 = [1,2,3]; var array2 = [4,5,6]; console.log (array1.concat (array2)); // [1,2,3,4,5,6];

Эта функция не подходит для объединения двух больших массивов, потому что она будет потреблять много памяти для хранения вновь созданных массивов. В этом случае вы можете использовать Array.pus (). Применить (arr1, arr2) для создания нового массива. Этот метод не используется для создания нового массива, он просто объединяет первые и вторые числа вместе, уменьшая использование памяти:

 var array1 = [1,2,3]; var array2 = [4,5,6]; console.log (array1.push.apply (Array1, Array2)); // [1,2,3,4,5,6];

Преобразовать Nodelist в массив

Если вы запустите функцию Document.Queryselectorall ("p"), она может вернуть массив элементов DOM, то есть объект Nodelist. Но этот объект не имеет функций функций массивов, таких как sort (), creat (), map (), filter () и т. Д. Для использования этих функций нативных функций массива для них необходимо преобразовать в массив. Вы можете использовать [] .slice.call (элементы) для реализации:

 var elements = document.queryselectorall ("p"); // Nodelist var arrayelements = [] .slice.call (elements); // теперь Nodelist является массивом var arryelements = array.from (elements); // Это еще один способ преобразования узла в массив

Сокращение элементов массива

Для перетасовки элементов массива нет необходимости использовать какие -либо внешние библиотеки, такие как Lodash, просто сделайте это:

 var list = [1,2,3]; console.log (list.sort (function () {math.random () - 0,5})); // [2,1,3]

Суммировать

Теперь вы узнали несколько полезных советов Javascript. Я надеюсь, что эти советы помогут вам решить некоторые проблемы на работе, иначе эта статья будет полезна для вас. Если у вас есть отличные советы Javascript, пожалуйста, поделитесь ими с нами в комментариях.