最近在看廖雪峰的JS课程,浏览器中的操作DOM的那一章,有这样一道题。
JavaScript
Swift
HTML
ANSI C
CSS
DirectX
- JavaScript
- Swift
- HTML
- ANSI C
- CSS
- DirectX
把与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]
参考链接: