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]

参考链接：

巴特西

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

最新文章

热门文章