Quelques conseils pour JavaScript

Cet article présente principalement les informations pertinentes collectées sur les astuces JavaScript. Les amis qui en ont besoin peuvent s'y référer. J'espère vous fournir ces astuces JavaScript courtes et pratiques pour améliorer vos capacités de programmation.

Utilisez l'opérateur !! pour convertir une valeur booléenne

Parfois, nous devons vérifier si une variable existe ou vérifier si la valeur a une valeur valide et la renvoyer si il existe une vraie valeur. Pour effectuer une telle vérification, nous pouvons utiliser l’opérateur !!, ce qui est très pratique et simple. Vous pouvez utiliser !!variable pour détecter les variables. Tant que la valeur de la variable est : 0, null, " ", undefined ou NaN, elle retournera false, sinon elle retournera true. Par exemple, l'exemple suivant :

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, tant que la valeur de account.cash est supérieure à 0, la valeur renvoyée par account.hasMoney est vraie.

Convertir une chaîne en nombre en utilisant

Cette astuce est très utile, elle est très simple et peut convertir des données de chaîne en nombre, mais elle ne convient qu'aux caractères Données de chaîne , sinon NaN sera renvoyé, comme dans l'exemple suivant :

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

Cela s'applique également à Date, dans ce cas, il renverra le numéro d'horodatage :

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

Conditionnelles de conjonction

Si vous avez un morceau de code comme celui-ci :

if (conected) {
    login();
}

Vous pouvez également abréger les variables et les connecter avec des fonctions en utilisant &&, par exemple L'exemple ci-dessus peut être abrégé comme suit :

conected && login();

Si certaines propriétés ou fonctions existent dans un objet, vous pouvez également faire cette détection, comme indiqué dans le code suivant :

user && user.login();

Utilisez l'opérateur ||

a la fonctionnalité de paramètres par défaut dans ES6. Pour émuler cette fonctionnalité dans les anciens navigateurs, utilisez l'opérateur || et transmettez la valeur par défaut comme deuxième argument. Si le premier paramètre renvoie faux, la deuxième valeur sera considérée comme une valeur par défaut. Prenons l'exemple suivant :

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

Cache array.length dans la boucle

Cette astuce est très simple. Ceci est utile lorsqu'il s'agit d'une grande boucle de tableau. L’impact sur les performances sera très important. En gros, tout le monde écrira un tableau qui synchronise les itérations comme ceci :

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

S'il s'agit d'un petit tableau, c'est très bien. Si vous avez affaire à un grand tableau, ce code est utilisé à chaque fois. la taille du tableau sera recalculée à chaque itération, ce qui entraînera des retards. Afin d'éviter ce phénomène, vous pouvez faire de array.length un cache :

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

Vous pouvez également l'écrire comme ceci :

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

Détecter les attributs dans l'objet

Cette petite astuce est utile lorsque vous devez détecter l'existence de certaines propriétés et éviter d'exécuter des fonctions ou des propriétés non définies. Vous souhaiterez peut-être également utiliser cette astuce si vous envisagez de personnaliser du code multi-navigateur. Par exemple, vous souhaitez utiliser document.querySelector() pour sélectionner un identifiant et le rendre compatible avec le navigateur IE6, mais cette fonction n'existe pas dans le navigateur IE6, il est donc difficile d'utiliser cet opérateur pour détecter si cette fonction existe . Très utile, comme dans l'exemple suivant :

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

Dans cet exemple, si la fonction querySelector n'existe pas sur le document, alors docuemnt.getElementById("id") sera appelée.

Obtenir le dernier élément du tableau

Array.prototype.slice(begin, end) est utilisé pour obtenir les éléments du tableau entre le début et la fin. Si vous ne définissez pas le paramètre de fin, la valeur de longueur par défaut du tableau sera utilisée comme valeur de fin. Mais certains étudiants ne savent peut-être pas que cette fonction peut également accepter des valeurs négatives comme paramètres. Si vous définissez une valeur négative comme valeur de début, vous pouvez alors obtenir le dernier élément du tableau. Par exemple :

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]

Troncation du tableau

Cette petite astuce sert principalement à verrouiller la taille du tableau. Elle est très utile si elle est utilisée pour supprimer. certains éléments du tableau utiles. Par exemple, si votre tableau contient 10 éléments, mais que vous souhaitez uniquement les cinq premiers éléments, vous pouvez tronquer le tableau de array.length=5. Par exemple :

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]

remplace tous les

String.replace()函数允许你使用字符串或正则表达式来替换字符串，本身这个函数只替换第一次出现的字符串，不过你可以使用正则表达多中的/g来模拟replaceAll()函数功能：

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

合并数组

如果你要合并两个数组，一般情况之下你都会使用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().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];

将NodeList转换成数组

如果你运行document.querySelectorAll(“p”)函数时，它可能返回DOM元素的数组，也就是NodeList对象。但这个对象不具有数组的函数功能，比如sort()、reduce()、map()、filter()等。为了让这些原生的数组函数功能也能用于其上面，需要将节点列表转换成数组。可以使用[].slice.call(elements)来实现：

var elements = document.querySelectorAll("p"); // NodeList
var arrayElements = [].slice.call(elements); // Now the NodeList is an array
var arrayElements = Array.from(elements); // This is another way of converting NodeList to Array

数组元素的洗牌

对于数组元素的洗牌，不需要使用任何外部的库，比如Lodash，只要这样做：

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

转换数值的更加的方法

将字符串转换为数字是非常常见的。最简单和最快的（jspref）的方式来实现，将使用+（加）算法。

var one = '1';
var numberOne = +one; // Number 1

你也可以使用-（减号）算法的转换类型并且变成负数值。

var one = '1';
var negativeNumberOne = -one; // Number -1

返回对象的函数能够用于链式操作

当创建面向对象的JavaScript对象的function时，函数返回一个对象将能够让函数可链式的写在一起来执行。

function Person(name) {
this.name = name;
this.sayName = function() {
console.log("Hello my name is: ", this.name);
return this;
};
this.changeName = function(name) {
this.name = name;
return this;
};
}
var person = new Person("John");
person.sayName().changeName("Timmy").sayName();
//Hello my name is: John
//Hello my name is: Timmy

给回调函数传递参数

在默认情况下，你无法将参数传给回调函数，如下：

function callback() {
console.log('Hi human');
}
document.getElementById('someelem').addEventListener('click', callback);

你可以采取JavaScript闭包的优点来给回调函数传参，案例如下：

function callback(a, b) {
return function() {
console.log('sum = ', (a+b));
}
}
var x = 1, y = 2;
document.getElementById('someelem').addEventListener('click', callback(x, y));

什么是闭包呢？闭包是指一个针对独立的(自由)变量的函数。换句话说，闭包中定义的函数会记住它被创建的环境。了解更多请参阅MDN所以这种方式当被调用的时候，参数X/Y存在于回调函数的作用域内。

另一种方法是使用绑定方法。例如：

var alertText = function(text) {
alert(text);
};
document.getElementById('someelem').addEventListener('click', alertText.bind(this, 'hello'));

提升

理解提升将帮助你组织你的function。只需要记住，变量声明和定义函数会被提升到顶部。变量的定义是不会的，即使你在同一行中声明和定义一个变量。此外，变量声明让系统知道变量存在，而定义是将其赋值给它。

function doTheThing() {
// 错误: notDeclared is not defined
console.log(notDeclared);
// 输出: undefined
console.log(definedLater);
var definedLater;
definedLater = 'I am defined!'
// 输出: 'I am defined!'
console.log(definedLater)
// Outputs: undefined
console.log(definedSimulateneously);
var definedSimulateneously = 'I am defined!'
// 输出: 'I am defined!'
console.log(definedSimulateneously)
// 输出: 'I did it!'
doSomethingElse();
function doSomethingElse(){
console.log('I did it!');
}
// 错误: undefined is not a function
functionVar();
var functionVar = function(){
console.log('I did it!');
}
}

为了使事情更容易阅读，在函数作用域内提升变量的声明将会让你明确该变量的声明是来自哪个作用域。在你需要使用变量之前定义它们。在作用域底部定义函数，确保代码清晰规范。

希望这些小技巧能在工作中帮助你解决一些麻烦，对你有所帮助。