slice方法可以将“类似数组的对象”变成真正的数组 (遇到时候再研究一次)
典型的“类似数组的对象”是函数的arguments对象,以及大多数 DOM 元素集,还有字符串。
// arguments对象
function args() { return arguments }
var arrayLike = args('a', 'b'); arrayLike[0] // 'a'
arrayLike.length //
arrayLike instanceof Array // false // DOM元素集
var elts = document.getElementsByTagName('h3');
elts.length //
elts instanceof Array // false // 字符串
'abc'[1] // 'b'
'abc'.length //
'abc' instanceof Array // false
上面代码包含三个例子,它们都不是数组(instanceof运算符返回false),但是看上去都非常像数组。
数组的slice方法可以将“类似数组的对象”变成真正的数组。
var arr = Array.prototype.slice.call(arrayLike);
除了转为真正的数组,“类似数组的对象”还有一个办法可以使用数组的方法,就是通过call()把数组的方法放到对象上面。
function print(value, index) {
console.log(index + ' : ' + value);
}
Array.prototype.forEach.call(arrayLike, print);
上面代码中,arrayLike代表一个类似数组的对象,本来是不可以使用数组的forEach()方法的,但是通过call(),可以把forEach()嫁接到arrayLike上面调用。
下面的例子就是通过这种方法,在arguments对象上面调用forEach方法。
// forEach 方法
function logArgs() {
Array.prototype.forEach.call(arguments, function (elem, i) {
console.log(i + '. ' + elem);
});
} // 等同于 for 循环
function logArgs() {
for (var i = 0; i < arguments.length; i++) {
console.log(i + '. ' + arguments[i]);
}
}
字符串也是类似数组的对象,所以也可以用Array.prototype.forEach.call遍历。
Array.prototype.forEach.call('abc', function (chr) {
console.log(chr);
});
// a
// b
// c
注意,这种方法比直接使用数组原生的forEach要慢,所以最好还是先将“类似数组的对象”转为真正的数组,然后再直接调用数组的forEach方法。
var arr = Array.prototype.slice.call('abc');
arr.forEach(function (chr) {
console.log(chr);
});
// a
// b
// c
slice方法可以将“类似数组的对象”变成真正的数组 (遇到时候再研究一次)的更多相关文章
- PHP数组和对象之间的互换
今天在和前端对接接口的时候,从后台返回数据给前端的时候出现如下JSON格式数据 "goods": [ { "id": "dEQ144800584Lx& ...
- php数组和对象转换函数
/** * 数组 转 对象 * * @param array $arr 数组 * @return object */ function array_to_object($arr) { ...
- PHP数组 转 对象/对象 转 数组
/** * 数组 转 对象 * * @param array $arr 数组 * @return object */ function array_to_object($arr) { if (gett ...
- vue 数组、对象 深度拷贝和赋值
由于此对象的引用类型指向的都是一个地址(除了基本类型跟null,对象之间的赋值,只是将地址指向同一个,而不是真正意义上的拷贝) 数组: let a = [11,22,33]; let b = a; / ...
- Array(数组)对象-->slice() 方法
1.定义和用法 slice()方法可提取字符串的某个部分,并以新的字符串返回被提取的部分. 语法: array.slice(start, end) 参数:start 开始元素的下标,截取内容包含该元素 ...
- javascript 数组以及对象的深拷贝(复制数组或复制对象)的方法
前言 for,slice(0),concact() 在js中,数组和对象的复制如果使用=号来进行复制,那只是浅拷贝.如下图演示: 如上,arr的修改,会影响arr2的值,这显然在绝大多数情况下,并不 ...
- vue遍历数组和对象的方法以及他们之间的区别
前言:vue不能直接通过下标的形式来添加数据,vue也不能直接向对象中插值,因为那样即使能插入值,页面也不会重新渲染数据 一,vue遍历数组 1,使用vue数组变异方法 pop() 删除数组最后一 ...
- js注意点:数组比较大小方法及数组与对象的区别
(迁移自旧博客2017-04-19) 快速复制数组及数组比较大小方法 首先介绍一下复制数组的方法: var arr = ['A', 'B', 'C', 'D', 'E', 'F', 'G']; var ...
- 【前端基础系列】slice方法将类数组转换数组实现原理
问题描述 在日常编码中会遇到将类数组对象转换为数组的问题,其中常用到的一种方式使用Array.prototype.slice()方法. 类数组对象 所谓的类数组对象,JavaScript对它们定义为: ...
随机推荐
- 第一节 麒麟系统安装+基础环境搭建(JDK+Scala)
本文重点对没有Linux基础的人员提供高速上手的指导,假设你的开发环境已经搭建好,能够略过本章所讲内容,内容来源于网络.也谢谢这些默默讲自己经验分享的人!近期在学习大数据,有喜欢的朋友能够一起研究. ...
- java 浮点数
package precisenumber; //import java.util.*;public class PreciseNumber { public int fore; public int ...
- html body div height: 100%;
最近做了测试 html{ height: 100%;//全部内容高度,包括滚动出现的内容 background-color:#000;} body{height: 100%;//只一页屏幕,用作滚动的 ...
- RobotFramework教程使用笔记——web自动化测试弹窗处理
在web自动化测试中会遇到各种弹出框,在selenium中有对这些弹出框的处理. 弹出框一般有这么几类: 1.普通的弹出窗口,如果是可以定位的,直接定位到窗口,然后进行相应的操作. 2.如果是浏览器系 ...
- Xshell和secureCRT
作为一名测试人员,xshell和secureCRT用它们来查看日志.排查定位问题,用的时间长了总感觉只是摸着点皮毛,连这两个工具的名字以及它的工作原理都不清楚,就查了点资料来多了解下,虽然可能在日常工 ...
- 关于ArcGIS动态图层空间内栅格数据,JS前端显示颜色不正确的解决方案
ArcGIS的动态空间,可承载Table,Shp,Raster等数据. 我们的需求是,每天客户有新的卫星数据,但是不同类型,有多波段Landsat卫星数据,有Modis数据等.不定期更新到共享文件夹, ...
- ffmpeg av_interleaved_write_frame Operation not permitted
今天在使用ffmpeg时出现了Operation not permitted通过增加打印信息发现是在av_interleaved_write_frame出现的问题, 昨天还没出现这个问题,很奇怪,就把 ...
- easyui tree 树形节点 formatter 渲染不起作用
接了个需求,需要对一个树形列表进行重新渲染,在进行渲染的过程中发现树形节点的formatter 属性无法生效.经反复测试,发现在外部环境中正常,但在项目环境中始终无效.最终发现问题出在 easyui ...
- C# 获取utc时间,以及utc datetime 互相转化
C# 获取utc时间,以及utc datetime 互相转化 大部分源于http://blog.sina.com.cn/s/blog_4c6e822d0102dsdz.html 刚开始学习一点C# ...
- 基于Jenkins+Gitlab的自动化部署实战
故事背景 一个中小型企业,是典型的互联网公司,当初期的时候可能运维只能标配到2~3人,此时随着公司的发展,项目会逐渐增多.前期部署项目可能都是手动的, 俗称“人肉部署”,这简直是无比的痛苦,不能忍受的 ...