首頁 > web前端 > 前端問答 > es6怎麼將類別數組物件轉數組

es6怎麼將類別數組物件轉數組

青灯夜游
發布: 2023-01-04 09:13:02
原創
2355 人瀏覽過

轉換方法:1、使用「for in」語句將類別數組物件轉換為數組,語法「for(var i in obj){console.log(arr.push(obj[i])); }」;2、使用內建物件keys和valus,語法「Object.keys(obj)」和「Object.values(obj)」;3、使用Array物件的from()函數,語法「Array.from(obj) 」。

es6怎麼將類別數組物件轉數組

本教學操作環境:windows7系統、ECMAScript 6版、Dell G3電腦。

什麼是類別數組?

JavaScript中有一些看起來像卻又不是陣列的對象,叫做類別數組。

什麼是類別數組物件?

只包含使用從0開始的,並且是自然遞增的整數作為鍵,也定義了length用來表示元素個數的對象,通常就認為是類別數組物件。

  • 具有指向物件元素的數字索引下標,以及length 屬性告訴我們物件的元素個數;

  • 不具有例如像push 、 forEach 以及indexOf 等數組物件具有的方法;

類別數組轉換為數組

es6怎麼將類別數組物件轉數組

es6怎麼將類別數組物件轉數組

第一種方法:使用for in 將類別數組物件轉換為陣列es6怎麼將類別數組物件轉數組

<script type="text/javascript">
		var obj = {
			0: &#39;a&#39;,
			1: &#39;b&#39;,
			2: &#39;c&#39;,
		};
		console.log(obj[0]);
		console.log(typeof obj);
		var arr = [];
		for(var i in obj){
			console.log(arr.push(obj[i]));
		}
		console.log(arr);
		//把类数组对象放在一个名为arr的新数组里使得obj变成了数组

		console.log(arr instanceof Array);//判断arr是否为数组

	</script>
登入後複製

#如果想要取得整個物件:

let arr1 = []
		for (let i in obj) {
			let newobj = {}
			newobj[i] = obj[i]
			arr1.push(newobj);
		}
		console.log(arr1);
登入後複製

 第二種方法:內建物件keys和valus

內建物件Object.keys:取得鍵

內建物件Object.values取得值

let obj = {
			&#39;1&#39;: 5,
			&#39;2&#39;: 8,
			&#39;3&#39;: 4,
			&#39;4&#39;: 6
		};
		//内置对象Object.keys:获取键
		var arr = Object.keys(obj)
		console.log(arr);
		//内置对象Object.values获取值
		var arr2 = Object.values(obj)
		console.log(arr2);
登入後複製

# 第三種方法:Array.from( )es6怎麼將類別數組物件轉數組

let obj = {
		&#39;0&#39;: 5,
		&#39;1&#39;: 8,
		&#39;2&#39;: 4,
		&#39;3&#39;: 6,
		&#39;length&#39;:4
	};
	    let arr = Array.from(obj)
		console.log(arr);
登入後複製

 

Array.from()把物件轉換為陣列必須符合2個條件

1:鍵必須是數值


2:必須帶有length的鍵值對es6怎麼將類別數組物件轉數組

#不寫length時:

加上length鍵值對時:

#擴充知識:for of、for in與forEach的差別

<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;">let arr = [&amp;#39;周一&amp;#39;, &amp;#39;周二&amp;#39;, &amp;#39;周三&amp;#39;, &amp;#39;周四&amp;#39;,&amp;#39;周五&amp;#39;,&amp;#39;周六&amp;#39;,&amp;#39;周日&amp;#39;] // for of for (let item of arr) { console.log(item); } // for in for (let i in arr) { console.log(i); } // forEach arr.forEach(item =&gt; { console.log(item); })</pre><div class="contentsignin">登入後複製</div></div>效果如圖所示:<br><strong><code>#for of中item代表在陣列中的某一項 
for in中i代表索引,一般用來遍歷物件

forEach方法用於呼叫陣列的每個元素,並將元素傳遞給回呼函數。

for of

1.可以避免 #for-in

 迴圈中的所有陷阱

2.可以使用 break

continue 與 return

#3.

for-of

 迴圈不只支援陣列的遍歷。同樣適用於許多類似陣列的物件

4.它也支援es6怎麼將類別數組物件轉數組字串的遍歷

5.for-of 並不適用於處理原有的原生物件 



for in

###註:for..in迴圈會把某個類型的原型(prototype)中方法與屬性給遍歷出來,所以這可能會導致程式碼中出現意外的錯誤############for Each#############1、###foreach### 方法沒辦法使用return,break,continue語句來跳出循環#########2、forEach方法中的function回呼有三個參數:##################(1)參數是遍歷的陣列內容(必需)###(2)參數是對應的陣列索引(可選)###(3)參數是陣列本身(可選)###### 3、對陣列的每個元素執行一次提供的函數。返回undefined###

【推薦學習:javascript影片教學

以上是es6怎麼將類別數組物件轉數組的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板