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

  • 常见的几种类数组对象:
  1. arguments对象

arguments 对象;
function fun() {
return arguments;
}
fun(1,2,3)
// Arguments(3) [1, 2, 3, callee: ƒ, Symbol(Symbol.iterator): ƒ]
在这里插入图片描述

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

NodeList(比如
document.getElementsByTagName(‘img’)
// HTMLCollection(3) [img, img, img]
在这里插入图片描述

  1. typedArray(比如 Int32Array);

这里是引用

  1. 使用 jQuery 获取的元素

$('img')// init(3) [img, img, img, prevObject: init(1), context: document, selector: "img"]

  • 类数组对象处理

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 对象。
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页