JavaScript的技巧

在 JavaScript 中 陣列（Array）隨處可見，使用ECMAScript 6 中的新特性 擴充運算子 我們可以做很多很棒事情。

1. 迭代一個空數組

---

JavaScript 中直接建立的陣列是鬆散的，以至於會有很多坑。試著用數組的構造方法創建一個數組，你就會瞬間明白了。

const arr = new Array(4);
[undefined, undefined, undefined, undefined]
// 谷歌浏览器中是 [empty x 4]

你會發現，透過一個鬆散的陣列去循環呼叫一些轉換是非常困難的。

const arr = new Array(4);
arr.map((elem, index) => index);
[undefined, undefined, undefined, undefined]

想要解決這個問題，你可以使用在建立新陣列的時候使用 Array.apply。

const arr = Array.apply(null, new Array(4));
arr.map((elem, index) => index);
[0, 1, 2, 3]

2. 給方法傳一個空參數

---

#如果你想呼叫一個方法，不填其中的一個參數時，JavaScript 就會報錯。

method('parameter1', , 'parameter3'); // Uncaught SyntaxError: Unexpected token ,

一個我們常用的解決方法是傳遞 null 或 undefined。

method('parameter1', null, 'parameter3') // or
method('parameter1', undefined, 'parameter3');

根據 ES6 中對擴充運算子的介紹，有一個更簡潔的方法可以將空參數傳遞給一個方法。如同上面所提到的，陣列是鬆散的，所以給它傳空值是可以的，我們正是用到了這個優點。

method(...['parameter1', , 'parameter3']); // 代码执行了...

3. 陣列去重

---

我一直不懂為什麼陣列不提供一個內建函數可以讓我們方便的取到去重以後的值。擴充運算子幫到了我們，使用擴充運算子來配合 Set可以產生一個不重複的陣列。

const arr = [...new Set([1, 2, 3, 3])];
// [1, 2, 3]

4.從後向前取得陣列元素

---

#如果你想從後向前取得一個陣列的元素，可以這樣寫：

var arr = [1, 2, 3, 4]

console.log(arr.slice(-1)) // [4]
console.log(arr.slice(-2)) // [3, 4]
console.log(arr.slice(-3)) // [2, 3, 4]
console.log(arr.slice(-4)) // [1, 2, 3, 4]

5.短路條件句

---

如果你想在某個條件邏輯值為true時，執行某個函數，就像這樣：

if (condition) {
  dosomething()
}

這時，你可以這樣子運用短路：

condition && dosomething()

6.用運算子「||」 來設定預設值

---

##如果你必須給一個變數賦預設值，可以簡單的這樣寫：

var a

console.log(a) // undefined
a = a || 'default value'
console.log(a) // default value
a = a || 'new value'
console.log(a) // default value

7.在相等比較中使用Object.is()

##我們都知道JavasSript 是弱類型的，並且當我們使用==作比較時，在某些情況下由於類型轉換或者說“把兩個操作數中的一個轉換成另一個，然後再比較”，會出現意想不到的結果。就像這樣：

---

0 == ' ' //true
null == undefined //true
[1] == true //true

因此 JavaScript 中給我們提供了全等運算子 ===, 它比不全等運算子更嚴格且不會發生型別轉換。但是用 === 來進行比較並不是最好的解決方案。你可能會得到：

NaN === NaN //false

ES6 中提供了新的Object.is() 方法，它具有=== 的一些特點，而且更好、更精確，在一些特殊案例中表現的很好：

Object.is(0 , ' '); //false
Object.is(null, undefined); //false
Object.is([1], true); //false
Object.is(NaN, NaN); //true

8.給一個函數Bind 物件

我們常常需要將一個物件綁定到一個方法的this 上。在 JS 中，如果你想要呼叫一個函數並指定它的 this 時可以使用 bind 方法。

---

Bind 語法

fun.bind(thisArg[, arg1[, arg2[, ...]]])

參數

thisArg

當綁定函數被呼叫時，該參數會作為原函數運行時的this 指向。

arg1, arg2, …

當綁定函數被呼叫時，這些參數將置於實參之前傳遞給被綁定的方法。

傳回值

傳回由指定的this值和初始化參數改造的原始函數拷貝

JS 中的實例

const myCar = {
 brand: 'Ford',
 type: 'Sedan',
 color: 'Red'
};

const getBrand = function () {
 console.log(this.brand);
};

const getType = function () {
 console.log(this.type);
};

const getColor = function () {
 console.log(this.color);
};

getBrand(); // object not bind,undefined

getBrand(myCar); // object not bind,undefined

getType.bind(myCar)(); // Sedan

let boundGetColor = getColor.bind(myCar);
boundGetColor(); // Red

9.取得檔案拓展名稱

解決方法1: 正規表示式

function getFileExtension1(filename) {
  return (/[.]/.exec(filename)) ? /[^.]+$/.exec(filename)[0] : undefined;
}

解決方法2: String的split方法

function getFileExtension2(filename) {
  return filename.split('.').pop();
}

這兩個解決方法不能解決一些邊緣情況，這有另一個更強大的解決方法。

解決方法3: String的slice、lastIndexOf方法

function getFileExtension3(filename) {
  return filename.slice((filename.lastIndexOf(".") - 1 >>> 0) + 2);
}

console.log(getFileExtension3(''));                            // ''
console.log(getFileExtension3('filename'));                    // ''
console.log(getFileExtension3('filename.txt'));                // 'txt'
console.log(getFileExtension3('.hiddenfile'));                 // ''
console.log(getFileExtension3('filename.with.many.dots.ext')); // 'ext'

這是如何實作的呢?

String.lastIndexOf() 方法傳回指定值（本例中的'.'）在呼叫方法的字串中最後出現的位置，如果沒找到則傳回-1。
對於'filename'和'.hiddenfile'，lastIndexOf的回傳值分別為0和-1無符號右移運算子(»>) 將-1轉換為4294967295，將-2轉換為4294967294，這個方法可以確保邊緣情況時檔案名稱不變。
String.prototype.slice() 從上面計算的索引處提取檔案的副檔名。如果索引比檔案名稱的長度大，則結果為""。

10.預防unapply攻擊

#重寫內建物件的原型方法，外部程式碼可以透過重寫程式碼達到暴漏和修改已綁定參數的函數。這在es5的方法下使用polyfill時是一個嚴重的安全問題。

---

// bind polyfill 示例
function bind(fn) {
  var prev = Array.prototype.slice.call(arguments, 1);
  return function bound() {
    var curr = Array.prototype.slice.call(arguments, 0);
    var args = Array.prototype.concat.apply(prev, curr);
    return fn.apply(null, args);
  };
}


// unapply攻击
function unapplyAttack() {
  var concat = Array.prototype.concat;
  Array.prototype.concat = function replaceAll() {
    Array.prototype.concat = concat; // restore the correct version
    var curr = Array.prototype.slice.call(arguments, 0);
    var result = concat.apply([], curr);
    return result;
  };
}

上面的函数声明忽略了函数bind的prev参数，意味着调用unapplyAttack之后首次调用.concat将会抛出错误。

使用Object.freeze，可以使对象不可变，你可以防止任何内置对象原型方法被重写。

(function freezePrototypes() {
  if (typeof Object.freeze !== 'function') {
    throw new Error('Missing Object.freeze');
  }
  Object.freeze(Object.prototype);
  Object.freeze(Array.prototype);
  Object.freeze(Function.prototype);
}());

11.Javascript多维数组扁平化

---

下面是将多位数组转化为单一数组的三种不同方法。

var arr = [[1, 2],[3, 4, 5], [6, 7, 8, 9]];

期望结果：

[1, 2, 3, 4, 5, 6, 7, 8, 9]

解决方案1：使用concat()和apply()

var newArr = [].concat.apply([], arr);
// [1, 2, 3, 4, 5, 6, 7, 8, 9]

解决方案2：使用reduce()

var newArr = arr.reduce(function(prev, curr) {
  return prev.concat(curr);
});
// [1, 2, 3, 4, 5, 6, 7, 8, 9]

解决方案3：使用 ES6 的展开运算符

var newArr = [].concat(...arr);
console.log(newArr);
// [1, 2, 3, 4, 5, 6, 7, 8, 9]

12. 函数中如何使用可选参数（包括可选回调函数）

---

实例函数中第2个与第3个参数为可选参数

function example( err, optionA, optionB, callback ) {
        // 使用数组取出arguments
        var args = new Array(arguments.length);
        for(var i = 0; i < args.length; ++i) {
            args[i] = arguments[i];
        };
        
        // 第一个参数为错误参数
        // shift() 移除数组中第一个参数并将其返回
        err = args.shift();

        // 如果最后一个参数是函数，则它为回调函数
        // pop() 移除数组中最后一个参数并将其返回
        if (typeof args[args.length-1] === &#39;function&#39;) { 
            callback = args.pop();
        }
        
        // 如果args中仍有元素，那就是你需要的可选参数
        // 你可以像这样一个一个的将其取出：
        if (args.length > 0) optionA = args.shift(); else optionA = null;
        if (args.length > 0) optionB = args.shift(); else optionB = null;

        // 像正常一样继续：检查是否有错误
        if (err) { 
            return callback && callback(err);
        }
        
        // 打印可选参数
        console.log(&#39;optionA:&#39;, optionA);
        console.log(&#39;optionB:&#39;, optionB);
        console.log(&#39;callback:&#39;, callback);

        /* 你想做的逻辑 */

    }

    // ES6语法书写更简短
    function example(...args) {
        // 第一个参数为错误参数
        const err = args.shift();
        // 如果最后一个参数是函数，则它为回调函数
        const callback = (typeof args[args.length-1] === &#39;function&#39;) ? args.pop() : null;

        // 如果args中仍有元素，那就是你需要的可选参数你可以像这样一个一个的将其取出：
        const optionA = (args.length > 0) ? args.shift() : null;
        const optionB = (args.length > 0) ? args.shift() : null;
        // ... 重复取更多参数

        if (err && callback) return callback(err);

        /* 你想做的逻辑 */
    }

推荐教程：《JS教程》

以上是JavaScript的技巧的詳細內容。更多資訊請關注PHP中文網其他相關文章！