疑似配列を実際の配列に変換する方法は?

これは最近のインタビューの質問です。彼に最初に会ったとき、彼のコンセプトを見ていないので、それを使用するどころか、非常に恥ずかしい思いをしました。すぐにBaiduに戻り、ここで要約しました。何か問題があれば訂正して、お互いに学び合ってください

1.真の配列(配列)とは

いわゆる真の配列は、実際には直接配列と呼ぶことができます。
オブジェクトに次の特性がある場合、それは配列と呼ばれます。

  1. インデックスに従って複数の配列格納できます;
  2. 有する長さ属性アレイ内のデータの長さ(数)を示し、;
  3. オブジェクトのプロトタイププロパティ__proto__はArrayクラスを指しpush、popなどのArrayのプロトタイプオブジェクトプロトタイプのプロパティとメソッドを使用できます図に示すように、f12で書き込もうとしました。
    真の配列

2.疑似アレイとは何ですか?

オブジェクトが次の特性を持っている場合の、いわゆる疑似配列:

  1. インデックスを使用してデータを操作できます。
  2. 長さ(長さ)属性があります。
  3. ただし、push、popなどの配列メソッドは使用できませんf12では、次の図に示すように記述しようとしました。
    疑似配列
    注:
    1。疑似配列は通常、直接作成されませんが、document.getElementsByName()などのいくつかのjs操作によって取得されます
    。2。疑似配列には長さとインデックスがあるため、ループステートメントを使用して;をトラバースできます

真の配列と偽の配列の違い:
4。オブジェクトにはArray.prototypeの属性値がなく、型はObject、配列の型はArray
5です。配列はインデックスであり、オブジェクトはキーと値のペアです
。疑似配列を作成するオブジェクト、疑似配列を使用できます部分的な方法

第三に、疑似配列を真の配列に変換する方法

方法1:トラバース:空の配列を作成し、疑似配列をループして、トラバースしたデータを1つずつ空の配列に配置します

var ali = document.getElementsByTagName('li');
console.log(ali);       // [li, li, li, li]
ali.push("hello");      // TypeError: ali.push is not a function

var arr = [];           // 先创建空数组
for(var i=0;i<ali.length;i++){
    
      // 循环遍历伪数组
    arr.push(ali[i]);;    // 取出伪数组的数据,逐个放在真数组中
}

arr.push("hello");
console.log(arr);       // [li, li, li, li, "hello"]

方法2(一般的に使用):arr.push.apply(arr、疑似配列)

var ali = document.getElementsByTagName('li');
console.log(ali);       // [li, li, li, li]
ali.push("hello");      // TypeError: ali.push is not a function

var arr=[];
arr.push.apply(arr,ali);
//不需要修改push的this,只是利用apply的传参特点
console.log(arr);

方法3:sliceメソッドを使用する:Arrayプロトタイプオブジェクトのsliceメソッドをapplyで使用して、スライス内のこれを疑似配列にポイントします

var ali = document.getElementsByTagName('li');
console.log(ali);       // [li, li, li, li]
ali.push("hello");      // TypeError: ali.push is not a function

var arr = Array.prototype.slice.apply(ali);

arr.push("hello");
console.log(arr);       // [li, li, li, li, "hello"]

方法4:ES6が提供するArrayのfromメソッドを使用します

var ali = document.getElementsByTagName('li');
console.log(ali);       // [li, li, li, li]
ali.push("hello");      // TypeError: ali.push is not a function

var arr = Array.from(ali);

arr.push("hello");
console.log(arr);       // [li, li, li, li, "hello"]

参照リンク:https
//www.jianshu.com/p/82b293043b2a?utm_campaign = maleskine&utm_content = note&utm_medium = writer_share&utm_source = weibo

https://blog.csdn.net/weixin_49207759/article/details/107393699

JavaScriptでのcall()、apply()、bind()の使用法

おすすめ

転載: blog.csdn.net/weixin_45811256/article/details/110856303
おすすめ