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

481 0 0

作者:星腾

最近在看廖雪峰的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]

参考链接：

内容来源于网络如有侵权请私信删除

标签： javascript 技术文章开发

你还没有登录，请先登录或注册！

还没有人评论，欢迎说说您的想法！

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