非常に実践的な JavaScript の 12 のヒントの詳細なコード例

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

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

!!操作符转换布尔值

有时候我们需要对一个变量查检其是否存在或者检查值是否有一个有效值，如果存在就返回true值。为了做这样的验证，我们可以使用!!操作符来实现是非常的方便与简单。对于变量可以使用!!variable做检测，只要变量的值为:0、null、" "、undefined或者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中有默认参数这一特性。为了在老版本的浏览器中模拟这一特性，可以使用||操作符，并且将将默认值当做第二个参数传入。如果第一个参数返回的值为false，那么第二个值将会认为是一个默认值。如下面这个示例：

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");
}

在这个示例中，如果document不存在querySelector函数，那么就会调用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个元素，但你只想只要前五个元素，那么你可以通过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) 場合によっては、変数が存在するかどうか、または値が有効な値であるかどうかを確認する必要があります。存在する場合は、 を返します。 true 値。このような検証を行うには、!! 演算子を使用します。これは非常に便利で簡単です。変数の場合、変数の値が 0、null、 である限り、検出に <code>!!variable を使用できます。 " "、unknown、または NaN は false を返し、それ以外の場合は true を返します。たとえば、次の例:

var array1 = [1,2,3];
var array2 = [4,5,6];
console.log(array1.push.apply(array1, array2)); // [1,2,3,4,5,6];

🎜 この例では、account.cash の値が 0 より大きい限り、 によって返される値が返されます。 account.hasMoney それは true です。 🎜🎜文字列を数値に変換するには + を使用します🎜この手法は非常に簡単で、文字列データを数値に変換できますが、それ以外の場合には文字列データにのみ適しています。次の例のように、NaN が返されます: 🎜

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

🎜これは Date にも適用されます。この場合、タイムスタンプ番号が返されます: 🎜

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

🎜 Union 条件付き演算子🎜次のようなコードがある場合: 🎜rrreee🎜 また、変数を省略し、&& を使用して変数を関数に接続することもできます。次のように省略できます: 🎜rrreee🎜 次のコードに示すように、オブジェクトにプロパティまたは関数が存在するかどうかを検出することもできます: 🎜rrreee🎜||operator🎜 を使用します。 ES6 のデフォルトパラメータの機能です。古いブラウザでこの機能をエミュレートするには、|| 演算子を使用し、デフォルト値を 2 番目の引数として渡します。最初のパラメータによって返された値が false の場合、2 番目の値はデフォルト値とみなされます。次の例を見てみましょう: 🎜rrreee🎜 ループ内で array.length をキャッシュします🎜 この手法は非常に簡単で、大規模な配列ループを処理する場合、パフォーマンスへの影響は非常に大きくなります。 。基本的に、誰もが次のように同期的に反復する配列を作成します。 🎜rrreee🎜 小さい配列の場合はこれで問題ありません。大きい配列を扱う場合、このコードは反復ごとに再初期化されます。これにより、多少の遅延が発生します。この現象を回避するには、array.length のキャッシュを作成します: 🎜rrreee🎜次のように記述することもできます: 🎜rrreee🎜 オブジェクト内の属性を検出🎜必要な場合このトリックは、プロパティが存在するかどうかを確認し、未定義の関数やプロパティの実行を回避する場合に役立ちます。クロスブラウザー コードをカスタマイズする予定がある場合にも、このトリックを使用するとよいでしょう。たとえば、 document.querySelector() を使用して id を選択し、それを IE6 ブラウザと互換性のあるものにしたいとしますが、この関数は IE6 ブラウザには存在しません。次の例のように、この演算子を使用してこの関数が存在するかどうかを検出すると非常に便利です: 🎜rrreee🎜 この例では、document が存在しない場合、querySelector function、 docuemnt.getElementById("id") が呼び出されます。 🎜🎜配列の最後の要素を取得します🎜Array.prototype.slice(begin,end)は、beginとendを取得するために使用されます。 code> 間の配列要素。 <code>end パラメータを設定しない場合は、配列のデフォルトの長さの値が end 値として使用されます。しかし、この関数がパラメータとして負の値も受け入れることができることを知らない学生もいるかもしれません。 begin の値として負の値を設定すると、配列の最後の要素を取得できます。例: 🎜rrreee🎜配列の切り捨て🎜 この小さなトリックは主に配列のサイズをロックするために使用され、配列内の一部の要素を削除するために使用すると非常に便利です。たとえば、配列には 10 要素がありますが、最初の 5 要素だけが必要な場合は、array.length=5 を使用して配列を切り詰めることができます。次の例のように: 🎜rrreee🎜 すべて置換🎜String.replace() この関数を使用すると、文字列または正規表現を使用して文字列を置換できます。表示される文字列ですが、正規表現で /g を使用して、replaceAll() 関数関数をシミュレートできます: 🎜rrreee🎜配列をマージ🎜 2 つの配列の場合、通常は Array.concat() 関数を使用します: 🎜rrreee🎜 この関数は、新しく作成された配列を保存するために大量のメモリを消費するため、2 つの大きな配列をマージするのには適していません。配列。この場合、新しい配列を作成する代わりに、Array.pus().apply(arr1,arr2) を使用できます。このメソッドは新しい配列を作成するために使用されるのではなく、メモリ使用量を削減しながら最初と 2 番目の配列をマージするだけです: 🎜

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小技巧，欢迎在评论中与我们一起分享。

 以上就是关于12个非常实用的JavaScript小技巧的代码实例详解的内容，更多相关内容请关注PHP中文网（www.php.cn）！