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. OC - 20.多图下载

    效果图 常见问题及解决方法 图片重复下载 将内存保存在内存或沙盒中. 若下载的图片量较大,则会出现UI界面不流畅的现象 在子线程中执行下载操作,然后回到主线程成中进行UI界面的刷新. 由于cell的循 ...

  2. Swift - 10 - assert(断言)

    //: Playground - noun: a place where people can play import UIKit var str = "Hello, playground& ...

  3. JetBrains公司的IDE使用技巧

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

  4. 从头开始学c++，补基础，补踏实

    在对c++一知半解的情况下,写c++程序是非常吃力的.对于半路出家写c++的我,写了几个颓废的程序后,再也没有勇气用现有的c++知识去写千疮百孔的程序.非常想写出<整洁的代码>中那样的代码 ...

  5. uva 11673 Garbage Remembering Exam （概率）

    题目链接: http://vjudge.net/problem/viewProblem.action?id=42000 该过程为随即过程,因此总期望值等于个单词对应的期望值,即它们wasted的概率 ...

  6. 安卓之cannot convert from Fragment1 to Fragment

    在写一个音乐播放器的时候,用到了fragment,结果在需要返回Fragment的方法里面,无法将Fragment1(Fragment的子类)强制转换成Fragment, 很是纳闷,我是参照一个开源代 ...

  7. java解析JSON （使用net.sf.json）

    例如JSON字符串str如下: {     "data": [         {             "basic_title": "运筹帷幄因 ...

  8. 12_RHEL7.1普通用户添加sudo权限

    1.关于sudo Sudo是linux系统中,非root权限的用户提升自己权限来执行某些特性命令的方式,它使普通用户在不知道超级用户的密码的情况下,也可以暂时的获得root权限.          一 ...

  9. sql -实验二

    8. 统计各部门下工资大于2000的雇员的平均工资. select avg(sal)from empwhere sal>2000;

  10. thinkphp整合系列之支付宝RSA加密方式

    thinkphp整合系列之支付宝RSA加密方式上篇博客写的是MD5加密方式:thinkphp整合系列之支付宝MD5加密方式扫码支付http://baijunyao.com/article/75 但是呢 ...