[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 ...
随机推荐
- 一、初识T4引擎
对于代码生成器我们并不陌生,在日常编码中这也是用的比较多的工具之一.一般代码生成器主要功能是生成公共或基础代码来减少编码人员的工作量,而一款优秀的代码生成器除了生产代码以外,同时兼具生成项目架构和基础 ...
- 【转】 iOS学习之sqlite的创建数据库,表,插入查看数据
原文: http://blog.csdn.net/totogo2010/article/details/7702207 iOS sqlite数据库操作.步骤是: 先加入sqlite开发库libsql ...
- 网络编程Socket之TCP
服务端: 1. 创建 ServerSocket 对象并监听一个端口 2. 调用accept()方法等待客户端的连接(阻塞式) 3. 输入流(记取客户端发送过来的数据) 4. 输出流(响 ...
- JavaScript中instanceof与typeof运算符的用法及区别详细解析
JavaScript中的instanceof和typeof常被用来判断一个变量是什么类型的(实例),但它们的使用还是有区别的: typeof 运算符 返回一个用来表示表达式的数据类型的字符串. typ ...
- Java简介(1)
起源 略. 组成 Java由四方面组成: 1.Java编程语言 2.Java文件格式 3.Java虚拟机(JVM) 4.Java应用程序接口(Java api) 体系 JavaSE , JavaEE, ...
- 正确设置网站title、keywords、description（转载）
本文转载自蚂蚁HR(www.mayihr.com) 优化技巧是老师在课堂上教不了你的,而自己也不可能在练习中领悟,最便捷的方法就是听取别人的经验,所以转载一下 1.title(网站标题) title, ...
- Phalcon 的分流bootstrap 设计 主程序入口
<?php use \Phalcon\DI\FactoryDefault as PhDi; error_reporting(E_ALL); date_default_timezone_set(' ...
- 个人Python常用Package及其安装
为了避免每次重装系统时又要东翻西找,现在此记录一下目前常用的Python包安装过程. 1) Python: 2.7.11, 下载地址:www.python.org.由于个人喜欢使用PyQt4(其实是不 ...
- 我的sublime常用快捷键
sublime一般被应用于前端开发,在实际开发中,我们常用的sublime快捷键有哪些呢?这里汇总一下,常用的排在前面. 常用快捷键 Ctrl+Shift+P:打开命令面板 Ctrl+D:选择重复单词 ...
- noi 3531 判断整除
3531:判断整除 查看 提交 统计 提问 总时间限制: 1000ms 内存限制: 65536kB 描述 一个给定的正整数序列,在每个数之前都插入+号或-号后计算它们的和.比如序列:1.2.4共有 ...