[ES6] Converting an array-like object into an Array with Array.from()
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()的更多相关文章
- array to object
array to object native js & ES6 https://stackoverflow.com/questions/4215737/convert-array-to-obj ...
- Poco::JSON::Array 中object 设置preserveInsertionOrder 时,stringify出错-->深入解析
在使用poco version 1.6.0时 Poco::JSON::Array 在object 设置preserveInsertionOrder =true 时 调用 array.stringif ...
- Javascript中判断变量是 array还是object（是数组还是对象）
段文字是从github上截取由本人翻译过来的. 原文地址:https://github.com/nathansmith/javascript-quiz/blob/master/ANSWERS.md 怎 ...
- 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 ...
- 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对象 ...
- typeof升级版，可以识别出array、object、null、nan、[]、{}
typeof 经常混淆array.object.null等,升级处理一下. 可以将这个函数放在common.js中使用. function getTypeName(v) { var v_str = J ...
- 将类数组对象(array-like object)转化为数组对象(Array object)
用法:Array.prototype.slice.call(array-like object) // 创建一个类数组对象 var alo = {0:"a", 1:"b& ...
- 不要将 Array、Object 等类型指定给 prototype
在 JavaScript 中,注意不要将 Array.Object 等类型指定给 prototype,除非您的应用需要那么做.先观察如下代码: function Foo(){}Foo.prototyp ...
- 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. ...
- js 判断值为Array or Object的方法
①obj instanceof Array / Object ②Array.prototype.isPrototypeOf(obj) ③Object.prototype.toString.call(o ...
随机推荐
- 【USACO 2.2.3】循环数
[题目描述] 循环数是那些不包括0且没有重复数字的整数(比如81362)并且还应同时具有一个有趣的性质, 就像这个例子: 如果你从最左边的数字开始(在这个例子中是8)向右数最左边这个数(如果数到了最右 ...
- PS纯手式打造不规则颜色的规则方块—学习教程
- mysql for linux 数据库的安装过程
mysql for linux 数据库的安装过程 l 安装版本:mysql-advanced-5.6.12-linux-glibc2.5-x86_64.tar.gz ,此版本是绿色版本,只需要将其解 ...
- Qt中widget重新setParent需要注意的问题
有时候需要在widget中重新setParent,但会发现setParent有时候会出现问题,比如子窗口不在刷出来等等. 其实,有一点是需要注意的,就是Qt文档里说的,如果你当前widget重新设置了 ...
- underscorejs-groupBy学习
2.18 groupBy 2.18.1 语法 _.groupBy(list, iteratee, [context]) 2.18.2 说明 把list分为多个集合,iterator为分组的依据,返回值 ...
- Tomcat基础教程（二）
上一篇说到了Tomcat的介绍,下载及安装,这一篇我会详述Tomcat服务器结构 一.Tomcat服务器结构图: Tomcat服务器中可以配置多个Service,每个Service可以包含多个Conn ...
- [工具]sublime text2-前端开发利器
之前在知乎上搜索好用的前端开发工具,投票最多的是webStrom,试用过后发现果真好用,代码补全,代码检查,支持主流的版本控制,比如git,svn等等.但是毕竟是一款集成的IDE,启动速度慢.吃内存是 ...
- Node.js stream 流学习
由于node.js 创建http 是这样的 http.createServer(function(request,response){}).listen(2000); 里面的request 就是rea ...
- mongodb教程
http://sheperd.blog.163.com/blog/static/19525511920119111149046/ http://www.cnblogs.com/oec2003/arch ...
- Steps
uva846:http://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&page=show_proble ...