Partager les 12 compétences les plus pratiques en JavaScript

Dans cet article, je vais partager 12 astuces JavaScript très utiles. Ces conseils peuvent vous aider à réduire et optimiser votre code. Les amis dans le besoin peuvent se référer à cet article

Dans cet article, je partagerai 12 astuces JavaScript très utiles. Ces conseils peuvent vous aider à réduire et à optimiser votre code.

1) Utilisez !! pour convertir une variable en type booléen

Parfois, nous devons vérifier si certaines variables exist , ou s'il a une valeur valide, traitant ainsi leur valeur comme vraie. Pour effectuer une telle vérification, vous pouvez utiliser || (double négation opérateur ) qui convertit automatiquement tout type de données en booléen, seules ces variables renverront false : 0, null, "" , indéfini ou NaN, d'autres renvoient vrai. Jetons un coup d'œil à cet exemple simple :

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

Dans cet exemple, si la valeur de account.cash est supérieure à zéro, la valeur de account.hasMoney est vraie.

2) Utilisez + pour convertir des variables en nombres

Cette conversion est super simple, mais elle ne fonctionne qu'avec des nombres chaînes , sinon ce sera Renvoie NaN (pas un nombre). Jetez un œil à cet exemple :

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

Cette opération de conversion peut également être appliquée à Date, auquel cas elle renverra le Timestamp :

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

3) Condition de court-circuit

Si vous avez vu ce genre de code :

if (conected) { 
 login(); 
}

Alors vous pouvez utiliser ces deux variables Utiliser && (opérateur AND) entre eux pour raccourcir le code. Par exemple, le code précédent peut être réduit à une seule ligne :

conected && login();

Vous pouvez également utiliser cette méthode pour vérifier si certaines propriétés ou existent dans l'objet >Fonction. Semblable au code suivant :

user && user.login();

4) Utilisez || pour définir les valeurs par défaut

a la fonction de paramètres par défaut dans ES6. Pour émuler cette fonctionnalité dans les anciens navigateurs, vous pouvez utiliser || (opérateur OR) et transmettre la valeur par défaut comme deuxième argument. Si le premier paramètre renvoie false, le deuxième paramètre sera renvoyé comme valeur par défaut. Regardez cet exemple :

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) Dans loop cachearray.length

Cette astuce est très simple et évite une énorme perte de performances lors du bouclage sur de grands tableaux. Fondamentalement, c'est ainsi que presque tout le monde utilise for pour parcourir un tableau :

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

Si vous travaillez avec des tableaux plus petits, c'est bien, mais si vous avez affaire à de grands tableaux , Ensuite, ce code calculera à plusieurs reprises la taille du tableau dans chaque boucle, ce qui entraînera un certain retard. Pour éviter cela, vous pouvez mettre en cache array.length dans une variable afin que le cache soit utilisé à la place de array.length à chaque fois dans la boucle :

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

Pour plus de concision, vous pouvez écrire :

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

6) Détecter les propriétés des objets

Cette astuce est très utile lorsque vous devez vérifier si certaines propriétés existent et éviter d'exécuter des fonctions ou des propriétés non définies. Vous pouvez également utiliser cette technique si vous envisagez d'écrire du code multi-navigateur. Par exemple, supposons que vous deviez écrire du code compatible avec les anciennes versions d'Internet Explorer 6 et que vous souhaitiez utiliser document.querySelector() pour obtenir certains éléments par ID. Cependant, dans les navigateurs modernes, cette fonction n'existe pas. Donc, pour vérifier si cette fonction existe, vous pouvez utiliser l'opérateur in. Jetez un œil à cet exemple :

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

Dans ce cas, s'il n'y a pas de fonction querySelector dans le document, il utilisera à la place document.getElementById().

7) Récupérer le dernier élément du tableau

Array.prototype.slice(begin, end) peut être utilisé pour découper le tableau . Mais si la valeur du paramètre end end n'est pas définie, la fonction définira automatiquement end sur la valeur de longueur du tableau. Je pense que peu de gens savent que cette fonction peut accepter des valeurs négatives. Si vous définissez start sur un nombre négatif, vous pouvez obtenir l'élément réciproque du tableau :

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) Troncature du tableau

这个技术可以锁定数组的大小，这对于要删除数组中固定数量的元素是非常有用的。例如，如果你有一个包含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]

结论

现在，你已经学到了一些有用的JS技巧，它们主要用于缩减JavaScript代码量，其中一些技巧在许多流行的JS框架都使用到，如Lodash，Underscore.js，Strings.js等。如果你知道其他JS技巧，欢迎分享！

【相关推荐】

1. Javascript免费视频教程

2. JavaScript运动框架之多值运动的具体介绍（四）

3. JavaScript运动框架之多物体任意值运动的示例代码分享（三）

4. JavaScript运动框架之如何解决防抖动问题、悬浮对联（二）

5. JavaScript运动框架之如何解决速度正负取整问题（一）

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!