[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 ...
随机推荐
- (Error) The type AESKeyGenerator is not accessible due to restriction on required library.
error for 'Access restriction: The type AESKeyGenerator is not accessible due to restriction on requ ...
- 在Cognos报表中使用钻取特性，参数传递
转载至:http://blog.sina.com.cn/s/blog_6eda1c4e0100mu3t.html Cognos的钻取方式大致可以分为三种: 1.模型固有的->由CUBE和DMR支 ...
- 安装 vsftp
1.yum安装 vsftp yum list vsftpd yum install vsftpd 2.配置 vsftp 将root注释掉 vi /etc/vsftpd/ftpusers 将root注释 ...
- [jQuery编程挑战]001：实现页面元素加速动画效果
要求: 页面包含两个HTML元素:一个按钮,一个小方块 动画要求:点击按钮,小方块从页面坐标300,300,加速移动到0,0 相关知识点: jQuery动画方法animate easing参数的设置 ...
- gchart 插件API
data: 一个二维数组,参数类型如下:[[, , ], [, , ], [, , ]] size: 图片显示的大小 ( width x height ) 300x200 type: 前面已经说过了 ...
- 2-16 HDO1106
这题寒假也没搞出来,但今天花了一小时终于搞定. 题意是输入一串数字字符,把‘5’当作空格,然后把被分割开的数字进行排序输出. 首先是字符串输入,按照高精度的处理方法,数值低位放到数组低位.(字符串型的 ...
- spring mvc 自定义Handlermapping
上次大概写了个可以解决velocity 多视图的东西. 但是实际运用过程中又到处找了些资料看了下.这里 小计下: DispatcherServlet解析过程: ..1..HandlerMapping. ...
- Codeforces 138D World of Darkraft
有一个n*m 的棋盘,每个点上标记了L,R,X 中的一个每次能选择一个没有被攻击过的点(i,j),从这个点开始发射线,射线形状为:1. 若字符是 L,向左下角和右上角发,遇到被攻击过的点就停下来2. ...
- native2ascii 在 Mac终端的转码
打开终端,输入 native2ascii 回车 然后输入想要转码的 中文 回车 自动会出现 通用的 unicode编码. 默认应该是 utf-8 格式
- Tomcat基础教程（二）
上一篇说到了Tomcat的介绍,下载及安装,这一篇我会详述Tomcat服务器结构 一.Tomcat服务器结构图: Tomcat服务器中可以配置多个Service,每个Service可以包含多个Conn ...