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开发技术不相关的节点删掉。

我的答案过于复杂，我上网百度后，发现了这样的解法。

1'use strict';
2
3var parent = document.getElementById('test-list');
4var children = [].slice.call(parent.children); //Array.prototype.slice.call()
5children.forEach((element) => {
6    for (var s of ['Swift', 'ANSI C', 'DirectX']) {
7        if (element.innerText == s) {
8            parent.removeChild(element);
9        }
10    }
11});
12
13// 测试:
14(function () {
15    var
16        arr, i,
17        t = document.getElementById('test-list');
18    if (t && t.children && t.children.length === 3) {
19        arr = [];
20        for (i = 0; i < t.children.length; i ++) {
21            arr.push(t.children[i].innerText);
22        }
23        if (arr.toString() === ['JavaScript', 'HTML', 'CSS'].toString()) {
24            console.log('测试通过!');
25        }
26        else {
27            console.log('测试失败: ' + arr.toString());
28        }
29    }
30    else {
31        console.log('测试失败!');
32    }
33})();

我看到Array.prototype.slice.call()时，我是一脸蒙圈的。后来看了MDN和许多别人的博客才理解。

MDN中对于Array.prototype.slice.()的介绍中，提到了类数组对象。以下是原文：

slice 方法可以用来将一个类数组（Array-like）对象/集合转换成一个新数组。你只需将该方法绑定到这个对象上。 一个函数中的 arguments 就是一个类数组对象的例子。

1function list() {
2  return Array.prototype.slice.call(arguments);
3}
4
5var 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)加上第二个参数。

1function list() {
2  return Array.prototype.slice.call(arguments, 1);
3}
4
5var list2 = list(4, 5, 6);
6list2; //[5, 6]

参考链接：

1. MDN文档
2. bowen-CSDN