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 相关文章推荐
select标签模拟/美化方法采用JS外挂式插件
Apr 01 Javascript
Javascript 拖拽的一些高级的应用(逐行分析代码,让你轻松了拖拽的原理)
Jan 23 Javascript
JS实现不使用图片仿Windows右键菜单效果代码
Oct 22 Javascript
javascript实现表单验证
Jan 29 Javascript
JS上传图片预览插件制作(兼容到IE6)
Aug 07 Javascript
Angular.JS中指令ng-if的注意事项小结
Jun 21 Javascript
浅谈angular4生命周期钩子
Sep 05 Javascript
浅析为什么a=&quot;abc&quot; 不等于 a=new String(&quot;abc&quot;)
Oct 25 Javascript
react的滑动图片验证码组件的示例代码
Feb 27 Javascript
详解nvm管理多版本node踩坑
Jul 26 Javascript
新手入门js闭包学习过程解析
Oct 08 Javascript
antd Select下拉菜单动态添加option里的内容操作
Nov 02 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
php5.3不能连接mssql数据库的解决方法
2014/12/27 PHP
JavaScript 原型链学习总结
2010/10/29 Javascript
原生js写的放大镜效果
2012/08/22 Javascript
jQuery处理json数据返回数组和输出的方法
2015/03/11 Javascript
jquery实现多屏多图焦点图切换特效的方法
2015/05/04 Javascript
ReactNative-JS 调用原生方法实例代码
2016/10/08 Javascript
JavaScript实现图片拖曳效果
2017/09/08 Javascript
Vue项目引进ElementUI组件的方法
2018/11/11 Javascript
vue+element tabs选项卡分页效果
2020/06/29 Javascript
vue+ts下对axios的封装实现
2020/02/18 Javascript
小程序瀑布流组件实现翻页与图片懒加载
2020/05/19 Javascript
解决vue下载后台传过来的乱码流的问题
2020/12/05 Vue.js
[54:08]LGD女子刀塔学院 DOTA2炼金术士教学
2014/01/09 DOTA
[01:14:41]DOTA2-DPC中国联赛定级赛 iG vs Magma BO3第一场 1月8日
2021/03/11 DOTA
基于Django模板中的数字自增(详解)
2017/09/05 Python
基于使用paramiko执行远程linux主机命令(详解)
2017/10/16 Python
python的re正则表达式实例代码
2018/01/24 Python
Python向Excel中插入图片的简单实现方法
2018/04/24 Python
python3中函数参数的四种简单用法
2018/07/09 Python
tensorflow与numpy的版本兼容性问题的解决
2021/01/08 Python
css3弹性盒子flex实现三栏布局的实现
2020/11/12 HTML / CSS
巴西最大的家电和百货零售商:Casas Bahia
2016/11/22 全球购物
蹦床仓库:Trampoline Warehouse
2018/12/06 全球购物
杰夫·班克斯男士服装网上商店:Jeff Banks
2019/10/24 全球购物
一份比较全的PHP面试题
2016/07/29 面试题
将一个文本文件的内容按倒序打印出来
2015/01/05 面试题
请用Java实现列出某个目录下的所有文件
2013/09/23 面试题
先进班级集体事迹材料
2014/01/30 职场文书
县委常委班子对照检查材料思想汇报
2014/09/28 职场文书
2015新学期开学寄语
2015/02/26 职场文书
雾霾停课通知
2015/04/24 职场文书
检讨书格式
2015/05/07 职场文书
婚前协议书怎么写,才具有法律效力呢 ?
2019/06/28 职场文书
Python读取文件夹下的所有文件实例代码
2021/04/02 Python
Vue中插槽slot的使用方法与应用场景详析
2021/06/08 Vue.js
CSS 一行代码实现头像与国旗的融合
2021/10/24 HTML / CSS