關於分享一些常用的JavaScript技巧

有時候我們需要對乙個變數查檢其是否存在或者檢查值是否有乙個有效值，如果存在就返回 true 值。為了做這樣的驗證，我們可以使用!!操作符來實現是非常的方便與簡單。對於變數可以使用 !!variable 做檢測，只要變數的值為:0、null、」「、undefined 或者 nan 都將返回的是 false，反之返回的是 true。比如下面的示例：

function account(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) 
console.log(tonumber("1234")); // 1234
console.log(tonumber("acb")); // nan

這個也適用於 date，在本例中，它將返回的是時間戳數字：

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

如果你寫了一段這樣的**：

if (conected)

你也可以將變數簡寫，並且使用 && 和函式連線在一起，比如上面的示例，可以簡寫成這樣：

conected && login();

如果一些屬性或函式存在於乙個物件中，你也可以這樣做檢測，如下面的**所示：

user && user.login();

在es6中有預設引數這一特性。為了在老版本的瀏覽器中模擬這一特性，可以使用||操作符，並且將將預設值當做第二個引數傳入。如果第乙個引數返回的值為 false，那麼第二個值將會認為是乙個預設值。如下面這個示例：

function user(name, age) 
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

for(var i = 0; i < array.length; i++)

如果是乙個小型陣列，這樣做很好，如果你要處理的是乙個大的陣列，這段**在每次迭代都將會重新計算陣列的大小，這將會導致一些延誤。為了避免這種現象出現，可以將 array.length 做乙個快取：

var length = array.length;
for(var i = 0; i < length; i++)

也可以這樣寫：

for(var i = 0, length = array.length; i < length; i++)

當你需要檢測一些屬性是否存在，避免執行未定義的函式或屬性時，這個小技巧就顯得很有用。如果你打算定些一些跨相容的瀏覽器**，你也可能會用到這個小技巧。例如，你想使用 document.queryselector() 來選擇乙個 id，並且讓它能相容ie6瀏覽器，但是在ie6瀏覽器中這個函式是不存在的，那麼使用這個操作符來檢測這個函式是否存在就顯得非常的有用，如下面的示例：

if ('queryselector' in document)  else

在這個示例中，如果 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];

var array1 = [1,2,3];
var array2 = [4,5,6];

如果你執行 document.queryselectorall(「p」) 函式時，它可能返回dom元素的陣列，也就是nodelist物件。但這個物件不具有陣列的函式功能，比如 sort()、reduce()、map()、filter() 等。為了讓這些原生的陣列函式功能也能用於其上面，需要將節點列表轉換成陣列。可以使用 .slice.call(elements) 來實現：

var elements = document.queryselectorall("p"); // nodelist
var arrayelements = .slice.call(elements); // 將nodelist轉化為陣列
var arrayelements = array.from(elements); // 另一種方式將nodelist轉化為陣列

對於陣列元素的洗牌，不需要使用任何外部的庫，比如lodash，只要這樣做：

var list = [1,2,3];
console.log(list.sort(function() )); // [2,1,3]

關於分享一些常用的JavaScript技巧

關於Linux使用的一些分享

分享 Git常用的一些命令

關於一些常用類

關於 分享一些常用的JavaScript技巧

關於Linux使用的一些分享

分享 Git常用的一些命令

關於一些常用類

相關推薦

關於分享一些常用的JavaScript技巧