JavaScript に関する 12 の重要なヒント

この記事では、JavaScript に関する 12 のヒントを紹介します。これらのヒントは、実際の作業でいくつかの問題を解決するのに役立つ場合があります。

関連する学習の推奨事項: JavaScript ビデオ チュートリアル

#演算子を使用してブール値を変換する

場合によっては、変数が存在するかどうか、または値に有効な値があるかどうかを確認する必要があります。存在する場合は、true 値を返します。このような検証を行うには、非常に便利で簡単な # 演算子を使用できます。変数の場合、変数の値が 0、null、" "# である限り、検出に !!variable を使用できます。 ##、 unknown または 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.cash になります。 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();

Use ||operator

には 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]);
}

object

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

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

この例では、document が存在しない場合、querySelector function、 docuemnt.getElementById("id") が呼び出されます。

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

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

配列の切り捨て

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

Replace all

String.replace() 関数を使用すると、文字列または正規表現を使用して文字列を置換できます。この関数自体は Replace のみです文字列の最初の出現ですが、正規表現で /g を使用して replaceAll() 関数をシミュレートできます。

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

Merge arrays

2 つの配列を結合する場合、通常は 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]

总结

现在你学会了些有用的JavaScript小技巧。希望这些小技巧能在工作中帮助你解决一些麻烦，或者说这篇文章对你有所帮助。如果你有一些优秀的JavaScript小技巧，欢迎在评论中与我们一起分享。

以上がJavaScript に関する 12 の重要なヒントの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。