JS 数组方法整理

1. join()

功能：

将数组中的所有元素放入一个字符串。元素是通过指定的分隔符进行分隔的，默认使用’,'号分割，不改变原数组
演示:

  let arr = [1,2,3];
  console.log(arr.join()); // 1,2,3
  console.log(arr); // [1,2,3]

2. concat()

功能：
用于连接两个或多个数组。该方法不会改变现有的数组，仅会返回被连接数组的一个副本

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

3. push()

功能：
可向数组的末尾添加一个或多个元素，并返回新的长度。末尾添加，返回的是长度，会改变原数组

  let arr1 = [1,2,3];
  let arr2 = arr1.push(4);
  console.log(arr1); // [1,2,3,4]
  console.log(arr2); // 4

  push 方法可以一次添加多个元素 push(item1,item2,item3...)

4. pop()

功能：
用于删除并返回数组的最后一个元素。返回最后一个元素，会改变原数组。

  let arr = [1,2,3];
  console.log(arr.pop()); // 3
  console.log(arr); // [1,2]

5. shift()

功能：
用于把数组的第一个元素从其中删除，并返回第一个元素的值。返回第一个元素，改变原数组。

  let arr = [1,2,3];
  console.log(arr.shift()); // 1
  console.log(arr); // [2,3]

6. unshift()

功能;
向数组的开头添加一个或更多元素，并返回新的长度。返回新长度，改变原数组。

  let arr = [1,2,3];
  console.log(arr.unshift(3,5)); // 5
  console.log(arr); // [3,5,1,2,3]
  tip: 该方法可以不传参数， 不传参数就是不增加元素

7. slice()

功能;
返回一个新的数组，包含从 start 到 end （不包括该元素）的 arrayObject 中的元素。返回选定的元素，该方法不会修改原数组。

  let arr = [1,2,3,4];
  console.log(arr.slice(1,3)); // [2,3]
  console.log(arr); // [1,2,3,4]
  tip: 该方法可以不传参数， 不传参数就是不增加元素

8. splice()

功能;
可删除从 index 处开始的零个或多个元素，并且用参数列表中声明的一个或多个值来替换那些被删除的元素。如果从 arrayObject 中删除了元素，则返回的是含有被删除的元素的数组。splice() 方法会直接对数组进行修改。

  let arr = [1,2,3,4];
  console.log(arr.splice(1,0,6)); // []
  console.log(arr); // [1,6,2,3,4]

  let arr1=[1,2,3,4]
  console.log(arr1.splice(1,2,6)); // [2,3]
  console.log(arr1); // [1,6,4]

9. substr()和substring()

功能;
相同点：如果只是写一个参数，两者的作用都一样：都是是截取字符串从当前下标以后直到字符串最后的字符串片段。
substr(startIndex);
substring(startIndex);

    let str="123456789"
    console.log(str.substr(2)) // "3456789"
    console.log(str.substring(2)) // "3456789"

不同点：第二个参数
substr（startIndex,lenth）： 第二个参数是截取字符串的长度（从起始点截取某个长度的字符串）；
substring（startIndex, endIndex）： 第二个参数是截取字符串最终的下标 （截取2个位置之间的字符串,‘含头不含尾’）。

    let str="123456789"
    console.log(str.substr(2,5)) // "34567"
    console.log(str.substring(2,5)) // "345"

10. sort 排序

功能：按照 Unicode code 位置排序，默认升序

  var arr1 =['cc','ee','aa','33']
  arr1.sort() // ["33", "aa", "cc", "ee"]

  let arr = [20,10,2,1,3];
  arr.sort();// [1, 10, 2, 20, 3]
  arr.sort(function(a,b){
    return a-b;    //升序
  }); //[1, 2, 3, 10, 20]
  arr.sort(function(a,b){
    return b-a;    //降序
  }); //[20,10,3,2,1]

11. reverse()

功能：
方法用于颠倒数组中元素的顺序。返回的是颠倒后的数组，会改变原数组。

  let arr = [1,2,3,4];
  console.log(arr.reverse()); // [4,3,2,1]
  console.log(arr); // [4,3,2,1]

12. indexOf() 和 lastIndexOf()

功能：
都接受两个参数：查找的值、查找起始位置不存在，返回 -1 ；存在，返回位置。
indexOf 是从前往后查找;
lastIndexOf 是从后往前查找。

  let arr = [1,2,3,4,3,6,3];;
  arr.indexOf(3) // 2
  arr.lastIndexOf(3) // 6

  arr.indexOf(2) // 1
  arr.lastIndexOf(2) // 1

  arr.indexOf(7) // -1
  arr.lastIndexOf(7) // -1

13. every() 和 some()

功能：
every() 判断数组中每一项都是否满足条件，只有所有项都满足条件，才会返回true。
some() 判断数组中是否存在满足条件的项，只要有一项满足条件，就会返回true。

  let arr = [1, 2, 3, 4, 5, 6];
  arr.every(x=>x>0);//return true;
  arr.every(x=>x>5);//return false;
  arr.some(x=>x>5);//return true;

14. filter()

功能：
过滤功能，数组中的每一项运行给定函数，返回满足过滤条件组成的数组。 接受三个参数
element 数组中当前正在处理的元素。
index可选 正在处理的元素在数组中的索引。
array可选 调用了 filter 的数组本身。

  let arr = [1,2,3,4,5,6,3,1];
  arr.filter(function(v,i,self){
    return self.indexOf(v) == i;
  });
  //[1, 2, 3, 4, 5, 6]

15. map()

功能：
调用的数组的每一个元素传递给指定的函数，并返回一个新数组 ,不修改原数组。

  let arr = [2,3,4,5,6];
  let arr1= arr.map(function(x){
    return x*x;
  });
  console.log(arr1); // [4, 9, 16, 25, 36]
  console.log(arr); // [2, 3, 4, 5, 6]

16. forEach()

功能：
从头至尾遍历数组，为每个元素调用指定函数
输入为一个待遍历函数，函数的参数依次为：数组元素、元素的索引、数组本身

  let arr = [2,3,4,5,6];
  let arr1=[];

  arr.forEach(function(item){
    arr1.push(item)
  });
  console.log(arr1); // [2,3,4,5,6]
  console.log(arr); // [2, 3, 4, 5, 6]

17. reduce() 和 reduceRight()

功能：
reduce() 两个参数：函数和递归的初始值。从数组的第一项开始，逐个遍历到最后
reduceRight() 从数组的最后一项开始，向前遍历到第一项

  //可以用reduce快速求数组之和
  let arr=[1,2,3,4];
  arr.reduce(function(a,b){
    return a+b;
  }); //10

ES6操作数组的方法

1. find() 和 findIndex()

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

find方法的回调函数可以接受三个参数，依次为当前的值、当前的位置和原数组。

  let arr=[1,2,3,4];
  console.log(arr.find(v => v == 2)) // 2
  console.log(arr.findIndex(v => v == 2)) // 1

2. entries()，keys() 和 values()

功能：
相同点： 它们都返回一个遍历器对象
不同点： 可以用for...of循环进行遍历，唯一的区别是
keys()是对键名的遍历、
values()是对键值的遍历，
entries()是对键值对的遍历。

  for (let index of ['a', 'b'].keys()) {
  console.log(index);
}
// 0
// 1

for (let elem of ['a', 'b'].values()) {
  console.log(elem);
}
// 'a'
// 'b'

for (let [index, elem] of ['a', 'b'].entries()) {
  console.log(index, elem);
}
// 0 "a"
// 1 "b"

3. Array.from()

功能;
Array.from方法用于将两类对象转为真正的数组：类似数组的对象（array-like object）和可遍历（iterable）的对象（包括 ES6 新增的数据结构 Set 和 Map）

  let arr = new Set(['a','b'])
  Array.from(arr) // ['a','b']

3. includes()

功能：
Array.prototype.includes方法返回一个布尔值，表示某个数组是否包含给定的值，与字符串的includes方法类似。

  [1, 2, 3].includes(2)     // true
  [1, 2, 3].includes(4)     // false
  [1, 2, NaN].includes(NaN) // true

该方法的第二个参数表示搜索的起始位置，默认为0。如果第二个参数为负数，则表示倒数的位置，如果这时它大于数组长度（比如第二个参数为-4，但数组长度为3），则会重置为从0开始。

  [1, 2, 3].includes(3, 3);  // false
  [1, 2, 3].includes(3, -1); // true

4. flat() 和 flatMap()

功能：
数组的成员有时还是数组，Array.prototype.flat()用于将嵌套的数组“拉平”，变成一维的数组。该方法返回一个新数组，对原数据没有影响。

  [1, 2, [3, 4]].flat()
  // [1, 2, 3, 4]

flat()默认只会“拉平”一层，如果想要“拉平”多层的嵌套数组，可以将flat()方法的参数写成一个整数，表示想要拉平的层数，默认为1。
如果不管有多少层嵌套，都要转成一维数组，可以用Infinity关键字作为参数。

  [1, 2, [3, [4, 5]]].flat()
  // [1, 2, 3, [4, 5]]

  [1, 2, [3, [4, 5]]].flat(2)
  // [1, 2, 3, 4, 5]

  [1, [2, [3]]].flat(Infinity)
  // [1, 2, 3]

flatMap()方法对原数组的每个成员执行一个函数（相当于执行Array.prototype.map()），然后对返回值组成的数组执行flat()方法。该方法返回一个新数组，不改变原数组。
flatMap()只能展开一层数组。

  // 相当于 [[2, 4], [3, 6], [4, 8]].flat()
  [2, 3, 4].flatMap((x) => [x, x * 2])
  // [2, 4, 3, 6, 4, 8]

  // 相当于 [[[2]], [[4]], [[6]], [[8]]].flat()
  [1, 2, 3, 4].flatMap(x => [[x * 2]])
  // [[2], [4], [6], [8]]

数组的空位

注意，空位不是undefined，一个位置的值等于undefined，依然是有值的。空位是没有任何值，in运算符可以说明这一点。

  0 in [undefined, undefined, undefined] // true
  0 in [, , ,] // false

上面代码说明，第一个数组的 0 号位置是有值的，第二个数组的 0 号位置没有值。

ES5 对空位的处理，已经很不一致了，大多数情况下会忽略空位。

forEach(), filter(), reduce(), every() 和some()都会跳过空位。
map()会跳过空位，但会保留这个值
join()和toString()会将空位视为undefined，而undefined和null会被处理成空字符串。

  // forEach方法
  [,'a'].forEach((x,i) => console.log(i)); // 1

  // filter方法
  ['a',,'b'].filter(x => true) // ['a','b']

  // every方法
  [,'a'].every(x => x==='a') // true

  // reduce方法
  [1,,2].reduce((x,y) => x+y) // 3

  // some方法
  [,'a'].some(x => x !== 'a') // false

  // map方法
  [,'a'].map(x => 1) // [,1]

  // join方法
  [,'a',undefined,null].join('#') // "#a##"

  // toString方法
  [,'a',undefined,null].toString() // ",a,,"
  ES6 则是明确将空位转为undefined。

Array.from方法会将数组的空位，转为undefined，也就是说，这个方法不会忽略空位。

  Array.from(['a',,'b'])
  // [ "a", undefined, "b" ]

扩展运算符（...）也会将空位转为undefined。

  [...['a',,'b']]
  // [ "a", undefined, "b" ]

copyWithin()会连空位一起拷贝。

  [,'a','b',,].copyWithin(2,0) // [,"a",,"a"]

fill()会将空位视为正常的数组位置。

  new Array(3).fill('a') // ["a","a","a"]

for...of循环也会遍历空位。

  let arr = [, ,];
  for (let i of arr) {
    console.log(1);
  }
  // 1
  // 1

上面代码中，数组arr有两个空位，for...of并没有忽略它们。如果改成map方法遍历，空位是会跳过的。

entries()、keys()、values()、find()和findIndex()会将空位处理成undefined。

  // entries()
  [...[,'a'].entries()] // [[0,undefined], [1,"a"]]

  // keys()
  [...[,'a'].keys()] // [0,1]

  // values()
  [...[,'a'].values()] // [undefined,"a"]

  // find()
  [,'a'].find(x => true) // undefined

  // findIndex()
  [,'a'].findIndex(x => true) // 0

由于空位的处理规则非常不统一，所以建议避免出现空位。

参考资料

阮一峰ECMAScript 6入门

MDN Array

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