[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 ...
随机推荐
- Webview Android与js交互
Android 中可以通过webview来实现和js的交互,在程序中调用js代码,只需要将webview控件的支持js的属性设置为true Android(Java)与JavaScript(HTML) ...
- firebug js版
1.有些时候如 ie6 7 8 你觉得F12 不好用的话 你可以直接 把这两个js 引用到html 里面 <script src="https://getfirebug.com/fi ...
- HBase 学习之一 <<HBase使用客户端API动态创建Hbase数据表并在Hbase下导出执行>>
HBase使用客户端API动态创建Hbase数据表并在Hbase下导出执行 ----首先感谢网络能够给我提供一个开放的学习平台,如果没有网上的技术爱好者提供 ...
- 【USACO 1.4.4】母亲的牛奶
[题目描述] 农民约翰有三个容量分别是A,B,C升的桶,A,B,C分别是三个从1到20的整数, 最初,A和B桶都是空的,而C桶是装满牛奶的.有时,约翰把牛奶从一个桶倒到另一个桶中,直到被灌桶装满或原 ...
- margin-top在IE与其他浏览器下的不同
两个box,box1嵌套box2, box2使用margin-top在IE下与其他浏览器不同.待整理
- LINUX系统安装MYSQL命令，纯手打
1.下载安装包 wget http://cdn.mysql.com/archives/mysql-5.6/mysql-5.6.26-linux-glibc2.5-x86_64.tar.gz 2. ...
- select options常用操作
1.判断select选项中 是否存在Value="value"的option元素 function jsSelectIsExitItem(objSelect,objItemValu ...
- Jssdk微信分享
<?php require_once "jssdk.php"; $jssdk = new JSSDK("yourAppID", "yourApp ...
- socket本地模拟TCP 服务器+客户端（二）
建立两个py文件,分别打开两个cmd界面,即可进行通信.服务器端运用多进程,连续不断的处理从客户端接收到的数据:客户端通过一个list不断给客户端发送数据. (每个连接都必须创建新线程(或进程)来处理 ...
- ASP.NET状缓存Cache的应用-提高数据库读取速度
原文:ASP.NET状缓存Cache的应用-提高数据库读取速度 一. Cache概述 既然缓存中的数据其实是来自数据库的,那么缓存中的数据如何和数据库进行同步呢?一般来说,缓存中应该存放改 ...