JavaScript对象和数组

时间:2022-04-29
本文章向大家介绍JavaScript对象和数组，主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项，具有一定的参考价值，需要的朋友可以参考一下。

在JavaScript中对象是一种数据结构，用于将数据和功能组织在一起，描述一类对象所具有的属性和方法。

对象是某个特定类型的实例。新对象是new操作符后跟一个关键字来实现的。构造函数本身就是一个函数，用于创建新对象。 var person = new Object();这行代码创建了一个Object的实例，并将值保存了变量person中。

创建对象的方式有两种，一种是通过Object函数来创建。

var animal = new Object();
                animal.eat=function(){
                    console.log("eat");
                };
                animal.color="blue";

上面的代码通过object创建了对象animal，并创建了对象的方法eat以及属性color。

同时可以通过字面量的方式创建对象。

var animal={
                    eat:function(){
                        console.log("eat");
                    },
                    color:"blue"
                }

上面通过字面量的方式创建了新对象animal，并创建了方法eat和属性color。通过字面量创建的对象，并不会调用Object函数。对象可以作为参数传递至函数中使用。

function test(args){
                    console.log("Name:"+args.name+"n");
                    console.log("age:"+args.age+"n");
                }
                test({"name":"haha","age":18});

函数test接收了args参数，args是一个对象。在函数中可以直接访问对象的属性。这种情况适合向函数传递大量的可选参数情况。

function Person(options){
					//Jquery 的extend方法，用于合并参数
					this.options=$.extend(true, {"name":"zhang"},options);
					console.log(this.options);
				}
				var perosn = new Person({
					"name":"ge",
					"age":18,
					"sex":"man"
				});

　　上面的代码定义了Person函数，并且为person传递了大量的对象。同时在函数内部有默认的对象，用jquery的extend方法进行参数的合并。

一般情况下，访问对象的属性通过操作符.来访问，不如person.name。访问对象的方法也通过.来调用,比如person.eat()。访问对象的属性还有另外一种访问方式，通过下标的方式访问，比如person["age"]。

有些对象的属性包含一些特殊字符，不能通过操作符（.）来访问，必须通过中括号的方式来访问，比如“first name”，这个属性有空格，必须通过中括号访问。person["first name"]。

JavaScript中的数组与其他高级语言有很大的区别，数组中存放不同类型的值，可以在数组的第一个位置存放Number，第二个位置存放布尔值。创建数组也有两种基本的方式，比如 var array = new Array();

如果预先知道数组的长度，可以 var array = new Array(20);也可以向数组中传递参数， var array = new Array("red",20,true);当我们只传递一个参数时候就比较复杂了，如果传递的是数值，则创建该长度的数组，如果传递的是字符串，则创建包含这个值的数组。

创建数组的另一种方式是通过字面量的方式创建数组。

var array=[];var array1=["blue",1,true];

访问数组的方式通过[]下标的方式访问的，比如 array1[0]，输出第一项的值;rray1[1]，输出第二项的值;array[2]="hehe"，修改了第三项的值;array[3]="en"，添加新的数组元素。方括号中的索引表示要访问的值。数组的长度保存在length中。

通过 instanceof，以及isArray可以判断一个对象是否是数组，比如 array instanceof Array,array.isArray()

var array=["blue","red","yellow"];
console.log(array.toString());//输出blue,red,yellow
console.log(array.join(";"));//输出blue;red;yellow

toString()方法将数组转换为String,通过操作符逗号分隔数组元素。同时数组提供了join方法可以指定字符来分隔数组元素。

var array=["blue","red","yellow"];
console.log(array.toString());//输出blue,red,yellow
console.log(array.join(";"));//输出blue;red;yellow
var str = array.toString();//
var narray= str.split(",");//["blue","red","yellow"];
console.log(narray[0]);//输出blue

上述代码展示split的用法，split可以字符串转换为数组。通过指定的分隔符，将字符串转换为数组。

数组提供了一组方法，使数组使用和其他的数据结构一样。数组可以表现的像栈一样，可以限制插入和删除。栈是一种后进先出的数据结构，最新添加的项最早被移除。插入和删除都发生在栈的顶部。数组提供了push和pop方法。

push方法接收任意数量的参数，将他们逐个添加到数组的末尾，并返回数组的长度。pop方法可以从数组的末尾删除一项，并返回移除的项

var array=[];
console.log(array.length);//0
array.push("red");
console.log(array.length);//1
array.pop();
console.log(array.length);//0

上面的代码，定义了一个数组array，并通过push方法添加了一项，数组的长度为1，通过pop方法删除了一项，数组的长度为0.

队列的数据结构是先进先出，数组同样可以表现的像队列一样，实现元素的先进先出。队列在末尾添加元素，在列表的前端移除数据项。push方法可以向数组的末端添加数据元素，shift方法可以移除数组的第一项，并返回，同时数组长度减1.

var array=[];
array.push("red");
array.push("blue");
array.push("green");
array.shift();
console.log(array.toString());//blue,green

上面的代码定义了一个数组array，并通过push方法添加了三项元素，最好通过shift方法删除数组的第一项，最后数组只有两项，toString()方法输出。

数组的重新排序有两个方法reverse和sort。reverse就是数组元素反转，sort方法将数组进行升序排列，首先要将数组的元素调用toString方法，然后再进行排序。

var array=[1,7,5,3,2];
array.reverse();
console.log(array.toString());//2，3，5，7，1
array.sort();
console.log(array.toString());//1，2，3，5，7
var array =[1,3,5,7,9,11];
array.sort();
console.log(array.toString());//输出1，11，3，5，7，9

通过上面的代码，我们发现sort方法的排序有时候并不是我们想要的结果，所以sort方法提供了传递函数作为参数的方法。通过传递函数我们能够实现数值的升序以及降序排列。

function compareMax(v1,v2){
                    if(v1<v2){
                        return -1;
                    }
                    else if(v1>v2){
                        return 1
                    }
                    else{
                        return 0;
                    }
                }
                //降序
                function compareMin(v1,v2){
                    if(v1<v2){
                        return 1;
                    }
                    else if(v1>v2){
                        return -1;
                    }
                    else {
                        return 0;
                    }
                }
                var array= [1,3,11,7,2,10];
                array.sort(compareMax);
                console.log(array.toString());//1,2,3,7,10,11
                array.sort(compareMin);
                console.log(array.toString());//11,10,7,3,2,1

比较函数接收两个参数，如果第一个参数应该在第二个参数之前则返回负数，如果第一个参数应该位于第二个参数之后则返回整数，两个数相等返回0.

//升序排列
                function compareMax(v1,v2){
                    /*if(v1<v2){
                        return -1;
                    }
                    else if(v1>v2){
                        return 1
                    }
                    else{
                        return 0;
                    }*/
                    return v1-v2;
                }
                //降序
                function compareMin(v1,v2){
                /*    if(v1<v2){
                        return 1;
                    }
                    else if(v1>v2){
                        return -1;
                    }
                    else {
                        return 0;
                    }*/
                    return v2-v1;
                }

通过上面的两个函数同样可以实现升级和降序排列。

 JavaScript的数组还包含许多其他常用的方法。concat方法基于当前的数组，形成一个新的数组，并不改变原数组的值。concat的参数可以一个或者多个数组，可以不是数组。如果不是数组，则在原数组的末尾添加一个新的元素，形成新的数组。如果是数组，则会将数组的每一项添加到新的数组中，形成新的数组。

var array=["1",2];
var array1=array.concat(["3",4]);
console.log(array.toString());//输出1，2
console.log(array1.toString());//输出1,2,3,4

上面的代码可以看出通过concat生成了新的数组，原数组的值并没有发生改变。

slice方法能够基于当前数组的一项或者多项创建一个新的数组，不会改变原始数组。slice方法有一个或者两个参数，表示数组下标的起始和结束的位置，不包括结束位置。如果只有一个参数，则从开始位置一直到数组结束。

var array=["blue","red","green","black","white"];
var array1=array.slice(1,3);
var array2=array.slice(1);
console.log(array1.toString());//red,green
console.log(array2.toString());//red,green,black,white

如果slice参数有负数，则用数组长度加上该负数，如array.slice(-2,-1)，则array.slice(3,4)相当。如果起始位置大于结束位置，则返回空数组。

splice方法可以向数组的中部插入元素，splice可以实现数组的插入、删除和替换。删除需要指定两个参数，要删除第一项的位置，要删除的项数。如splice(1,3)，从数组第二项开始，删除三个数组元素。splice插入方法至少传递三个参数，第一要插入元素的位置，第二个要删除的项数（0），第三个参数要插入的元素，如果要插入多项，可以有第四个参数。。。。

splice的替换方法也至少需要三个参数，第一个参数元素要删除的位置，第二个参数删除的项数，第三个参数插入的元素。

var array=["red","green","blue","white","black"];
var array1=array.splice(1,1);//array被删除一项["red","blue","white","black"]
var array2=array.splice(1,0,"green");//["red","green","blue","white","black"]
var arrays=array.splice(1,1,"yellow");//["red","yellow","blue","white","black"]

上面的代码讲述了splice方法的删除、插入、替换方法的使用。

数组的indexOf方法可以查找某个元素在数组的位置，如果数组中部存在该元素，则返回-1.

var array=["red","green","blue","white","black"];
console.log(array.indexOf("green"));//1
console.log(array.indexOf("orange"));//-1

JavaScript为数组提供了5个遍历的方法，分别是every、fillter、forEach、map和some方法。every方法对数组的每一项运行给定的函数，如果该数组的每一项对函数都返回true，则返回true。

some方法与every方法类似，但是some方法只要有一项满足函数，就返回true。

var array=[1,2,3,4,5];
                var result=array.every(function(value,index,array){
                    return value>2;
                });
                console.log(result);//false,因为1<2
                var result1=array.some(function(value,index,array){
                    return value>2;
                });
                console.log(result1);//true

filter函数利用指定的函数确定是否在返回的数组中包含一项，并形成新的数组。

var array=[1,2,3,4,5];
var array1=array.filter(function(value,index,array){
return value>2;
});
console.log(array1.toString());//3,4,5

上面的代码对array进行了filter过滤，返回所有大于2的项，形成新的数组。

map方法也返回一个新的数组，但是这个新的数组的每一项都是对原来的每一项元素执行了指定的函数。

var array=[1,2,3,4,5];
var array1=array.map(function(value,index,array){
                    return value*2;
                });
console.log(array1.toString());//2,4,6,8,10

上面的代码对array进行了map方法，返回了新的数组，在原来的数组每一项乘2.

forEach方法，对数组的每一项执行传入的函数。没有返回值，与for循环类似。

var array=[1,2,3,4,5];
array.forEach(function(value,index,array){
console.log(value);
});

 可以自己上述5个重写。因为有的浏览器不支持上述5个方法

              Array.prototype.every=function(func){
                    var result=false;
                    for(var i=0,len=this.length;i<len;i++){
                     result=func(this[i],i,this);
                     if(result==false){
                         return false;
                     }
                    }
                    return true;
                }
        Array.prototype.some=function(func){
                    var result=false;
                    for(var i=0,len=this.length;i<len;i++){
                     result=func(this[i],i,this);
                     if(result==true){
                         return true;
                     }
                    }
                    return false;
                }
        Array.prototype.filter=function(func){
                    var result=[];
                    for(var i=0,len=this.length;i<len;i++){
                     var flag=func(this[i],i,this);
                     if(flag){
                         result.push(this[i]);
                     }
                    }
                    return result;
                }
        Array.prototype.map=function(func){
                    var result=[];
                    for(var i=0,len=this.length;i<len;i++){
                     var flag=func(this[i],i,this);
                         result.push(flag);
                    }
                    return result;
                }
        Array.prototype.forEach=function(func){
                    
                    for(var i=0,len=this.length;i<len;i++){
                    func(this[i],i,this);
                    }

                }

随机文章
Javascript知识点必读
最近更新