美文网首页
Array类型

Array类型

作者: Wonder233 | 来源:发表于2017-11-17 11:38 被阅读0次

    ECMAScript中的数组与其他多数语言的数组有很大的区别。
    1、ECMAScript数组的每一项可以保存任何类型的数据
    2、ECMAScript数组的大小可以动态调整,即可以随数据的添加自动增长以容纳新增数据。

    创建数组的基本方式:
    1、使用Array构造函数。

    var colors = new Array();
    var colors = new Array(20);   //创建length值为20的数组
    var colors = new Array("red","blue","green"); //创建数组应该包含的项的数组
    
    //也可以省略new操作符
    var colors = Array();
    var colors = Array(20); 
    var colors = Array("red","blue","green");
    

    2、数组字面量表示法。

    var colors = ["red","blue","green"];
    var colors = []; 
    

    数组的项数保存在length属性中,这个属性很有意思——不是只读的,可以修改。因此,可以通过设置这个属性,从数组的末端移除项或添加新项。

    var colors = ["red","blue","green"];
    colors.length = 2;
    alert(color[2]); // undefined
    
    var colors = ["red","blue","green"];
    colors.length = 4;
    alert(color[3]); // undefined
    
    //利用length可以在末尾添加新项
    var colors = ["red","blue","green"];
    colors[color.length] = "black"; //在位置3添加一种颜色
    
    var colors = ["red","blue","green"];
    colors[99] = "black"; //在位置99添加一种颜色
    alert(color.length); // 100
    

    检测数组

    对于一个网页或一个全局作用域,使用instanceof即可:

    if(value instanceof Array){
        //执行操作
    }
    

    对于网页中包含多个框架,即存在两个以上不同的全局执行环境,则使用Array.isArray():(支持此方法的浏览器有IE9+、Firefox4+、Safari5+、Opera10.5+、Chrome)

    if(Array.isArray(value)){
        //执行操作
    }
    

    转换方法

    var colors = ["red","blue","green"]; 
    alert(colors.toString()); //red,blue,green
    alert(colors.valueOf());  //red,blue,green
    alert(colors);            //red,blue,green
    

    可以使用join()方法使用不同的分隔符来构建字符串。

    var colors = ["red","blue","green"]; 
    alert(colors.join(",")); //red,blue,green
    alert(colors.join("||")); //red||blue||green
    

    栈方法 push()、pop()##

    var colors = new Array(); 
    var count = colors.push("red","blue");
    alert(count); // 2
    var item = colors.pop();
    alert(item); // blue
    

    队列方法 push()、shift()、unshift()##

    var colors = new Array(); 
    var count = colors.push("red","blue");
    alert(count); // 2
    
    var item = colors.shift();
    alert(item); // red
    
    //unshift()从前端添加任意个数项并返回新数组长度
    count = colors.unshift("red","green");
    alert(count); //2
    alert(colors); //red green blue
    

    重排序方法 reverse()、sort()##

    //reverse()反转数组项顺序
    var values = [1,2,3,4,5];
    values.reverse();
    alert(values); //5,4,3,2,1
    

    sort()默认为升序排列数组->调用每个数组项的toString()方法,然后比较得到的字符串。

    var values = [0,1,5,10,15];
    values.sort();
    alert(values); //0,1,10,15,5
    

    默认的sort()比较的是字符串。而要自定义比较的方法,可以给sort()加上一个比较函数。
    tips:我认为可以这样理解,比较函数的返回值大于0,那么说明前后两个参数要交换位置;否则,位置不变。

    function compare(value1, value2) {
        if (value1 < value2) {
            return -1;
        } else if (value1 > value2) {
            return 1;
        } else {
            return 0;
        }
    }
    //更简单的比较函数
    function compare(value1,value2){
        return value1-value2;
    }
    
    var values = [0,1,5,10,15];
    values.sort(compare);
    alert(values); //0,1,5,10,15
    

    操作方法concat()、slice()、splice()

    concat():创建当前数组的一个副本,然后将接收到的参数添加到副本的末尾

    var values = [0,2,1];
    var values2 = values.concat(1,[3,4]);
    console.log(values);  //0,2,1
    console.log(values2); //0,2,1,1,3,4
    

    slice():基于当前数组中的一或多个项创建一个新数组

    /* slice( start , end )
     * param:① 只有一个参数:start
     *       ② 有两个参数:start,end(要返回项的起始和结束位置)
     * return:①返回从该参数指定位置 start 开始到当前数组末尾的所有项
     *         ②返回起始 start 和结束位置 end 之间的项——不包括结束位置的项
     * 若参数有负数,则用数组长度加上该数来确定相应的位置。例如:
     * length=5,slice(-2,-1)等价于slice(3,4)
     * 若结束位置小于起始位置,则返回空数组
     */
     var values = [0,1,2,3,4];
     var values2 = values.slice(1); //1,2,3,4
     var values3 = values.slice(1,4); //1,2,3
    

    splice():向数组的中部插入项
    总共有三种用法:

    /* 
     * ①删除:splice( start , num )
     * param:start 表示要删除的第一项的位置;num 表示要删除的项数
     * return:返回删除的项数组
     */
     var values = [0,1,2,3,4];
     var removed = values.splice(0,2);
     console.log(values);  //2,3,4
     console.log(removed); //0,1
    
    /* 
     * ②插入:向指定位置插入任意数量的项
     * splice( start , 0 , value1 ,...)
     * param:start 表示起始位置;value1,... 表示要插入的项
     * return:返回空数组
     */
     var values = [0,1,2,3,4];
     var removed = values.splice(1,0,5,6);
     console.log(values);  //0,5,6,1,2,3,4
     console.log(removed); //空数组
    
    /* 
     * ③替换:向指定位置插入任意数量的项,且同时删除任意数量的项
     * splice( start , num , value1,...)
     * param:start  表示起始位置;num 表示要删除的项数;
     *        value1,...表示要插入的项
     * return:返回删除的项数组
     */
     var values = [0,1,2,3,4];
     var removed = values.splice(1,3,5,6);
     console.log(values);  //0,5,6,4
     console.log(removed); //1,2,3
    

    位置方法 indexOf()、lastIndexOf()##

    /* indexOf( value , start ):从数组的开头(位置0)开始向后找
     * lastIndexOf( value , start ):从数组的末尾开始向前找
     * param:value 要查找的项,start (可选)查找起点位置的索引
     * return:返回查找项在数组中的位置,没找到返回-1
     * 要求:查找的项必须严格相等(使用全等操作符比较)
     * /
     var numbers = [1,2,3,4,5,4,3,2,1];
     alert(numbers.indexOf(4));      //3
     alert(numbers.lastIndexOf(4));  //5
     
     alert(numbers.indexOf(4,4);     //5
     alert(numbers.lastIndexOf(4,4); //3
    
     var person = {name:"Nicholas"};
     var people = [{name:"Nicholas"}];
    
     var morePeople = [person];
    
     alert(people.indexOf(person));     //-1
     alert(morePeople.indexOf(person)); //0
     
     /* 解释上面的-1与0:
      * 用indexOf()查找的时候,所比较的是对象。在 people 这个数组中的这个
      * {name:"Nicholas"} 和 person 并不是同一个对象,而 morepeole 中和
      * person 是同一个对象(因为直接引用了它)。
      * 因此第一个会返回 -1(无法找到),第二个是 0。
      * person==people[0]或者person===people[0] 都是不成立的(false)
      */
    

    迭代方法:5种

    这5种迭代方法分别是:
    every():对数组中每一项运行给定函数,若该函数对每一项都返回true,则返回true。
    filter():对数组中每一项运行给定函数,该函数会返回给定函数返回true的项组成的数组。
    forEach():对数组中每一项运行给定函数。无返回值。
    map():对数组中每一项运行给定函数,返回每次函数调用的结果组成的数组。
    some():对数组中每一项运行给定函数,若该函数对任一项返回true,则返回true。

    /* 迭代方法的参数:param1要在每一项运行的函数 function,
     *               param2(可选)运行该函数的作用域对象
     * 要运行的function函数参数:
     * param1:数组项的值
     * param2:该项在数组中的位置
     * param3:数组对象本身
     */
     
     var numbers = [1,2,3,4,5,4,3,2,1];
     var everyResult = numbers.every(function(item,index,array){
         return (item>2);
     });
     alert(everyResult); //false
     
     var someResult = numbers.some(function(item,index,array){
         return (item>2);
     });
     alert(someResult); //true
     
     var filterResult = numbers.filter(function(item,index,array){
         return (item>2);
     });
     alert(filterResult); //[3,4,5,4,3]
     
     var mapResult = numbers.map(function(item,index,array){
         return (item>2);
     });
     alert(mapResult); //[ false, false, true, true, true, true, true, false, false ]
     
     numbers.forEach(function(item,index,array){
         //执行某些操作
     });
    

    归并方法reduce()、reduceRight()

    /* reduce():从数组的第一项开始,逐个遍历到最后
     * reduceRight():从数组的末尾开始向前遍历到第一项
     * param:param1要在每一项运行的函数 function,
     *        param2(可选)作为归并基础的初始值
     * 
     * 要运行的function函数参数:
     * param1:前一个值
     * param2:当前值
     * param3:项的索引
     * param4:数组对象
     * return:这个函数的返回值会作为第一个参数自动传给下一项。
     * /
     var values = [1,2,3,4,5];
     var sum = values.reduce(function(prev,cur,index,array){
         return prev + cur;
     });
     alert(sum); //15
    

    相关文章

      网友评论

          本文标题:Array类型

          本文链接:https://www.haomeiwen.com/subject/rwadvxtx.html