JavaScript の最も実践的な 12 のスキルを共有する-jsチュートリアル-php.cn

この記事では、非常に役立つ JavaScript の 12 のヒントを共有します。これらのヒントは、コードの削減と最適化に役立ちます。必要な友人はこの記事を参照してください

この記事では、非常に役立つ JavaScript のヒントを 12 個紹介します。これらのヒントは、コードの削減と最適化に役立ちます。

1) !! を使用して変数をブール型

に変換する。このようなチェックを行うには、任意のタイプのデータを自動的にブール値に変換する || (二重否定演算子 ) を使用できます。これらの変数のみが false を返します: 0、null、""、未定義または NaN、その他の変数は 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 の値がゼロより大きい場合、account.hasMoney の値は true です。

2) + を使用して変数を数値に変換します

この変換は非常に簡単ですが、数値 Strings でのみ機能し、それ以外の場合は NaN (数値ではない) を返します。この例を見てください:

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

ログイン後にコピー

この変換操作は Date でも機能し、その場合は Timestamp を返します:

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

ログイン後にコピー

3) 短絡状態

これと同様のコードを見た場合:

if (conected) { 
 login(); 
}

ログイン後にコピー

その後、これら 2 つの変数の間に && (AND 演算子) を使用してコードを短縮できます。たとえば、前のコードは 1 行に減らすことができます:

conected && login();

ログイン後にコピー

また、このメソッドを使用して、特定のプロパティまたは関数がオブジェクトに存在するかどうかを確認することもできます。次のコードに似ています:

user && user.login();

ログイン後にコピー

4) || を使用してデフォルト値を設定します

ES6 にはデフォルトのパラメータ関数があります。古いブラウザでこの機能をエミュレートするには、|| (OR 演算子) を使用し、デフォルト値を 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

ログイン後にコピー

5) ループ内のarray.length

をキャッシュするこのトリックは非常に簡単で、大規模な

arrayをループする際のパフォーマンスへの大きな影響を回避します。基本的に、ほとんどの人が for を使用して配列をループする方法は次のとおりです:

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

ログイン後にコピー

小さい配列を扱っている場合は問題ありませんが、大きな配列を扱っている場合は、このコードがすべてのループで繰り返されます。配列のサイズにより、多少の遅延が発生します。これを回避するには、変数に array.length をキャッシュして、ループ内で毎回 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]); 
}

ログイン後にコピー

6) 検出

のオブジェクトのプロパティこのトリックは、特定のプロパティが存在するかどうかを確認し、未定義の関数やプロパティの実行を避ける必要がある場合に役立ちます。クロスブラウザーコードを作成する場合は、この手法を使用することもできます。たとえば、古いバージョンの Internet Explorer 6 と互換性のあるコードを作成する必要があり、

document.querySelector() を使用して ID によって特定の要素を取得したいとします。ただし、最近のブラウザにはこの機能はありません。したがって、この関数が存在するかどうかを確認するには、in 演算子を使用できます。この例を見てください:

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

ログイン後にコピー

この場合、ドキュメントに querySelector 関数がない場合、代わりに document.getElementById() が使用されます。

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

Array.prototype.slice(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]

ログイン後にコピー

8) 配列の切り捨て

这个技术可以锁定数组的大小，这对于要删除数组中固定数量的元素是非常有用的。例如，如果你有一个包含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]

ログイン後にコピー

9) 全部替换

String.replace()函数允许使用String和Regex来替换字符串，这个函数本身只能替换第一个匹配的串。但是你可以在正则表达式末尾添加/g来模拟replaceAll()函数：

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

ログイン後にコピー

10) 合并数组

如果你需要合并两个数组，你可以使用Array.concat()函数：

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

ログイン後にコピー

但是，这个函数对于大数组来说不并合适，因为它将会创建一个新的数组并消耗大量的内存。在这种情况下，你可以使用Array.push.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];

ログイン後にコピー

11) 把NodeList转换成数组

如果运行document.querySelectorAll("p")函数，它会返回一个DOM元素数组，即NodeList对象。但是这个对象并没有一些属于数组的函数，例如：sort()，reduce()，map()，filter()。为了启用这些函数，以及数组的其他的原生函数，你需要将NodeList转换为数组。要进行转换，只需使用这个函数：[] .slice.call（elements）：

var elements = document.querySelectorAll("p"); // NodeList  
var arrayElements = [].slice.call(elements); // 现在已经转换成数组了 
var arrayElements = Array.from(elements); // 把NodeList转换成数组的另外一个方法

ログイン後にコピー

12) 对数组元素进行洗牌

如果要像外部库Lodash那样对数据元素重新洗牌，只需使用这个技巧：

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

ログイン後にコピー

结论

现在，你已经学到了一些有用的JS技巧，它们主要用于缩减JavaScript代码量，其中一些技巧在许多流行的JS框架都使用到，如Lodash，Underscore.js，Strings.js等。如果你知道其他JS技巧，欢迎分享！

【相关推荐】

1. Javascript免费视频教程

2. JavaScript运动框架之多值运动的具体介绍（四）

3. JavaScript运动框架之多物体任意值运动的示例代码分享（三）

4. JavaScript运动框架之如何解决防抖动问题、悬浮对联（二）

5. JavaScript运动框架之如何解决速度正负取整问题（一）

以上がJavaScript の最も実践的な 12 のスキルを共有するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。