Einige Tipps für JavaScript

Dieser Artikel stellt hauptsächlich die relevanten Informationen zu JavaScript-Tipps vor. Freunde, die sie benötigen, können darauf zurückgreifen. Ich hoffe, Ihnen diese kurzen und praktischen JavaScript-Tipps zur Verfügung zu stellen, um Ihre Programmierfähigkeiten zu verbessern.

Verwenden Sie den !!-Operator, um einen booleschen Wert umzuwandeln

Manchmal müssen wir prüfen, ob eine Variable existiert oder ob der Wert einen gültigen Wert hat, und ihn zurückgeben, wenn Es gibt einen wahren Wert. Um eine solche Überprüfung durchzuführen, können wir den !!-Operator verwenden, was sehr praktisch und einfach ist. Sie können !!variable verwenden, um Variablen zu erkennen. Solange der Wert der Variablen 0, null, „ “, undefiniert oder NaN ist, wird „false“ zurückgegeben, andernfalls wird „true“ zurückgegeben. Zum Beispiel das folgende Beispiel:

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

Solange in diesem Beispiel der Wert von account.cash größer als 0 ist, ist der von account.hasMoney zurückgegebene Wert wahr.

Verwenden Sie +, um Zeichenfolgen in Zahlen umzuwandeln

Dieser Trick ist sehr nützlich, er ist sehr einfach, er kann Zeichenfolgendaten in Zahlen umwandeln, ist aber nur für geeignet String-Daten, andernfalls wird NaN zurückgegeben, wie im folgenden Beispiel:

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

Dies gilt auch für Datum, in diesem Fall wird die Zeitstempelnummer zurückgegeben:

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

und Bedingungen

Wenn Sie einen Code wie diesen haben:

if (conected) {
    login();
}

Sie können Variablen auch abkürzen und && verwenden, um Funktionen miteinander zu verbinden, zum Beispiel die Das obige Beispiel kann wie folgt abgekürzt werden:

conected && login();

Wenn einige Eigenschaften oder Funktionen in einem Objekt vorhanden sind, können Sie diese auch so erkennen, wie im folgenden Code gezeigt:

user && user.login();

Verwenden Sie den ||.-Operator

verfügt über die Funktion von Standardparametern in ES6. Um diese Funktion in älteren Browsern zu emulieren, verwenden Sie den Operator || und übergeben Sie den Standardwert als zweiten Parameter. Wenn der erste Parameter „false“ zurückgibt, wird der zweite Wert als Standardwert betrachtet. Nehmen Sie das folgende Beispiel:

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 in der Schleife

Dieser Trick ist sehr einfach, wenn Sie mit einer großen Array-Schleife arbeiten. Die Auswirkungen auf die Leistung werden sehr groß sein. Grundsätzlich schreibt jeder ein Array, das die Iteration wie folgt synchronisiert:

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

Wenn es sich um ein kleines Array handelt, ist dies in Ordnung. Wenn Sie es mit einem großen Array zu tun haben, wird dieser Code jedes Mal verwendet Die Größe des Arrays wird bei jeder Iteration neu berechnet, was zu einigen Verzögerungen führt. Um dieses Phänomen zu vermeiden, können Sie array.length zu einem Cache machen:

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

Sie können es auch so schreiben:

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

Attribute im Objekt erkennen

Dieser kleine Trick ist nützlich, wenn Sie die Existenz einiger Eigenschaften erkennen und die Ausführung undefinierter Funktionen oder Eigenschaften vermeiden müssen. Möglicherweise möchten Sie diesen Trick auch verwenden, wenn Sie vorhaben, browserübergreifenden Code anzupassen. Sie möchten beispielsweise document.querySelector() verwenden, um eine ID auszuwählen und sie mit dem IE6-Browser kompatibel zu machen, aber diese Funktion ist im IE6-Browser nicht vorhanden, sodass es schwierig ist, mit diesem Operator zu erkennen, ob die Funktion vorhanden ist . Sehr nützlich, wie im folgenden Beispiel:

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

Wenn in diesem Beispiel die querySelector-Funktion im Dokument nicht vorhanden ist, wird docuemnt.getElementById("id") aufgerufen.

Letztes Element im Array abrufen

Array.prototype.slice(begin, end) wird verwendet, um die Array-Elemente zwischen Anfang und Ende abzurufen. Wenn Sie den Endparameter nicht festlegen, wird der Standardlängenwert des Arrays als Endwert verwendet. Einige Schüler wissen jedoch möglicherweise nicht, dass diese Funktion auch negative Werte als Parameter akzeptieren kann. Wenn Sie als Anfangswert einen negativen Wert festlegen, können Sie das letzte Element des Arrays abrufen. Zum Beispiel:

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]

Array-Trunkierung

Dieser kleine Trick wird hauptsächlich verwendet, um die Größe des Arrays zu sperren. Er ist sehr nützlich, wenn er zum Löschen verwendet wird einige Elemente im Array. Wenn Ihr Array beispielsweise 10 Elemente hat, Sie aber nur die ersten fünf Elemente benötigen, können Sie das Array um array.length=5 kürzen. Zum Beispiel:

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]

ersetzt alle

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!');
}
}

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

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