[ES6] Converting an array-like object into an Array with Array.from()
ES6 with object from Array an INTO like
2023-09-14 08:59:20 时间
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.
相关文章
- ES6中的模板字符串改变html_vue事件绑定修饰符
- JS与ES6高级编程学习笔记(五)——ECMAScript6 代码组织
- es6数组方法find()、findIndex()与filter()的总结
- es6之Promise是什么「建议收藏」
- ES6的Map用法详解
- es6删除对象的某个属性
- ES6 学习笔记(六)基本类型String
- ES6中的Iterator 和for of循环
- ORA-39130: Object type string not imported. Base object name conflicts with the master table ORACLE 报错 故障修复 远程处理
- 语句掌握Oracle中用WITH语句的利用技巧(oracle的with)
- 从Oracle中挖掘洞见坚实的With表(oracle with表)