典型的“类似数组的对象”是函数的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方法可以将“类似数组的对象”变成真正的数组 (遇到时候再研究一次)的更多相关文章

  1. PHP数组和对象之间的互换

    今天在和前端对接接口的时候,从后台返回数据给前端的时候出现如下JSON格式数据 "goods": [ { "id": "dEQ144800584Lx& ...

  2. php数组和对象转换函数

    /**  * 数组 转 对象  *  * @param array $arr 数组  * @return object  */ function array_to_object($arr) {     ...

  3. PHP数组 转 对象/对象 转 数组

    /** * 数组 转 对象 * * @param array $arr 数组 * @return object */ function array_to_object($arr) { if (gett ...

  4. vue 数组、对象 深度拷贝和赋值

    由于此对象的引用类型指向的都是一个地址(除了基本类型跟null,对象之间的赋值,只是将地址指向同一个,而不是真正意义上的拷贝) 数组: let a = [11,22,33]; let b = a; / ...

  5. Array(数组)对象-->slice() 方法

    1.定义和用法 slice()方法可提取字符串的某个部分,并以新的字符串返回被提取的部分. 语法: array.slice(start, end) 参数:start 开始元素的下标,截取内容包含该元素 ...

  6. javascript 数组以及对象的深拷贝(复制数组或复制对象)的方法

    前言 for,slice(0),concact() 在js中,数组和对象的复制如果使用=号来进行复制,那只是浅拷贝.如下图演示:  如上,arr的修改,会影响arr2的值,这显然在绝大多数情况下,并不 ...

  7. vue遍历数组和对象的方法以及他们之间的区别

    前言:vue不能直接通过下标的形式来添加数据,vue也不能直接向对象中插值,因为那样即使能插入值,页面也不会重新渲染数据 一,vue遍历数组   1,使用vue数组变异方法 pop() 删除数组最后一 ...

  8. js注意点:数组比较大小方法及数组与对象的区别

    (迁移自旧博客2017-04-19) 快速复制数组及数组比较大小方法 首先介绍一下复制数组的方法: var arr = ['A', 'B', 'C', 'D', 'E', 'F', 'G']; var ...

  9. 【前端基础系列】slice方法将类数组转换数组实现原理

    问题描述 在日常编码中会遇到将类数组对象转换为数组的问题,其中常用到的一种方式使用Array.prototype.slice()方法. 类数组对象 所谓的类数组对象,JavaScript对它们定义为: ...

随机推荐

  1. github for unity

  2. Oracle序列更新为主键最大值

    我们在使用 Oracle 数据库的时候,有时候会选择使用自增序列作为主键.但是在开发过程中往往会遇到一些不规范的操作,导致表的主键值不是使用序列插入的.这样在数据移植的时候就会出现各种各样的问题.当然 ...

  3. spring cloud服务注册与发现无法发现的可能原因

    1.注册中心服务端默认90秒检测一次,看服务是否还存活,不存活则删除掉服务,还存活则继续注册上去 2. spring: profiles: dev cloud: config: name: clean ...

  4. MySQL学习笔记(六)—— MySQL自连接

    有的时候我们需要对同一表中的数据进行多次检索,这个时候我们可以使用之前学习过的子查询,先查询出需要的数据,再进行一次检索. 例如:一张products表,有产品id,供应商id(vend_id),产品 ...

  5. 测试工程师面试题之:给你印象最深的Bug

    有人看到别人在侵淫面试技巧,什么<程序员面试宝典>,或者<面试测试工程师须知>等等,就会嗤之以鼻.他会觉得这不是“投机取巧”吗,最重要的还是踏实提高自己的能力. 非常同意这种看 ...

  6. spring 从jsp到jsp

    小例子 1.jar信息 2.web.xml文件配置 <?xml version="1.0" encoding="UTF-8"?> <web-a ...

  7. dhclient命令

    语法:dhclient(选项)(参数) 选项0:指定dhcp客户但监听的端口号-d:总是以前台方式运行程序-q:安静模式,不打印任何错误的提示信息-r:释放ip地址 参数:网络接口:操作的网络接口 示 ...

  8. ZIP伪加密(deprecated)

    ZIP伪加密 经过伪加密的apk,改成zip格式打开会发现里面的文件都经过了加密. APK实际上是Zip压缩文件,但是Android系统在解析APK文件时,和传统的解压压缩软件在解析Zip文件时存在差 ...

  9. 「SDFZ听课笔记」二分图&&网络流

    二分图? 不存在奇环(长度为奇数的环)的图 节点能黑白染色,使得不存在同色图相连的图 这两个定义是等价哒. 直观而言,就是这样的图: 二分图有一些神奇的性质,让一些在一般图上复杂度飞天的问题可以在正常 ...

  10. 单次目标检测器-SSD简介

    SSD 是使用 VGG19 网络作为特征提取器(和 Faster R-CNN 中使用的 CNN 一样)的单次检测器.我们在该网络之后添加自定义卷积层(蓝色),并使用卷积核(绿色)执行预测. 同时对类别 ...