美文网首页
5.2 Array类型

5.2 Array类型

作者: AbbyLC | 来源:发表于2017-07-23 17:10 被阅读0次

    第2最常用类型。

    特点:

    1. 数据的有序列表
    2. 数据的每一项可以保存任何类型的数据
    3. 数组的大小可以动态调整、自动增长

    创建方法:

    1. 构造函数
    var colors = new Array();
    

    new 可省略

    var colors = new Array(20);
    var colors = Array(20);
    
    var colors = new Array("red", "blue", "green");
    var colors = Array("red", "blue", "green");
    
    1. 数组字面量表示法
    var colors = ["red", "blue", "green"];   //创建包含3个字符串的数组
    var names = [];                          //创建空数组
    

    在使用数组字面量表示法时,不会调用Array构造函数。(Firefox3.0及更早版本除外)

    注意:

    1. 数组索引从0开始,最后一项的索引是length-1
    2. 数组的length属性——不是只读的。so,可以通过设置length的值进行数组的除项&增项

    检测数组

    1. instanceof 操作符
    if (value instanceof Array) {
        //对数组的操作
    }
    

    问题:假定了单一的全局执行环境。

    1. Array.isArray() 方法
      不管数组是在哪个全局执行环境中创建的,确定某个值是否是数组。
    if (Array.isArray(value) {
        //对数组的操作
    }
    

    转换方法

    转换方法 说明
    toString() 返回由数组中每个值的字符串形式拼接而成的一个逗号分隔的字符串。
    valueOf() (返回值同上) 实际上会调用数组每一项的toString() 方法
    toLocaleString() 经常也会返回与toString() 和 valueOf()的方法的值。但是,若数组每一项有toLocaleString() 的方法,将会返回toLocaleString() 的值。
    var colors = ["red", "blue", "green"];
    alert(colors.toString());             //输出: red,blue,green
    alert(colors.valueOf());              //输出:red,blue,green
    alert(colors);                        //输出:red,blue,green
    

    toLocaleString()返回的值与toString() 和 valueOf()的方法的值不同的例子:

    var person1 = {
        toLocaleString:function() {
            return "张";
        },
        toString:function() {
            return "三";
        }
    };
    
    var person2 = {
        toLocaleString:function() {
            return "李";
        },
        toString:function() {
            return "四";
        }
    };
    
    var people = [person1, person2];
    alert(people);                                     //输出:三,四
    alert(people.toString());                          //输出:三,四
    alert(people.toLocaleString());                    //输出:张,李
    

    用join() 方法可以替换输出的连接符:

    alert(colors.join("||")                        //输出: red||blue||green
    

    栈方法

    数组表现的跟栈(LIFO,后进先出)一样。
    ECMAScript为数组专门提供了push() 和pop() 方法,以便实现类似栈的行为。

    var colors() = ["red", "blue"];
    colors.push("brown");
    colors[3] = "black";
    alert(colors.length);           //4
    
    var item = colors.pop();
    alert(item);                    // black
    

    队列方法

    数组表现的跟队列(FOFO,先进先出)一样。
    push() 和 shift() 实现类似队列的行为。

    var colors = new Array();
    var count = colors.push("red", "green");
    alert(count);                          //2       数组:red, green
    
    count = colors.push("black");
    alert(count);                         //3       数组:red, green,black
    
    var item = colors.shift();
    alert(item);                           //"red"
    alert(colors.length);                  //2       数组:green,black
    

    总结:实现组数像栈和队列一样的方法

    方法名 说明
    push() 在数组的末尾添加任意个项,并返回修改后数组的长度
    pop() 在数组的末尾移除 最后一个项,并返回修改后数组的长度
    unshift() 在数组的前端添加任意个项,并返回修改后数组的长度
    pop() 在数组的前端移除 第一个项,并返回修改后数组的长度

    重排列方法

    方法名 说明
    reverse() 直接反转数组项的顺序,并返回数组
    sort() 按升序排列数组项:小→大;
    调用每个数组项的toString()转型方法,比较得到的字符串,以确定排序;
    返回排序后的数组。
    var values = [5,6,7,1,2,3];
    values.reverse();
    alert(values);                           //3,2,1,7,6,5
    
    var values2 = [5,6,7,1,2,3];
    values2.sort();
    alert(values2);                          //1,2,3,5,6,7
    
    values2.reverse();
    alert(values2);                          //7,6,5,3,2,1
    
    // but!!!!!!!!!!!!!!!!!!
    var values3 = [0,1,5,10,15];
    values3.sort();
    alert(values3);                          //0,1,10,15,5         10位于5前,不正确
    
    // so ↓
    function compare(value1,value2) {
        if (value1<value2) {
            return -1;
        } else if(value1>value2){
            return 1;
        } else {
            return 0;
        }
    }
    
    //或者
    //function compare(value1,value2) {
    //    return value2-value1;
    //}  数值类型的数组,升序
    
    var values4 = [0,1,5,10,15];
    values4.sort(compare);
    alert(values4);                          //0,1,5,10,15
    

    操作方法

    方法名 说明
    concat() 将传递进来的各个数组 或值添加到结果数组中,组成一个数组
    slice() 可接受1或2个参数,表示要返回数组的起始和结束位置。slice()不会影响原数组
    splice() 主要用途:向数组的中部插入项:删、插、替换
    var colors = ["red","green","blue"];
    var colors2 = colors.concat("yellow",["black","brown"]);
    
    alert(colors);                      //red,green,blue
    alert(colors2);                     //red,green,blue,yellow,black,brown
    
    var colors = ["red",",green","blue","yellow","purple"];
    var colors2 = colors.slice(1);
    var colors3 = colors.slice(1,4);
    
    alert(colors2);                      //green,blue,yellow,purple
    alert(colors3);                      //green,blue,yellow
    
    var colors = ["red",",green","blue"];
    
     //参数 → (要删除的第一项的位置,要删除的数目)
    var removed = colors.splice(0,1);          //删除第1项
    alert(colors);                             //green,blue
    alert(removed);                            //red,返回的数组只包含1项
    
    //参数 → (起始位置,0即要删除的项数,要插入的项)
    var removed = colors.splice(1,0,"yellow","orange");          //删除第1项
    alert(colors);                             //green,yellow,orange,blue
    alert(removed);                            //返回的1个空数组
    
    //参数 → (起始位置,要删除的项数,要插入的任意数量的项)  插入的项数不必=删除的项数
    var removed = colors.splice(1,1,"red","purple");          //删除第1项
    alert(colors);                             //green,red,purple,orange,blue
    alert(removed);                            //yellow,返回的数组只包含1项
    

    位置方法

    方法名 说明
    indexOf() 从头到后严格查找(===),没找到返回-1
    lastIndexOf() 从尾到头严格查找(===),没找到返回-1

    indexOf()、lastIndexOf() 可有且最多有两个参数:
    eg:

    indexOf(searchvalue,fromindex)
    

    searchvalue:需检索的字符串值。必要。
    fromindex:在字符串中开始检索的位置,默认为0。可选。

    var number = [1,2,3,4,5,4,3,2,1];
    alert(number,index(4));                       //3
    alert(number,lastIndex(4));                   //5
    
    var person = {name:"lc"};
    var people = [ {name:"lc"} ];
    
    var morePeople = [person];
    
    alert(people.indexOf(person));              //-1
    alert(morePeople.indexOf(person));          //0
    

    迭代方法

    不会修改数组中包含的值.

    方法名 说明
    every() 对数组中的每一项运行给定函数,若该函数对每一项都返回True,则返回True;
    filter() 对数组中的每一项运行给定函数,若该函数返回True,则返回True;
    forEach() 对数组中的每一项运行给定函数。返回值。
    map() 对数组中的每一项运行给定函数,返回每次函数调用的结果组成的数组
    some() 对数组中的每一项运行给定函数,若该函数对任一项都返回True,则返回True;
    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.every(function(item, index, array) {
        return (item>2);
    })
    alert(someResult);                                           //True
    
    var filterResult = numbers.every(function(item, index, array) {
        return (item>2);
    })
    alert(filterResult);                                          //[3,4,5,4,3]
    
    var mapResult = numbers.every(function(item, index, array) {
        return (item*2);
    })
    alert(mapResult);                                             //[2,4,6,8,10,8,6,4,2]
    
     numbers.forEach(function(item, index, array) {
        //执行某些操作
    })
    

    缩小方法

    方法名 说明
    reduce() 迭代数组的所有项构建一个最终返回的值。方向:头→尾
    reduceRight() 迭代数组的所有项构建一个最终返回的值。方向:尾→头
    var values = [1,2,3,4,5];
    var result = values.reduce(function(prev, cur, index, array) {
        return prev - cur;
    });
    alert(result);    // 1-2-3-4-5 = -13
    
    var result2 = values.reduceRight(function(prev, cur, index, array) {
        return prev - cur;
    });
    alert(result2);  //5-4-3-2-1 = -5
    

    相关文章

      网友评论

          本文标题:5.2 Array类型

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