1. 什么是类数组ArrayLike(类数组  就是一个普通的  js对象)

  • 类数组对象必须含有 length 属性,且元素属性名必须是数值或者可转换为数值的字符。
  • 类数组对象不是数组对象,所以没有数组对象的属性方法。但是可以使用 Array.from()方法,把类数组对象,转化为数组对象
//类数组示例
var a = {
'1':'gg',
'2':'love',
'4':'meimei',
length:5
}; //非类数组示例
var c = {'1':2}; //没有length属性就不是类数组

javascript中常见的类数组有arguments对象和DOM方法的返回结果。
比如 document.getElementsByTagName()

个人理解:类数组就是一个简单的js对象,只是这个对象有一个 length 属性,其它的属性名都是数字。Array.from()方法,转化的数组长度是和类数组中length属性的值一样的。不够用undefined补充,多了去掉。

2. 判断一个对象是否属于类数组

function isArrayLike(o) {
if (o && // o is not null, undefined, etc.
typeof o === 'object' && // o is an object
isFinite(o.length) && // o.length is a finite number
o.length >= 0 && // o.length is non-negative
o.length===Math.floor(o.length) && // o.length is an integer
o.length < 4294967296) // o.length < 2^32
return true; // Then o is array-like
else
return false; // Otherwise it is not
}

3. 类数组转换成数组之后进行操作有什么优势

由于类数组不具有数组所具有的操作数组的方法,讲类数组转换为数组之后就能调用如shift,unshift,splice,slice,concat,reverse,sort等这些强大的方法,方便快捷。

4. 类数组转换为数组方法

Array.prototype.slice.call(arrayLike)
//将arguments转化为数组后,截取第一个元素之后的所有元素
  var args = Array.prototype.slice.call(arguments,1);

首先Array.prototype.slice.call(arrayLike)的结果是将arrayLike对象转换成一个Array对象。所以其后面可以直接调用数组具有的方法,例如

Array.prototype.slice.call(arrayLike).forEach(function(element,index){  //可以随意操作每一个element了 })

(1)Array.prototype.slice表示数组的原型中的slice方法。注意这个slice方法返回的是一个Array类型的对象。

//slice的内部实现
Array.prototype.slice = function(start,end){
var result = new Array();
start = start || 0;
end = end || this.length; //this指向调用的对象,当用了call后,能够改变this的指向,也就是指向传进来的对象,这是关键
for(var i = start; i < end; i++){
result.push(this[i]);
}
return result;
}

(2)能调用call的只有方法,所以不能用[].call这种形式,得用[].slice。而call的第一个参数表示真正调用slice的环境变为了arrayLike对象。所以就好像arrayLike也具有了数组的方法。

(3)附上转成数组的通用函数

var toArray = function(s){
try{
return Array.prototype.slice.call(s);
} catch(e){
var arr = [];
for(var i = 0,len = s.length; i < len; i++){
//arr.push(s[i]);
arr[i] = s[i]; //据说这样比push快
}
return arr;
}

5. 将数组转换为参数列表(类数组)

调用apply方法的时候,第一个参数是对象(this), 第二个参数是一个数组集合,   这里就说明apply的一个巧妙用法,可以将一个数组默认的转换为一个参数列表([param1,param2,param3] 转换为 param1,param2,param3), 这个如果让我们用程序来实现将数组的每一个项,来转换为参数的列表,可能都得费一会功夫,借助apply的这点特性,所以就有了以下高效率的方法。

具体可以参考前面的文章  js函数中的apply()、call()、bind()方法 ---(apply的其他巧妙用法(一般在什么情况下可以使用apply))

js类数组转数组的方法(ArrayLike)的更多相关文章

  1. 自定义JS类,并扩展其方法和属性

    function CT() { } CT.prototype.P = "TTT"; CT.Test = function () { alert(arguments[0]); }; ...

  2. js中将类数组转换为数组的几种方法

    1.slice方法 最经典的方法,使用Array的slice方法,此方法如果不传参数的话会返回原数组的一个拷贝,因此可以用此方法转换类数组到数组: // 创建一个类数组对象 var alo = {0: ...

  3. js数组和数组去重的几种简单的方法

    http://blog.csdn.net/liangklfang/article/details/49300417 1.证明一个对象是数组的方法. 方法(1) [].constructor === A ...

  4. js类数组

    类数组 - [ Array-like ] : objects 1. what's Array-like 类数组和数组很像,但是数组的很多方法却不能用,这就很尴尬了~ 像 arguments.nodel ...

  5. js 类数组arguments详解

    arguments并不是一个真正的数组,而是一个"类似数组(array-like)"的对象: 就像下面的这段输出,就是典型的类数组对象: [, , callee: ƒ, Symbo ...

  6. Js数组的常用的方法概述

    学习JS的同学们,也曾对数组进行学习掌握,所以我也把数组中常用的方法列举下来,相互学习 不多废话,直接上正文 .                 快乐的分割线... 一.对象继承的方法 数组是一种特殊 ...

  7. JS 中检测数组的四种方法

    今天和大家分享一下 JS 中检测是不是数组的四种方法,虽然篇幅不长,不过方法应该算是比较全面了. 1. instanceof 方法 instanceof 用于检测一个对象是不是某个类的实例,数组也是一 ...

  8. 关于String类和String[]数组的获取长度方法细节

    一.在Java中,以下代码段有错误的是第(  )行 public static void main(String[] args) { String name = "小新";     ...

  9. JS合并两个数组的方法

    JS合并两个数组的方法 我们在项目过程中,有时候会遇到需要将两个数组合并成为一个的情况.比如: var a = [1,2,3]; var b = [4,5,6]; 有两个数组a.b,需求是将两个数组合 ...

随机推荐

  1. vue开发环境及vue相关

    一.安装node.js Vue项目通常通过webpack工具来构建,而webpack命令的执行是依赖node.js的环境的,所以首先要安装node.js. 二.安装cnpm cnpm是淘宝对npm的镜 ...

  2. APICloud框架——总结一下最近开发APP遇到的一些问题 (二)

    高度自适应 flex布局 允许子元素伸缩 手机号正则 function checkPhone(data){ if(!(/^1[34578]\d{9}$/.test(data))){ alert(&qu ...

  3. IDEA2019.1.3最新破解方式

    版本2019.1.3 1.下载破解JAR,放入IDEA的bin文件夹中     链接:https://pan.baidu.com/s/1N1BHeJ0-mmFIWbrh5h4k-g     提取码:g ...

  4. ajax中回调的几个坑

    在前端开发中,经常要用ajax去拿后台接口返回的数据,总结几个ajax的回调的常见问题,供大家参考爬坑. 未定义contentType,可能会造成的传入后台的数据乱码,可以加上如下代码在ajax请求中 ...

  5. HDU 6610 Game — 2019第三场杭电多校 1008题

    目录 题意 思路 AC_Code @(hdu 6610) 题意 大概说一下我理解的题意... 链接:here 你有\(n\)堆石子,每堆石子有\(a_i\)个石子.游戏规则:\(Alice\)先选择一 ...

  6. MySQL高级学习笔记(六):MySql锁机制

    文章目录 概述 定义 生活购物 锁的分类 从对数据操作的类型(读\写)分 从对数据操作的粒度分 三锁 表锁(偏读) 特点 案例分析 建表SQL 加读锁 加写锁 结论 如何分析表锁定 行锁(偏写) 特点 ...

  7. NetworkComms V3 序列化器之Protobuf.net和 JSONSerializer

    NetworkComms v3版本中,默认使用的是protobuf.net序列化器. 即当您没有指定序列化的时候,系统自动使用默认的protobuf.net序列化器. 当然我们也可以自己指定序列化器 ...

  8. PAT甲级——A1154 VertexColoring【25】

    A proper vertex coloring is a labeling of the graph's vertices with colors such that no two vertices ...

  9. c# SqlBulkCopy实现批量从数据集中把数据导入到数据库中

    今天遇到了一个导入类第一次见 SqlBulkCopy 可以实现从一个数据集导入到数据库中的表中 本来想从数据集中一条条遍历insert到库中 有了这个后发现: 只在把表与数据集的列做一下对应关系,再走 ...

  10. 下载文件时HttpServletResponse设置响应头的Content-Disposition属性

    Content-Disposition属性有两种类型 inline :将文件内容直接显示在页面 attachment:弹出对话框让用户下载 弹出对话框下载文件 resp.setHeader(" ...