實(shí)踐是最好的老師，愿你的每一天都在學(xué)習(xí)中成長(zhǎng)
本文的主題是DOM對(duì)象和DOM數(shù)組护奈，但是在正文開(kāi)始之前，需要一點(diǎn)點(diǎn)鋪墊
在沒(méi)有遇到這樣的場(chǎng)景之前，我一直不清楚DOM對(duì)象和普通對(duì)象的區(qū)別乐尊，可是當(dāng)我們遇見(jiàn)了需要處理的場(chǎng)景，就需要為了解決問(wèn)題而做一些實(shí)踐划址，深入了解一下其中的緣由扔嵌。
前言
判斷對(duì)象是否為空的方法
- 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（）函數(shù)時(shí)是這樣寫的：
JQuery的源碼isEmptyObject（）
原理是通過(guò)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
正文
通過(guò)操作DOM元素拿到的Object和Array的特殊使用方法：
關(guān)于Object
場(chǎng)景
在前端做上傳文件夺颤，提交之前拿到和上傳的文件有關(guān)的對(duì)象痢缎，按照需求對(duì)此對(duì)象進(jìn)行判空處理。實(shí)踐
上傳文件時(shí)世澜，我們需要用到的基本html元素如下：
<div class="main-content">
<input type="file" class="input-file">
</div>
然后通過(guò)JQuery的選擇器拿到相應(yīng)的元素独旷，為它綁定函數(shù)
let fileInput = $('.input-file');
fileInput.bind('change', this.updateFile);
在updateFile()函數(shù)中取到和file有關(guān)的對(duì)象，它里面存著和上傳的文件有關(guān)的信息：
updateFile: function () {
let file = $('.input-file');
this.fileObject = file[0].files[0];
console.log(this.fileObject);
console.log(typeof this.fileObject);
}
然后在控制臺(tái)看見(jiàn)打出的信息如圖：
首先可以確定這是一個(gè)對(duì)象寥裂，而且對(duì)象中相關(guān)的字段都是肉眼可見(jiàn)嵌洼，現(xiàn)在有需求描述：對(duì)此文件對(duì)象作判空處理，如果為空封恰，則做其他處理麻养。
按照之前總結(jié)過(guò)的對(duì)象判空方法，我們先操作一下看結(jié)果：
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);
},
好了诺舔，神奇的事情發(fā)生了鳖昌，控制臺(tái)告訴我們备畦，此時(shí)的我們拿到的file對(duì)象是空的！Ｒ抛瘛萍恕！
很奇妙吧，當(dāng)然一開(kāi)始不知道是為什么车要，查了一些解決辦法允粤，也明白了一點(diǎn)：
通過(guò)$()取出來(lái)的對(duì)象，是JQuery包裝過(guò)的DOM對(duì)象翼岁，它的本質(zhì)是和普通的數(shù)據(jù)對(duì)象是一致的
但是类垫，$(xxx)[0]就把JQuery對(duì)象轉(zhuǎn)化成了DOM對(duì)象，一般對(duì)象的方法不適用于DOM對(duì)象
所以琅坡，如果是通過(guò)操作DOM拿到的DOM對(duì)象悉患，要先把他轉(zhuǎn)化成JQuery對(duì)象，再使用對(duì)象的方法
- 擴(kuò)展：DOM對(duì)象轉(zhuǎn)化的方法
(1)榆俺、使用JQuery的$包裹對(duì)象售躁；
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()時(shí)傳入白名單
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,[名單列表])
- 遺留問(wèn)題：
此時(shí)的對(duì)象是DOM對(duì)象茴晋，其他的方法判斷都是空的陪捷，但是JQuery的$.isEmptyObject()卻可以正確判斷，并且按理說(shuō)DOM對(duì)象是不可以使用JQuery的方法的诺擅，但是現(xiàn)在幾乎都不城里市袖，不知原因?yàn)楹危?/li>
關(guān)于Array-Like（類數(shù)組）
場(chǎng)景
DOM元素通過(guò)ClassName或者TagName返回一個(gè)“數(shù)組”，希望對(duì)它進(jìn)行操作烁涌。實(shí)踐
基本的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>
通過(guò)操作dom拿到相應(yīng)的數(shù)組對(duì)象：
let domArray = document.getElementsByClassName('element');
console.log(domArray);
判斷類型：
console.log(typeof domArray ); //object
console.log(domArray instanceof Array); //false
此時(shí)苍碟，這個(gè)DOM數(shù)組的類型是對(duì)象，但又不是數(shù)組撮执，只能稱之為類數(shù)組對(duì)象
在JS中微峰，類數(shù)組對(duì)象是一個(gè)很特殊對(duì)象，它具有以下的特點(diǎn)：
- 擁有l(wèi)ength屬性抒钱，其它屬性（索引）為非負(fù)整數(shù)
-不具有數(shù)組所具有的方法
驗(yàn)證：
console.log(domArray.slice(0,1));
- 擴(kuò)展：類數(shù)組對(duì)象轉(zhuǎn)化為數(shù)組對(duì)象的方法
為了方便操作類數(shù)組對(duì)象县忌，使其能夠使用數(shù)組對(duì)象的方法，我們需要將類數(shù)組對(duì)象轉(zhuǎn)化為數(shù)組對(duì)象继效。
(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));
結(jié)語(yǔ)
這些JS中的細(xì)節(jié)秤涩，看見(jiàn)也沒(méi)有在意過(guò)帜乞，但是在具體的問(wèn)題面前，理解并解決問(wèn)題也是很重要的筐眷。DOM對(duì)象是在需求中明確遇到了黎烈，類數(shù)組對(duì)象以前是沒(méi)有見(jiàn)過(guò)的，有一天在社區(qū)看見(jiàn)一個(gè)人說(shuō)出去面試遇到了這樣的提問(wèn)匀谣，問(wèn)如何對(duì)類數(shù)組對(duì)象做迭代操作照棋，但是實(shí)踐中發(fā)現(xiàn)，類數(shù)組對(duì)象也是有l(wèi)ength屬性武翎，可以通過(guò)for…in迭代的烈炭，當(dāng)然也可以轉(zhuǎn)化后再迭代。
