javascript - js的shift()方法失效?

Question

如題,程式碼如下:

<ul class="demo">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
</ul>
<script>
    var l = document.getElementsByClassName("demo")[0];
    var a = l.children;
    var r=a.shift();
    console.log(r);//报错:a.shift is not a function?
</script>

類別數組物件不能呼叫shift方法api?

Answer 1

類別數組不是數組，沒有繼承數組的相關api，
可以用call或apply來綁定this，
例如

var r = [].shift.call(a)

ps: shift還涉及到操作數組的內容，剛試了一下，強行用call來shift類數組對象，會報相關對像不能修改length的限定，如果還涉及dom的處理，建議還是用相關dom操作，例如removeChild啥的,這個就不擴展了。 dom類別數組物件的相關資料可以在mdn找到，例如：https://developer.mozilla.org...

Answer 2

shift會修改原數組，導致length屬性改變，但是length是唯讀的。透過下面方式可以使用。

<ul class="demo">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
</ul>
</body>

<script>
    var l = document.getElementsByClassName("demo")[0];
    var a = l.children;
    var arry = [...a];
    var r=arry.shift();
    console.log(r);
</script>

Answer 3

當然，shift是數組的方法，可以先把類別數組轉成數組再呼叫
Array.prototype.slice.call(arraylike);

Answer 4

console.log(a)
可以看到：__proto__:HTMLCollection HTMLCollection中並沒有shift方法。