文档章节

JavaScript里的数组转化新方法Array.From

鱼煎
 鱼煎
发布于 2016/06/25 10:59
字数 203
阅读 7
收藏 0
点赞 0
评论 0

过去,我们使用各种各样的方法来将类似Array对象的东西(比如 arguments和 NodeList) 转换成真的数值。比如下面这个:

基本上,这些东西我们都可以使用Array.prototype.slice.call()这样的方法将argumentsNodeList等转行成想要的形式。

如今,我们有了更直接的方法,直接将这些类数组的对象转化成真正的对象。

NodeList 转化成 Array

var divs = Array.from(document.querySelectorAll('div'));

// Array[232] (every DIV on the page)

将 arguments 转化成 Array

function something() {
  var args = Array.from(arguments);

  // Array['yes', 1, {}]
}
something('yes', 1, {});

将 String 转化成 Array

Array.from('JavaScript'); // 很像'JavaScript'.split('')

// ["J", "a", "v", "a", "S", "c", "r", "i", "p", "t"]
 

这些写法非常的简单清晰,不需再使用slice等间接方法!

© 著作权归作者所有

共有 人打赏支持
鱼煎
粉丝 5
博文 178
码字总数 37359
作品 0
深圳
技术主管
WEB前端学习:ES6的数组改动

Web前端开发工程师是一个很新的职业,是从事Web前端开发工作的工程师。主要进行网站开发,优化,完善的工作。网页制作是Web 1.0时代的产物,那时网站的主要内容都是静态的,用户使用网站的行...

web前端小辰 ⋅ 06/05 ⋅ 0

code-rhythm:写了个vscode扩展,让代码更有快感

项目地址 Github - onvno/code-rhythm 原因 写代码本身是件快乐的事情,但开发中总有各种烦恼。 有时候一个很简单的方法,因为不确定传参的形式,不确定返回形式,不确定具体用法,就得翻墙,...

onvno_ ⋅ 06/07 ⋅ 0

Lynx技术分析-JS引擎扩展设计

JS Binding 技术 Lynx(一个高效的跨平台框架) 的 JS Binding 技术最主要的目的是搭建一个高效的与 JS 引擎解耦的通信桥梁,同时具备 JS 引擎切换的能力。该技术经历了多次迭代,最终通过抽...

hxxft ⋅ 05/15 ⋅ 0

深入理解ES6--10.增强的数组功能

主要知识点:创建数组、数组上的新方法、类型化数组 1. 创建数组 在 ES6 之前创建数组主要存在两种方式: 构造器与数组字面量写法。这两种方式都需要将数组的项分别列出,并且还要受到其他限...

你听___ ⋅ 05/07 ⋅ 0

在 JavaScript 中创建数组的正确姿势

创建数组的正确姿势 JavaScript 中数组的特殊性 每一项都可以保存任意类型的数据,数组大小可以动态调整,即可以随着数据的添加自动增长以容纳新数据 数组中可能会存在空位 稀疏数组 具有不连...

沃趣葫芦娃 ⋅ 06/04 ⋅ 0

arguments 对象的老历史

本文经作者 柯拓 授权转载。原文地址:http://www.cnblogs.com/ziyunfei/p/5890322.html 引题:为什么 JavaScript 中的 arguments 对象不是数组 http://www.zhihu.com/question/50803453 Jav...

_朴灵_ ⋅ 05/14 ⋅ 0

iOS下JS与OC互相调用(六)--WKWebView + WebViewJavascriptBridge

iOS下JS与OC互相调用(六)--WKWebView + WebViewJavascriptBridge 转载:原地址 https://www.jianshu.com/p/e951af9e5e74 上一篇文章介绍了UIWebView 如何通过WebViewJavascriptBridge 来实现......

法斗斗 ⋅ 05/11 ⋅ 0

学习Javascript的8张思维导图

分别归类为:  javascript变量  javascript运算符  javascript数组  javascript流程语句  javascript字符串函数  javascript函数基础  javascript基础DOM操作  javascript正则表达式...

thinkyoung ⋅ 2014/09/23 ⋅ 0

妙用Javascript中apply、call、bind

这篇文章实在是很难下笔,因为网上相关文章不胜枚举。 巧合的是前些天看到阮老师的一篇文章的一句话: “对我来说,博客首先是一种知识管理工具,其次才是传播工具。我的技术文章,主要用来整...

孟飞阳 ⋅ 04/27 ⋅ 0

收藏好这篇,别再只说“数据劫持”了

最近接触了一些面试者,当我问起“Vue 如何实现数据双向绑定”时,会脱口而出“数据劫持”,然后呢?然后就没有然后了╮(╯_╰)╭。确实,“数据劫持”是基础,但远不是面试官想听到的答案,...

VanMess ⋅ 05/08 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

那些证书相关的玩意儿(SSL,X.509,PEM,DER,CRT,CER,KEY,CSR,P12等)

之前没接触过证书加密的话,对证书相关的这些概念真是感觉挺棘手的,因为一下子来了一大堆新名词,看起来像是另一个领域的东西,而不是我们所熟悉的编程领域的那些东西,起码我个人感觉如此,且很长...

颖辉小居 ⋅ 19分钟前 ⋅ 0

利用有限制通配符提升API灵活性(28)

1、参数化类型是不可变的 List<String> 不是List<Object>的子类,但是二者是有联系的 利用有限制的通配符类型处理类似情况 List<? extends Object>(生产者) Collection<? super E>(消费者......

职业搬砖20年 ⋅ 26分钟前 ⋅ 0

ssm框架 +bootstrap分页

这里有两种方式 方式一:自己写分页 方式二:使用插件PageHelper 1.自己写分页 1.1 效果 1.2 实现过程 1.2.1 创建分页公共类 //---------------------------1.属性-------------------------...

Lucky_Me ⋅ 33分钟前 ⋅ 0

Istio

helm template install/kubernetes/helm/istio --name istio --namespace istio-system > $HOME/istio.yaml after $ kubectl create namespace istio-system$ kubectl create -f $HOME/ist......

openthings ⋅ 33分钟前 ⋅ 0

内核线程、轻量级进程、用户线程

线程与进程概念 在现代操作系统中,进程支持多线程。 进程是资源管理的最小单元; 线程是程序执行的最小单元。 即线程作为调度和分配的基本单位,进程作为资源分配的基本单位 一个进程的组成...

117 ⋅ 38分钟前 ⋅ 0

elasticsearch2.4.6升级为elasticsearch-5.5.0的经历

将elasticsearch-5.5.0 中的配置 path.data 指向原来的数据路径 即 path.data: /usr/local/src/elasticsearch-2.4.6/data 注意: elasticsearch-5.5.0 需要将jdk版本升级到1.8...

晨猫 ⋅ 39分钟前 ⋅ 1

lvm讲解 磁盘故障小案例

1

oschina130111 ⋅ 43分钟前 ⋅ 0

那些提升开发人员工作效率的在线工具

本文转载自公众号 Hollis 作为一个Java开发人员,经常要和各种各样的工具打交道,除了我们常用的IDE工具以外,其实还有很多工具是我们在日常开发及学习过程中要经常使用到的。 Hollis偏爱使用...

时刻在奔跑 ⋅ 55分钟前 ⋅ 0

restful风格 实现DELETE PUT请求 的web.xml的配置

import org.springframework.beans.factory.annotation.Autowired; import org.springframework.http.HttpStatus; import org.springframework.http.ResponseEntity; import org.springframe......

泉天下 ⋅ 今天 ⋅ 0

Shell数组

Shell数组 Shell在编程方面比Windows批处理强大很多,无论是在循环、运算。 bash支持一维数组(不支持多维数组),并且没有限定数组的大小。类似与C语言,数组元素的下标由0开始编号。获取数...

蜗牛奔跑 ⋅ 今天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部