Rumah >hujung hadapan web >tutorial js >jQuery中.makeArray()如何实现将多种类型转换成JS原生Array的实例分析

jQuery中.makeArray()如何实现将多种类型转换成JS原生Array的实例分析

黄舟asal: 2017-07-19 09:24:531426semak imbas

jQuery.makeArray(obj)这个函数从名字上来看很容易猜出它的用途：应该是用来将传入的对象转换成一个原生array

再看看官网上对它的解释：Convert an array-like object into a true JavaScript array.（将一个类似数组对象转换为JS原生的数组）

那么怎么样的object才可以称为"array-like object"呢？这个问题不急着回答，相信看完文章你会明白的，先看看下面的实验

将HTMLCollection转换成原生Array

<!doctype html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>jQuery.makeArray demo</title>
		<style>
			p {
				color: red;
			}
		</style>
		<script src="//code.jquery.com/jquery-1.10.2.js"></script>
	</head>
	<body>
		<p> First </p> <p> Second </p> <p> Third </p> <p> Fourth </p>
		<script>
			// Returns a NodeList
			var elems = document.getElementsByTagName("p");
			// Convert the NodeList to an Array
			var arr = jQuery.makeArray(elems);
			// Use an Array method on list of dom elements
			arr.reverse();
			$(arr).appendTo(document.body);
		</script>
	</body>
</html>

这里可以看到在chrome中通过document.getElementsByTagName("p")返回的是一个HTMLCollection

而非官网上所说的NodeList，特意去找了NodeList和HTMLCollection的区别：HTMLCollection 对象和 NodeList 对象很相似，但前者可能既能用名称索引也能用数字索引，而后者只能用数字索引来访问（当然NodeList也是“array-like object”）

经过实验发现elems可以通过名称和数组来索引，结论：在chrome中通过document.getElementsByTagName("p")返回的是一个HTMLCollection

HTMLCollection可以通过elems.length获取它的长度，并且可以通过elems[0]这样的方式来访问其中的元素

像不像数组的访问方式？其实它就是就一个“Array-like object”，但是它并不是js的原生数组，所以无法访问array的native方法，比如（.pop() and .reverse()）

而后面通过jQuery.makeArray(elems)转换就得到了原生的JS数组arr，接下来就可以使用array的native方法了！

将jQuery包裹的数组转换成原生Array

除了HTMLCollection，还可以转换什么呢？听说过jQuery包裹的数组这么一个玩意儿吗？

不过肯定接触过，比如通过$('p')得到一组p，这一组p就是一个jQuery包裹的数组

又比如，通过.map()函数得到的也是一个jQuery包裹的数组，也可以length来得到长度，并通过下标索引来访问，并且jQuery包裹的数组还可以使用jQuery提供的方法。

可以通过$.makeArray(obj)来转换成原生Array，比如最常见的在.map()函数中得到jQuery数组之后转换成原生array再通过join()得到结果

当然，将jQuery包裹的数组转换成原生数组的方法不止这一种，常见的还有.get()和.toArray()

将json对象转换成原生Array

这一种情况稍微复杂一点，因为json对象本不是“array-like object”，所以我们需要一种转换

还记得之前我们说的几种“array-like object”吗？它们都可以通过.length来得到长度，并且可以通过下标索引来访问，比如：fakeArr.length、fakeArr[0]

那么我们是否可以通过让json支持这样的方式来将它变成“array-like object”呢？

先设计一下：

要让json支持fakeArr.length，简单，只需要定义一个key为length的键值对就OK了

而支持下标访问似乎也可以迎刃而解，另外键值对都使用数字来作为key就好了~

那么试试吧：

var fakeArray = {0: "张三", 1: "李四", 2:"朱六", length:3};
var realArray = $.makeArray(fakeArray);
console.log(fakeArray)
console.log(realArray)
realArray.reverse();
console.log(realArray);

看到了吗？成功了！这里的realArray已经是js的原生array了，所以可以使用reverse()等native方法

需要注意的是，转换过程中length很重要，这个length也就是决定了转换后array的length

若将上述例子中的length指定为2，那么转换后的数组只有前2个元素，也就是["张三", "李四"]

若将上述例子中的length指定为4，那么转换后的数组并不会是我们希望的数组，而是类似于 new Array().push(fakeArray) 这样一个数组

Atas ialah kandungan terperinci jQuery中.makeArray()如何实现将多种类型转换成JS原生Array的实例分析. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：javascript中三目运算符和 if else 用法有什么区别？Artikel seterusnya：javascript三元运算符使用的一些技巧实例详解

Artikel berkaitan

Lihat lagi