12個非常實用的JavaScript小技巧

jsbintask 發布于2019-08-20 18:37 / 1448人閱讀

摘要：如果第一個參數返回的值為，那么第二個值將會認為是一個默認值。獲取數組中最后一個元素用來獲取和之間的數組元素。但這個對象不具有數組的函數功能，比如等。

使用!!操作符轉換布爾值

有時候我們需要對一個變量查檢其是否存在或者檢查值是否有一個有效值，如果存在就返回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.push().apply(arr1,arr2)來替代創建一個新數組。這種方法不是用來創建一個新的數組，其只是將第一個第二個數組合并在一起，同時減少內存的使用：

var array1 = [1,2,3];
var array2 = [4,5,6];
array1.push.apply(array1, array2); //6
console.log(array1);// [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() {return Math.random() - 0.5 })); // [2,1,3]

參考

轉載地址：http://www.codeceo.com/article/12-useful-javascript-tips.html

GPU云服務器云服務器小程序的實用方法實用的小程序實用的小程序免費比較實用的小程序

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/84766.html

45個實用的JavaScript小貼士、小技巧和最佳實踐

摘要：翻譯正文第一次聲明變量時，請不要忘記使用關鍵字聲明使用代替空字符串轉成布爾值都為每行代碼的末尾最好都加上個分號最好給對象都添加上構造函數在使用和盡量小心。翻譯介紹翻譯標題：45 Useful JavaScript Tips, Tricks and Best Practices 翻譯來源：http://modernweb.com/2013/12/23/45-useful-java...

Moxmi 2019-08-14 11:56 評論0 收藏0
七個 JavaScript 實用小技巧

摘要：接下來先介紹七個馬上就能用起來的小技巧。老實講，文章所說的小技巧大部分都是新增的語法特性，，或者說已經發布好些年頭，這些特性大家可能已經非常熟識。，對象合并，不多說，大部分場景可以取代。作者：@davidwalshblog原文：7 Useful JavaScript Tricks 和許多其他語言一樣，JavaScript 也需要靠很多小技巧去完成各種不同的事情。有的可能早已經廣為人...

Lin_YT 2019-08-23 17:16 評論0 收藏0
45 個實用的 JavaScript 技巧、竅門和最佳實踐

摘要：使用閉包實現私有變量譯者添加未在構造函數中初始化的屬性在語句結尾處使用分號在語句結尾處使用分號是一個很好的實踐?？偨Y我知道還有很多其他的技巧，竅門和最佳實踐，所以如果你有其他想要添加或者對我分享的這些有反饋或者糾正，請在評論中指出。 showImg(http://segmentfault.com/img/bVbJnR); 如你所知，JavaScript是世界上第一的編程語言(編者注：2...

魏憲會 2019-08-21 12:06 評論0 收藏0
實用Javascript調試技巧分享

摘要：見過太多同學調試只會用簡單的甚至，看著真為他們捉雞。。下面我就分享一些實用且聰明的調試技巧，希望能讓大家調試自己代碼的時候更加從容自信。其實提供了文件的搜索功能，只不過大部分時候我們給忽略了。。見過太多同學調試Javascript只會用簡單的console.log甚至alert，看著真為他們捉雞。。因為大多數同學追求優雅而高效地寫代碼，卻忽略了如何優雅而高效地調試代碼，不得不說是有點...

jk_v1 2019-08-23 18:06 評論0 收藏0
7個javascript實用小技巧

摘要：每種編程語言都有一些黑魔法或者說小技巧，也不例外，大部分是借助或者瀏覽器新特性實現。下面介紹的個實用小技巧，相信其中有些你一定用過。當然不管語言如何變化，我們總能在編程中總結一些小技巧來精簡代碼。 showImg(https://segmentfault.com/img/remote/1460000018902642); 每種編程語言都有一些黑魔法或者說小技巧，JS也不例外，大部分是借...

tinysun1234 2019-08-23 16:59 評論0 收藏0