NodeList和Array数组的区别

首先，什么是NodeList集合呢？如果你不懂的话，可以先参考如下代码（这里是我截取的代码块）：

<ul id="list"><li><input type="checkbox"/>1</li><li><input type="checkbox"/>2</li><li><input type="checkbox"/>3</li><li><input type="checkbox"/>4</li><li><input type="checkbox"/>5</li><li><input type="checkbox"/>6</li><li><input type="checkbox"/>7</li>
</ul>

var lis=document.querySelectorAll("li");
console.log(lis);  //控制台输出为：NodeList(7) [li, li, li, li, li, li, li]

从上面的代码块，相信大家对NodeList有些见解。NodeList含有数组的部分属性但又不完全是数组，也可以称之“伪数组”。这里可以使用Array.isArray()方法的返回值来检验是否为真正数组，若返回值为true为数组，返回值为false则非数组。

var lis=document.querySelectorAll("li");
console.log(Array.isArray(lis));    //false

为了更好的理解NodeList集合，我特意从网上查了些资料：NodeList是Dom操作得到的元素集合而不是普通数组，也可以称为“伪数组”，它含有数组的部分属性，如：length，索引；但NodeList自身最大的特点就是时效性（live），这里不做过多解释，想了解的伙伴自己动手~~~

最后一点：将NodeList转为数组方法：

方法一：通过深拷贝，遍历“伪数组”（这里是我将它称为“伪数组”），将遍历的值重新赋值给新数组，从而完成深拷贝。
方法二：浅拷贝，通过Array.from()方法对“伪数组”进行浅拷贝为数组的实例。

//    var lis=document.querySelectorAll("li");
//    console.log(lis);  //NodeList(7) [li, li, li, li, li, li, li]
//    var liss=Array.from(document.querySelectorAll("li"));
//    console.log(liss);  //[li, li, li, li, li, li, li]
//    var li=Array.isArray(document.querySelectorAll("li"));  //判断是否为数组
//    console.log(li);  //false

NodeList和Array数组的区别相关推荐

轻松搞懂python列表list 和numpy.array数组的区别
文章目录 1.列表 2.数组(array) 3.程序举例 3.1 创建 3.2 元素访问 3.2.1一维数组.列表访问 3.2.2 二维数组.列表访问 3.3 浅拷贝与深拷贝 1.列表 list是处理 ...
JavaScript的json和Array及Array数组的使用方法
1.关于json JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式.它基于ECMAScript的一个子集.也可以称为数据集和数组类似,能够存数据! //Ar ...
php 通过array_merge()和array+array合并数组的区别和效率比较
众所周知合并两个数组可以使用array_merge(),这是php提供的一个函数.另外还可以通过 array 的方式来合并数组,这两种直接有什么区别,哪一个的效率更高呢? array_merge() ...
java中Array和ArrayList区别
2019独角兽企业重金招聘Python工程师标准>>> 1)精辟阐述: 可以将 ArrayList想象成一种"会自动扩增容量的Array". 2)Array([] ...
列表（list）、元组（tuple）、字典（dictionary）、array(数组)-numpy、DataFrame-pandas 、集合（set）...
一.列表(list) 一组有序项目的集合.可变的数据类型[可进行增删改查] 列表是以方括号"[]"包围的数据集合,不同成员以","分隔. 列表中可以包含任何数据 ...
JavaScript中的数组与伪数组的区别
在JavaScript中,除了5种原始数据类型之外,其他所有的都是对象,包括函数(Function). 基本数据类型:String,boolean,Number,Undefined, Null 引用数 ...
Js Array数组ES5/ES6常用方法
Js Array数组ES5/ES6常用方法 1.栈方法(先进后出) push():在数组的最后一项后追加值(参数:可以为多个值或数组) 返回:数组的长度,改变了原数组. var a=[1,2,3] a ...
Array和ArrayList区别
Array和ArrayList区别 Array 在C#中的数组也是对象,实际上是Array类的实例. 主要区别 Array类型的变量在声明的同时,必须进行实例化,至少是初始化数组的大小,而 Array ...
doctrine find的对象转换成数组_「ES6基础」Array数组的新方法（上）
在日常工作中我们经常会与数组打交道,因此需要熟练掌握数组操作的相关方法,ES6中关于数组的操作,又给我们带来了哪些惊喜呢,Array数组操作又添加了哪些新方法? 本篇文章将从以下几个方面进行介绍: A ...

NodeList和Array数组的区别

最后一点：将NodeList转为数组方法：

NodeList和Array数组的区别相关推荐

最新文章

热门文章