类数组及类数组如何转为数组

963 阅读2分钟

什么是类数组

1. 定义:Javascript中看起来像数组却又不是数组的对象,将其称为类数组。

2. 类数组的特点有:

  • 具有length属性,其它属性(索引)为非负整数
  • 具有方括号语法([])
  • 不具有数组所具有的方法,eg:shift,unshift,splice,slice,concat,reverse,sort等

3.常见的类数组有哪些?

  • arguments

ECMAscript函数的参数与大多数其他语言的参数有所不同。ECMAscript函数不介意传递进来多少个参数,也不在乎传递进来的是什么类型的参数。无论传递进来多少个,解析器都不会报错。因为ECMAscript中的参数在内部是用一个数组来表示的,函数接收的始终是这个数组,并不关心其内部包含的哪些参数(如果其中有参数)。在函数体内可以通过arguments队形来访问这个参数数组,从而获取传递给函数的每一个参数。 arguments只是与数组类似(它并不是array的实例),因为可以使用方括号语法([])访问它的每一个元素,(即第一个元素是arguments[0],第二个为arguments[1],依此类推),使用length属性来确定传递进来多少个参数。

  • NodeList

nodlist是一种类数组对象,用于保存一组有序的节点,可以通过位置来访问到这些节点。Nodelist对象是一个节点的集合,是由Node.childNodes和document.querySelectorAll()、document.querySelect(),以及getElementByTagName()返回包含零或者多个元素的NodeList。

  • HTMLCollection

类似: var images = document.getElementsByTagName("img");

  • NamedNodeMap

类似:var div = document.getElementById("div1");

类数组如何转为数组

尝试定义一个类数组

var objArr = {1:'类',2:'数',4:'组',length:5};

1. Array.from()方法

var newArr = Array.from(objArr);
console.log(newArr);
//[undefined, "类", "数", undefined, "组"]

2. Array.prototype.slice.call(arguments)

var newArr = Array.prototype.slice.call(objArr);
console.log(newArr);
//[empty, "类", "数", empty, "组"]

3.Array.prototype.concat.apply([],arguments)

var newArr = Array.prototype.concat.apply([],objArr);
//或者 newArr = [].concat.apply([],objArr);
console.log(newArr);
//[undefined, "类", "数", undefined, "组"]

4.新建一个数组,然后直接push进去

var newArr = [];
for (var i = 0; i < objArr.length; i++)
{
  newArr.push(objArr[i]);
}
console.log(newArr);
//[undefined, "类", "数", undefined, "组"]

5.Object.values激发新思路,但是这种方法得到的数组会过滤空下标的值

delete objArr.length
//或者 newArr = [].concat.apply([],objArr);
console.log(objArr);
//{1: "类", 2: "数", 4: "组"}
var newArr = Object.values(objArr);
console.log(newArr);
//[ "类", "数", "组"]