《JavaScript高级编程》学习笔记之object和array引用类型

2019-11-20 11:21:55

字体：大中小

来源：转载

供稿：网友

本文给大家分享我的javascript高级编程学习笔记之object和array引用类型，涉及到javascript引用类型相关知识，大家一起看看把。

1. Object类型

大多数引用类型值都是Object类型的实例；而且Object也是ECMAScript中使用最多的一个类型。

创建Object实例有如下两种方式：

new操作符后跟Object构造函数：

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

对象字面量表示法：

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

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构造函数。如果你从一个框架向另一个框架传入一个数组，那么传入的数组与在第二个框架中原生创建的数组分别具有各自不同的构造函数。

为了解决这个问题，ECMAScript5新增了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种。

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

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

splice( )方法始终都会返回一个数组，包含从原始数组中删除的项（如果没有删除任何项，则返回空数组）。

2.7 位置方法

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

2.8 迭代方法

ECMAScript5为数组定义了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跨域总结之window.name实现的跨域数据传输

下一篇：JS实现的论坛Ajax打分效果完整实例