僞(類)數組對象是如何轉成真正的數組的,click here!

何爲僞數組對象?

看了一些博客,也自己嘗試了下,無非就是三大特點:
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, 後面有新的發現會再加進來,最後希望大家批評指正~

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章