JavaScript数组和循环详解_javascript技巧

数组是元素的一个有序组合。在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>

时间: 2024-08-04 06:40:10

JavaScript数组和循环详解_javascript技巧的相关文章

javaScript数组迭代方法详解_javascript技巧

本文为大家介绍了javaScript数组迭代方法,供大家参考,具体内容如下 每个方法都接收两个参数:要在每一项上运行的函数  和  (可选的)运行该函数的作用域对象. 传入这些方法中的函数会接收三个参数:数组项的值,该项在数组中的位置,数组对象本身. forEach()  对数组中的每一项运行 给定函数.该方法没有返回值.every()  对数组中的每一项运行 给定函数,如果数组的每一项都返回true,则返回true.some()  对数组中的每一项运行 给定函数,如果数组的任意一项返回true

JavaScript数组和循环详解

          JavaScript数组和循环详解           这篇文章主要介绍了JavaScript数组和循环详解,本文讲解了循环遍历数组.按顺序存储和访问值.以相反的顺序存储和访问值.在数组中搜索等内容,需要的朋友可以参考下               数组是元素的一个有序组合.在JavaScript中,数组可以使用正式的对象表示法来创建,或者可以使用直接量表示法来初始化.   代码如下: var arrObject = new Array("val1", "

关于javascript的一些知识以及循环详解_javascript技巧

javascript的一些知识点: 1.常用的五大浏览器:chrome,firefox,Safari,ie,opera 2.浏览器是如何工作的简化版: 3.Js由ECMAjavascript;DOM;BOM组成: 4.js是弱类型语言(即需要游览器解析了才知道是什么类型的): 5.js是脚本语言(边解析边执行): 6.script也分行内样式,嵌套样式和外联样式. 外联样式一般写在body的最后,因为放在前面会先加载js代码然后再干其他的,影响用户体验. 7.同步和异步 同步:一行一行依次执行.

JavaScript数据结构链表知识详解_javascript技巧

最近在看<javascript数据结构和算法>这本书,补一下数据结构和算法部分的知识,觉得自己这块是短板. 链表:存储有序的元素集合,但不同于数组,链表中的元素在内存中不是连续放置的.每个元素由一个存储元素本身的节点和一个指向下一个元素的引用(也称指针或链接)组成. 好处:可以添加或移除任意项,它会按需扩容,且不需要移动其他元素. 与数组的区别:     数组:可以直接访问任何位置的任何元素:     链表:想要访问链表中的一个元素,需要从起点(表头)开始迭代列表直到找到所需的元素. 做点小笔

Javascript 引擎工作机制详解_javascript技巧

Javascript 引擎工作机制 javascript从定义到执行,JS引擎在实现层做了很多初始化工作,因此在学习JS引擎工作机制之前,我们需要引入几个相关的概念:执行环境栈.全局对象.执行环境.变量对象.活动对象.作用域和作用域链等,这些概念正是JS引擎工作的核心组件.这篇文章的目的不是孤立的为你讲解每一个概念,而是通过一个简单的demo来展开分析,全局讲解JS引擎从定义到执行的每一个细节,以及这些概念在其中所扮演的角色. var x = 1; //定义一个全局变量 x function A

js中实现字符串和数组的相互转化详解_javascript技巧

         最近看了一道JS的面试题,是这样描述的:利用var s1=prompt("请输入任意的字符串","")可以获取用户输入 的字符串,试编程将用户输入的字符串"反转",并且将字符串输出.         想了一下,字符串对象的方法中并没有实现反转的,但是数组中有,于是考虑了字符串和数组的相互转换问题.         JS中的内置对象中包括字符串对象(String)和数组对象(Array),这两个对象是可以通过它们对象的方法实现相互

javascript中this关键字详解_javascript技巧

不管学习什么知识,习惯于把自己所学习的知识列成一个list,会有助于我们理清思路,是一个很好的学习方法.强烈推荐. 以下篇幅有点长,希望读者耐心阅读. 以下内容会分为如下部分: 1.涵义 1.1:this涵义 1.2:this指向的可变性 2.使用场合 2.1:全局环境 2.2:构造函数 2.3:对象的方法 3.使用注意点 3.1:避免多层嵌套this 3.2:避免数组处理方法中的this 3.3:避免回调函数中的this 1.涵义 1.1:this涵义 在我写的一篇关于 构造函数与new关键字

JavaScript 节流函数 Throttle 详解_javascript技巧

在浏览器 DOM 事件里面,有一些事件会随着用户的操作不间断触发.比如:重新调整浏览器窗口大小(resize),浏览器页面滚动(scroll),鼠标移动(mousemove).也就是说用户在触发这些浏览器操作的时候,如果脚本里面绑定了对应的事件处理方法,这个方法就不停的触发.  这并不是我们想要的,因为有的时候如果事件处理方法比较庞大,DOM 操作比如复杂,还不断的触发此类事件就会造成性能上的损失,导致用户体验下降(UI 反映慢.浏览器卡死等).所以通常来讲我们会给相应事件添加延迟执行的逻辑.

javascript中Function类型详解_javascript技巧

Function 类型 function类型,毋庸置疑是js中相当重要的一个玩意. 1.这玩意首先是一个对象,也就是说它是一个引用类型.陈述:一听说是对象,是不是很有一种它的基类是object对象错觉感,No, 它和object是独立的2个东西.当你typeof function 时,返回的是 funciton 并非 object 2.每个函数都是 Function 对象的一个实例,它与其他引用对象一样具有属性和方法.由于它是对象所以函数名是指向函数对象的指针 关于函数的声明的语法支持: <sc