DOM对象和类数组对象的探索
实践是最好的老师，愿你的每一天都在学习中成长
本文的主题是DOM对象和DOM数组，但是在正文开始之前，需要一点点铺垫
在没有遇到这样的场景之前，我一直不清楚DOM对象和普通对象的区别，可是当我们遇见了需要处理的场景，就需要为了解决问题而做一些实践，深入了解一下其中的缘由。
前言
判断对象是否为空的方法
- JSON.stringify()
judgeEmptyObjectByJSON: function (obj) {
return JSON.stringify(obj) === '{}';
}
console.log(judgeEmptyObjectByJSON({}));
//true
console.log(judgeEmptyObjectByJSON({name:'andy'}));
//false
- Object.keys()
judgeEmptyObjectByObjectKeys: function (obj) {
return Object.keys(obj).length === 0;
}
console.log(this.judgeEmptyObjectByObjectKeys({}));
//true
console.log(this.judgeEmptyObjectByObjectKeys({name:'andy'}));
//false
-
$.isEmptyObject()
在JQuery的源码中，isEmptyObject（）函数时是这样写的：
JQuery的源码isEmptyObject（）
原理是通过for...in遍历key
judgeEmptyObjectByForIn: function (obj) {
for(let name in obj){
return false;
}
return true;
}
console.log(this.judgeEmptyObjectByForIn({}));
//true
console.log(this.judgeEmptyObjectByForIn({name:'andy'}));
//false
正文
通过操作DOM元素拿到的Object和Array的特殊使用方法：
关于Object
-
场景
在前端做上传文件，提交之前拿到和上传的文件有关的对象，按照需求对此对象进行判空处理。 -
实践
上传文件时，我们需要用到的基本html元素如下：
<div class="main-content">
<input type="file" class="input-file">
</div>
然后通过JQuery的选择器拿到相应的元素，为它绑定函数
let fileInput = $('.input-file');
fileInput.bind('change', this.updateFile);
在updateFile()函数中取到和file有关的对象，它里面存着和上传的文件有关的信息：
updateFile: function () {
let file = $('.input-file');
this.fileObject = file[0].files[0];
console.log(this.fileObject);
console.log(typeof this.fileObject);
}
然后在控制台看见打出的信息如图：
file对象
首先可以确定这是一个对象，而且对象中相关的字段都是肉眼可见，现在有需求描述：对此文件对象作判空处理，如果为空，则做其他处理。
按照之前总结过的对象判空方法，我们先操作一下看结果：
updateFile: function () {
let file = $('.input-file');
this.fileObject = file[0].files[0];
console.log(this.fileObject);
console.log(typeof this.fileObject);
let isEmpty = JSON.stringify(this.fileObject) === '{}';
console.log(isEmpty);
},
判断file对象是否为空
好了，神奇的事情发生了，控制台告诉我们，此时的我们拿到的file对象是空的！！！
很奇妙吧，当然一开始不知道是为什么，查了一些解决办法，也明白了一点：
通过$()取出来的对象，是JQuery包装过的DOM对象，它的本质是和普通的数据对象是一致的
但是，$(xxx)[0]就把JQuery对象转化成了DOM对象，一般对象的方法不适用于DOM对象
所以，如果是通过操作DOM拿到的DOM对象，要先把他转化成JQuery对象，再使用对象的方法
- 扩展：DOM对象转化的方法
(1)、使用JQuery的$包裹对象；
this.fileObject = $(this.fileObject);
let isEmpty = JSON.stringify(this.fileObject) === '{}';
console.log(isEmpty); //false
console.log(this.judgeEmptyObjectByObjectKeys(this.fileObject)); //false
console.log(this.judgeEmptyObjectByForIn(this.fileObject)); //false
(2)、使用JSON.stringify()时传入白名单
let file = $('.input-file');
this.fileObject = file[0].files[0];
let isEmpty = JSON.stringify(this.fileObject,['lastModifiedDate','name','size','type','webkitRelativePath']) === '{}';
console.log(isEmpty); //false
JSON.stringify(Object,[名单列表])
- 遗留问题：
此时的对象是DOM对象，其他的方法判断都是空的，但是JQuery的$.isEmptyObject()却可以正确判断，并且按理说DOM对象是不可以使用JQuery的方法的，但是现在几乎都不城里，不知原因为何？
关于Array-Like（类数组）
-
场景
DOM元素通过ClassName或者TagName返回一个“数组”，希望对它进行操作。 -
实践
基本的html元素如下：
<div>
<div class="element">name</div>
<div class="element">name</div>
<div class="element">name</div>
<div class="element">name</div>
<div class="element">name</div>
</div>
通过操作dom拿到相应的数组对象：
let domArray = document.getElementsByClassName('element');
console.log(domArray);
DOM数组对象
判断类型：
console.log(typeof domArray ); //object
console.log(domArray instanceof Array); //false
此时，这个DOM数组的类型是对象，但又不是数组，只能称之为类数组对象
在JS中，类数组对象是一个很特殊对象，它具有以下的特点：
- 拥有length属性，其它属性（索引）为非负整数
-不具有数组所具有的方法
验证：
console.log(domArray.slice(0,1));
验证结果
- 扩展：类数组对象转化为数组对象的方法
为了方便操作类数组对象，使其能够使用数组对象的方法，我们需要将类数组对象转化为数组对象。
(1)、Array.prototype.slice.call(arguments)；
let domArray = document.getElementsByClassName('element');
let nodes = Array.prototype.slice.call(domArray);
console.log(nodes instanceof Array);
console.log(nodes.slice(0,1));
转化结果
(2)、Array.prototype.concat.apply([],arguments)；
let domArray = document.getElementsByClassName('element');
let nodes = Array.prototype.concat.apply([],domArray);
console.log(nodes instanceof Array);
console.log(nodes.slice(0,1));
转化结果
(3)、Array.from(arguments)；
let domArray = document.getElementsByClassName('element');
let nodes = Array.from(domArray);
console.log(nodes instanceof Array);
console.log(nodes.slice(0,1));
转化结果
(4)、 Object.values(obj)
let domArray = document.getElementsByClassName('element');
let nodes = Object.values(domArray);
console.log(nodes instanceof Array);
console.log(nodes.slice(0,1));
转化结果
(5)、 [...obj]
let domArray = document.getElementsByClassName('element');
let nodes = [...domArray];
console.log(nodes instanceof Array);
console.log(nodes.slice(0,1));
转化结果
结语
这些JS中的细节，看见也没有在意过，但是在具体的问题面前，理解并解决问题也是很重要的。DOM对象是在需求中明确遇到了，类数组对象以前是没有见过的，有一天在社区看见一个人说出去面试遇到了这样的提问，问如何对类数组对象做迭代操作，但是实践中发现，类数组对象也是有length属性，可以通过for…in迭代的，当然也可以转化后再迭代。
