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. find() —— ES6新增的方法

使用方法：array.find(function(currentValue, index, arr),thisValue)

返回值：返回符合测试条件的第一个数组元素值，如果没有符合条件的则返回undefined

find()方法传入一个回调函数，找到数组中符合当前搜索规则的第一个元素，返回它，并且终止搜索。

filter()和find()方法的区别：

filter()方法是对数组的每一项都进行检查，最后返回结果为true的数组；而find()方法当找到符合的元素时，立刻返回该元素，之后的元素不再进行检查；

filter()方法如果没有找到符合的元素返回空的数组；而find()方法没有找到符合的元素则返回undefined

function filterArr(item, index, arr){

    return item > 4;

}

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

    return item > 10;

}

[2, 5, 8, 1, 4].filter(findArr);  // [][2, 5, 8, 1, 4].find(findArr); // undefined

7. 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]

8. 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 ]

9. 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);  //  125var numbers = [65, 44, 12, 4]; 

function getSum(total,currentValue, index,arr) {    return total + currentValue;

}var res = numbers.reduce(getSum, 10);  // 初始值设置为10，所以最终结果也相应的加10console.log(res);  //  135

具体reduce()方法用得好是能起到很大的作用的，对于批量修改从后台获取的数据十分有用，可以参考JS进阶篇--JS数组reduce()方法详解及高级技巧

10. indexOf() 和 lastIndexOf()

使用方法：array.indexOf(item,start)

返回值：元素在数组中的位置,如果没与搜索到则返回 -1

indexOf()和lastIndexOf()方法都接收两个参数：要查找的项和（可选）查找起点位置的索引。

其中，indexOf()方法从数组开头开始向后查找；lastIndexOf()方法从数组末尾开始向前查找。

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

console.log(n.indexOf(4));  // 3console.log(n.lastIndexOf(4));  // 5console.log(n.indexOf(4,4));  // 5console.log(n.lastIndexOf(4,4));  // 3

indexOf()可以使用在数组去重中，如下：

var n = [1, 2, 3, 4, 5, 4, 3, 2, 1];function fn(arr) {    var result = [],

        len = arr.length;    for (var i = 0; i < len; i++) {        var item = arr[i];        if (result.indexOf(item) < 0) {

            result.push(item);

        }

   }    return result;

}console.log(fn(n));  // [1, 2, 3, 4, 5]

二、会改变原数组

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() —— ES6新增的方法

使用方法：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()有多种用法：

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

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

替换:可以向指定位置插入任意数量的项，且同时删除任意数量的项，只需提供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开始删除两项，同时插入三项

9. copyWithin() —— ES6新增的方法

使用方法：array.copyWithin(target, start, end)

返回值：返回新复制的数组

copyWithin()方法选择数组的某个下标，从该位置开始复制数组元素，默认从0开始复制。也可以指定要复制的元素范围。

var fruits = [1,2,3,4,5,6];

fruits.copyWithin(1);  // [ 1, 1, 2, 3, 4, 5 ]   从下标为1的元素开始，复制数组fruits.copyWithin(3, 0, 3);  // [ 1, 2, 3, 1, 2, 3 ]  从下标为3的元素开始，复制数组坐标为0到2的数组

三、其他

1. form() —— ES6新增的方法

使用方法：Array.from(object, mapFunction, thisValue)

返回值：数组对象

from()方法用于字符串、拥有length属性的对象(伪数组)或可迭代的对象(Set/Map)来返回一个数组。

var myArr = Array.from("RUNOOB");

var s = new Set(['A', 'B', 'C']);

var m = new Map([[1, 'x'], [2, 'y'], [3, 'z']]);

var s1 = Array.from(s);

var m1 = Array.from(m);

console.log(myArr);  // [ "R", "U", "N", "O", "O", "B" ]

console.log(s1);  // [ "A", "B", "C" ]

console.log(m1);  // [ [ 1, "x" ], [ 2, "y" ], [ 3, "z" ]]

对于伪数组转换为标准数据除了Array.prototype.slice.call(arguments)，还可以使用以下方法：

function test(){     var arg = Array.from(arguments);

     arg.push(5);     console.log(arg);  // [ 1, 2, 3, 4, 5 ]}

test(1,2,3,4);

还可以结合new Set()进行数组的去重

> function dedupe(array){return Array.from(new Set(array));

}

dedupe([1,1,2,3]) //[1,2,3]

最后

“相信有很多想学前端的小伙伴，今年年初我花了一个月整理了一份最适合2018年学习的web前端干货，从最基础的HTML+CSS+JS到移动端HTML5到各种框架都有整理，送给每一位前端小伙伴，53763，

1707这里是小白聚集地，欢迎初学和进阶中的小伙伴。”

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 212,080评论 6赞 493
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 90,422评论 3赞 385
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 157,630评论 0赞 348
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 56,554评论 1赞 284
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 65,662评论 6赞 386
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 49,856评论 1赞 290
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 39,014评论 3赞 408
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 37,752评论 0赞 268
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 44,212评论 1赞 303
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,541评论 2赞 327
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,687评论 1赞 341
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 34,347评论 4赞 331
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 39,973评论 3赞 315
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,777评论 0赞 21
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,006评论 1赞 266
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 46,406评论 2赞 360
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 43,576评论 2赞 349