数组是元素的一个有序组合。在JavaScript中,数组可以使用正式的对象表示法来创建,或者可以使用直接量表示法来初始化。

复制代码 代码如下:

var arrObject = new Array("val1", "val2"); // 作为对象的数组
var arrLiteral = ["val1", "val2"]; // 数组直接量

  对于开发者来说,这没有区别:在直接量和对象上都可以调用一个Array方法。对于JavaScript引擎来说,每次访问数组直接量的时候,必须重新解释它,特别是在一个函数中使用它的时候。

  使用new运算符来创建一个新的Array对象:

复制代码 代码如下:

var arrObject = new Array();

  也可以创建带有某些值的一个新数组:

复制代码 代码如下:

var arrObject = new Array("val1", "val2");

  JavaScript中的数组是从0开始索引的,这意味着,第一个元素的索引是0,最后一个元素是数组的长度减去1。

1、循环遍历数组

  问题:想要很容易地访问数组的所有元素。

  解决方案:

  要访问一个数组,最常用的方法是使用for循环:

复制代码 代码如下:

< script type="text/javascript">
    var animals = new Array("cat", "dog", "whale", "seal");
    var animalString = "";
    for (var i = 0; i < animals.length - 1; i++) {
        animalString += animals[i] + " ";
    }
    alert(animalString);
< /script>

 讨论:

  for循环可以用来访问数组的每一个元素。数组从0开始,而且数组属性length用来设定循环结束。

2、按顺序存储和访问值

  问题:想要以这样一种方式来存储值,可以按照存储它们的方式来顺序访问值;

  解决方案:

  要按照接受值的顺序来存储和访问值,创建一个先进先出(FIFO)的队列。使用JavaScript Array对象的push方法,向队列添加项,并且用shift来获取项:

复制代码 代码如下:

< script type="text/javascript">
    // 创建新的数组
    var queue = new Array();

// 压入3个条目
    queue.push("first");
    queue.push("second");
    queue.push("third");

// 获取两个条目
    alert(queue.shift());
    alert(queue.shift());
    alert(queue);
< /script>

讨论:

  Array push方法创建一个新的数组元素,并且将其添加到数组的末尾:

复制代码 代码如下:

queue.push("first");

  每次压入一个元素,数组元素的计数自增。

  Array shift方法从数组前面提取数组元素,将其从数组中删除,并且返回该元素:

复制代码 代码如下:

var elem = queue.shift();

  对于每一个shift操作的元素,数组元素会自减,因为shift除了返回该项,还会修改数组。

3、以相反的顺序存储和访问值

  问题:想要以一种方式来存储值,即以相反的顺序访问值,先访问最近存储的值,也就是一个后进先出(LIFO)的栈。

  解决方案:

  要以相反的顺序存储值,创建一个LIFO栈。使用JavaScript Array对象的push方法来想栈添加项,使用pop方法来获取项:

复制代码 代码如下:

< script type="text/javascript">
    // 创建新的数组
    var stack = new Array();

// 压入3个条目
    stack.push("first");
    stack.push("second");
    stack.push("third");

// 弹出两个条目
    alert(stack.pop()); // 返回第三个条目
    alert(stack.pop()); // 返回第二个条目
    alert(stack); // 返回第一个条目
< /script>

讨论:

  栈也是一个数组,其中每个新添加的元素位于栈的顶部,并且按照后进先出的顺序获取。

  Array push方法创建一个新的元素,并将其添加到数组的尾部:

复制代码 代码如下:

stack.push("first");

每次压入元素的时候,数组元素的计数都会自增。

  Array pop方法从数组的尾部提取数组元素,将其从数组中移走,并返回元素:

复制代码 代码如下:

var elem = stack.pop();

每次弹出一个元素的时候,数组元素计数会自减,因为弹出也修改了数组。

4、在数组中搜索

  问题:想要在数组中搜索一个特定值,如果找到的话,获取该数组元素的索引。

  解决方案:

  使用新的(ECMAScript 5)Array对象方法indeOf和lastIndexOf:

复制代码 代码如下:

< script type="text/javascript">
    var animals = new Array("dog", "cat", "seal", "elephant", "lion");
    alert(animals.indexOf("elephant")); // 打印出 3
    alert(animals.indexOf("seal", 2)); // 打印出 2
< /script>

尽管浏览器中有时候对indexOf和lastIndexOf都是支持的,但是,这只是ECMAScript 5的版本中正式化了。这两个方法都接受一个搜索值,然后,将其与数组中的每个元素比较。如果找到了该值,两个方法都返回该数组元素的一个索引。如果没有找到值,返回-1.indexOf返回找到的第一个元素,lastIndexOf返回找到的最后一个元素。

  参见:

  并非所有的浏览器都支持indexOf和lastindexOf,针对这一函数的解决方案:

复制代码 代码如下:

< script type="text/javascript">
    if (!Array.prototype.indexOf) {
        Array.prototype.indexOf = function (elt/*, from*/) {
            var len = this.length >>> 0;
            var from = Number(arguments[1]) || 0;
            from = (from < 0) ? Math.ceil(from) : Math.floor(from);

if (from < 0) {
                from += len;
            }

for (; from < len; from++) {
                if (from in this && this[from] === elt) {
                    return from;
                }
            }

return -1;
        }
    }
< /script>

 5、对每个数字元素应用一个函数

  问题:想要使用一个函数来检查一个数组值,如果满足给定的条件,就替换它。

  解决方案:

  使用新的ECMAScript 5 Array对象的forEach方法,来针对每个数组元素都绑定一个回调函数:

复制代码 代码如下:

< script type="text/javascript">
    function replaceElement(element, index, array) {
        if (element == "ab") {
            array[index] = "**";
        }
    }

var charSets = new Array("ab", "bb", "cd", "ab", "cc", "ab", "dd", "ab");
    //对每个数组元素应用函数
    charSets.forEach(replaceElement)
    alert(charSets); // 打印出**,bb,cd,**,cc,**,dd,**
< /script>

讨论:

  forEach方法接受一个参数,这个参数是个函数。该函数自身有3个参数:数组元素,元素的索引和数组。

  参见:

  大多数浏览器都支持forEach。然而,对于那些不支持的浏览器,可以使用Array.prototype属性来模拟forEach行为。

复制代码 代码如下:

< script type="text/javascript">
    if (!Array.prototype.forEach) {
        Array.prototype.forEach = function (fun/*, thisp*/) {
            var len = this.length >>> 0;
            if (typeof fun != "function") {
                throw new TypeError();
            }

var thisp = arguments[1];
            for (var i = 0; i < len; i++) {
                if (i in this) {
                    fun.call(thisp, this[i], i, this);
                }
            }
        };
    }
< /script>

6、创建一个过滤后的数组

  问题:想要过滤一个数组中的元素的值,并且把结果赋给一个新的数组。

  解决方案:

  使用Array对象的filter方法:

复制代码 代码如下:

< script type="text/javascript">
    function removeChars(element, index, array) {
        return element !== "**";
    }
    var charSets = new Array("**", "bb", "cd", "**", "cc", "**", "dd", "**");
    var newArray = charSets.filter(removeChars);
    alert(newArray); // bb,cd,cc,dd
< /script>

讨论:

  filter方法是ECMAScript 5新添加的方法,该方法将一个回调函数应用于每一个数组元素。作为参数传递给filter方法的函数返回一个布尔值,true或false,根据测试数组元素的结果来返回。这个返回值决定了该数组元素是否添加到一个新的数组中,如果函数返回true,将会添加;否则,将不会添加。

  参见:

  对于不支持filter方法的浏览器的模拟实现:

复制代码 代码如下:

< script type="text/javascript">
    if (!Array.prototype.filter) {
        Array.prototype.filter = function (fun/*, thisp*/) {
            var len = this.length >>> 0;
            if (typeof fun != "function") {
                throw new TypeError();
            }

var res = new Array();
            var thisp = arguments[1];
            for (var i = 0; i < len; i++) {
                if (i in this) {
                    var val = this[i]; // 放置fun修改了this
                    if (fun.call(thisp, val, i, this)) {
                        res.push(val);
                    }
                }
            }

return res;
        };
    }
< /script>

7、验证数组内容

  问题:想要确保一个数组满足某个条件。

  解决方案:

  使用Array对象的every方法来检查给定条件的每个元素。

复制代码 代码如下:

< script type="text/javascript">
    function testValue(element, index, array) {
        var re = /^[a-zA-Z]+$/;
        return re.test(element);
    }
    var elemSet = new Array("**", 123, "abc", "-", "AAA");
    alert(elemSet.every(testValue));
< /script>

  讨论:

  Array对象的every和some方法都是最新的ECMAScript 5 Array方法,不同之处在于当使用every方法的时候,只要该函数返回一个false值,处理就会结束,并且该方法返回false。而some方法将继续测试每一个数组元素,知道回调函数返回true。此时不再验证其他的元素,该方法返回true。如果回调函数测试了所有的元素,并且任何时候不会返回true,some方法返回false。

  参见:

  对于不支持every和some的浏览器的实现方式:

复制代码 代码如下:

< script type="text/javascript">
    if (!Array.prototype.some) {
        Array.prototype.some = function (fun/*, thisp*/) {
            var i = 0,
                len = this.length >>> 0;
            if (typeof fun != "function") {
                throw new TypeError();
            }

var thisp = arguments[1];
            for (; i < len; i++) {
                if (i in this
                    && fun.call(thisp, val, i, this)) {
                    return true
                }
            }

return false;
        };
    }

if (!Array.prototype.every) {
        Array.prototype.every = function (fun/*, thisp*/) {
            var len = this.length >>> 0;
            if (typeof fun != "function") {
                throw new TypeError();
            }

var thisp = arguments[1];
            for (var i=0; i < len; i++) {
                if (i in this
                    && fun.call(thisp, val, i, this)) {
                    return false
                }
            }

return true;
        };
    }
< /script>

转载于:https://www.cnblogs.com/heysng123456/p/7260095.html

数组的循环及跌送方式相关推荐

  1. 二维数组 赋值_3.9数组(数组基本使用、数组的循环、数组拷贝、数组排序、多维数组)...

    3.9数组 3.9.1数组基本使用 数组,英文叫Array,是一种数据结构,是用来存放同一数据类型数值的集合.例如存放30个int型数值.存放100个double型数值等等. 我们知道使用一个变量,需 ...

  2. 存数组元素的个数_HashMap1.8之后为什么要采用数组+链表+红黑树的储存方式?

    HashMap概述 HashMap是基于Map接口实现的,采取(key,value)的储存方式.其中key和value可以为空,但是key不能重复.下面我们来详细解读一下HashMap的底层实现原理. ...

  3. 20162316刘诚昊 用数组实现循环队列

    20162316刘诚昊 2017-2018-2 <Java程序设计>用数组实现循环队列 实验要求 1 参考程序15.6给出方法deque,first,isEmpty,size,toStri ...

  4. 实现数组扁平化的 6 种方式

    实现数组扁平化的 6 种方式 老规矩,开局先上问题,带着问题去思考: 怎样用最普通的方法解决数组扁平化问题? ES6里面是否有一些高级的方法能够直接实现? 扁平化的实现   数组的扁平化其实就是将一个 ...

  5. JS基础:变量、函数、对象、数组、循环、选择(判断)

    JS基础:变量.函数.对象.数组.循环.选择(判断) js的三个组成部分 ECMAScript - ES - 语法规范 DOM - 文档对象模型 - API BOM - 浏览器对象模型 - API j ...

  6. java 判断数组已经存满_详解Java中数组判断元素存在几种方式比较

    1. 通过将数组转换成List,然后使用List中的contains进行判断其是否存在 public static boolean useList(String[] arr,String contai ...

  7. (C++)1008 数组元素循环右移问题

    #include<cstdio> //注意:不允许使用另外数组,序列结尾不能有多余空格,不能直接认为right<n //1.读入数组长度,和右移位数,读入数组 //2.未必要对实际数 ...

  8. 基于数组实现循环队列(基于Java实现)

    title: 基于数组实现循环队列(基于Java实现) tags: 数组 循环队列 基于数组实现循环队列的方法原理: 我们在用数组实现队列的时候,发现当tail = n时,就会有数据搬移的操作,这样一 ...

  9. php数组循环0到32,通过数组php循环

    通过数组php循环 我有这个阵列..如何打印每个文件路径和文件名?做这件事最好的方法是什么?Array ( [0] => Array ( [fid] => 14 [list] =>  ...

  10. android double转string_Java 数组转 List 的三种方式及对比

    来源:Java数组转List的三种方式及对比_五道口-CSDN博客 作者:大脑补丁 前言: 本文介绍Java中数组转为List三种情况的优劣对比,以及应用场景的对比,以及程序员常犯的类型转换错误原因解 ...

最新文章

  1. NS2网络模拟(2)-丢包率
  2. PAT-1124. Raffle for Weibo Followers (20)
  3. (转,改)UML中的几种关系
  4. inspinia中文管理后台_Bootstrap优秀模板-INSPINIA.2.9.2
  5. python time模块详解_py 模块之 time模块 讲解②
  6. 智能手机下,如何拯救你,我的孩子
  7. 《敏捷可执行需求说明 Scrum提炼及实现技术》—— 3.1 运用试错法
  8. forward计算机语言,const_forward在C中的可选实现中做了什么?
  9. 中兴手机数据通道打不开_中兴RRU故障排查指导手册
  10. Ubuntu 可视化图片——eog
  11. BDBR和BD-PSNR
  12. 埃尔米特插值及其代码
  13. 正大国际:你所应该知道的外盘国际期货知识
  14. Java 生成二维码。
  15. 烂泥行天下 php,烂泥:php5.6源码安装及php-fpm配置与nginx集成
  16. 什么时间锻炼身体最佳?
  17. 随记——一站式前端搭建平台(必盛云虚拟主机)
  18. 郑州轨道交通2050规划图
  19. 图书管理系统学习与总结
  20. 【网络安全】内网介绍+windows信息收集(含命令)

热门文章

  1. jquery验证后ajax提交,返回消息怎样统一显示的问题
  2. mysql查看锁表锁进程
  3. js动态创建Form表单并提交
  4. Magento报错之SQLSTATE[23000]: Integrity constraint violation: 1062 Duplicate entry for key 1
  5. 写一个微信和支付宝订单的查询方法:
  6. 解决微信小程序要求TLS版本不低于1.2问题
  7. 《R语言入门与实践》第八章:S3 与 R 面对对象编程
  8. python系统学习:第二周之字典应用
  9. spring容器启动的加载过程(三)
  10. SQL(1)—增删改查