Js数组Array的特点以及操作方法

js的数组的每个位置可以保存任意类型的数据。

1. Array创建的方式

创建数组的方式如下:

  1. new Array()
  2. new Array(长度)
  3. new Array(元素,元素,……)
  4. 字面量[元素,元素,……]
    //创建一个长度为3,元素为"one","two","three"的数组
    var arr = new Array();
    arr[0] = "one";
    arr[1] = "two";
    arr[2] = "three";

    var arr1 = new Array(3);//3会被自动赋值给Array的length属性
    arr1[0] = "one";
    arr1[1] = "two";
    arr1[2] = "three";

    var arr2 = new Array("one","two","three");

    var arr3 = ["one","two","three"];//字面量创建数组的方式

2. Array赋值和改变长度

js中的数组在取值、赋值时没有角标越界异常,可以任意扩容,如果元素没有定义,获取该元素的值就是undefined。

    var arr = ["one","two","three"];

    console.log(arr[3]);//undefined
    console.log(arr.length);//3

    arr[3] = "four";//即使添加第四个元素,也不会报错,只不过此时arr的length值变为4
    console.log(arr[34]);//undefined
    console.log(arr.length);//4

    arr[99] = "99";//添加第100个元素,中间没有定义元素的位置,取到的值是undefined
    console.log(arr[50]);//undefined
    console.log(arr.length);//100

3. Array类型检测

    var flag = Array.isArray(arr);//推荐使用这种
    var flag1 = arr instanceof Array;//多框架时可能会出问题

4. Array的打印输出

4.1 toString()和valueOf()

Array是一种引用类型,也具备Object类型的一些基本方法:

  • toString
  • valueOf
    var arr = ["one","two","three"];

    console.log(arr.toString());//返回逗号隔开的元素
    console.log(arr.valueOf());//返回数组

下面是通过谷歌浏览器打印的结果:

在这里插入图片描述

4.3 join()

join方法可以修改toString()的输出结果,可以将数组中的元素用指定的符号隔开并输出。

    var arr = ["one","two","three"];
    console.log(arr.join("--"));//one--two--three

5. Array的容器方法

Array实例在使用时,可以被当做作容器,例如栈(先进后出)、队列(先进先出)。

5.1 被当做栈时有进栈push()pop()出栈两个方法可供使用。举例如下:

    var arr = new Array();

    arr.push("one");
    arr.push("two");
    arr.push("three");

    console.log(arr.pop());//three

5.2 被当做队列时push()shift()两个方法可供使用。举例如下:

    var arr = new Array();

    arr.push("one");
    arr.push("two");
    arr.push("three");

    console.log(arr.shift());//one

6. Array的排序方法

6.1 sort()和reverse()

  • sort():对数组元素进行排序,sort默认的比较的是元素的toString()结果(即使每个元素都是数字,比较的也是数字的字符串形式),按照从小到大的顺序输出。sort()还可以接收一个比较器函数作为参数来自定义比较规则。
  • reverse():将数组元素倒序(从右到左)输出。
    var arr1 = [5,7,6,4,3,14];
    var arr2 = [5,7,6,4,3,14];

    console.log(arr1.reverse().toString());//14,3,4,6,7,5
    console.log(arr2.sort().toString());//14,3,4,5,6,7

	//自定义比较器的形式
    var arr = [5,7,6,4,3,14];

    function compare(val1,val2) {
        if(val1 < val2){
            return 1;
        }else if(val1 > val2){
            return -1;
        }else {
            return 0;
        }
    }

    console.log(arr.sort(compare).toString());//14,7,6,5,4,3

上面例子中的arr2.sort()结果将14排在了前面,因为默认的sort方法比较的是字符串形式的"14",而不是数字14。

7. Array的合并、拆分、修改

7.1 合并

用于合并数组的方法concat(),该方法在合并数组时的执行过程:先创建一个当前数组的副本,然后将接收到的参数添加这个副本的末尾,从而构建一个新数组。

    var arr1 = [1,2,3];
    var arr2 = [4,5,6];
    var arr3 = arr1.concat(arr2);//直接拼接数组
    var arr4 = arr1.concat(7,8,9);//也可以直接追加元素

    console.log(arr3.toString());//1,2,3,4,5,6
    console.log(arr4.toString());//1,2,3,7,8,9

7.2 拆分

拆分数组的方法是slice(),该方法的用法与java和js中字符串的substring()方法一样,可以接收一个参数,也可以接收两个参数,举例如下:

    var arr1 = [1,2,3,4,5,6,7,8,9];

    var arr2 = arr1.slice(1,4);
    var arr3 = arr1.slice(2);

    console.log(arr2.toString());//2,3,4
    console.log(arr3.toString());//3,4,5,6,7,8,9

7.3 修改

修改数组元素包括删除指定位置元素、在指定位置添加元素、在指定位置替换元素。都是通过splice方法实现的,具体的功能通过参数的个数来实现。

  • 删除:需要指定2个参数分别是:要删除第一项的位置要删除的元素个数
  • 添加:需要指定3个参数分别是:起始位置要删除的项数要插入的元素
  • 替换(可以理解为删除和追加同时进行的一个方法):参数可以任意,前两个参数是:位置删除元素的个数,后面是要要想追加的元素,个数不确定。
    var arr1 = [1,2,3,4,5,6,7,8,9];
    var arr2 = [1,2,3,4,5,6,7,8,9];
    var arr3 = [1,2,3,4,5,6,7,8,9];

    arr1.splice(1,4).toString();//从位置1开始删除后面4个元素
    arr2.splice(1,2,0).toString();//从位置1开始删除后面2个元素,然后将0添加到数组中
    arr3.splice(2,1,0,0).toString();//从位置2开始,删除一个元素,删除后将后面的元素进行追加

    console.log(arr1.toString());//1,6,7,8,9
    console.log(arr2.toString());//1,0,4,5,6,7,8,9
    console.log(arr3.toString());//1,2,0,0,4,5,6,7,8,9

8. Array查找元素位置

js的Array查找元素与字符串中查找某个字符的方法是一样的。

  • indexOf()返回元素在数组中第一次出现的位置。
  • lastIndexOf()返回元素在数组中最后一次出现的位置。
    var arr = [1,2,3,4,5,6,7,8,9];

    console.log(arr.indexOf(3));//2
    console.log(arr.lastIndexOf(8));//7
    console.log(arr.indexOf(0));//-1
    console.log(arr.lastIndexOf(0));//-1

8. Array的迭代

Array的迭代有5个方法,每个方法都接收一个函数作为参数,该函数可以设置3个参数,分别是value,index,array,即:当前元素、当前元素位置、当前数组。

  • every():每一项都返回true,结果返回true。
  • filter():只返回符合条件的元素。
  • some():有一项返回true,结果就返回true.
  • map():可以对每个元素进行相应的映射操作后再返回。
  • forEach():相当于for循环。

上面提到的方法对应的实例:

    var arr = [1,2,3,4,5,4,3,2,1];

    //只有数组中的元素每个都大于0,结果才会返回true.
    var result1 = arr.every(function (value,index,array) {
        return value > 2;
    });
    console.log(result1.toString());//false


    //返回大于数组中元素值大于2的元素组成的数组
    var result2 = arr.filter(function (value,index,array) {
        return value > 2;
    });
    console.log(result2.toString());//3,4,5,4,3


    //只要数组中有一项是大于2的就返回true
    var result3 = arr.some(function (value,index,array) {
        return (value > 2);
    });
    console.log(result3.toString());//true


    //将数组中的每一项元素进行相应的操作
    var result4 = arr.map(function (value,index,array) {
        return value * 2;
    });
    console.log(result4.toString());//2,4,6,8,10,8,6,4,2

    
    //类似与for循环,或者java中容器的迭代器
    arr.forEach(function (value,index,array) {
        console.log(value);//将元素逐个输出
    });

8. Array的归并

Array的归并可以理解为将数组中的元素进行相应的操作最终返回一个值,或者理解为函数每个元素被迭代时递归调用的函数。

  • reduce:从左到右
  • reduceRight:从右到左
    var arr = [1,2,3,4,5,4,3,2,1];

    //返回数组中元素全部相加的结果
    var result1 = arr.reduce(function (previousValue, currentValue, currentIndex, array) {
        return previousValue + currentValue;
    });
    console.log(result1.toString());//25


    //与reduce方法结果一致,只不过reduce是从前到后迭代,reduceRight是从后到前的迭代
    var result1 = arr.reduceRight(function (previousValue, currentValue, currentIndex, array) {
        return previousValue + currentValue;
    });
    console.log(result1.toString());//25

备注:本文内容是学习“JavaScript高级程序设计”这本书整理的笔记。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值