«12 очень полезных приемов JavaScript», просмотренных в Интернете

Запишите его, вы можете использовать его позже.

оригинал:блог Просто scrambler.com/12-extreme…

видел онлайн.

1) использовать!!преобразовать переменную в логический тип
Иногда нам нужно проверить, существует ли какая-либо переменная или имеет ли она действительное значение, таким образом, рассматривая их значение какtrue. Для выполнения такой проверки вы можете использовать!!(оператор двойного отрицания), который автоматически преобразует любой тип данных в логическое значение, возвращаются только эти переменныеfalse：0，null，""，undefined或NaN, все остальное возвращаетсяtrue. Давайте посмотрим на этот простой пример:

function 
Account(cash) {  
    this.cash = cash;
    this.hasMoney = 
!!cash;
}
var account = new 
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); // 
false 

В этом примере, еслиaccount.cashбольше нуля, тоaccount.hasMoneyЗначениеtrue.

2) использовать+преобразовать переменную в число
Это преобразование очень простое, но оно работает только для строк чисел, в противном случае возвращаетсяNaN(не числа). Посмотрите этот пример:

function 
toNumber(strNumber) {  
    return 
+strNumber;
}
console.log(toNumber("1234")); // 
1234  
console.log(toNumber("ACB")); // 
NaN 

Это преобразование также может работать наDate, в этом случае он вернет метку времени:

console.log(+new Date()) // 
1461288164385 

3) Состояние короткого замыкания
Если вы видели такой код:

if (conected) {  
    
login();
}

то вы можете использовать между этими двумя переменными&&(оператор И), чтобы сократить код. Например, предыдущий код можно сократить до одной строки:

conected 
&& login(); 

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

user 
&& user.login(); 

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

function 
User(name, age) {  
    this.name = name || "Oliver Queen";
    this.age = 
age || 27;
}
var user1 = new User();  
console.log(user1.name); // 
Oliver Queen  
console.log(user1.age); // 27

var user2 = new 
User("Barry Allen", 25);  
console.log(user2.name); // Barry 
Allen  
console.log(user2.age); // 25 

5) кэш в циклеarray.length
Этот прием очень прост и позволяет избежать сильного падения производительности при циклическом обходе больших массивов. В основном почти все используют for для перебора такого массива:

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

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

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

Если быть более кратким, это можно записать так:

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

6) Обнаружение свойств в объектах
Этот трюк полезен, когда вам нужно проверить наличие определенных свойств и избежать запуска не определенных функций или свойств. Вы также можете использовать эту технику, если планируете писать кроссбраузерный код. Например, допустим, вам нужно написать код, который работает со старыми версиями Интернета. Код, совместимый с Explorer 6, и хотите использоватьdocument.querySelector()чтобы получить какой-то элемент по ID. Однако в современных браузерах этой функции нет. Итак, чтобы проверить, существует ли эта функция, вы можете использоватьinоператор. Взгляните на этот пример:

if ('querySelector' 
in document) {  
    document.querySelector("#id");
} else {
    
document.getElementById("id");
}

В этом случае, если вdocumentНет вquerySelectorфункция, она будет использоватьdocument.getElementById()в качестве замены.

7) Получить последний элемент массива
Array.prototype.slice（begin，end）Может использоваться для обрезки массивов. Но если конечный параметр не установленendзначение, функция автоматическиendУстановите значение длины массива. Думаю, мало кто знает, что эта функция может принимать отрицательные значения, если поставитьbeginУстановив отрицательное число, вы можете получить обратный элемент из массива:

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] 

8) усечение массива
Этот метод блокирует размер массива, что полезно для удаления фиксированного количества элементов из массива. Например, если у вас есть массив из 10 элементов, но вы хотите получить только первые пять элементов, вы можете сделать это, установивarray.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(array); // 
[1,2,3] 

9) заменить все
String.replace()разрешено использовать функциюStringиRegexДля замены строк сама функция может заменить только первую совпадающую строку. Но вы можете добавить в конце регулярного выражения/gимитироватьreplaceAll()функция:

var 
string = "john john";  
console.log(string.replace(/hn/, "ana")); // "joana 
john"  
console.log(string.replace(/hn/g, "ana")); // "joana joana" 

10) Объединить массивы
Если вам нужно объединить два массива, вы можете использоватьArray.concat()функция:

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

Однако эта функция не подходит для больших массивов, поскольку она создаст новый массив и займет много памяти. В этом случае вы можете использоватьArray.push.apply（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]; 

11) ПучокNodeListпреобразовать в массив
если работаетdocument.querySelectorAll("p")функция, которая возвращаетDOMмассив элементов, т.е.NodeListобъект. Но у этого объекта нет некоторых функций, принадлежащих массиву, например:sort()，reduce()，map()，filter(). Чтобы включить эти функции и другие встроенные функции массивов, вам необходимо преобразовать NodeList в массив. Чтобы преобразовать, просто используйте эту функцию:[] .slice.call（elements）:

var elements = document.querySelectorAll("p"); // 
NodeList  
var arrayElements = [].slice.call(elements); // 现在已经转换成数组了
var 
arrayElements = Array.from(elements); // 把NodeList转换成数组的另外一个方法

12) Перемешать элементы массива
Если вам нравится внешняя библиотекаLodashЧтобы перетасовать элементы данных таким образом, просто используйте этот трюк:

var list = [1, 2, 
3];  
console.log(list.sort(function() {  
    return Math.random() - 
0.5
})); // [2,1,3]