JavaScript に関するヒント

この記事では主に JavaScript のヒントに関連する情報を紹介します。必要な方は、プログラミング能力を向上させるためにこれらの短くて実用的な JavaScript のヒントを提供していただければ幸いです。

ブール値を変換するには !! 演算子を使用します

場合によっては、変数が存在するかどうかを確認したり、値が有効な値を持っているかどうかを確認し、存在する場合は true 値を返す必要があります。このような検証を行うには、非常に便利で簡単な !! 演算子を使用できます。 !!variable を使用して変数を検出できます。変数の値が 0、null、" "、未定義、または NaN の場合は false を返し、それ以外の場合は 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 の値が 0 より大きい限り、account.hasMoney によって返される値は true です。

文字列を数値に変換するには + を使用します

このトリックは非常に簡単で、文字列データを数値に変換できますが、それ以外の場合は NaN を返します。次の例:

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

これは Date にも機能します。この場合、タイムスタンプ番号を返します:

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

条件付き

このようなコードがある場合:

if (conected) {
    login();
}

変数の省略形も使用できます。たとえば、上記の例では、次のように省略できます:

conected && login();

オブジェクトにいくつかのプロパティまたは関数が存在する場合、次のコードに示すように、この検出を行うこともできます。 :

user && user.login();

|| 演算子

の使用には、ES6 のデフォルトパラメータの機能があります。古いブラウザでこの機能をエミュレートするには、|| 演算子を使用し、2 番目のパラメータとしてデフォルト値を渡します。最初のパラメータが false を返した場合、2 番目の値はデフォルト値とみなされます。次の例を見てみましょう:

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

ループ内で array.length をキャッシュする

この手法は非常に簡単ですが、大規模な配列ループを処理する場合、パフォーマンスへの影響は非常に大きくなります。基本的に、誰もが次のように同期的に反復する配列を作成します。

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

小さい配列の場合はこれで問題ありません。大きい配列を扱う場合、このコードは反復ごとに再初期化されます。これにより、多少の遅延が発生します。この現象を回避するには、array.length をキャッシュにすることができます:

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

次のように書くこともできます:

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

オブジェクト内の属性を検出する

いくつかの属性が存在するかどうかを検出する必要がある場合は、未定義の関数の実行を避けてくださいまたは属性、このちょっとしたトリックは非常に便利です。クロスブラウザー コードをカスタマイズする予定がある場合にも、このトリックを使用するとよいでしょう。たとえば、document.querySelector() を使用して ID を選択し、IE6 ブラウザと互換性を持たせたいとします。しかし、この関数は IE6 ブラウザには存在しないため、この関数が存在するかどうかをこの演算子を使用して検出するのは困難です。次の例のように、非常に便利です:

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

この例では、querySelector 関数がドキュメントに存在しない場合、 docuemnt.getElementById("id") が呼び出されます。

配列の最後の要素を取得します

Array.prototype.slice(begin, end) は、begin と 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]

配列の切り捨て

この小さなトリックは主に配列のサイズをロックするために使用され、配列内の一部の要素を削除するために使用すると非常に便利です。たとえば、配列に 10 個の要素があるが、最初の 5 個の要素だけが必要な場合は、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]

すべて置き換える

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

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

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