数组、对象、类数组对象的不同以及类数组转数组方法总结

一、数组、对象、类数组对象数据结构的异同

1、数组
一组有序的数据集合，其索引为从0开始且自然增长的整数，其元素值可以是任何js数据！并且包含一个名为length的属性，该属性表示数组元素的个数！

var array = [1,2,3];
console.log(array[0])//1
console.log(array[1])//2
console.log(array[2])//3
console.log(array['length'])//3

ps：数组元素的索引和length属性是在数组定义时根据数组元素语言自动就帮你定义好了！

2、对象
一组无序的由键->值组成的数据集合，其元素的键名和值都可以自定义！

var object = {'a': 1, 'b': 2}
console.log(object['a'])//1
console.log(object['b'])//2
console.log(object['length'])//undefined

ps：对象自身所拥有的（不包括继承来的）任何属性都是有用户自定义的！

完全可以使用对象来模拟数组，只要我们定义的对象的每个元素的键名都使用数字并且让其保持递增，且动态的定义一个length属性来表示元素个数。

3、类数组对象
（1）什么是类数组对象

拥有length属性，其它属性（索引）为非负整数(对象中的索引会被当做字符串来处理，这里你可以当做是个非负整数串来理解)
不具有数组所具有的方法

//类数组示例
var a = {'1':'gg','2':'love','4':'meimei',length:5};
Array.prototype.join.call(a,'+');//'+gg+love++meimei'//非类数组示例
var c = {'1':2};   //没有length属性就不是类数组

ps：

在浏览器环境中，NodeList、HTMLCollection、NamedNodeMap都是类数组对象。关于这三者的不同请参考：javascript中的动态集合——NodeList、HTMLCollection、NamedNodeMap
在function调用中，function代码内的arguments变量(保存传入的参数)也是一个类数组对象。
在ECMAScript 5标准中，字符串string就是一个只读的类数组对象。

（2）判断一个对象是不是类数组

function isArrayLike(o) {if (o &&                                // o is not null, undefined, etc.typeof o === 'object' &&            // o is an objectisFinite(o.length) &&               // o.length is a finite numbero.length >= 0 &&                    // o.length is non-negativeo.length===Math.floor(o.length) &&  // o.length is an integero.length < Math.pow(2,32);              // o.length < 2^32return true;                        // Then o is array-likeelsereturn false;                       // Otherwise it is not
}

（3）类数组转换成数组之后进行操作有什么优势
由于类数组不具有数组所具有的操作数组的方法，讲类数组转换为数组之后就能调用如shift,unshift,splice,slice,concat,reverse,sort等这些强大的方法，方便快捷。
（4）类数组转换成数组的方法

var arrayLike = {0: 'name', 1: 'age', 2: 'sex', length: 3 }
// 1. slice
Array.prototype.slice.call(arrayLike); // ["name", "age", "sex"]
// 2. splice
Array.prototype.splice.call(arrayLike, 0); // ["name", "age", "sex"]
// 3. ES6 Array.from
Array.from(arrayLike); // ["name", "age", "sex"]
// 4. apply
Array.prototype.concat.apply([], arrayLike)

ps：

Array.prototype.slice.call(arguments,1)

这句话的意思就是说把调用方法的参数截取出来。

function test(a,b,c,d) { var arg = Array.prototype.slice.call(arguments,1); alert(arg); } test("a","b","c","d"); //b,c,d

所以其后面可以直接调用数组具有的方法，例如

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

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;  }

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

补充：将函数的实际参数转换成数组的方法：
（1）var args = Array.prototype.slice.call(arguments);
（2）var args = [].slice.call(arguments, 0);
（3）var args = []; for (var i = 1; i < arguments.length; i++) { args.push(arguments[i]); }
转换成数组的通用函数：

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）调用数组方法
如果类数组就是任性的想用数组的方法怎么办呢？
既然无法直接调用，我们可以用 Function.call 间接调用：

var arrayLike = {0: 'name', 1: 'age', 2: 'sex', length: 3 }Array.prototype.join.call(arrayLike, '&'); // name&age&sexArray.prototype.slice.call(arrayLike, 0); // ["name", "age", "sex"]
// slice可以做到类数组转数组Array.prototype.map.call(arrayLike, function(item){return item.toUpperCase();
});
// ["NAME", "AGE", "SEX"]

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

数组、对象、类数组对象的不同以及类数组转数组方法总结相关推荐

JS中集合对象(Array、Map、Set)及类数组对象的使用与对比
JS中集合对象(Array.Map.Set)及类数组对象的使用与对比在使用js编程的时候,常常会用到集合对象,集合对象其实是一种泛型,在js中没有明确的规定其内元素的类型,但在强类型语言譬如Java ...
java数组有跨类建立对象_必会的 55 个 Java 性能优化细节！一网打尽！
程序员的成长之路互联网/程序员/成长/职场关注阅读本文大概需要 10 分钟. 来源:https://yq.aliyun.com/articles/662001 在 Java 程序中,性能问题的大部 ...
java数组有跨类建立对象_Java性能优化的45个细节(珍藏版)
点击上面蓝色字体关注我们技术 / 架构 / 职场 / 面试关注即送:4000G 架构师视频来源:http://t.cn/EiP42VF 在JAVA程序中,性能问题的大部分原因并不在于JAVA语 ...
java中常用API、Scanner类、匿名对象、Random类、ArrayList类、对象数组
java中常用API: API:Application Programming Interface,应用程序编程接口.Java API是JDK中提供给我们使用的类的说明文档.这些类将底层的代码实现封装 ...
java/03/类与对象，深入分析类与对象（权限修饰，构造方法和简单java类），数组的定义及使用
java/03/类与对象,深入分析类与对象(权限修饰,构造方法和简单java类),数组的定义及使用七十年代,IBM的Smalltalk语言最先推广面向对象,后来C语言变为C++,后来C++又产生了J ...
java数组有跨类建立对象_50个性能优化的细节：Java高级开发必会，来学习下吧...
作者:程序员之言链接:https://www.jianshu.com/p/aa55c9f1468d 前言: 在JAVA程序中,性能问题的大部分原因并不在于JAVA语言,而是程序本身.养成良好的编码习惯 ...
【java笔记】类与对象（定义，创建，使用，标准的类，对象数组）
面向对象的特征: 封装,继承,多态类:一组相关属性(数据成员)和行为(成员方法)的集合.抽象出事物的属性和行为来描述事物. 对象:一类事物的具体体现. 类和对象的关系: 类的定义: 例:定义一个学生 ...
jQuery→简介引入、jQuery类数组对象$()与DOM对象、各种选择器、attr()、html() 、text()、val()
官网下载 https://jquery.com/download/ jQuery对象与DOM对象 jQuery类数组对象$('')转DOM对象 DOM对象转jQuery对象 id选择器类选择器元素 ...
随机创建圆形、三角形或者矩形类的对象，存放在数组中，并计算出每个形状的面积和周长
随机创建圆形.三角形或者矩形类的对象, 存放在数组中,并计算出每个形状的面积和周长题目要求解题思路代码形状类代码圆形类代码三角形类代码矩形类代码方法类代码运行结果题目要求随机创建 ...
java自学 part2 数组类和对象包继承多态抽象类接口
数组:arr 获取数组的长度:arr.length 数组转字符串: Arrays.toString(arr) 数组的拷贝: Arrays.copyOf(arr,arr.length) 数组的排序:Ar ...

数组、对象、类数组对象的不同以及类数组转数组方法总结

一、数组、对象、类数组对象数据结构的异同

数组、对象、类数组对象的不同以及类数组转数组方法总结相关推荐

最新文章

热门文章