专栏首页前端达人「JS基础」Array 数组操作方法大全( 含ES6 )

「JS基础」Array 数组操作方法大全( 含ES6 )

关注前端达人,与你共同进步

开篇

因为数组操作的方法有很多,我们在实际项目中又会经常使用,本篇文章笔者一次性整理常用的数组操作方法 ( 包含 ES6 的 map、forEach、every、some、filter、find、from、of...等 ),熟悉了这些数组的操作方法,编起代码来也就会更加干净利落哟。

本篇文章阅读时间预计15分钟。

01

方法分类

因为数组操作的方法有很多,我们在实际项目中又会经常使用。下面是我自己针对这些方法做的简单分类,请看下表:

02

push()

push()可以将某些值加入到数组的最后一个位置,并且不限制添加数量(注:数组长度是有限制的),如果需要添加多项内容使用逗号隔开即可,加入后数组长度会增加。

let a = [1,2,3,4,5,6,7,8];
a.push(9, 10);
console.log(a); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

03

pop()

pop()会移除数组的最后一个元素。

let a = [1,2,3,4,5,6,7,8];
a.pop();
console.log(a); // [1, 2, 3, 4, 5, 6, 7]

04

shift()、unshift()

shift()会移除数组的第一个元素。

let a = [1,2,3,4,5,6,7,8];
a.shift();
console.log(a); // [2, 3, 4, 5, 6, 7, 8]

unshift()会将指定的元素添加到数组的第一个位置。

let a = [1,2,3,4,5,6,7,8];
a.unshift(100,200,300);
console.log(a); // [100, 200, 300, 1, 2, 3, 4, 5, 6, 7, 8]

05

reverse()

reverse()会将数组反转

let a = [1,2,3,4,5,6,7,8];
a.reverse();
console.log(a); // [8, 7, 6, 5, 4, 3, 2, 1]

06

splice()

splice()可以移除或新增数列的元素,它包含了三个参数,第一个是要移除或要添加的序列号( 必填),第二个是要移除的长度( 选填,若不填则从第一个参数序号位置开始,后方的所有元素都会被移除,若设定为0则不会有元素被移除),第三个是要替换的内容( 选填 )

let a = [1,2,3,4,5,6,7,8];
a.splice(5,1);
console.log(a);
// [1, 2, 3, 4, 5, 7, 8] ( 6 被移除了 )

添加第三个参数就能够添加或替换元素。

let a = [1,2,3,4,5,6,7,8];
a.splice(5,1,100);
console.log(a);
// [1, 2, 3, 4, 5, 100, 7, 8] ( 6 被移除,100加到第5个位置 )
let b = [1,2,3,4,5,6,7,8];
b.splice(5,3,100,200,300);
console.log(b);
// [1, 2, 3, 4, 5, 100, 200, 300] ( 6,7,8 被移除,100,200,300 加到第 5,6,7 个位置 )
let c = [1,2,3,4,5,6,7,8];
c.splice(5,0,100);
console.log(c);
// [1, 2, 3, 4, 5, 100, 6, 7, 8] ( 沒有元素被移除,100 加到第 5 个位置 )

07

sort()

sort()可以针对数组的元素进行排序,里头包含了一个排序用的判断函数,函数内必须包含两个参数,这两个参数分别代表数组里的第n个和第n+1 个元素,通过比较第n和第n+1个元素的大小来进行排序。

let a = [1,3,8,4,5,7,6,2];
a.sort((x,y) => y - x);
console.log(a);
// [8, 7, 6, 5, 4, 3, 2, 1]
a.sort((x,y) => x - y);
console.log(a);
// [1, 2, 3, 4, 5, 6, 7, 8]

如果不使用判断函数,默认会将元素转换成字串,并采用unicode来判断,这也会造成某些数字的排序错误,如下段示例:

let a = [1,3,8,4,5,7,6,2,9,10,11];
a.sort();
console.log(a); // [1, 10, 11, 2, 3, 4, 5, 6, 7, 8, 9]

08

copyWithin()

copyWithin()能复制数组中的某些元素,并将它们放到同一个数组指定的位置,copyWithin()有三个参数,第一个是要置换的位置(必填),第二个是从什么位置开始复制(选填,预设0 ),第三个是停止复制的元素的前一个位置(选填,默认值等于数组长度)。

let a = [1,2,3,4,5,6,7,8];
a.copyWithin(2);
console.log(a); // [1,2,1,2,3,4,5,6] ( 因 7 和 8 超过数组长度,只出只复制到6 )
let b = [1,2,3,4,5,6,7,8];
b.copyWithin(3,1,3);
console.log(b); // [1,2,3,2,3,6,7,8] ( 复制 2,3 取代 4,5 )

09

fill()

fill()会把数组中所有元素,置换为指定的值,fill()有三个参数,第一个是准备要置换的内容(必填),第二个是从什么位置开始置换(选填,不设定就全部置换) ,第三个是停止置换的元素的前一个位置(选填,预设等于数组长度)。

let a = [1,2,3,4,5,6,7,8];
a.fill('a');
console.log(a); // ['a','a','a','a','a','a','a','a']
let b = [1,2,3,4,5,6,7,8];
b.fill('b',3,5);
console.log(b); // [1,2,3,'b','b',6,7,8]

10

length()

length可以取得数组的长度。

let a = [1,2,3,4,5,6,7,8];
console.log(a.length); // 8

11

indexOf()、lastIndexOf()

indexOf()会判断数组中是否包含某个值,判断的方式为「由左而右」,如果有包含就返回这个值在数组中的索引值,如果没有就返回-1,有两个参数,第一个参数表示要判断的值( 必填),第二个参数表示从数组的哪个位置开始判断( 选填,预设为0 )。

let a = [1,2,3,4,5,6,7,8];
console.log(a.indexOf(4)); // 3
console.log(a.indexOf(4,5));
// -1 ( 在6,7,8中搜索有沒有4 )

lastIndexOf()会判断数组中是否包含某个值,判断的方式为「由右而左」,如果有包含就返回这个值在数组中的索引值,如果没有就返回-1,这个方法有两个参数,第一个参数表示要判断的值( 必填),第二个参数表示判断从数组的哪个位置开始从右往左查找( 选填,默认为整个数组长度-1 )。

let a = [1,2,3,4,5,6,7,8];
console.log(a.lastIndexOf(3)); // 2
console.log(a.lastIndexOf(3,1));
// -1 ( 只在1,2中判断,所以沒有 3 )

12

find()

find()会将数组中的「每一个」元素带入指定的函数内做判断,并会返回第一个符合判断条件的元素,如果没有元素符合则会返回undefined。

let a = [1,2,3,4,5,6,7,8];
console.log(a.find(e => e > 3)); // 4
console.log(a.find(e => e < 0)); // undefined

13

findIndex()

findIndex()会将数组中的「每一个」元素带入指定的函数内做判断,并会返回第一个符合判断条件元素的位置索引,如果没有元素符合则会返回-1。

let a = [1,2,3,4,5,6,7,8];
console.log(a.findIndex(e => e > 3)); // 3
console.log(a.findIndex(e => e < 0)); // -1

014

filter()

filter()会将数组中的「每一个」元素带入指定的函数内做判断,如果元素符合判断条件则会返回,组成一个新的数组。

let a = [1,2,3,4,5,6,7,8];
console.log(a.filter(e => e > 3));
// [4, 5, 6, 7, 8]
console.log(a.filter(e => e%2 == 0));
// [2, 4, 6, 8]

15

forEach()

forEach()会将数组中每个元素套用到指定的函数里进行运算,函数有三个参数,第一个参数表示每个元素的值( 必填),第二个参数为该元素的索引值( 选填),第三个参数则表示原本的数组( 选填)。

let a = [1,2,3,4,5];
let b = 0;
a.forEach(item => {
    b = b + item;
});
console.log(b); // 15 ( 1+2+3+4+5 )

如果结合第二和第三个参数进行搭配使用,就能做到改变原本数组的效果。

let a = [1,2,3,4,5];
a.forEach((item, index, arr) => {
    arr[index] = item * 10;
});
console.log(a); // [10,20,30,40,50]

16

join()

join()可以将数组中所有元素,变成由指定的字符分割合并在一起组合成字符串进行呈现,若没有指定字符默认会用「逗号」合并。

let a = [1,2,3,4,5,6,7,8];
console.log(a.join()); // 1,2,3,4,5,6,7,8
console.log(a.join('')); // 12345678
console.log(a.join('@@'));
// 1@@2@@3@@4@@5@@6@@7@@8

17

concat()

concat()可以将两个数组合并在一起,如果是使用ES6语法也可以用扩展运算符...来代替。

let a = [1,2,3,4,5];
let b = [6,7,8,9];
let c = a.concat(b);
let d = [...a, ...b];
// 使用 ...
console.log(c);
// [1,2,3,4,5,6,7,8,9]
console.log(d);
// [1,2,3,4,5,6,7,8,9]

18

slice()

slice()可以截取出数组某部份的元素为一个新的数组,有两个必填的参数,第一个是起始位置,第二个是结束位置( 操作时数字减1 )。

let a = [1,2,3,4,5,6,7,8];
let b = a.slice(2,4);
console.log(b); // [3, 4]

19

map()

map()会处理数组中每个元素,最后返回一个新的数组,里头有一个函数( 必填) 和一个返回函数里的this参数( 选填),函数内又包含三个参数,第一个是每个元素的值( 必填),第二个是当前元素的索引值( 选填),第三个是当前的数组( 选填)。

let a = [1,2,3,4,5,6,7,8];
let b = a.map(e => {
    return e + 10;
});
console.log(b); // [11, 12, 13, 14, 15, 16, 17, 18]

使用第二个和第三个参数的示例:

let a = [1,2,3,4,5,6,7,8];
let b = a.map((e,i,arr) => {
    return `${e}${i}${arr.find(e => e%5 == 1)}`;
// 组合成「元素 + 索引值 + 除以五余数为1的第一个元素」
});
console.log(b);
// ['101', '211', '321', '431', '541', '651', '761', '871']

如果要使用回调函数里this的参数,则「不能使用」箭头函数,因为箭头函数的this指向和函数的this指向不同,所以要用一般的函数处理。

let a = [1,2,3,4,5,6,7,8];
let b = a.map(function(e){
    return e + this; // 此处的 this为10
}, 10);
console.log(b); // [11, 12, 13, 14, 15, 16, 17, 18]

20

reduce()、reduceRight()

reduce()可以将数组中每个元素进行计算,每次计算的结果会再与下个元素作计算,直到结束为止,里头包含一个函数( 必填) 和初始计算的数值( 选填),函数内有四个参数,第一个是计算的值( 必填),第二个是取得的元素(必填),第三个是该元素的索引值( 选填),第四个是原本的数组(选填)。

let a = [1,2,3,4,5,6,7,8];
let b = a.reduce(function(total, e){
    return total + e;
});
console.log(b); // 36 ( 1+2+3+4+5+6+7+8=36 )

reduceRight()和reduce()大同小异,只是其计算方式是由右到左,对于加法来说没什么影响,但对于减法而言就有差异。

let a = [1,2,3,4,5,6,7,8];
let b = a.reduce(function(total, e){
    return total - e;
});
console.log(b);
// -34 ( 1-2-3-4-5-6-7-8 = -34 )
let c = a.reduceRight(function(total, e){
    return total - e;
});
console.log(c);
// -20 ( 8-7-6-5-4-3-2-1 = -20 )

21

flat()

flat()可以将一个多维数组的深度转成一维(扁平化或称作降维),它有一个选填的参数,代表要转换的深度数字,预设为1(只展开一层放到一维数组里,如果是2,只展开2层放到一维数组里),如果深度有很多层,可使用Infinity来全部展开成一维数组。

let a = [1,2,[3],[4,[5,[6]]]];
let b = a.flat();
let c = a.flat(2);
let d = a.flat(Infinity);
console.log(b); // [1, 2, 3, 4, [5, [6]]]
console.log(c); // [1, 2, 3, 4, 5, [6]]
console.log(d); // [1, 2, 3, 4, 5, 6]

22

flatMap()

flatMap()的方法等于map()和flat()的组合,在运算后直接将数组扁平化处理。

let a = [1,2,[3],[4,5]];
let b = a.flatMap(e => e+1);
let c = a.map(e => e+1).flat();
console.log(b);
// [2, 3, "31", "4,51"] ( 可以看到 b 和 c 得到的结果相同 )
console.log(c);
// [2, 3, "31", "4,51"]

23

Array.isArray()

Array.isArray()能判断一个元素是否为数组,如果是就返回true,不然就返回false。

let a = [1,2,3,4,5,6,7,8];
let b = 123;
let c = 'hello';
let d = {d1:1,d2:2};
console.log(Array.isArray(a)); // true
console.log(Array.isArray(b)); // false
console.log(Array.isArray(c)); // false
console.log(Array.isArray(d)); // false

24

Array.from()

Array.from()会将「类数组」或是「可迭代的对象」转换成数组,Array.from()有两个参数,第一个参数为「类数组对象」或「可迭代的对象」(必填),第二个参数则是改变转换成数组元素的函数(选填)。

类数组对象具有length 属性以及索引化index 的元素,可迭代对象表示具有可以利用迭代的方式取得它自己本身的元素,例如Map 和Set...等。( 参考MDN 说法 )

let a = 'abcde';
let b = Array.from(a);
console.log(b); // ['a','b','c','d','e']
let c = Array.from(a, e => e + e);
console.log(c); // ['aa','bb','cc','dd','ee']

类数组对象写法必须包含length 属性,且对象的key须为0开始的数字,对应转换后的元素索引。

let a = {
    '0': 14,
    '2': 13,
    '1': 7,
    '3': 9,
    '4': 6,
    length: 5
};
let b = Array.from(a);
console.log(b); // [14,7,13,9,6]

25

Array.of()

Array.of()可以快速将数字、字串等内容,转换成数组。

let a = Array.of(1,'a',2,'b',3);
console.log(a);
// [1, "a", 2, "b", 3]

26

toString()

toString()会把整个数组转换成字符串。

let a = [1,2,3,4,5,6,7,8];
let b = a.toString();
console.log(b);
// 1,2,3,4,5,6,7,8

27

every()

every()会将数组中的「每一个」元素带入指定的函数内做判断,只要有任何一个元素不符合判断条件,会回返回false,如果全部符合,就会回传true。

let a = [1,2,3,4,5,6];
console.log(a.every(e => e > 3));
// fasle ( 因为1、2 小于 3,3 等于 3 )
console.log(a.every(e => e > 0));
// true

28

some()

some()会将数组中的「每一个」元素带入指定的函数内做判断,只要有任何一个元素符合判断条件,就会返回true,如果全都不符合,才会返回false。

let a = [1,2,3,4,5,6];
console.log(a.some(e => e > 3));
// 返回 true,因为 4、5、6 大于 3
console.log(a.some(e => e > 6));
// 返回 fasle,因为全都小于或等于 6

29

includes()

includes()会判断数组中是否包含某个值,如果有包含就返回true,否则返回false,有两个参数,第一个参数表示要判断的值( 必填),第二个参数表示从数组的哪个位置开始判断( 选填)。

let a = [1,2,3,4,5,6,7,8];
console.log(a.includes(2));
// true
console.log(a.includes(2,2));
// false ( 在 3,4,5,6,7,8 查找有没有 2 )

30

valueOf()

valueOf()会返回数组的原始值,如果原本的数组有修改,那么返回的原始值也会跟着改变(相当浅复制)

let a = [1,2,3,4,5,6,7,8];
let b = a.valueOf();
console.log(a); 
// [1, 2, 3, 4, 5, 6, 7, 8]
let c = a.valueOf();
a.shift();
console.log(a); 
// [2, 3, 4, 5, 6, 7, 8]
console.log(b); 
// [2, 3, 4, 5, 6, 7, 8] ( 因为 a 的原始值更新了,所以 b 也变了 )
console.log(c); 
// [2, 3, 4, 5, 6, 7, 8]

31

keys()

keys()会返回数组中的每一个索引值( key )成为一个新的Array Iterator对象,因为是Array Iterator对象,可以使用for...of进行迭代。

let a = ['a','b','c','d','e'];
let b = a.keys();
for (let key of b) {
    console.log(key); // 1、2、3、4、5
}

今天的总结就到这里,希望能在日常工作中能帮助到你,如果你喜欢本文,建议收藏本文,分享给更多的人看到。

本文分享自微信公众号 - 前端达人(frontend84)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-08-11

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 手写源码系列(二)——Promise相关方法

    本文首发于知乎专栏——前端面试题汇总,大家可以通过文章底部的阅读原来来访问原文地址

    用户1687375
  • 《机器学习》(入门1-2章)

    这篇笔记适合机器学习初学者,我是加入了一个DC算法竞赛的一个小组,故开始入门机器学习,希望能够以此正式进入机器学习领域。 在网上我也找...

    mantch
  • LeetCode - 查找和替换模式

    原题地址:https://leetcode-cn.com/problems/find-and-replace-pattern/

    晓痴
  • Arrays.asList存在的坑

    来源:juejin.im/post/5d10e52ee51d454f6f16ec11

    Java团长
  • 干货收藏 | Java程序员必备的一些流程图

    来源:juejin.im/post/5d214639e51d4550bf1ae8df

    Java团长
  • 3D Object Recognition and 6DOF Pose Estimation

    pcl::keypoints focus on CorrespondenceGrouping and Hypothesis Verification. In...

    点云PCL博主
  • 泛型程序设计详解(一)

      泛型是C#和.Net的一个重要概念,泛型不仅是C#编程语言中的一部分,而且与程序集中的IL(Intermediate Language)代码紧密的集成。

    小世界的野孩子
  • 点云及PCL编程基础

    上周点云公众号开启了学习模式,由博主分配任务,半个月甚至一个月参与学习小伙伴的反馈给群主,并在微信交流群中进行学术交流,加强大家的阅读文献能力,并提高公众号的分...

    点云PCL博主
  • 浅析 Kubernetes原生NetworkPolicy 网络策略,让更安全的容器运行环境唾手可得

    k8s中的网络策略主要分为原生 NetworkPolicy 和第三方网络插件提供的网络策略。本文将主要分析原生Networkpolicy的网络策略。

    灵雀云
  • 机器人视觉的九大挑战

    机器人视觉解决方案是我们实现机器人视野的几大挑战。即便变得越来越简单易用,还是有一些棘手的问题。很多因素影响机器人在环境中的视觉,任务设置和工作场所。这里有9个...

    小白学视觉

扫码关注云+社区

领取腾讯云代金券