JavaScript数组和循环详解


Posted in Javascript onApril 27, 2015

数组是元素的一个有序组合。在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>
Javascript 相关文章推荐
js left,right,mid函数
Jun 10 Javascript
JS 学习笔记 防止发生命名冲突
Jul 30 Javascript
Javascript动态绑定事件的简单实现代码
Dec 25 Javascript
js过滤HTML标签完整实例
Nov 26 Javascript
MVC Ajax Helper或Jquery异步加载部分视图
Nov 29 Javascript
javascript日期验证之输入日期大于等于当前日期
Dec 13 Javascript
js数组操作方法总结(必看篇)
Nov 22 Javascript
基于angular实现模拟微信小程序swiper组件
Jun 11 Javascript
JS验证输入的是否是数字及保留几位小数问题
May 09 Javascript
快速搭建Node.js(Express)用户注册、登录以及授权的方法
May 09 Javascript
vue 路由子组件created和mounted不起作用的解决方法
Nov 05 Javascript
vue中注册自定义的全局js方法
Nov 15 Javascript
javascript实现全局匹配并替换的方法
Apr 27 #Javascript
js限制文本框只能输入整数或者带小数点的数字
Apr 27 #Javascript
如何使用HTML5地理位置定位功能
Apr 27 #Javascript
jQuery插件scroll实现无缝滚动效果
Apr 27 #Javascript
Javascript非构造函数的继承
Apr 27 #Javascript
JQuery选中checkbox方法代码实例(全选、反选、全不选)
Apr 27 #Javascript
jquery简单的弹出层浮动层代码
Apr 27 #Javascript
You might like
基于mysql的论坛(3)
2006/10/09 PHP
php 变量未定义等错误的解决方法
2011/01/12 PHP
php根据isbn书号查询amazon网站上的图书信息的示例
2014/02/13 PHP
ThinkPHP惯例配置文件详解
2014/07/14 PHP
8个必备的PHP功能开发
2015/10/02 PHP
PHP的Yii框架中YiiBase入口类的扩展写法示例
2016/03/17 PHP
CI框架的安全性分析
2016/05/18 PHP
php7安装mongoDB扩展的方法分析
2017/08/02 PHP
PHP实现一个多功能购物网站的案例
2017/09/13 PHP
jquery 最简单易用的表单验证插件
2010/02/27 Javascript
防止xss和sql注入:JS特殊字符过滤正则
2013/04/18 Javascript
js判断ie版本号的简单实现代码
2014/03/05 Javascript
JavaScript Base64 作为文件上传的实例代码解析
2017/02/14 Javascript
JavaScript伪数组用法实例分析
2017/12/22 Javascript
微信小程序input框中加入小图标的实现方法
2018/06/19 Javascript
如何让node运行es6模块文件及其原理详解
2018/12/11 Javascript
js实现数字跳动到指定数字
2020/08/25 Javascript
[02:02]特效爆炸!DOTA2珍宝之瓶待你开启
2018/08/21 DOTA
Python实现自动添加脚本头信息的示例代码
2016/09/02 Python
python字典快速保存于读取的方法
2018/03/23 Python
在Django中输出matplotlib生成的图片方法
2018/05/24 Python
python定时复制远程文件夹中所有文件
2019/04/30 Python
python中tkinter的应用:修改字体的实例讲解
2019/07/17 Python
使用PyInstaller将Pygame库编写的小游戏程序打包为exe文件及出现问题解决方法
2019/09/06 Python
python实现百度OCR图片识别过程解析
2020/01/17 Python
Python3-异步进程回调函数(callback())介绍
2020/05/02 Python
如何基于Python Matplotlib实现网格动画
2020/07/20 Python
python类共享变量操作
2020/09/03 Python
Pycharm配置autopep8实现流程解析
2020/11/28 Python
职务聘任书范文
2014/03/29 职场文书
班级学习雷锋活动总结
2014/07/04 职场文书
教师个人发展总结
2015/02/11 职场文书
餐厅服务员管理制度
2015/08/05 职场文书
勤俭节约主题班会
2015/08/13 职场文书
个人自我鉴定怎么写?
2019/07/01 职场文书
CSS 圆形进度栏
2021/04/06 HTML / CSS