【javascript 技巧】Array.prototype.slice的妙用

 

 

Array.prototype.slice的妙用

開門見山，關於Array 的slice的用法可以參考這里 http://www.w3school.com.cn/js/jsref_slice_array.asp 。

除了常見的從某個數組中抽取出新的數組外，它還有一些其他的用法。

經常的，可以看到Array.prototype.slice(arguments, 0); 這個寫法可以用於function() {} 內，這樣可以將函數的參數列表轉換成一個真正的數組。請看一個例子：

var slice = Array.prototype.slice;
var toString = Object.prototype.toString;

(function() {
  var args = arguments;
  console.log(args, toString.call(args)); // [1, 2, 3] "[object Arguments]" 
  var argsArr = slice(args, 0);
  console.log(argsArr, toString.call(argsArr)); // [1, 2, 3] "[object Array]" 
}(1,2,3))

我們可以看到函數的參數列表arguments通過slice調用以后，一秒鍾變Array了。

同樣的，也可以將選中的DOM元素轉換成數組：

slice.call(document.querySelectorAll("div"));

順藤摸瓜，我們想想，slide方法是否可以將對象轉換成數組呢？請看例子：

console.log(slice.call('string')); // ["s", "t", "r", "i", "n", "g"] 
console.log(slice.call(new String('string'))); // ["s", "t", "r", "i", "n", "g"] 

每次，字符串會直接被轉換成了一個數組。

但是，數字，布爾值的會轉換成一個空的數組：

console.log(slice.call(33));  // []

console.log(slice.call(true));  // []

普通的對象也會被轉換成空數組，除非你給它加上一個length屬性：

console.log(slice.call({name: 'obj'})); // []

console.log(slice.call({0: 'zero', 1: 'one'})); // []

console.log(slice.call({0: 'zero', 1: 'one', name: 'obj', length: 2}));  // ["zero", "one"] 

還有，它還可以用來clone數組：

var srcArr = [1,2,3];
var newArr = srcArr.slice(0);
console.log(srcArr, newArr);    // [1,2,3] [1,2,3]
console.log(srcArr == newArr);  // false

恩，今天就到這里。