JavaScript Object与Array引用类型详解：创建、检测、转换与操作方法

作者：阿沐时间：2026-10-29 16:21:06浏览：504

本文系统梳理JavaScript中Object与Array引用类型的核心特性。涵盖对象的两种创建方式、Array的动态长度与多态性，重点解析ECMAScript 5新增的Array.isArray()检测机制，以及toString、toLocaleString等转换方法。详细讲解栈/队列操作、sort排序陷阱、splice插入删除、位置查找、五大迭代方法与归并方法的参数及返回值，为前端开发提供实用参考。

本文整理并分享关于JavaScript高级编程中Object与Array引用类型的学习笔记，涉及JavaScript引用类型的基础知识，供读者参考学习。

Object类型创建方式

1. Object类型

绝大多数引用类型的值都属于Object类型的实例，且Object是ECMAScript中使用最为频繁的类型。

创建Object实例主要包含以下两种方式：

使用new操作符配合Object构造函数进行创建：


   var person=new Object( );
   person.name="webb";
   person.age=25;

采用对象字面量表示法进行创建：


  var person={
     name:"webb",
     age:25
   };

Array类型特性与创建

2. Array类型

除Object外，Array类型是ECMAScript中应用最为广泛的类型。ECMAScript数组的每一项均可存储任意类型的数据（例如首项为字符串，次项为数值，第三项为对象等）。此外，ECMAScript数组支持动态大小调整，即随着数据添加自动扩展以容纳新数据。

创建数组的基本方式主要有两种：

使用Array构造函数进行创建：


var colors=new Array( );
     var colors=new Array(20);   //也可设置length属性
     var colors=new Array("red","blue","green");   //包含3个字符串的数组
     var colors=Array(3);   //可省略new操作符

使用数组字面量表示法进行创建。


 var colors=["red","blue","green"];
     alert(colors[0]);   //显示第一项
     colors[2]="black";   //修改第三项
     colors[3]="brown";   //新增第四项

注意：数组的length属性并非只读。通过设置该属性，可以从数组末尾移除或添加项。例如：


     var colors=["red","blue","green"];
     colors.length=2;
     alert(colors[2]);   //undefined
     colors[colors.length]="black";   //在末尾添加项

数组检测机制

2.1 检测数组

对于网页或全局作用域，使用instanceof操作符可判断某对象是否为数组：


   if(value instanceof Array){
        //对数组执行某些操作
     }

instanceof操作符的局限在于其假设仅存在单一全局执行环境。若网页包含多个框架，则存在两个以上不同的全局执行环境，进而存在两个以上不同版本的Array构造函数。若将数组从一个框架传入另一个框架，传入的数组与第二个框架中原生创建的数组将拥有各自不同的构造函数。

为解决此问题，ECMAScript 5新增了Array.isArray()方法。该方法旨在最终确定某值是否为数组，无论其在全局执行环境中的创建位置如何：


if(Array.isArray(value)){
        //对数组执行某些操作
     }

支持该方法的浏览器包括IE9+、Firefox 4+、Safari 5+、Opera 10.5+和Chrome。

数组转换方法

2.2 转换方法

调用数组的toString()方法会返回由数组中每个值的字符串形式拼接而成的以逗号分隔的字符串。而调用valueOf()返回的仍是数组本身。实际上，为创建该字符串会调用数组每一项的toString()方法。例如：


var colors=["red","blue","green"];
     alert(colors.toString());   //red,blue,green
     alert(colors.valueOf());   //red,blue,green
     alert(colors);   //red,blue,green

另外，toLocaleString()方法常返回与toString()和valueOf()相同的值，但并非总是如此。当调用数组的toLocaleString()方法时，它同样创建一个以逗号分隔的数组值字符串。与前两个方法唯一的不同在于，为获取每一项的值，调用的是每一项的toLocaleString()方法，而非toString()方法。


  var person1={
        toLocaleString:function(){
          return "webbxx";
        },
        toString:function(){
          return "webb";
        }
     };
     var person2={
        toLocaleString:function(){
          return "susanxx";
        },
        toString:function(){
          return "susan";
        }
     };
     var people=[person1,person2];
     alert(people);   //webb,susan
     alert(people.toString());   //webb,susan
     alert(people.toLocaleString());   //webbxx,susanxx
     使用join( )方法也可输出数组，并可指定分隔符，默认为逗号：
          var colors=["red","blue","green"];
          alert(colors.join(","));   //red,blue,green
          alert(colors.join("||"));   //red||blue||green

栈与队列操作方法

2.3 栈方法(LIFO)

push()：接受任意数量的参数，逐个添加到数组末尾，并返回修改后数组的长度； pop()：从数组末尾移除最后一项。


  var colors=new Array();
        var count=colors.push("red","green");
        alert(count);   //2
        count=colors.push("black");
        alert(count);   //3
        var item=colors.pop();
        alert(item);   //"black"
        alert(colors.length);   //2

2.4 队列方法(FIFO)

shift()：移除数组的第一项并返回该项，同时数组长度减1； unshift()：与shift()用途相反，能在数组前端添加任意个项并返回数组的长度。

数组重排序方法

2.5 重排序方法

reverse()：反转数组项的顺序；

sort()：默认按升序排列。为实现排序，sort()方法会调用每项的toString()方法，然后比较得到的字符串以确定如何排序。即使每一项都是数值，比较的也是字符串，如下所示：


   var values=[0,1,5,10,15];
        values.sort();
        alert(values);   //0,1,10,15,5

这种排序方式在许多情况下并非最佳方案。因此sort()方法可接受一个比较函数作为参数，以便指定哪个值位于哪个值的前面。


 function compare(value1,value2){
        if(value1<value2){
          return -1;   //value1在value2之前
        }else if(value1>value2){
          return 1;
        }else{
          return 0; 
        }
     }

该比较函数适用于大多数据类型，只需将其作为参数传递给sort()方法即可，如下：


 var values=[0,1,5,10,15];
        values.sort(compare);
        alert(values);   //0,1,5,10,15

数组操作方法

2.6 操作方法

concat()：基于当前数组中的所有项创建一个新数组。例如：


 var colors=["red","blue","green"];
        var colors2=colors.concat("yellow",["black","brown"]);
        alert(colors);   //red,blue,green
        alert(colors2);   //red,blue,green,yellow,black,brown

slice()：基于当前数组中的一个或多个项创建一个新数组。例如：


       var colors=["red","green","blue","yellow","purple"];
        var colors2=colors.slice(1);   //green,blue,yellow,purple
        var colors3=colors.slice(1,3);   //green,blue,yellow

splice()：该方法可能是最强大的数组方法，主要用途是向数组中部插入项，但使用这种方式有以下两种情形。

删除：可删除任意数量的项，只需指定2个参数：要删除的第一项的位置和要删除的项数。

插入：可向指定位置插入任意数量的项，只需提供3个参数：起始位置、0（要删除的项数）和要插入的项。若要插入多个项，可再传第四、第五乃至任意多个项；例如，splice(2,0,"red","green")会从当前数组的位置2开始插入字符串"red"和"green"。

splice()方法始终返回一个数组，包含从原始数组中删除的项（若未删除任何项，则返回空数组）。

数组位置查找方法

2.7 位置方法

indexOf()和lastIndexOf()：这两个方法均接受两个参数：要查找的项和（可选的）表示查找起点位置的索引。前者从开头开始向后查找，后者从末尾向前查找。

数组迭代方法

2.8 迭代方法

ECMAScript 5为数组定义了5个迭代方法，每个方法均接受两个参数：要在每一项上运行的函数和（可选的）运行该函数的作用域对象——影响this的值。传入这些方法中的函数会接收三个参数：数组项的值、该项在数组中的位置和数组对象本身。

every()：对数组中的每一项运行给定函数，若该函数对每一项都返回true，则返回true。 filter()：对数组中的每一项运行给定函数，返回该函数会返回true的项组成的数组。 forEach()：对数组中的每一项运行给定函数，此方法无返回值。 map()：对数组中的每一项运行给定函数，返回每次函数调用的结果组成的数组。 some()：对数组中的每一项运行给定函数，若该函数对任一项返回true，则返回true。

以上方法均不会修改数组中包含的值。例如：


var numbers=[1,2,3,4,5,4,3,2,1];
        var everyResult=numbers.every(function(item,index,array){
          return item>2;
        });
        alert(everyResult);   //false
        var someResult=numbers.every(function(item,index,array){
          return item>2;
        });
        alert(someResult);   //true
        var filterResult=numbers.every(function(item,index,array){
          return item>2;
        });
        alert(filterResult);   //[3,4,5,4,3]
        var mapResult=numbers.every(function(item,index,array){
          return item*2;
        });
        alert(mapResult);   //[2,4,6,8,10,8,6,4,2]

数组归并方法

2.9 归并方法

reduce()：从数组的第一项开始，逐个遍历到最后； reduceRight()：从数组的最后一项开始，向前遍历到第一项。这两个方法均接受两个参数：一个在每一项上调用的函数和（可选的）作为归并基础的初始值。传给这些方法的函数接受4个参数：前一个值、当前值、项的索引和数组对象。该函数返回的任何值都会作为第一个参数传给下一项。例如：


   var values=[1,2,3,4,5];
        var sum=values.reduce(function(prev,cur,index,array){
          return prev+cur;
        });
        alert(sum);   //15

作者最新文章

为什么叫JavaScript：语言命名由来及与Java的历史渊源

2026-11-05 11:37:48

JS获取当前时间年月日时分秒并格式化为YYYY-MM-DD HH：mm：ss

2026-11-04 21:25:21

不同语言间JS与Java/Python加密结果不一致怎么办

2026-11-04 18:27:23

Mock.js 拦截 Axios 和 Fetch 请求的原理与配置方法

2026-11-04 08:13:59

JS怎么获取当前日期并格式化为YYYY-MM-DD

2026-11-03 18:47:03