`
bufanliu
  • 浏览: 197124 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

Javascript数组及其操作

阅读更多
本文介绍如下几个方面的内容:

1.如何创建数组
2.如何对数组进行操作(添加,删除,读取)
3.数组常见方法和属性

如何创建一个数组,一般地根据初始化设定简单分为3种:

1.单纯创建数组:
var arr=new Array();
要点:用new关键字创建数组对象Array(),Array()对象是一个本地类,可以用new创建一个对象后使用
2.创建数组的同时规定数组大小:
var arr=new Array(10);//这里就创建了一个初始化大小为10的数组
注意:当使用数组大小操作初始化大小时,数组会自动被撑大,不会像C语言那样发生错误.动态增长是js数组的一个性质.另外,js中支持最大数组长度为

4294967295

3.直接初始化:
var arr=new Array("love","hate","pain");//这里就直接初始化了数组
或var arr=["happy","cute","scare"];//括号也可以声明一个数组对象


当然,类似C语言,可以定义2维3维和多维的数组,例如:

<script language=Javascript>
    var myArray = new Array();
    for(var i=0;i<10;i++ )...{
        myArray[i]=new Array();
        myArray[i][0]=Math.floor(Math.random()*10);
        myArray[i][1]=Math.floor(Math.random()*10);
        myArray[i][2]=Math.floor(Math.random()*10);
        myArray[i][3]=Math.floor(Math.random()*10);
        myArray[i][4]=Math.floor(Math.random()*10);
        myArray[i][5]=Math.floor(Math.random()*10);
        myArray[i][6]=Math.floor(Math.random()*10);
        myArray[i][7]=Math.floor(Math.random()*10);
        myArray[i][8]=Math.floor(Math.random()*10);
    }
  
    myArray.sort( function(x, y) ...{
        return (x[0]==y[0])?((x[4]==y[4])?(x[8]-y[8]):(x[4]-y[4])):(x[2]-y[2])
    });
    for(var i=0;i<myArray.length;i++ )...{
        document.write(myArray[i].join(",") + "<br/>");
    }
</script>


数组的属性:length
arr.length返回数组arr的长度,常见于循环中对数组的遍历,比如:
for(var i=0;i<arr.length;i++){
执行部分
}
数组元素的访问: arr[index],其中index表示索引即数组基数,从0开始,共有arr.length个元素.比如: arr[0]访问第一个数组元素,arr[1]访问第二个数组元素....依

次类推 数组的操作方法:先概览下下面的这些操作数组常用的方法(13个)

toString(),valueOf(),toLocalString(),join(),split(),slice(),concat(),
pop(),push(),shift(),unshift(),sort(),splice()
下面逐一分析这些方法的功能和用法.

toString(),valueOf(),toLocalString():
功能:返回数组的全部元素
注:数组名也可以返回整个数组
代码:

    var m=["am","bm","cm"];//用括号声明一个数组对象
    alert(m.toString());//toString()返回数组对象的所有内容,用逗号分割,即am,bm,cm
    alert(m.valueOf());//valueOf()也返回数组对象的所有内容
    alert(m.toLocaleString());//toLocaleString()也返回数组对象的所有内容,但有地区语言区别,暂不研究
    alert(m);//数组名也返回数组对象的所有内容

join():
功能:把数组各个项用某个字符(串)连接起来,但并不修改原来的数组
代码:

    var m=["am","bm","cm"];//用括号声明一个数组对象
    var n=m.join("---");//用---连接am,bm,cm.
    alert(m.toString());//m并没有被修改,返回am,bm,cm
    alert(n);//n是一个字符串,为am---bm---cm


split():
功能:把一个字符串按某个字符(串)分割成一个数组,但不修改原字符串
代码:

    var str="I love maomao,I am caolvchong";
    var arr=str.split("o");//按字符o把str字符串分割成一个数组
    alert(arr);//输出整个数组


slice():返回某个位置开始(到某个位置结束)的数组部分,不修改原数组
代码:

    var m=["am","bm","cm","dm","em","fm"];
    var n=m.slice(2);//返回第二个元素bm后面的元素,即cm,dm,em,fm
    var q=m.slice(2,5);//返回第二个元素后到第五个元素,即cm,dm,em
    alert(n);
    alert(q);


数组对象的栈操作:
push():数组末尾添加一个项
pop():删除数组最后一个项
代码:

    var m=["am","bm","cm","dm","em","fm"];
    m.push("gm");//在数组末尾添加元素gm
    alert(m);
    m.pop();//删除数组最后一个元素gm
    alert(m);


数组对象的队列操作:
unshift():数组头添加一个项
shift():删除数组第一个项
代码:

    var m=["am","bm","cm","dm","em","fm"];
    m.unshift("gm");//在数组第一个元素位置添加元素gm
    alert(m);
    m.shift();//删除数组第一个元素gm
    alert(m);


sort():数组按字符的ASCII码进行排序,修改数组对象
注:即便是数字数组,也将转化为字符串来进行比较排序
代码:

    var m=["am","fm","gm","bm","em","dm"];
    m.sort();//按字母序排序
    alert(m);


concat():在数组尾添加元素,但不修改数组对象
代码:

    var m=["am","bm"]
    var n=m.concat("cm");//添加一项cm,并且赋予新数组对象
    alert(m);//原数组没有被修改
    alert(n);//输出新数组对象


splice():在数组的任意位置进行添加,删除或者替换元素,直接修改数组对象
细节:
splice()有三个参数或三个以上参数,前两个是必须的,后面参数是可选的
进行添加:splice(起始项,0,添加项)
进行删除:splice(起始项,要删除的项个数)
进行替换:splice(起始项,替换个数,替换项) 这个其实是添加删除的共同结果
代码:

    var m=["am","bm"]
    m.splice(1,0,"fm","sm");//在第一项后面添加fm和sm,返回am,fm,sm,bm
    alert(m);
    m.splice(2,1);//删除第二项后面一项(即第三项sm,返回am,fm,bm)
    alert(m);
    m.splice(2,1,"mm");//替换第二项后面一项(即第三项,返回am,fm,mm)
    alert(m);
分享到:
评论

相关推荐

    Javascript数组及其操作WORD版

    资源名称:Javascript数组及其操作 WORD版内容简介:本文档主要讲述的是Javascript数组及其操作;希望本文档会给有需要的朋友带来帮助;感兴趣的朋友可以过来看看 资源太大,传百度网盘了,链接在附件中,有...

    JavaScript求一个数组中重复出现次数最多的元素及其下标位置示例

    主要介绍了JavaScript求一个数组中重复出现次数最多的元素及其下标位置,涉及javascript数组元素遍历、判断、正则过滤、追加等相关操作技巧,需要的朋友可以参考下

    react-use-presentation:使用提供的组件数组及其持续时间创建纯HTML或React演示文稿

    使用提供的组件数组及其持续时间来创建纯HTML(如果需要,请丰富React)的演示文稿。 库将执行其余操作,触发每个数组项的重新渲染。 声明书 分行 职能 线数 目录 运行示例 清楚的 影片BG 预习! 用BG视频预览! ...

    JavaScript实验报告.docx

    动手操作: 数组的升序与降序排列练习 1 升序排列代码 &lt;html&gt; &lt;head&gt; 数组数字大小排序&lt;/title&gt; &lt;/head&gt; &lt;body&gt; 让数组按照升序降序排列&lt;/p&gt; 这里写个数组 var array=[89,28,49,654,6758,5768];&lt;/p&gt; 升序输出:&lt;/p&gt;...

    JavaScript入门经典(第3版) 附书源代码.rar

    avaScript中的数据类型与变量2.1 JavaScript中的数据类型2.2 变量——保存在内存中的数据2.3 设置浏览器以显示错误信息2.4 使用数据——计算数值及字符串的基本操作2.5 数据类型转换2.6 数组2.7 “在线小测试”程序...

    JavaScript详解(第2版)

    1.4 JavaScript及其在Web页面中的位置 3 1.5 Ajax是什么 5 1.6 JavaScript是什么样子的 6 1.7 JavaScript及其在Web开发中承担的角色 7 1.8 JavaScript和事件 9 1.9 标准化JavaScript和W3C 11 1.9.1 ...

    Qx:一组类似 LINQ 的 Q 扩展,用于处理承诺数组

    Qx 为 Javascript 承诺数组带来了 C# LINQ 方法的便利。 欢迎提出问题和请求请求。 ##Usage 所有 Qx 数组方法都采用一个数组和一个回调函数,该函数对数组中的项目执行操作。 所有回调都接收两个参数; 项目及其...

    JavaScript动态生成表格案例

    然后获取了表格元素及其 tbody 元素,通过 for 循环遍历数组中的每个学生,动态创建了表格的每一行和每个单元格,并将学生的信息填充到对应的单元格中。 最后,为每行的删除操作添加了点击事件处理程序。当用户单击...

    JavaScript王者归来part.1 总数2

     8.2.3 集合操作及其范例   8.2.3.1 join()方法   8.2.3.2 reverse()方法   8.2.3.3 sort()方法   8.2.3.4 concat()方法   8.2.3.5 slice()方法   8.2.3.6 splice()方法   8.2.3.7 toSgring()方法和...

    JavaScript入门经典(第1版)书源代码

    ”小测试的简介 1.6 小结第2章 avaScript中的数据类型与变量 2.1 JavaScript中的数据类型 2.2 变量——保存在内存中的数据 2.3 设置浏览器以显示错误信息 2.4 使用数据——计算数值及字符串的基本操作 2.5 ...

    精通JavaScript

    • 2.14.htm 使用值的数据操作 • 2.15.htm 对数据的引用执行 • 2.16.htm 字符串的比较 第3章(\第3章) • 3.1.htm 表达式示例 • 3.2.htm 加号运算符应用 • 3.3....

    前端Javascript相关面试基础问答整理md

    从“原始值和引用值类型及区别”到“EventLoop事件循环&宏任务和微任务 ”,整理了Javascript学习和面试中遇到的一些基础和常见的问题。 总共包含33个问答,部分问题带有代码解答。 1. 原始值和引用值类型及区别 2. ...

    arrayswithjavascript

    JavaScript数组处理 | | | | | :information: 关于 数组中的一系列操作,由文件夹及其定义和示例分隔 :exclamation_question_mark: 原因 从“实际”示例中学习和教授数组操作 :seedling: 最低要求 Chrome控制台...

    php资料库4 防止foeach中变量不是数组

    MYSQL系统优化与系统设置参数的一次调查-(2)_Linux技术文章_Linux_操作系统.mht Mysql优化.txt 让apache支持shtml.txt shtml语法介绍.txt IIS Insider – 2003 年 3 月:有关 Internet 信息服务的问题及其解答.htm ...

    【大厂面试题】史上最详细的一线大厂前端面试题详解及其答案

    知识点标签:前端、JavaScript、数学、遍历、数组 题目描述 js实现number.toLocaleString()方法,面试题做了简化不考虑负数小数,此题主 要 是考数据类型及字符串操作,答案不唯一。 解题思路 按现实思路解题,现实...

    精通javascript

    • 2.14.htm 使用值的数据操作 • 2.15.htm 对数据的引用执行 • 2.16.htm 字符串的比较 第3章(\第3章) • 3.1.htm 表达式示例 • 3.2.htm 加号运算符应用 • 3.3....

    arrayutilities-functions-javascript

    数组实用程序功能Javascript提供了许多内置功能,可以一次完成简单到复杂的操作。 理想情况下,我们应该使用这些功能,而不是从头开始编写相同的代码。 该页面将讨论这些功能及其用法。查找数字数组的最小值/最大值...

    dottie:操作对象及其属性。 理智地构建 jsons。 将一组 jsons 转换为电子表格友好的二维数组,然后再返回。 做了一点

    将一组 jsons 转换为电子表格友好的二维数组,然后再返回。 处理嵌套对象。 做了一个小窍门。 感谢 。 快速开始 脚本 ID: 1k_EGzQ6FvfMlyifgPxcBqgPe3TQSWLFGF9VrDWAGU1wfOFnOFsRbI8V_ 默认标识符是dottie 查看...

Global site tag (gtag.js) - Google Analytics