在本文中,我們將了解 jQuery 中 toArray() 和 makeArray() 方法之間的區別。
Misc toArray():此方法用於 DOM(文檔對象模型)元素,將它們轉換為 JavaScript 數組。我們可以迭代這個數組,計算它的長度,並像普通數組一樣使用元素的索引來訪問元素。但是,我們無法使用此方法從其他類似數組的對象創建數組。這是兩個函數之間的主要區別。
用法:
let dom_array = $("p").toArray();
例子:在此示例中,我們將了解如何使用 toArray() 將 DOM 元素轉換為數組,以及它如何不適用於其他類型的數據。
HTML
<script src="https://code.jquery.com/jquery-3.6.0.js">
</script>
<h1 style="color: green;">
GeeksforGeeks
</h1>
<p>Data Structures</p>
<p>Competitive Programming</p>
<p>Algorithms</p>
<button>Click Here</button>
<h3>Output</h3>
<div id="output"></div>
<script>
let obj = {
name: "Sam",
age: 12
}
$("button").click(function () {
// Creating an array of paragraphs
let para_array = $("p").toArray();
// Iterating over para_array
// and appending the data in the div
for (i = 0; i < para_array.length; i++) {
$("#output").append("Element: " +
para_array[i].innerHTML + "<br>");
}
// We cannot use toArray() on the object
// as toArray() works only for DOM elements
// let obj_array = jQuery.toArray(obj);
// console.log(obj_array);
});
</script>
輸出:
makeArray():此方法用於類似數組的對象,將它們轉換為數組。然後我們可以在該數組上使用普通的數組函數。此方法支持 DOM 元素的轉換,因為它們是類似數組的對象。
用法:
// Array using DOM elements let array = jQuery.makeArray($("p")); // Array using other array-like objects let array2 = jQuery.makeArray(array1, array2, array3);
例子:在此示例中,我們將看到如何使用 makeArray() 轉換所有類型的類數組元素(包括 DOM 元素)。
HTML
<script src=
"https://code.jquery.com/jquery-3.6.0.js">
</script>
<h1 style="color: green;">
GeeksforGeeks
</h1>
<p>Data Structures</p>
<p>Competitive Programming</p>
<p>Algorithms</p>
<button>Click Here</button>
<h3>Output</h3>
<div id="output"></div>
<h3>Output 2</h3>
<div id="output2"></div>
<script>
let obj = {
name: "Sam",
age: 12
}
$("button").click(function () {
// Creating an array of paragraphs
let para_array = jQuery.makeArray($("p"));
// Iterating over para_array
// and appending the data in the first div
for (let i = 0; i < para_array.length; i++) {
$("#output").append("Element: " +
para_array[i].innerHTML + "<br>");
}
// Creating an array of the object
let obj_array = jQuery.makeArray(obj);
// Iterating over obj_array
// and appending the data in the second div
for (let i = 0; i < obj_array.length; i++) {
$("#output2").append("Name: " +
obj_array[i].name + " Age: " +
obj_array[i].age + "<br>");
}
});
</script>
輸出:
toArray() 和 makeArray() 之間的區別:
JavaScript toArray() Method |
JavaScript makeArray() Method |
---|---|
該方法支持將 DOM 元素轉換為數組。 | 該方法支持將所有類似數組的元素轉換為數組。 |
僅支持 DOM 元素轉換。其他類似數組的元素將引發錯誤。 | 所有類型的元素都可以轉換為包含 DOM 元素的數組。 |
它不帶任何參數 | 它隻接受一個參數,即一個對象。 |
它的返回值是 jQuery 選擇器匹配的元素作為數組。 | 它的返回值是一個數組。 |
相關用法
- jQuery text()和html()的區別用法及代碼示例
- jQuery event.preventDefault()用法及代碼示例
- jQuery :button用法及代碼示例
- jQuery :checkbox用法及代碼示例
- jQuery :checked用法及代碼示例
- jQuery :contains()用法及代碼示例
- jQuery :disabled用法及代碼示例
- jQuery :empty用法及代碼示例
- jQuery :enabled用法及代碼示例
- jQuery :even用法及代碼示例
- jQuery :file用法及代碼示例
- jQuery :first-child用法及代碼示例
- jQuery :first-of-type用法及代碼示例
- jQuery :first用法及代碼示例
- jQuery :focus用法及代碼示例
- jQuery :gt()用法及代碼示例
- jQuery :header用法及代碼示例
- jQuery :hidden用法及代碼示例
- jQuery :image用法及代碼示例
- jQuery :input用法及代碼示例
- jQuery :lang()用法及代碼示例
- jQuery :last-child用法及代碼示例
- jQuery :last-of-type用法及代碼示例
- jQuery :last用法及代碼示例
- jQuery :lt()用法及代碼示例
注:本文由純淨天空篩選整理自rajatagrawal5大神的英文原創作品 What’s the difference between toArray and makeArray in jQuery ?。非經特殊聲明,原始代碼版權歸原作者所有,本譯文未經允許或授權,請勿轉載或複製。