前端如何优雅的处理类数组对象

最新推荐文章于 2024-03-09 13:00:00 发布

懒人修

最新推荐文章于 2024-03-09 13:00:00 发布

阅读量257

点赞数

分类专栏：随笔

本文链接：https://blog.csdn.net/weixin_44268707/article/details/108711169

版权

随笔专栏收录该内容

21 篇文章 0 订阅

订阅专栏

常见的几种类数组对象：

arguments对象

arguments 对象；
function fun() {
return arguments;
}
fun(1,2,3)
// Arguments(3) [1, 2, 3, callee: ƒ, Symbol(Symbol.iterator): ƒ]

NodeList（比如 document.getElementsByClassName(‘a’) 得到的结果；
document.getElementsByTagName(‘img’)
// HTMLCollection(3) [img, img, img]

NodeList（比如
document.getElementsByTagName(‘img’)
// HTMLCollection(3) [img, img, img]

typedArray（比如 Int32Array）；

使用 jQuery 获取的元素

类数组对象处理

Array.from()、Array.prototype.slice.call()、[…]、Array.protype.concat.apply()

const memberList = Array.prototype.slice.call($('#MemberList li'));
const memberList = [...document.getElementsByTagName("li")];
const memberList = Array.prototype.concat.apply([], $('#MemberList li'));
const memberList = Array.from($('#MemberList li'));  
Array.from语法如下：
Array.from(arrayLike[, mapFn[, thisArg]])
参数：
arrayLike 想要转换成数组的伪数组对象或可迭代对象。
mapFn 可选如果指定了该参数，新数组中的每个元素会执行该回调函数。
thisArg 可选可选参数，执行回调函数 mapFn 时 this 对象。