何爲僞數組對象?
看了一些博客,也自己嘗試了下,無非就是三大特點:
1. 具有length屬性;
2. 能按索引取值;
3. 不能使用數組的API;
常見的僞數組對象
一. NodeList 也就是大家DOM操作時取得的DOM節點集合,如:
<body>
<div class="f">
<div class="container d">1</div>
<div class="container2 d">2</div>
<div class="container3 d">3</div>
<div class="container4 d">4</div>
<div class="container5 d">5</div>
<div class="container6 d">6</div>
</div>
</body>
<script type='text/javascript'>
let divList = document.querySelectorAll('.d');
console.log(divList);
console.log(Array.isArray(divList));
console.log(divList instanceof Array);
</script>
讓我們看下打印結果:
各位請看,返回兩false,說明這不是數組,如何轉變呢?
1 利用拓展運算符
let divList = document.querySelectorAll('.d');
// 1. 拓展運算符
let r1 = [...divList]
console.log(r1);
console.log(Array.isArray(r1));
結果:
兩個判斷均返回true,說明已經轉成的真正數組。
2 Array.from() 方法
let r2 = Array.from(divList);
console.log(r2);
3 ES5方法
let r3 = Array.prototype.slice.call(divList);
console.log(r3);
三種方法均可,第3種方法改變了底層slice方法的this指向來轉換,具體可參考下面博客:
https://www.cnblogs.com/guorange/p/6668440.html
二 另一常見的僞數組對象是函數內部的參數集合對象arguments, 請看:
// arguments
function foo(){
let args = arguments;
console.log(args);
console.log(Array.isArray(args));
}
foo('a','b','c','d');
返回:
轉換方法依舊同上…
OK, 後面有新的發現會再加進來,最後希望大家批評指正~