提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  后端

当前栏目

[ES6] Converting an array-like object into an Array with Array.from()

ES6 with object from Array an INTO like
2023-09-14 09:00:54 时间

Array.from() lets you convert an "iterable" object (AKA an array-like object) to an array. In this lesson, we go over grabbing DOM nodes and turing them into an array so that we can use methods like Array.filter() and Array.forEach()on them.

 

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Array.from() example</title>
  </head>
  <body>
    <ul>
      <li class="product">15.99</li>
      <li class="product">7.99</li>
      <li class="product">32.99</li>
      <li class="product">24.99</li>
      <li class="product">5.99</li>
    </ul>
  </body>
  <script src="./index.js"></script>
</html>

 

const products =
  Array.from(document.querySelectorAll('.product'));

products
  .filter(product => parseFloat(product.innerHTML) < 10)
  .forEach(product => product.style.color = 'red');

 

What we got from document,querySelectorAll('.product') is 'NodeList', it is an array-like type, but cannot apply .filter, .map, .forEach to it. SO we use Array.from() method to convert is.

相关文章