Array.prototype.slice.call()的理解

最近在看廖雪峰的JS課程，瀏覽器中的操作DOM的那一章，有這樣一道題。

• JavaScript
• Swift
• HTML
• ANSI C
• CSS
• DirectX

<!-- HTML結構 -->
<ul id="test-list">
    <li>JavaScript</li>
    <li>Swift</li>
    <li>HTML</li>
    <li>ANSI C</li>
    <li>CSS</li>
    <li>DirectX</li>
</ul>

把與Web開發技術不相關的節點刪掉。

我的答案過於複雜，我上網百度後，發現了這樣的解法。

'use strict';

var parent = document.getElementById('test-list');
var children = [].slice.call(parent.children); //Array.prototype.slice.call()
children.forEach((element) => {
    for (var s of ['Swift', 'ANSI C', 'DirectX']) {
        if (element.innerText == s) {
            parent.removeChild(element);
        }
    }
});

// 測試:
;(function () {
    var
        arr, i,
        t = document.getElementById('test-list');
    if (t && t.children && t.children.length === 3) {
        arr = [];
        for (i = 0; i < t.children.length; i ++) {
            arr.push(t.children[i].innerText);
        }
        if (arr.toString() === ['JavaScript', 'HTML', 'CSS'].toString()) {
            console.log('測試通過!');
        }
        else {
            console.log('測試失敗: ' + arr.toString());
        }
    }
    else {
        console.log('測試失敗!');
    }
})();

我看到Array.prototype.slice.call()時，我是一臉蒙圈的。後來看了MDN和許多別人的博客才理解。

MDN中對於Array.prototype.slice.()的介紹中，提到了類數組對象。以下是原文：

slice 方法可以用來將一個類數組（Array-like）對象/集合轉換成一個新數組。你只需將該方法綁定到這個對象上。 一個函數中的 arguments 就是一個類數組對象的例子。

function list() {
  return Array.prototype.slice.call(arguments);
}

var list1 = list(1, 2, 3); // [1, 2, 3]

除了使用 Array.prototype.slice.call(arguments)，你也可以簡單的使用 [].slice.call(arguments) 來代替。

所以arguments並不是真正的數組對象，只是與數組類似而已，所以它並沒有slice這個方法，而Array.prototype.slice.call(arguments, 1)可以理解成是讓arguments轉換成一個數組對象，讓arguments具有slice()方法。

同理可知，我們可以給Array.prototype.slice.call(arguments)加上第二個參數。

function list() {
  return Array.prototype.slice.call(arguments, 1);
}

var list2 = list(4, 5, 6);
list2; //[5, 6]

參考鏈接：

1. MDN文檔
2. bowen-CSDN