js小技巧--摘錄1

原文地址https://github.com/loverajoel/jstips

一、數組中插入元素

a.尾部追加

var arr = [1,2,3,4,5];
var arr2 = [];
arr.push(6);
arr[arr.length] = 6;
arr2 = arr.concat([6]);

//快慢排序
1. arr[arr.length] = 6; // 平均42 345 449 ops/sec
2. arr.push(6); // 慢34.66%
3. arr2 = arr.concat([6]); // 慢85.79%

b.頭部追加

ar arr = [1,2,3,4,5];
arr.unshift(0);
[0].concat(arr);

//最快的爲
1. [0].concat(arr); // 平均4 972 622 ops/sec
2. arr.unshift(0); // 慢64.70%

c.數組中間插入元素

var items = ['one', 'two', 'three', 'four'];
items.splice(items.length / 2, 0, 'hello');

 

二、if嵌套語句的優化

if (color) {
  if (color === 'black') {
    printBlackBackground();
  } else if (color === 'red') {
    printRedBackground();
  } else if (color === 'blue') {
    printBlueBackground();
  } else if (color === 'green') {
    printGreenBackground();
  } else {
    printYellowBackground();
  }
}
//能夠改寫爲
var colorObj = {
  'black': printBlackBackground,
  'red': printRedBackground,
  'blue': printBlueBackground,
  'green': printGreenBackground,
  'yellow': printYellowBackground
};


if (color in colorObj) {
  colorObj[color]();
}

三、sort排序含音節字符的字符串

Javascript有一個原生方法sort能夠排列數組。一次簡單的array.sort()將每個數組元素視爲字符串並按照字母表排列。你也能夠提供自定義排列方法

['Shanghai', 'New York', 'Mumbai', 'Buenos Aires'].sort();
// ["Buenos Aires", "Mumbai", "New York", "Shanghai"]

//下面非ASCLL元素失效，sort只在英文下生效
// 西班牙語
['único','árbol', 'cosas', 'fútbol'].sort();
// ["cosas", "fútbol", "árbol", "único"] // bad order

// 德語
['Woche', 'wöchentlich', 'wäre', 'Wann'].sort();
// ["Wann", "Woche", "wäre", "wöchentlich"] // bad order

處理辦法：由ECMAScript國際化API提供的localeCompare和Intl.Collator。

['único','árbol', 'cosas', 'fútbol'].sort(function (a, b) {
  return a.localeCompare(b);
});
// ["árbol", "cosas", "fútbol", "único"]

['Woche', 'wöchentlich', 'wäre', 'Wann'].sort(function (a, b) {
  return a.localeCompare(b);
});
// ["Wann", "wäre", "Woche", "wöchentlich"]

['único','árbol', 'cosas', 'fútbol'].sort(Intl.Collator().compare);
// ["árbol", "cosas", "fútbol", "único"]

['Woche', 'wöchentlich', 'wäre', 'Wann'].sort(Intl.Collator().compare);
// ["Wann", "wäre", "Woche", "wöchentlich"]

 

四、使用嚴格模式

程序員喜歡電腦幫咱們作一些無聊的工做，喜歡它自動的檢查咱們工做上的錯誤。這就是」use strict」幫咱們作的，它把咱們的錯誤轉變爲了JavaScript錯誤。

// 全腳本嚴格模式
"use strict";
var v = "Hi!  I'm a strict mode script!";

//或者
function f()
{

  // 方法級嚴格模式
  'use strict';
  function nested() { return "And so am I!"; }
  return "Hi!  I'm a strict mode function!  " + nested();
}
function f2() { return "I'm not strict."; }

經過在JavaScript文件或方法內引入此指令，使JavaScript引擎運行在嚴格模式下，這直接禁止了許多大項目中不受歡迎的操做。另外，嚴格模式也改變了如下行爲：

• 只有被」var」聲明過的變量才能夠引用
• 試圖寫只讀變量時將會報錯
• 只能經過」new」關鍵字調用構造方法
• 「this」再也不隱式的指向全局變量
• 對eval()有更嚴格的限制
• 防止你使用預保留關鍵字命名變量

嚴格模式對於新項目來講是很棒的，但對於一些並無使用它的老項目來講，引入它也是頗有挑戰性的。若是你把全部js文件都鏈接到一個大文件中的話，可能致使全部文件都運行在嚴格模式下，這可能也會有一些問題。

它不是一個聲明，而是一個表達式，被低版本的JavaScript忽略。 嚴格模式的支持狀況：

• Internet Explorer 10+
• Firefox 4+
• Chrome 13+
• Safari 5.1+
• Opera 12+

五、將node list轉爲數組

querySelectorAll方法返回一個類數組對象稱爲node list。這些數據結構被稱爲「類數組

 

const nodelist = document.querySelectorAll('div');
const nodelistToArray = Array.apply(null, nodelist);
//或者
const nodelistToArray = Array.prototype.slice.call(nodelist);

ToArray const nodelist= [...document.querySelectorAll('div')]; // 返回一個真正的數組

//以後 .. 

nodelistToArray.forEach(...);
nodelistToArray.map(...);
nodelistToArray.slice(...);

六、檢查對象是否存在某屬性

var myObject = {
  name: '@tips_js'
};


if (myObject.name) { ... }
//這樣能夠
//同時用hasOwnProperty和in操做符能夠區分屬性是繼承的仍是自身的
var myObject = {
  name: '@tips_js'
};

myObject.hasOwnProperty('name'); // true
'name' in myObject; // true


myObject.hasOwnProperty('valueOf'); // false, valueOf 繼承自原型鏈
'valueOf' in myObject; // true

七、contains功能

 位操做符 ~, 「按位操做符操做數字的二進制形式，可是返回值依然是標準的JavaScript數值。」

它將-1轉換爲0,而0在javascript爲false,因此:

var someText = 'text';
!!~someText.indexOf('tex'); // someText contains "tex" - true
!~someText.indexOf('tex'); // someText NOT contains "tex" - false
~someText.indexOf('asd'); // someText doesn't contain "asd" - false
~someText.indexOf('ext'); // someText contains "ext" - true
//在ES6中提供了includes() 方法供咱們判斷一個字符串是否包含了另外一個字符串:
'something'.includes('thing'); // true
//在ECMAScript 2016 (ES7)甚至可能將其應用於數組，像indexOf同樣:
!!~[1, 2, 3].indexOf(1); // true
[1, 2, 3].includes(1); // true

八、快速可是危險的取整方法(~~)

一個按位非操做符~首先將輸入input截取爲32位，而後將其轉換爲-(input+1)。所以雙按位非操做符將輸入轉換爲-(-(input + 1)+1)，使其成爲一個趨向於0取整的好工具。對於數字的輸入，它很像Math.trunc()。失敗時返回0,這可能在解決Math.trunc()轉換錯誤返回NaN時是一個很好的替代。

console.log(~~47.11)  // -> 47
console.log(~~1.9999) // -> 1
console.log(~~3)      // -> 3
console.log(~~-3.66)      // -> -3

 

當處理大數時

由於~首先將數組轉換爲32位，~~的結果僞值在 ±2.15*10^12左右。若是你沒有明確的檢查輸入值的範圍，當轉換的值最終與原始值有很大差距時，用戶就可能觸發未知的行爲：

a = 2147483647.123  // 比32位最大正數，再多一點
console.log(~~a)    // ->  2147483647     (ok)
a += 10000          // ->  2147493647.123 (ok)
console.log(~~a)    // -> -2147483648     (huh?)

9.安全拼接字符串

var one = 1;
var two = 2;
var three = '3';

var result = ''.concat(one, two, three); //"123"

十、對數組進行洗牌

這段代碼運用了優秀的Fisher-Yates Shuffling算法對數組進行洗牌

        const shuffle = arr => {
            for (let i = arr.length - 1; i > 0; i--) {
                let j = ~~(Math.random() * (i + 1));
                [arr[i],arr[j]] = [arr[j],arr[i]]
            } 
            return arr;
        }
var a = [1, 2, 3, 4, 5, 6, 7, 8];
var b = shuffle(a);
console.log(b);
// [2, 7, 8, 6, 5, 3, 1, 4]

十一、清空數組的兩種方法

// 定義一個數組
var list = [1, 2, 3, 4];

    //清空數組
    list = [];
    
    //或者
    list.length = 0;

• list = [] 將一個新的數組的引用賦值給變量，其餘引用並不受影響。 這意味着之前數組的內容被引用的話將依舊存在於內存中，這將致使內存泄漏。

• list.length = 0 刪除數組裏的全部內容，也將影響到其餘引用。

 然而，若是你複製了一個數組（A 和 Copy-A），若是你用list.length = 0清空了它的內容，複製的數組也會清空它的內容。

var foo = [1,2,3];
var bar = [1,2,3];
var foo2 = foo;
var bar2 = bar;
foo = [];
bar.length = 0;
console.log(foo, bar, foo2, bar2);

//[] [] [1, 2, 3] []