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] Converting an array-like object into an Array with Array.from()的更多相关文章

  1. array to object

    array to object native js & ES6 https://stackoverflow.com/questions/4215737/convert-array-to-obj ...

  2. Poco::JSON::Array 中object 设置preserveInsertionOrder 时,stringify出错-->深入解析

    在使用poco version 1.6.0时 Poco::JSON::Array 在object  设置preserveInsertionOrder =true 时 调用 array.stringif ...

  3. Javascript中判断变量是 array还是object（是数组还是对象）

    段文字是从github上截取由本人翻译过来的. 原文地址:https://github.com/nathansmith/javascript-quiz/blob/master/ANSWERS.md 怎 ...

  4. PHP“Cannot use object of type stdClass as array” (php在调用json_decode从字符串对象生成json对象时的报错)

    php再调用json_decode从字符串对象生成json对象时,如果使用[]操作符取数据,会得到下面的错误 错误:Cannot use object of type stdClass as arra ...

  5. PHP json_decode object时报错Cannot use object of type stdClass as array

    PHP json_decode object时报错Cannot use object of type stdClass as array php再调用json_decode从字符串对象生成json对象 ...

  6. typeof升级版，可以识别出array、object、null、nan、[]、{}

    typeof 经常混淆array.object.null等,升级处理一下. 可以将这个函数放在common.js中使用. function getTypeName(v) { var v_str = J ...

  7. 将类数组对象(array-like object)转化为数组对象(Array object)

    用法:Array.prototype.slice.call(array-like object) // 创建一个类数组对象 var alo = {0:"a", 1:"b& ...

  8. 不要将 Array、Object 等类型指定给 prototype

    在 JavaScript 中,注意不要将 Array.Object 等类型指定给 prototype,除非您的应用需要那么做.先观察如下代码: function Foo(){}Foo.prototyp ...

  9. AFNetworking 关于JSON text did not start with array or object and option to allow fragments not set 错误

    AFHTTPSessionManager *manager =[AFHTTPSessionManager manager]; [manager GET:@"http://www.baidu. ...

  10. js 判断值为Array or Object的方法

    ①obj instanceof Array / Object ②Array.prototype.isPrototypeOf(obj) ③Object.prototype.toString.call(o ...

随机推荐

  1. Ajax简单应用-购物车

    1. 2. 3. 4. 5. 6.

  2. JetBrains公司的IDE使用技巧

    1.自定义Live Templates:   点击+添加自己的.最后记住要点击,change或default来设置在哪些文件上使用代码片段.

  3. Android Studio使用技巧

    1.ctrl+shift+F格式化代码时自动换行: 在settings里面找到Editor>General>Soft Wraps>设置选中Use soft wraps in edit ...

  4. Hibernate 性能优化之抓取策略

    fetch 抓取策略 前提条件:必须是一个对象操作其关联对象. 1. 根据一的一方加载多的一方,在一的一方集合中,有三个值:join/select/subselect 2.根据多的一方加载一的一方, ...

  5. VS2012 ActiveX控件_D接口添加方法事项

    自己写的是Clock控件,所以控件的接口是_DClock 使用向导添加方法后,会在紫色区域自动生成红色代码:(添加Hello方法) dispinterface _DClock { properties ...

  6. 二分查找里的upper bound与lower bound的实现与分析

    1. 问题引入 最近参选了学堂在线的课程数据结构(2015秋).课程由清华大学的邓俊辉老师主讲,在完成课后作业时,遇到了这样一个题目范围查询.在这个题目中,我需要解决这样一个子问题:给定了一组已经排好 ...

  7. C#委托基础

    转载自 http://woshixy.blog.51cto.com/5637578/1070976     C#委托基础1——委托基础   委托和其委托的方法必须具有相同的签名.签名相同:1.参数类型 ...

  8. getUrlParam，jQuery中的URL参数获取

    大家经常会需要在一段URL中截取到自己所需参数的值,下面的方法也许能帮到您: $.getUrlParam = function(name){ var reg = new RegExp("(^ ...

  9. shell脚本中的括号和实例

    1.单圆括号和双圆括号 “双圆括号”命令允许将高级的数学表达式放入比较中.格式如下: (( expression )) 除了 test命令(if-then [])使用的标准数学运算符外, 双圆括号还支 ...

  10. link与@import

    导入外部样式的两种写法 <link rel="stylesheet" href="xxxx.css"> <style> @import ...