Trong Javascript, cách tốt nhất để chuyển đổi NodeList thành một mảng là gì

Phương thức DOM document.querySelectorAll()(và một số phương thức khác) trả về a NodeList.

Để hoạt động trên danh sách, ví dụ như sử dụng forEach(), NodeListđầu tiên phải được chuyển đổi thành một Array.

Cách tốt nhất để chuyển đổi NodeListthành một là Arraygì?

Với ES6, bạn có thể chỉ cần làm:

const spanList = [...document.querySelectorAll("span")];

Với ES6 bạn có thể sử dụng Array.from(myNodeList). Sau đó, sử dụng phương pháp mảng yêu thích của bạn.

var myNodeList = document.querySelectorAll('.my-selector');

// ALT 1
Array.from(myNodeList).forEach(function(el) {
  console.log(el);
});

Sử dụng miếng đệm ES6 để làm cho điều này hoạt động trong các trình duyệt cũ hơn.

Nếu bạn đang sử dụng trình chuyển tiếp (ví dụ: Babel), có hai lựa chọn thay thế khác:

var myNodeList = document.querySelectorAll('.my-selector');

// ALT 2
for (var el of myNodeList) {
  el.classList.add('active'); // or some other action
}

// ALT 3
[...myNodeList].forEach((el) => {
  console.log(el);
});

Bạn có thể chuyển đổi nó thành một mảng bằng cách sử dụng slicephương thức từ Arraynguyên mẫu:

var elList = document.querySelectorAll('.viewcount');
elList = Array.prototype.slice.call(elList, 0);

Hơn nữa, nếu tất cả những gì bạn cần là có forEach, bạn có thể gọi nó từ Arraynguyên mẫu mà không cần ép buộc nó vào một mảng trước:

var elList = document.querySelectorAll('.viewcount');
Array.prototype.forEach.call(elList, function(el) {
    console.log(el);
});

Trong ES6, bạn có thể sử dụng Array.fromhàm mới để chuyển nó thành một mảng:

Array.from(elList).forEach(function(el) {
    console.log(el);
});

Tính năng này hiện chỉ có trong các trình duyệt hiện đại, nhưng nếu bạn đang sử dụng dịch vụ polyfill, bạn sẽ có quyền truy cập vào chức năng này trên toàn bộ bảng.

Nếu bạn đang sử dụng trình chuyển tiếp ES6 , bạn thậm chí có thể sử dụng một for..ofvòng lặp để thay thế:

for (var element of document.querySelectorAll('.some .elements')) {
  // use element here
}

Tại sao phải chuyển đổi? - chỉ là callchức năng của Mảng trực tiếp trên tập hợp phần tử;)

[].forEach.call( $('a'), function( v, i) {
    // do something
});

giả sử $ là bí danh của bạn cho querySelectorAll , tất nhiên

chỉnh sửa: ES6 cho phép cú pháp ngắn hơn [...$('a')](chỉ hoạt động trong Firefox, kể từ tháng 5 năm 2014 )

Nó có phải được forEachkhông? Bạn có thể chỉ cần sử dụng một forvòng lặp để lặp lại danh sách:

for (var i = 0; i < elementList.length; i++) {
    doSomethingWith(elementlist.item(i));
}

Cập nhật năm 2020: nodeList.forEach () hiện là tiêu chuẩn chính thức và được hỗ trợ trong tất cả các trình duyệt hiện tại.

Các trình duyệt cũ hơn có thể sử dụng polyfill bên dưới.

Để hoạt động trên danh sách trong javascript, ví dụ: sử dụng forEach (), NodeList phải được chuyển đổi thành Mảng.

Đo không phải sự thật. .forEach()hoạt động trong các trình duyệt hiện tại. Nếu thiếu, bạn có thể thêm .forEach () từ Array vào NodeList và nó hoạt động tốt:

if ( ! NodeList.prototype.forEach ) {
  NodeList.prototype.forEach = Array.prototype.forEach;
}

Bây giờ bạn có thể chạy:

myNodeList.forEach(function(node){...})

Để lặp lại các NodeLists giống như Mảng.

Điều này tạo ra mã ngắn hơn và sạch hơn nhiều so với .call () ở mọi nơi.

ES6 cho phép những cách thú vị như thế var nodeArray = Array.from(nodeList)nhưng tôi thích nhất là toán tử spread mới.

var nodeArray = Array(...nodeList);

Điều đó đã làm việc với tôi trong ES6

Giả sử bạn có một danh sách ghi chú như thế

<ul>
  <li data-time="5:17">Flexbox video</li>
  <li data-time="8:22">Flexbox video</li>
  <li data-time="3:24">Redux video</li>
  <li data-time="5:17">Flexbox video</li>
  <li data-time="7:17">Flexbox video</li>
  <li data-time="4:17">Flexbox video</li>
  <li data-time="2:17">Redux video</li>
  <li data-time="7:17">Flexbox video</li>
  <li data-time="9:54">Flexbox video</li>
  <li data-time="5:53">Flexbox video</li>
  <li data-time="7:32">Flexbox video</li>
  <li data-time="2:47">Redux video</li>
  <li data-time="9:17">Flexbox video</li>

</ul>


const items = Array.from(document.querySelectorAll('[data-time]'));

console.log(items);

Tôi sử dụng phần sau vì tôi nghĩ nó dễ đọc nhất:

const elements = document.getElementsByClassName('element');
[...elements].forEach((element) => {
   // code
});

Chà, điều này cũng phù hợp với tôi:

const elements = Object.values( document.querySelector(your selector here) )

Object.values()trả về Arraycác giá trị của đối tượng đã cho. NodeListlà đối tượng, cũng như mọi thứ trong JS.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/values

Nhưng nó không tương thích với IE, vì vậy tôi đoán Array.prototype.*array_method*.call(yourNodeList)là lựa chọn tốt nhất. Với điều này, bạn có thể gọi bất kỳ phương thức mảng nào trênNodeList

Giả sử elems là một nodeList:

var elems = document.querySelectorAll('select option:checked');

thì nó có thể được chuyển thành một mảng như sau:

var values = [].map.call(elems, function(obj) {
  return obj.value;
});

Tham khảo: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map#Example:_using_map_generically_querySelectorAll