• 技术文章 >web前端 >js教程

    javascript数组操作方法总结一览(附示例)

    不言不言2018-10-24 10:38:39转载685
    本篇文章给大家带来的内容是关于javascript数组操作方法总结一览(附示例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

    ECMAScript为操作已经包含在数组中的项提供了很多方法。这里本人总结一下自己对这些方法的理解,如此之多的方法中,我首先已是否会改变原数组做为分类标准,逐个解释一下每一个方法。

    一、不会改变原数组

    1. concat()

    使用方法:array.concat(array2,array3,...,arrayX)
    返回值: 返回一个新的数组

    concat()方法用于连接两个或多个数组。该方法不会改变现有的数组,仅会返回被连接数组的一个副本。
    在没有传递参数的情况下,它只是复制当前数组并返回副本;如果传递的值不是数组,这些值就会简单地添加到结果数组的末尾。

    var arr1 = [1,2,3];
    var arr2 = arr1.concat(4,[5,6]);
    
    console.log(arr1);  // [ 1, 2, 3 ]
    console.log(arr2);  // [ 1, 2, 3, 4, 5, 6 ]

    2. join()

    使用方法:array.join(separator)
    返回值: 返回一个字符串

    join()方法用于把数组中的所有元素放入一个字符串。元素是通过指定的分隔符进行分隔的,默认使用','号分割,不改变原数组。

    var arr1 = [1,2,3];
    var arr2 = arr1.join();
    
    console.log(arr1);  // [ 1, 2, 3 ]
    console.log(arr2);  // 1,2,3
    之前接触过一个功能是需要生成多个连续的*,一开始是直接使用for循环可以做到,后面了解了join()方法后,发现其实一句话就可以弄好了。
    var arr3 = "";
    for(let i = 0; i < 15; i ++) {
        arr3 = arr3 + "*";
    }
    console.log(arr3);  // ***************
    
    var arr4 = new Array(16).join("*");
    console.log(arr4);  // ***************

    3. slice()

    使用方法:array.slice(start, end)
    返回值: 返回一个新的数组,包含从 start 到 end (不包括该元素)的 arrayObject 中的元素

    slice()接受一或两个参数,即要返回项的起始和结束位置。
    在只有一个参数的情况下,slice()方法返回从该参数指定位置到当前数组末尾的所有项;
    如果有两个参数,改方法返回起始和结束位置之间的项——但不包括结束位置的项。
    如果参数为负数,规定从数组尾部开始算起的位置。也就是说,-1 指最后一个元素,-2 指倒数第二个元素,以此类推。

    var arr1 = [1,2,3,4,5,6];
    var arr2 = arr1.slice(1);
    var arr3 = arr1.slice(2,4);
    var arr4 = arr1.slice(-4,-2);  // 等价于 arr1.slice(2,4);
    
    console.log(arr1);  // [ 1, 2, 3, 4, 5, 6 ]
    console.log(arr2);  // [ 2, 3, 4, 5, 6 ]
    console.log(arr3);  // [ 3, 4 ]
    console.log(arr4);  // [ 3, 4 ]
    对于伪数组转换为标准数据就用到了这个方法
        Array.prototype.slice.call(arguments)

    4. some()

    使用方法:array.some(function(currentValue,index,arr),thisValue)
    返回值: 布尔值

    或 ==> some()对数组中的每一项运行给定的函数,如果该函数对任一项返回true,剩余的元素不会再执行检测;如果没有满足条件的元素,则返回false。

    function compare(item, index, arr){
        return item > 10;
    }
    
    [2, 5, 8, 1, 4].some(compare);  // false
    [20, 5, 8, 1, 4].some(compare);  // true

    5. every()

    使用方法:array.every(function(currentValue,index,arr),thisValue)
    返回值: 布尔值

    和 ==> every()对数组中的每一项运行给定的函数,如果该函数对每一项返回true,剩余的元素不会再执行检测;如果其中有一个没有满足条件的元素,则返回false。

    function compare(item, index, arr){
        return item > 10;
    }
    
    [20, 50, 80, 11, 40].every(compare);  // true
    [20, 50, 80, 10, 40].every(compare);  // false

    5. filter()

    使用方法:array.filter(function(currentValue,index,arr), thisValue)
    返回值: 返回数组

    filter()方法创建一个新的数组,新数组中的元素是通过检查指定数组中符合条件的所有元素。
    对数组的每一项都运行给定的函数,返回结果为true的项组成的数组。

    function filterArr(item, index, arr){
        return item > 4;
    }
    
    [2, 5, 8, 1, 4].filter(filterArr);  // [5,8]

    6. map()

    使用方法:array.map(function(currentValue,index,arr), thisValue)
    返回值: 返回数组

    map()方法返回一个新数组,数组中的元素为原始数组元素调用函数处理后的值。

    function mapArr(item, index, arr){
        return item * 4;
    }
    
    [2, 5, 8, 1, 4].map(mapArr);  // [8,20,32,4,16]
    经常笔试和面试都会考到的一道题 ——实现一个map数组方法,以下是本人自己写的一个方法
    var arr = [2, 4, 8, 6, 1];
    
    Array.prototype.myMap = function (fn, thisValue) {
        var arr = this,
            len = arr.length,
            tmp = 0,
            result = [];
        thisValue = thisValue || null;
        for (var i = 0; i < len; i++) {
            var item = arr[i],
                index = i;
            tmp = fn.call(thisValue, item, index, arr);
            result.push(tmp);
        }
        return result
    }
    
    function mapArr(item, index, arr) {
        return item * 4;
    }
    arr.myMap(mapArr)   // [8, 16, 32, 24, 4]

    6. forEach()

    使用方法:array.forEach(function(currentValue, index, arr), thisValue)
    返回值: undefined

    forEach() 方法用于调用数组的每个元素,并将元素传递给回调函数。这个方法没有返回值。
    本质上与使用for循环迭代数组一样。

    var items = [1, 2, 4, 7, 3];
    var copy = [];
    
    items.forEach(function(item,index){
      copy.push(item*index);
    })
    
    console.log(items);  // [ 1, 2, 4, 7, 3 ]
    console.log(copy);  // [ 0, 2, 8, 21, 12 ]

    7. reduce() 与 reduceRight()

    使用方法:array.reduce(function(total, currentValue, currentIndex, arr), initialValue)
    返回值: 返回计算结果

    参数描述
    function(total,currentValue, index,arr)必需。用于执行每个数组元素的函数。
    initialValue可选。传递给函数的初始值

    函数参数

    参数描述
    total必需。初始值, 或者计算结束后的返回值。
    currentValue必需。当前元素
    currentIndex可选。当前元素的索引
    arr可选。当前元素所属的数组对象。

    这两个方法都会迭代数组的所有项,然后构建一个最终返回的值。其中,reduce()方法中数组的第一项开始,逐个遍历到最后;而reduceRight()则从数组的最后一项开始,向前遍历到第一项。

    如果没有设置initialValue,total的值为数组第一项,currentValue为数组第二项。
    如果设置了initialValue,则total的值就是initialValue,currentValue为数组第一项。

    var numbers = [65, 44, 12, 4];
     
    function getSum(total,currentValue, index,arr) {
        return total + currentValue;
    }
    
    var res = numbers.reduce(getSum);
    
    console.log(numbers);  // [ 65, 44, 12, 4 ]
    console.log(res);  //  125
    
    var numbers = [65, 44, 12, 4];
     
    function getSum(total,currentValue, index,arr) {
        return total + currentValue;
    }
    
    var res = numbers.reduce(getSum, 10);  // 初始值设置为10,所以最终结果也相应的加10
    
    console.log(res);  //  135
    具体reduce()方法用得好是能起到很大的作用的,对于批量修改从后台获取的数据十分有用,可以参考JS进阶篇--JS数组reduce()方法详解及高级技巧

    二、会改变原数组

    1. push()

    使用方法:array.push(item1, item2, ..., itemX)
    返回值: 返回新数组的长度

    push() 方法可向数组的末尾添加一个或多个元素,并返回新的长度。

    var arr= [65, 44, 12, 4];
    var arr1 = arr.push(2,5);
    
    console.log(arr); // [ 65, 44, 12, 4, 2, 5 ]
    console.log(arr1); // 6

    2. pop()

    使用方法:array.pop()
    返回值: 数组原来的最后一个元素的值(移除的元素)

    pop()方法用于删除并返回数组的最后一个元素。返回最后一个元素,会改变原数组。

    var arr = [65, 44, 12, 4];
    var arr1 = arr.pop();
    
    console.log(arr); // [ 65, 44, 12 ]
    console.log(arr1); //  4

    3. unshift()

    使用方法:array.unshift(item1,item2, ..., itemX)
    返回值: 返回新数组的长度

    unshift() 方法可向数组的开头添加一个或更多元素,并返回新的长度。返回新长度,改变原数组。

    var arr = [65, 44, 12, 4];
    var arr1 = arr.unshift(1);
    
    console.log(arr); // [ 1, 65, 44, 12, 4 ]
    console.log(arr1); //  5

    4. shift()

    使用方法:array.shift()
    返回值: 数组原来的第一个元素的值(移除的元素)

    shift() 方法用于把数组的第一个元素从其中删除,并返回第一个元素的值。返回第一个元素,改变原数组。

    var arr = [65, 44, 12, 4];
    var arr1 = arr.shift();
    
    console.log(arr); // [ 44, 12, 4 ]
    console.log(arr1); //   65

    5. sort()

    使用方法:array.sort(sortfunction)
    返回值: 返回排序后的数组(默认升序)

    sort() 法用于对数组的元素进行排序。
    排序顺序可以是字母或数字,并按升序或降序。
    默认排序顺序为按字母升序。

    P.S 由于排序是按照 Unicode code 位置排序,所以在排序数字的时候,会出现"10"在"5"的前面,所以使用数字排序,你必须通过一个函数作为参数来调用。

    var values = [0, 1, 5, 10, 15];
    values.sort();
    console.log(values);  // [ 0, 1, 10, 15, 5 ]
    
    values.sort(function(a, b){
      return a - b;
    })
    console.log(values);  //  [0, 1, 5, 10, 15 ]

    6. reverse()

    使用方法:array.reverse()
    返回值: 返回颠倒后的数组

    reverse() 方法用于颠倒数组中元素的顺序。返回的是颠倒后的数组,会改变原数组。

    var values = [0, 1, 5, 10, 15];
    values.reverse();
    console.log(values);  // [ 15, 10, 5, 1, 0 ]

    7. fill()

    使用方法:array.fill(value, start, end)
    返回值: 返回新的被替换的数组

    fill()方法用于将一个固定值替换数组的元素。

    参数描述
    value必需。填充的值。
    start可选。开始填充位置。
    end可选。停止填充位置(不包含) (默认为 array.length)
    var values = [0, 1, 5, 10, 15];
    values.fill(2);
    console.log(values);  // [ 2, 2, 2, 2, 2 ]
    
    values = [0, 1, 5, 10, 15];
    values.fill(2,3,4);
    console.log(values);  // [ 0, 1, 5, 2, 15 ]

    8. splice()

    使用方法:array.splice(index,howmany,item1,.....,itemX)

    返回值: 如果从 arrayObject 中删除了元素,则返回的是含有被删除的元素的数组

    splice()有多种用法:

    1、删除: 可以删除任意数量的项,只需要指定2个参数:要删除的第一项的位置和要删除的项数。splice(0,2) // 会删除数组中前两项

    2、插入: 可以向指定位置插入任意数量的项,只需提供3个参数:起始位置、0(要删除的项数)和要插入的项。如果要插入多个项,可以再传入第四、第五,以至任意多个项。splice(2,0,1,4) // 会从数组位置2的地方插入1和4

    3、替换: 可以向指定位置插入任意数量的项,且同时删除任意数量的项,只需提供3个参数:起始位置、要删除的项数和要插入的项。插入的项不必与删除的项数相等。splice(2,3,1,4) // 会从数组位置2删除两项,然后再从位置2的地方插入1和4

    // 删除
    var values = [4,8,0,3,7];
    var remove = values.splice(3,1);
    console.log(values);  // [ 4, 8, 0, 7 ]
    console.log(remove);  // [ 3 ]    删除第四项
    // 插入
    remove = values.splice(2,0,1,2);
    console.log(values);  // [ 4, 8, 1, 2, 0, 7 ]
    console.log(remove);  // []  从位置2开始插入两项,由于没有删除所有返回空函数
    // 替换
    remove = values.splice(2,2,6,9,10);
    console.log(values);  // [ 4, 8, 6, 9, 10, 0, 7 ]
    console.log(remove);  // [ 1, 2 ]  从位置2开始删除两项,同时插入三项

    以上就是javascript数组操作方法总结一览(附示例)的详细内容,更多请关注php中文网其它相关文章!

    声明:本文转载于:segmentfault思否,如有侵犯,请联系admin@php.cn删除
    专题推荐:javascript 数组
    上一篇:ES6中Async函数的详细介绍(附示例) 下一篇:如何二次封装axios并根据参数来实现多个请求多次拦截(代码)
    大前端线上培训班

    相关文章推荐

    • javascript数组详解_基础知识• javascript数组操作方法小结和3个属性详细介绍_基础知识• JavaScript数组深拷贝和浅拷贝的两种方法_javascript技巧• javascript数组操作总结和属性、方法介绍_基础知识• 怎么清空javascript数组_javascript技巧• javascript数组的使用_javascript技巧

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网