美文网首页
JS的 array方法 总结

JS的 array方法 总结

作者: 那年点夏 | 来源:发表于2018-01-06 18:07 被阅读0次

    数组创建

    javascript中创建数组的方式有两种

    • 第一种是 使用Array构造函数:
    var arr1 = new Array();//创建一个空数组
    var arr2 = new Array(20);//创建一个包含20项的数组
    var arr3 = new Array("hello","world");//创建一个包含2个字符串的数组
    
    • 第二种是 使用数组字面量表示法
    var arr4 = [];//创建一个空数组
    var arr5 = [20];//创建一个包含20项的数组
    var arr6 = ["hello","world"];//创建一个包含2个字符串的数组
    

    javascript中数组的length属性是可以修改的:

    var arr = ["hello","world","hi"];//创建一个包含3个字符串的数组
    arr[arr.length] = "apple";//在下标为3处(也就是数组尾部)添加一项“apple”
    arr.length=arr.length-1;//将数组的最后一项删除
    

    判断一个对象是不是数组对象:

    • 在ECMAScript5之前,我们可以通过 instanceof Array 去判断;

    这个操作符和JavaScript中面向对象有点关系,了解这个就先得了解JavaScript中的面向对象。因为这个操作符是检测对象的原型链是否指向构造函数的prototype对象的。

    • 在ECMAScript5中,新增了Array.isArray()方法。

    这个方法的目的是最终确定某个值到底是不是数组,而不管它是在哪个全局执行环境中创建的。
    针对ES5新增的方法浏览器支持情况:
    Opera 11+
    Firefox 3.6+
    Safari 5+
    Chrome 8+
    Internet Explorer 9+

    数组方法

    数组的方法有数组原型方法,也有从object对象继承来的方法
    接下来是数组的原型方法:

    join()

    • join( separator ):将数组元素组成一个字符串,最多只有一个参数separator即分隔符,没有参数的话默认用逗号为分隔符;
    • 原数组不变;
    var arr = [1,2,3];
    console.log(arr.join());//1,2,3
    console.log(arr.join("-"));//1-2-3
    console.log(arr);//[1,2,3](原数组不变)
    
    • 通过join()方法可以实现重复字符串,只需要传入字符串以及重复的次数,就能返回重复后的字符串,函数如下:
    function repeatString(str,n){
       return new Array(n+1).join(str);
    }
    console.log(repeatString("abc",3));//abcabcabc
    console.log(repeatString("Hi",5));//HiHiHiHiHi
    

    push()和pop()

    • push():可以传入任意个数的参数,将参数逐个添加到数组末尾,返回值是修改后的数组的长度;
    • pop():删除数组末尾最后一项,减少数组的length值,返回值是被删除的值;
    var arr = ["koko","lulu","hehe"];
    var count = arr.push("jack","sam");
    console.log(count);// 5
    console.log(arr);//["koko","lulu","hehe","jack","sam"]
    var item = arr.pop();
    console.log(item);//sam
    console.log(arr);//["koko","lulu","hehe","jack"]
    
    shift()和unshift()
    • unshift():可以传入任意个数的参数,将参数逐个添加到数组的开头,返回值是修改后的数组的长度;
    • shift():删除数组第一项,减少数组的length值,返回值是被删除的值,如果数组为空,则返回undefined;
    var arr = ["koko","lulu","hehe"];
    var count = arr.unshift("jack","sam");
    console.log(count);// 5
    console.log(arr);//["jack","sam","koko","lulu","hehe"]
    var item = arr.shift();
    console.log(item);//jack
    console.log(arr);//["sam","koko","lulu","hehe"]
    
    sort()
    • 默认按升序排列数组项,即从小到大排序,但是只作用于字符串,也就是按照 字符编码的顺序进行排序;对于数字也是要先默认转换成字符串,再排序;
    • 原数组改变;
    var arr1 = ["a", "d", "c", "b"];
    console.log(arr1.sort());// ["a", "b", "c", "d"]
    arr2 = [22,33,11,66,5];
    console.log(arr2.sort());//[11,22,33,5,66];
    console.log(arr2);//[11,22,33,5,66](原数组被改变)
    
    • 参数可选,若有,则必须是 函数,用来规定排序顺序;

    • 如果想按照其他标准进行排序,就需要提供比较函数,该函数要比较两个值,然后返回一个用于说明这两个值的相对顺序的数字。比较函数应该具有两个参数 a 和 b,其返回值如下:

      若 a 小于 b,在排序后的数组中 a 应该出现在 b 之前,则返回一个小于 0 的值。
      若 a 等于 b,则返回 0。
      若 a 大于 b,则返回一个大于 0 的值。

    • 用sort()方法实现 按照数值的大小对数字进行排序;

    function sortNumber(a,b){
      return a-b
    }
    arr2 = [22,33,11,66,5];
    console.log(arr2.sort(sortNumber));//[5,11,22,33,66]
    
    • 这里可以看出,如果按照升序排列,那么方法为:
    function sortNumber(a,b){
      return a-b
    }
    

    如果按照降序排列:

    function sortNumber(a,b){
      return b-a
    }
    
    • 如果想根据 数组对象中的某个属性值 进行排序呢?

    sort 方法接收一个函数作为参数,这里嵌套一层函数用来接收对象的属性名,其他部分代码与正常使用sort方法相同;
    //下面这种方法比较局限,已经把升序还是降序写死了;

    var arr = [
      { name:'cj',age:18 },
      { name:'wzm',age:20 },
      { name:'dudu',age:8 }
    ];
    function compare(property){
        return function(a,b){
            var value1 = a[property];
            var value2 = b[property];
            return value1 - value2;
      }
    }
    console.log(arr.sort(compare('age')));
    

    结果如图所示:


    image.png
    • 那如何用传参的方式,根据参数不同,来确定是升序排列,还是降序排列?
    function sortBy(property,rev){
        if(rev == undefined){
            rev = 1; //第二个参数没有传递,默认升序排列
        }else{
            rev = (rev) ? 1 : -1;
        }
        return function(a,b){
            a = a[property];
            b = b[property];
            if(a<b){
                return rev * -1
            }
            if(a>b){
                return rev * 1
            }
            return 0;
        }
    }
    var newArray=[
        { name:'cj',age:18 },
        { name:'wzm',age:20 },
        { name:'dudu',age:8 }
    ];
    console.log(newArray.sort(sortBy('age',false)));
    

    结果如图所示:


    image.png
    reverse()
    • reverse():反转数组项的顺序;
    • 原数组改变;
    var arr = [22,33,11,66,5];
    console.log(arr.reverse()); //[5,66,11,33,22]
    console.log(arr); //[5,66,11,33,22](原数组改变)
    
    concat()
    • concat():将参数添加到数组的末尾;
    • 原理:concat()方法会先创建当前数组的一个副本,然后将接收到的参数添加到这个副本的末尾,最后返回新构建的数组。在没有给concat()方法传递参数的情况下,它只是复制当前数组并返回副本。
    • 原数组不变;
    var arr = [1,3,5,7];
    var arrCopy = arr.concat(9,[11,13]);
    console.log(arrCopy); //[1,3,5,7,9,11,13]
    console.log(arr); //[1,3,5,7]
    
    • 从上面测试的结果可以发现:传入的不是数组,则直接把参数添加到数组后面,如果传入的是一维数组,则将此一维数组中的各个项添加到数组中。
    • 如果传入的是一个二维数组呢?
    var arrCopy2 = arr.concat([9,[11,13]]);
    console.log(arrCopy2); //[1,3,5,7,9,Array[2]]
    console.log(arrCopy2[5]); //[11,13]
    

    上述代码中,arrCopy2数组的第五项是一个包含两项的数组,也就是说,concat方法只能将传入数组中的每一项添加到数组中,如果传入数组中的有些项是数组,那么也会把这一数组当作一项,添加到arrCopy2中。

    slice()
    • slice():从原数组中指定开始下标到结束下标之间的项组成的新数组;
    • slice()方法的参数有一个或者两个,即表示返回项的起始和结束位置。

    只有一个参数时,slice()方法返回的是从该参数指定位置开始到当前数组末尾的所有项;
    如果有两个参数,该方法返回起始和结束位置之间的项——但不包括结束位置的项;

    var arr = [1,3,5,7,9,11];
    var arrCopy = arr.slice(1);
    var arrCopy2 = arr.slice(1,4);
    var arrCopy3 = arr.slice(1,-2);
    var arrCopy4 = arr.slice(-4,-1);
    console.log(arr); //[1,3,5,7,9,11](原数组不变)
    console.log(arrCopy); //[3,5,7,9,11]
    console.log(arrCopy2); //[3,5,7]
    console.log(arrCopy3); //[3,5,7]
    console.log(arrCopy4); //[5,7,9]
    

    arrCopy 只设置一个参数1,也就是起始下标为1,所以返回的数组为下标为1(包括1)开始到数组最后;
    arrCopy2设置了两个参数(1,4),返回起始下标(包括1)开始到终止下标(不包括4)的子数组;
    arrCopy3设置了两个参数,终止下标为负数,当出现负数时,将负数加上数组的长度的值(6)来替换该位置的数,因此是从1到4(不包括)的子数组;
    arrCopy4中两个参数都是负数,所以都加上数组的长度6转换成正数,因此相当于slice(2,5);

    splice()

    • splice():很强大的数组的方法,它有很多用法,可以实现删除插入替换
    • 删除:需要2个参数,第一个参数表示要删除的第一项的位置(索引),第二个参数表示要删除的项数。例如:splice(0,2)表示删除数组中的前两项。
    • 插入:可以向指定位置插入任意数量的值,需要提供3种参数:起始位置、0(要删除的项数)、要插入的值(可以多个)。例如:splice(2,0,4,6)表示从数组的第二个值后面插入4和6。
    • 替换:将数组中的任意一个或几个值替换成其他值,需要提供3种参数:起始位置、0(要删除的项数)、要插入的值(可以多个)。例如:splice(2,1,4,6)表示删除第二个值后面的一个数(也就是第三个数),将第三数替换成4和6。
    • splice()方法 :始终都会返回一个数组,该数组的值是从原数组中删除的值,如果没有删除的项,则返回一个空数组。
    • 原数组改变;
    var arr = [1,3,5,7,9,11];
    var arrRemoved = arr.splice(0,2);
    console.log(arr); //[5,7,9,11]
    console.log(arrRemoved); //[1,3]
    var arrRemoved2 = arr.splice(2,0,4,6);
    console.log(arr); //[5,7,4,6,9,11]
    console.log(arrRemoved2); //[]
    var arrRemoved3 = arr.splice(1,1,2,4);
    console.log(arr); //[5,2,4,4,6,9,11]
    console.log(arrRemoved2); //[7]
    

    find()

    • find()方法 返回函数中满足提供的测试函数的第一个元素的值。否则返回 undefined;

    • 语法:arr.find(callback[,thisArg])

    • 参数:
      callback:在数组每一项上执行的函数,接收3个参数:

      • element:当前遍历到的元素;
      • index:当前遍历到的索引;
      • array:数组本身;

      thisArg: 可选。指定 callback 的 this 参数;

    function isBigEnough(element){
        return element >= 15;
    }
    [12,5,8,130,44].find(isBigEnough); //130
    

    findIndex()

    • findIndex()方法 返回数组中满足提供的测试函数的第一个元素的索引。否则返回-1;

    • 语法:arr.findIndex(callback[,thisArg])

    • 参数:
      callback:在数组每一项上执行的函数,接收3个参数:

      • element:当前遍历到的元素;
      • index:当前遍历到的索引;
      • array:数组本身;

      thisArg: 可选。指定 callback 的 this 参数;

    function isBigEnough(element){
        return element >= 15;
    }
    [12,5,8,130,44].findIndex(isBigEnough); // 3
    

    ES5新增的9个数组方法:

    indexOf() 和 lastIndexOf()
    • indexOf():接收2个参数:第一个参数表示要查找的项,第二个参数表示查找起点位置的索引。从数组开头(第二个参数)开始向后查找。返回的是要查找的项的索引值。
    • lastIndexOf():接收2个参数:第一个参数表示要查找的项,第二个参数表示查找起点位置的索引。从数组末尾(第二个参数)开始向前查找。返回的是要查找的项的索引值(索引仍然是从左向右计算,注意不要弄混)。
    • 没有找到的情况下返回 -1;
    • 在比较第一个参数与数组中的每一项时,会使用全等操作符;
    var arr = [1,3,5,7,7,5,3,1];
    console.log(arr.indexOf(5)); //2
    console.log(arr.lastIndexOf(5)); //5
    console.log(arr.indexOf(5,2)); //2
    console.log(arr.lastIndexOf(5,4)); //2
    console.log(arr.indexOf("5")); //-1
    
    forEach()
    • forEach():对数组进行循环遍历,并将元素传递给回调函数。
    • 参数是函数参数(必需):function(currentValue, index, arr),数组中每个元素都要调用的函数。currentValue表示当前元素(必需);index表示当前元素的索引值(可选);arr表示当前元素所属的数组对象(可选);
    • 这个方法没有返回值(undefined);
    • 注意:forEach()对于空数组是不会执行回调函数的。
    var arr = [1,2,3,4,5];
    arr.forEach(function(x,index,a){
        console.log(x+'|'+index+'|'+(a===arr))
    })
    //输出为:
    // 1|0|true
    // 2|1|true
    // 3|2|true
    // 4|3|true
    // 5|4|true
    
    map()
    • map():指“映射”,也就是原数组被“映射”成对应新数组
    • 参数为函数,和forEach()方法差不多,但是需要有返回值;
    • 下面代码利用map方法实现数组中每个数求平方;
    var arr = [1,2,3,4,5];
    var arr2 = arr.map(function(item){
          return item*item;
    });
    console.log(arr2); //[1,4,9,16,25]
    
    • 在实际使用的时候,我们可以利用map方法方便获得对象数组中的特定属性值们。例如:
    var users = [
      {name: "张含韵", "email": "zhang@email.com"},
      {name: "江一燕",   "email": "jiang@email.com"},
      {name: "李小璐",  "email": "li@email.com"}
    ];
    var emails = users.map(function(user){
          return user.email;
    });
    console.log(emails);
    

    结果如下:


    image.png
    • Array.prototype扩展可以让IE6-IE8浏览器也支持map方法:
    if(typeof Array.prototype.map != "function"){
        Array.prototype.map = function(fn,context){
              var arr = [];
              if(typeof fn === "function"){
                    for(var k = 0,length = this.length;k<length;k++){
                          arr.push(fn.call(context,this[k],k,this));
                    }
              }
              return arr;
        };
    }
    
    filter()
    • filter():指“过滤”,也就是原数组被“过滤”成对应新数组
    • 参数为函数,和forEach()方法差不多,但是需要有返回值,返回值是满足过滤条件的数组;
    var arr = [1,2,3,4,5,6,7,8,9,10];
    var arr2 = arr.filter(function(x,index){
          return index % 3 === 0 || x >= 8;
    });
    console.log(arr2); //[1,4,7,8,9,10]
    
    every()
    • every():判断数组中每一项都是否满足条件,只有所有项都满足条件,才会返回true。
    var arr = [1, 2, 3, 4, 5];
    var arr2 = arr.every(function(x) {
    return x < 10;
    }); 
    console.log(arr2); //true
    var arr3 = arr.every(function(x) {
    return x < 3;
    }); 
    console.log(arr3); // false
    
    some()
    • some():判断数组中是否存在满足条件的项,只要有一项满足条件,就会返回true。
    var arr = [1, 2, 3, 4, 5];
    var arr2 = arr.some(function(x) {
    return x < 3;
    }); 
    console.log(arr2); //true
    var arr3 = arr.some(function(x) {
    return x < 1;
    }); 
    console.log(arr3); // false
    
    reduce()
    • reduce() 方法接收一个函数 callback 作为累加器(accumulator),数组中的每个值(从左到右)开始合并,最终为一个值。
    • 语法:
    array.reduce(callback[, initialValue])
    
    • reduce() 方法接收 callback 函数,而这个函数包含四个参数:
    function callback(accmulator, currentValue, currentIndex, array) {}
    

    accmulator:上一次调用回调返回的值,或者提供的初始值(initialValue)
    currentValue:当前项
    currentIndex:当前项的索引
    array:调用reduce()方法的数组
    而 initialValue 作为第一次调用 callback 函数的第一个参数

    • reduce() 方法为数组中的每一个元素依次执行回调函数 callback,不包括数组中被删除或从未被赋值的元素,接受四个参数:初始值(或者上一次回调函数的返回值),当前元素值,当前索引,调用 reduce() 的数组。
    • 回调函数第一次执行时,accumulator 和 currentValue 可以是一个值,如果 initialValue 在调用 reduce() 时被提供,那么第一个 accumulator 等于 initialValue ,并且 currentValue 等于数组中的第一个值;如果 initialValue 未被提供,那么 accumulator 等于数组中的第一个值,currentValue 等于数组中的第二个值
    var arr = [0,1,2,3,4];
    arr.reduce(function (accumulator, currentValue, currentIndex, array) {
        return accumulator+ currentValue;
    }); // 10
    
    reduceRight()
    • reduceRight() 方法的功能和 reduce() 功能是一样的,不同的是 reduceRight() 从数组的末尾向前将数组中的数组项做累加。
    ar arr = [0,1,2,3,4];
    arr.reduceRight(function (accumulator, currentValue, currentIndex, array) {
        return accumulator + currentValue;
    }); // 10
    

    相关文章

      网友评论

          本文标题:JS的 array方法 总结

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