[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 ...
随机推荐
- cas sso单点登录系列6_cas单点登录防止登出退出后刷新后退ticket失效报500错
转(http://blog.csdn.net/ae6623/article/details/9494601) 问题: 我登录了client2,又登录了client3,现在我把client2退出了,在c ...
- Hibernate 性能优化之懒加载
针对数据库中的大数据,不希望特别早的加载到内存中,当用到它的时候才加载 懒加载分为:类的懒加载.集合的懒加载.单端关联的懒加载 类的懒加载 1.在默认情况下,类就是执行懒加载 2. ...
- hdu1301 Jungle Roads （Prim）
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1301 依旧Prim............不多说了 #include<iostream> ...
- [Head First设计模式笔记]----命令模式
命令模式定义:将“请求”封装成对象,以便使用不同的请求.队列或者日志来参数化其他对象.命令模式也支持可撤销的操作. 类图: 适用设计方案举例:实现一种遥控器,该遥控器具有七个可编程的插槽(每个都可以指 ...
- TCP/IP-UDP
We read the world wrong but say that it deceives us. "我们看错了世界,却说世界欺骗了我们" 参考资料:TCP/IP入门经典 ( ...
- bash shell学习-shell script基础 (笔记)
A chain no stronger than its weakest link. "一着不慎,满盘皆输" 参考资料:鸟哥的Linux私房菜 基础学习篇(第三版) Linux ...
- extjs之messagebox按钮显示中文
在extjs中我们用到了很多的提示框,但是在对话框按钮上面显示的都是英文的ok.yes.no.cancel,这里给出一个方法,能够使得提示框的按钮文本显示问中文. extjs在加载完成之后会调用页面的 ...
- SERVER全局数组
[HTTP_HOST] => www.eduoautoweb.com [HTTP_CONNECTION] => keep-alive [HTTP_ACCEPT] => text/ht ...
- jquery ajax（5）form表单序列化
form表单序列化<script type="text/javascript"> $(function(){ $("#send").click(fu ...
- Python自动化运维之15、网络编程之socket、socketserver、select、twisted
一.TCP/IP相关知识 TCP/UDP提供进程地址,两个协议互不干扰的独自的协议 TCP :Transmission Control Protocol 传输控制协议,面向连接的协议,通信 ...