JS数组相关

数组方法

  • join()
  • push()和pop()
  • shift()和unshift()
  • sort()
  • reverse()
  • concat()
  • slice()
  • splice()
  • indexOf()和lastIndexOf()
  • forEach()
  • map()
  • filter()
  • every()
  • some()
  • find()
  • includes()
  • isArray()
  • reduce()和reduceRight()

API详解

  1. join()

    // 把数组以指定字符分隔开,并转换为字符串
    // 不会改变原数组
    
    let arr = [1,2,3];
    let str = arr.join("-");
    console.log(str)        // 1-2-3
  2. push()和pop()

    // push()把里面的内容添加到数组末尾,并返回修改后的长度。
    // pop()移除数组最后一项,返回移除的那个值,减少数组的length。
    // 改变原数组
    
    var arr = [1,2,3];
    var count = arr.push(4,5);
    console.log(count);           // 5
    console.log(arr);            // [1,2,3,4,5]
    var item = arr.pop();
    console.log(item);            // 1
    console.log(arr);             // [1,2,3,4]
  3. shift()和unshift()

    // shift()删除原数组第一项,并返回删除元素的值;如果数组为空则返回undefined。
    // unshift()将参数添加到原数组开头,并返回数组的长度 。
    // 改变原数组
    
    var arr = ["Lily","lucy","Tom"];
    var count = arr.unshift("Jack","Sean");
    console.log(count);               // 5
    console.log(arr);                //["Jack", "Sean", "Lily", "lucy", "Tom"]
    var item = arr.shift();
    console.log(item);               // Jack
    console.log(arr);                // ["Sean", "Lily", "lucy", "Tom"]
  4. sort()

    // sort()将数组里的项从小到大排序
    // 改变原数组,返回的也是排序后的数组
    
    let arr = [1,4,23,14,16,33,37];
    let newArr = arr.sort();
    console.log(arr);           // [1, 14, 16, 23, 33, 37, 4]
    console.log(newArr);        // [1, 14, 16, 23, 33, 37, 4]
    
    // 另外值得注意的是,比如上面的数组是不是没有按照你的想法进行排序,sort()方法比较的是字符串,没有按照数值的大小对数字进行排序,要实现这一点,就必须使用一个排序函数
    
    // 按照从小到大排序
    function sortNumber(a,b){
      return a - b
    }
    // 按照从大到小排序
    function sortNumber2(a,b){
      return b - a
    }
    let arr = [1,4,23,14,16,33,37];  
    console.log(arr.sort(sortNumber));      // [1, 4, 14, 16, 23, 33, 37]
    console.log(arr.sort(sortNumber2));     // [37, 33, 23, 16, 14, 4, 1]
  5. reverse()

    // reverse()反转数组项的顺序
    // 改变原数组
    
    var arr = [13, 24, 51, 3];
    console.log(arr.reverse());     // [3, 51, 24, 13]
    console.log(arr);          // [3, 51, 24, 13](原数组改变)
  6. concat()

    // concat() :将参数添加到原数组中。这个方法会先创建当前数组一个副本,然后将接收到的参数(参数可是是数字字符串,也可以是数组)添加到这个副本的末尾,最后返回新构建的数组。在没有给concat()方法传递参数的情况下,它只是复制当前数组并返回副本。
    // 不修改原数组
    
    var arr = [1,3,5,7];
    var arrCopy = arr.concat(9,[11,13]);
    var arrCopy2 = arr.concat("aaa","bbbb");
    console.log(arrCopy);             // [1, 3, 5, 7, 9, 11, 13]
    console.log(arrCopy2);                        // [1, 3, 5, 7, 'aaa', 'bbbb']
    console.log(arr);               // [1, 3, 5, 7](原数组未被修改)
  7. slice()

    // slice()返回从原数组中指定开始下标到结束下标之间的项组成的新数组。
    // slice()方法可以接受一或两个参数,即要返回项的起始和结束位置。
    // 在只有一个参数的情况下,slice()方法返回从该参数指定位置开始到当前数组末尾的所有项。
    // 如果有两个参数,该方法返回起始和结束位置之间的项——但不包括结束位置的项。
    // 不修改原数组
    
    var arr = [1,3,5,7,9,11];
    var arrCopy = arr.slice(1);
    var arrCopy2 = arr.slice(1,4);
    // arrCopy3设置了两个参数,终止下标为负数,当出现负数时,将负数加上数组长度的值(6)来替换该位置的数,因此就是从1开始到4(不包括)的子数组。
    var arrCopy3 = arr.slice(1,-2);
    // arrCopy4中两个参数都是负数,所以都加上数组长度6转换成正数,因此相当于slice(2,5)。
    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]
  8. splice()

    // splice():删除、插入和替换。
    // 删除:指定 2 个参数:要删除的第一项的位置和要删除几个。
    // 插入:可以向指定位置插入任意数量的项,只需提供 3 个参数:起始位置、 0(要删除的项数)和要插入的项
    // 替换:可以向指定位置插入任意数量的项,且同时删除任意数量的项,只需指定 3 个参数:起始位置、要删除的项数和要插入的任意数量的项。插入的项数不必与删除的项数相等。
    // 改变原数组,返回的是删除的项,也是个数组,没删除是个空数组。
    
    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]
    // 在第2项后面插入两个数
    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(arrRemoved3);           // [7]
  9. indexOf()和lastIndexOf()

    // indexOf():接收两个参数:要查找的项和(可选的)表示查找起点位置的索引。其中, 从数组的开头(位置 0)开始向后查找。
    lastIndexOf:接收两个参数:要查找的项和(可选的)表示查找起点位置的索引。其中, 从数组的末尾开始向前查找。 
    // 返回的是查找的第一个的index
    
    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,校验类型
  10. forEach()

    // forEach():对数组进行遍历循环,对数组中的每一项运行给定函数。这个方法没有返回值。参数都是function类型,默认有传参,参数分别为:遍历的数组内容、第对应的数组索引、数组本身。
    
    var arr = [1, 2, 3, 4, 5];
    arr.forEach(function(val, index, a){
    console.log(val + '|' + index + '|' + (a === arr));
    });
    // 输出为:
    // 1|0|true
    // 2|1|true
    // 3|2|true
    // 4|3|true
    // 5|4|true
  11. map()

    // 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]
  12. filter()

    // filter():“过滤”功能,数组中的每一项运行给定函数,返回满足过滤条件组成的数组。
    
    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]
  13. 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
  14. 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
  15. find()

    // find()方法返回通过测试(函数内判断)的数组的第一个元素的值。
    // find()方法为数组中的每个元素都调用一次函数执行
    // 当数组中的元素在测试条件时返回true时,find()返回符合条件的元素,之后的值不会再调用执行函数。如果没有符合条件的元素返回 undefined
    // find()对于空数组,函数是不会执行的。
    // find()并没有改变数组的原始值。
    
    var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
    var arr2 = arr.find(function(x, index) {
     return x > 5;
    }); 
    console.log(arr2);         // 6
  16. includes()

    // includes()方法用来判断一个数组是否包含一个指定的值,如果是返回true,否则false。
    // includes(searchElement, fromIndex),includes有两个参数
    // searchElement,必须。需要查找的元素值。
    // fromIndex,可选。从该索引处开始查找 searchElement。如果为负值,则按升序从 array.length + fromIndex 的索引开始搜索。默认为 0。
    
    let arr = ['baidu', 'google', 'taobao'];
    console.log(arr.includes('baidu'));     // true
    console.log(arr.includes('baidu'),5);     // false
  17. isArray()

    // isArray() 方法用于判断一个对象是否为数组。
    
    let arr = [1,3,5];
    let obj = {};
    console.log(Array.isArray(arr))     // true
    console.log(Array.isArray(obj))     // false
  18. reduce()和reduceRight()

    // reduce()方法接收一个函数作为累加器,数组中的每个值(从左到右)开始缩减,最终计算为一个值。
    // reduce()可以作为一个高阶函数,用于函数的 compose。
    // 注意: reduce() 对于空数组是不会执行回调函数的。
    // reduceRight() 方法的功能和 reduce() 功能是一样的,不同的是 reduceRight() 从数组的末尾向前将数组中的数组项做累加
    // reduce(fn,[initVal])有两个参数,第一个是一个函数,必须的,第二个是初始值,非必须
    
    var numbers = [65, 44, 12, 4];
     
    // total必需。初始值, 或者计算结束后的返回值。
    // num必需。当前元素
    // numIndex可选。当前元素的索引
    // arr可选。当前元素所属的数组对象。
    function getSum(total, num) {
     return total + num;
    }
    let count = numbers.reduce(getSum);
    console.log(count)              // 125
    
    let count1 = numbers.reduceRight(getSum,100);
    console.log(count1)              // 225

你可能感兴趣的