JavaScript常用数组操作实例详解

1、数组的创建

 new Array();
 new Array(size);
 new Array(element0, element1, ..., elementn);

 参数

参数 size 是期望的数组元素个数。返回的数组,length 字段将被设为 size 的值。
 

参数 element ..., elementn 是参数列表。当使用这些参数来调用构造函数 Array() 时,新创建的数组的元素就会被初始化为这些值。它的 length 字段也会被设置为参数的个数。
 
返回值

返回新创建并被初始化了的数组。
 
如果调用构造函数 Array() 时没有使用参数,那么返回的数组为空,length 字段为 0。
 
当调用构造函数时只传递给它一个数字参数,该构造函数将返回具有指定个数、元素为 undefined 的数组。
 
当其他参数调用 Array() 时,该构造函数将用参数指定的值初始化数组。
 
当把构造函数作为函数调用,不使用 new 运算符时,它的行为与使用 new 运算符调用它时的行为完全一样。

 

2、数组的元素的访问

 

var testGetArrValue=arrayObj[1]; //获取数组的元素值

arrayObj[1]= "这是新值"; //给数组元素赋予新的值
 

 

3、数组元素的添加

 

代码
arrayObj. push([item1 [item2 [. . . [itemN ]]]]);// 将一个或多个新元素添加到数组结尾,并返回数组新长度

arrayObj.unshift([item1 [item2 [. . . [itemN ]]]]);// 将一个或多个新元素添加到数组开始,数组中的元素自动后移,返回数组新长度

arrayObj.splice(insertPos,0,[item1[, item2[, . . . [,itemN]]]]);//将一个或多个新元素插入到数组的指定位置,插入位置的元素自动后移,返回""。
 

 

4、数组元素的删除

 

arrayObj.pop(); //移除最后一个元素并返回该元素值

arrayObj.shift(); //移除最前一个元素并返回该元素值,数组中元素自动前移

arrayObj.splice(deletePos,deleteCount); //删除从指定位置deletePos开始的指定数量deleteCount的元素,数组形式返回所移除的元素
 

 

5、数组的截取和合并

 

arrayObj.slice(start, [end]); //以数组的形式返回数组的一部分,注意不包括 end 对应的元素,如果省略 end 将复制 start 之后的所有元素

arrayObj.concat([item1[, item2[, . . . [,itemN]]]]); //将多个数组(也可以是字符串,或者是数组和字符串的混合)连接为一个数组,返回连接好的新的数组
 

 

6、数组的拷贝

 

arrayObj.slice(0); //返回数组的拷贝数组,注意是一个新的数组,不是指向

arrayObj.concat(); //返回数组的拷贝数组,注意是一个新的数组,不是指向
 

 

7、数组元素的排序

 

arrayObj.reverse(); //反转元素(最前的排到最后、最后的排到最前),返回数组地址

arrayObj.sort(); //对数组元素排序,返回数组地址
 

 

8、数组元素的字符串化

 

arrayObj.join(separator); //返回字符串,这个字符串将数组的每一个元素值连接在一起,中间用 separator 隔开。

toLocaleString 、toString 、valueOf:可以看作是join的特殊用法,不常用
 
 
9、length 属性

Length属性表示数组的长度,即其中元素的个数。因为数组的索引总是由0开始,所以一个数组的上下限分别是:0和length-1。和其他大多数语言不同的是,JavaScript数组的length属性是可变的,这一点需要特别注意。当length属性被设置得更大时,整个数组的状态事实上不会发生变化,仅仅是length属性变大;当length属性被设置得比原来小时,则原先数组中索引大于或等于length的元素的值全部被丢失。下面是演示改变length属性的例子:

 
JScript 代码   复制

var arr=[12,23,5,3,25,98,76,54,56,76];

//定义了一个包含10个数字的数组

alert(arr.length); //显示数组的长度10

arr.length=12; //增大数组的长度

alert(arr.length); //显示数组的长度已经变为12

alert(arr[8]); //显示第9个元素的值,为56

arr.length=5; //将数组的长度减少到5,索引等于或超过5的元素被丢弃

alert(arr[8]); //显示第9个元素已经变为"undefined"

arr.length=10; //将数组长度恢复为10

alert(arr[8]); //虽然长度被恢复为10,但第9个元素却无法收回,显示"undefined"

下面再看一些实例

//shift:删除原数组第一项,并返回删除元素的值;如果数组为空则返回undefined 
 
var a = [1,2,3,4,5]; 
 
var b = a.shift(); //a:[2,3,4,5]   b:1 
 
 
 
//unshift:将参数添加到原数组开头,并返回数组的长度 
 
var a = [1,2,3,4,5]; 
 
var b = a.unshift(-2,-1); //a:[-2,-1,1,2,3,4,5]   b:7 
 
//注:在IE6.0下测试返回值总为undefined,FF2.0下测试返回值为7,所以这个方法的返回值不可靠,需要用返回值时可用splice代替本方法来使用。 
 
 
 
//pop:删除原数组最后一项,并返回删除元素的值;如果数组为空则返回undefined 
 
var a = [1,2,3,4,5]; 
 
var b = a.pop(); //a:[1,2,3,4]   b:5 
 
 
 
//push:将参数添加到原数组末尾,并返回数组的长度 
 
var a = [1,2,3,4,5]; 
 
var b = a.push(6,7); //a:[1,2,3,4,5,6,7]   b:7 
 
 
 
//concat:返回一个新数组,是将参数添加到原数组中构成的 
 
var a = [1,2,3,4,5]; 
 
var b = a.concat(6,7); //a:[1,2,3,4,5]   b:[1,2,3,4,5,6,7] 
 
 
 
//splice(start,deleteCount,val1,val2,):从start位置开始删除deleteCount项,并从该位置起插入val1,val2, 
 
var a = [1,2,3,4,5]; 
 
var b = a.splice(2,2,7,8,9); //a:[1,2,7,8,9,5]   b:[3,4] 
 
var b = a.splice(0,1); //同shift 
 
a.splice(0,0,-2,-1); var b = a.length; //同unshift 
 
var b = a.splice(a.length-1,1); //同pop 
 
a.splice(a.length,0,6,7); var b = a.length; //同push 
 
 
 
//reverse:将数组反序 
 
var a = [1,2,3,4,5]; 
 
var b = a.reverse(); //a:[5,4,3,2,1]   b:[5,4,3,2,1] 
 
 
 
//sort(orderfunction):按指定的参数对数组进行排序 
 
var a = [1,2,3,4,5]; 
 
var b = a.sort(); //a:[1,2,3,4,5]   b:[1,2,3,4,5] 
 
 
//slice(start,end):返回从原数组中指定开始下标到结束下标之间的项组成的新数组 
 
var a = [1,2,3,4,5]; 
 
var b = a.slice(2,5); //a:[1,2,3,4,5]   b:[3,4,5] 
 
 
//join(separator):将数组的元素组起一个字符串,以separator为分隔符,省略的话则用默认用逗号为分隔符 
 
var a = [1,2,3,4,5]; 
 
var b = a.join("|"); //a:[1,2,3,4,5]   b:"1|2|3|4|5"

常用的数据操作函数

concat

将参数列表连接到原数组后面形成一个新的数组并返回,原有数组不受影响。

var arr = ["a","b","c"];
var arr1 = arr.concat("d","e");
//arr1 = ["a","b","c","d","e"]

join

以指定的字符作为分割符,将数组转换为字符串,当指定字符为逗号时,其作用和 toString() 相同。

var str1 = arr.join(",");
//str1 = "a,b,c"

pop

通俗的讲,就是弹出数组的最后一个元素。结合下面的 push 方法,使得将数组作为栈来使用成为可能。pop 方法返回数组最后一个元素的值,并将 length 属性减 1,即返回后立即丢失最后一个元素。

var item1 = arr.pop();
//item1 = "c"

push

将参数添加到数组的结尾。

arr.push("d","e");
alert(arr);
//arr = ["a","b","c","d","e"]

reverse

将数组中的元素反转排列,这个操作是在原有数组上经行操作,同时也返回数组本身。

arr.reverse();
alert(arr);
//arr = ["c"."b","a"]

shift

移去数组的第一个元素,并返回这个元素的值。这个方法的性质和 pop 方法很类似,pop 方法是移去最后一个元素。

var item1 = arr.shift();
//item1 = "a"

unshift

将参数列表插入到数组的开头。其性质和 push 方法类型,但 push 方法是将元素添加到数组的结尾。

arr.unshift("d","e");
alert(arr);
//arr = ["d","e","a","b","c"]

slice

返回数组对象的一个子集,索引从开始(包括开始位置元素),到结束(不包括结束位置元素),原有数组不受影响。当 开始或者结束为负数时,则使用他们加上数组长度后的值。如果结束小于等于开始,将返回空数组。

var item1 = arr.slice(1,2);
//item1 = "b"
var item2 = arr.slice(-2,-1);
//item2 = "b"

splice

从数组对象中移除指定长度的元素,并替换为新的元素(相当于执行替换操作)。如果没有指定新的元素,则相当于执行删除操作。返回被删除元素组成的数组。

var arr1 = arr.splice(1,2,"d","e");
//arr1 = ["b","c"]
alert(arr);//["a","d","e"]
var arr2 = arr.splice(1,2);
//arr2 = ["d","e"]
alert(arr);
//arr = ["a"]

1.删除数组中指定的元素

/**
 * 参考实例
foreach = function (obj, insp){
  if(obj== null && obj.constructor != Array){
  return [];
}
//obj是要处理的数组,obj==null 表示对象尚未存在;obj.constructor != Array 表示对象obj的属性的构造函数不是数组;
//constructor属性始终指向创建当前对象的构造函数。两个条件均满足,则返回空数组[];

//下面对constructor属性作进一步了解。
var obj= [1, 2, 3, 4]; // 等价于 var obj= new Array(1, 2, 3, 4);
console.log(obj.constructor === Array); // 返回true 表明obj的构造函数为Array;

var foo= function() { }; // 等价于 var foo = new Function();
console.log(foo.constructor === Function); // 返回true 表明foo的构造函数为Function;

var obj = new Foo();  //由构造函数实例化一个obj对象
console.log(obj.constructor === Foo); // 返回true 表明obj的构造函数为Foo;

 */

//删除数组中指定的元素
function del(val, arr)
{
    //检测参数
    if (arr == null && arr.constructor != Array) {
        return [];
    }
   
    var newarr = []; //不存在的保存到新数组中
    for (var i = 0; i < arr.length; i++) {
        if (arr[i] != val)
            newarr.push(arr[i]);
    }
    return newarr;
}
alert(del(2, [1, 2, 3, 4, 5, 2]));2.去除重复的元素

 

/**
 *去除数组中重复的元素
把元素的值存为一个新数组的key,key是不可以重复的,然后变量次数组即可
 */
function unique(data) {
    data = data || [];
    var a = {};
    len = data.length;
    for (var i = 0; i < len; i++) {
        var v = data[i];
        if (typeof(a[v]) == 'undefined') {
            a[v] = 1;
        }
    };
    data.length = 0;
    for (var i in a) {
        data[data.length] = i;
    }
    return data;
}
alert(unique([12,12,12,34])); 3.删除数组指定下标的元素

 

/**
 *删除数组的指定下标元素
 *
 * i 的值是一直在变的,n的值是只有if条件成立的时候才会变(会依次递增)
 */
Array.prototype.remove=function(dx)
  {
    if(isNaN(dx)||dx>this.length){return false;}
    for(var i=0,n=0;i<this.length;i++)
    {
        if(this[i]!=this[dx])
        {
            this[n++]=this[i]
        }
    }
    this.length-=1
  }

var arr = [1,2,3,4,2,5];
alert(arr);
arr.remove(2);

alert(arr);

时间: 2024-09-20 06:37:06

JavaScript常用数组操作实例详解的相关文章

javascript常用经典算法实例详解_javascript技巧

本文实例讲述了javascript常用算法.分享给大家供大家参考,具体如下: 入门级算法-线性查找-时间复杂度O(n)--相当于算法界中的HelloWorld //线性搜索(入门HelloWorld) //A为数组,x为要搜索的值 function linearSearch(A, x) { for (var i = 0; i < A.length; i++) { if (A[i] == x) { return i; } } return -1; } 二分查找(又称折半查找) - 适用于已排好序的

ajax响应json字符串和json数组的实例(详解)

最近上班太忙,晚上抽空整理一下ajax请求中,后台返回json字符串和json数组的场景,以及前台的处理示例. 直接看代码. json字符串的后台响应 package com.ajax; import java.io.IOException; import java.io.PrintWriter; import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.serv

Mybatis中的resultType和resultMap查询操作实例详解_java

resultType和resultMap只能有一个成立,resultType是直接表示返回类型的,而resultMap则是对外部ResultMap的引用,resultMap解决复杂查询是的映射问题.比如:列名和对象属性名不一致时可以使用resultMap来配置:还有查询的对象中包含其他的对象等. MyBatisConfig.xml <?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE configura

Android Wifi的forget()操作实例详解

Android  Wifi的forget()操作实例详解 我们在处理某个Wifi连接时,有时会需要忘掉当前连接的密码信息.执行这项操作,我们需要调用WifiManager::forget()函数: /** * Delete the network in the supplicant config. * * This function is used instead of a sequence of removeNetwork() * and saveConfiguration(). * * @p

PHP文件上传操作实例详解_php技巧

本文实例分析了PHP文件上传操作.分享给大家供大家参考,具体如下: 文件上传 发生在浏览器向服务器发出的请求中. 文件,对于浏览器来讲,就是表单中的一个特殊类型的数据而已. 浏览器表单中的数据,两种类型: 字符串类型(字节流编码) 文件类型(二进制编码),文件是表单数据中一部分 服务器角度: 在接受浏览器请求时,处理好表单内的数据.根据数据类型不同使用不同处理方法: 字符串类型,存储在$_POST变量中(内存) 文件型数据,存储在上传临时目录中 表单提交时,浏览器会默认的行为: 表单内的的内容都

php类的自动加载操作实例详解_php技巧

本文实例讲述了php类的自动加载操作.分享给大家供大家参考,具体如下: 类的自动加载 在外面的页面中,并不需要去引入类文件,但程序会在需要一个类的时候自动去"动态加载"该类. ① 创建一个对象的时候new ② 直接使用一个类名(操作静态属性与方法) 使用__autoload魔术函数 当出现两种情况时候,就会调用该函数,该函数需要我们预先定义,在其中写好加载类文件的通用语句 function __autoload($name){ require './lib/'.$name.'.clas

Android对sdcard扩展卡文件操作实例详解_Android

Android对sdcard扩展卡文件的操作其实就是普通的文件操作,但是仍然有些地方需要注意.比如: 1.加入sdcard操作权限: 2.确认sdcard的存在: 3.不能直接在非sdcard的根目录创建文件,而是需要先创建目录,再创建文件: 实例如下: (1)在AndroidManifest.xml添加sdcard操作权限 <!-- sdcard权限 --> <uses-permission android:name="android.permission.WRITE_EXT

Android编程之在SD卡上进行文件读写操作实例详解_Android

本文实例讲述了Android编程之在SD卡上进行文件读写操作的方法.分享给大家供大家参考,具体如下: 很多知识只有真正理解掌握之后才能运用自如,举一反三.对Java中的文件操作和android系统SD卡里面的文件操作,你觉得有区别吗,显然没有本质区别,如果勉强说有,那也是不足为道滴,但我们在实际运用中却要注意如下几点,不然问题会缠上你. 1.首先想要对android系统SD卡里文件操作需要添加使用权限: android系统是不会让外来程序随意动自己内存的,如果没有许可证,不好意思,不准你动我地盘

Python文件操作类操作实例详解_python

本文讲述了Python文件操作类的操作实例,详细代码如下: #!/usr/bin/env python #!/usr/bin/env python #coding:utf-8 # Purpose: 文件操作类 #声明一个字符串文本 poem=''' Programming is fun测试 When the work is done if you wanna make your work also fun: use Python! ''' #创建一个file类的实例,模式可以为:只读模式('r'