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. C++ nullptr 的一种实现

    C/C++ 程序员都应该了解NULL, 0, nullptr,  NULL表示空指针,即指针不指向任何对象,C++11后有多了nullptr更好是表了这类概念,看看nullptr是如何实现的: con ...

  2. openstack nova数据库计算结点IP地址

    最近遇到一个问题就是在控制结点上查找nova数据库中 select * from compute_nodes\G;中出现IP地址一直是127.0.0.1不是计算结点的IP,就算修改成计算结点的IP,也 ...

  3. 深入Java虚拟机读书笔记第二章平台无关性

    Java的体系结构对平台无关的支持 Java平台 Java的体系结构通过几种途径支持Java程序的平台无关性,其中主要是通过Java平台自己.Java平台扮演一个运行时Java程序与其下的硬件和操作系 ...

  4. 关于json.ajax ，php的那点事

    $.ajax({ type:'post'/'get'  两者选其一 url:    地址 data: "newdata="+newdata+"&olddata=& ...

  5. eclipse 编辑 python 中文乱码的解决方案

    今天在学习python时做了一个用户输入一个目录地址,再输入内容,然后将输入的内容存入输入的目录文件中: 具体代码如下: #coding:utf- ''' Created on -- @author: ...

  6. SAR-303 xml validator验证框架

    // 配置文件详解 <mvc:annotation-driven validator="validator" /> <bean id="validato ...

  7. Html Meta 标签详解

    http://www.dreamdu.com/xhtml/tag_meta/

  8. 突然间，对JAVA也找到点感觉了。

    书上没有那段代码,我自己修修补补弄完全了呢.... 就是感觉体系有点宏大,不要急,慢慢玩~!~~ 这个世界很精彩哟~~: QuizCard.java package QuizCard.sky.com; ...

  9. DSP开发资源总结,经典书籍,论坛

    OMAP4开发资源总结: 一.TI OMAP4官网介绍: http://www.ti.com.cn/general/cn/docs/wtbu/wtbuproductcontent.tsp?templa ...

  10. POJ2485 Highways(最小生成树)

    题目链接. 分析: 比POJ2253要简单些. AC代码: #include <iostream> #include <cstdio> #include <cstring ...