JavaScript的常用数组方法---不改变原数组系列

小麦_gz
355 阅读4分钟

本文已参与「新人创作礼」活动，一起开启掘金创作之路。

前言

大家好，我是小麦，数组在我们开发项目的时候肯定会遇到，并且我们会对这个数组数据进行一系列操作，获得我们所需要的数据，今天我们就聊聊JS数组的常用方法，我将会以(不改变原数组)与(改变原数组)两种不同类型的方法进行介绍。

不改变原数组的方法

不改变原数组的方法有11种，它们分别是(concat, map, filter, join, every, some, indexOf, slice, forEach, reduce, reduceRight)

一、concat()

定义： 该方法可以连接两个或多个数组，并将新的数组返回，该方法不会对原数组产生影响。
示例:

// Array.concat(arr1, arr2, ...);
let arr = [a, b, c];
let arr1 = [d, e, f];
let arr2 = [1, 2, 3];
let result = arr.concat(arr1, arr2);
// 得到 result = [a, b, c, d, e, f, 1, 2, 3];

二、map()

定义： 用于遍历原数组的每一项，返回一个新的数组，原数组不改变（注意该方法此处和forEach的区别）。
示例：

// map((value, index, self) => {})
// value(遍历数组的数据)，index(对应的索引)，self(数组自身)
 let arr = [a, b, c, d, e, f];
 let result = arr.map((value, index, self) => {
     console.log(value + "--" + index + "--" + (arr === self)); // 打印1
     return `元素${index + 1}:${value}`
 })
 console.log("原数组：", arr); // 打印2
 console.log("新数组：", result); // 打印3
 
 // 打印1的结果为：
 // a--0--true
 // b--1--true
 // c--2--true
 // d--3--true
 // e--4--true
 // f--5--true
 
 /* --------- */
 // 打印2，打印3的结果分别为：
 // 原数组：[a, b, c, d, e, f]
 // 新数组：[元素1:a, 元素2:b, 元素3:c, 元素4:d, 元素5:e, 元素6:f]

三、filter()

定义： 过滤数组中符合条件的元素并返回一个新的数组。
示例：

let arr = [1, 2, 3, 4, 5];
let newArr = arr.filter(item => item>2)
// 得到 newArr = [3, 4, 5];

四、join()

定义： 将数组的每一项用指定字符连接形成一个字符串。默认连接字符为 "," 逗号。
示例：

let arr = [a, b, c, d, e, f];
let str = arr.join("-");
// 得到 str = "a-b-c-d-e-f"

五、every()

定义： 检测数组所有元素是否都符合指定条件（通过函数提供），它不会对空数组进行检测，并且不会改变原数组。

  • 如果数组中检测到有一个元素不满足，则整个表达式返回false，且剩余的元素不会再进行检测。
  • 如果所有元素都满足条件，则返回 true。

示例：

let arr = [5, 6, 7, 8];
let result = arr.every(x => x>4);
// 得到 result = true;

六、some()

定义： 用于检测数组中的元素是否有满足指定条件的，若满足返回true，否则返回false(注意与every()的区别)。
示例：

let arr = [5, 6, 7, 8];
let result = arr.some(x => x>7);
// 得到 result = true;

七、indexOf()

定义： 检测当前值在数组中第一次出现的位置索引。
示例：

// array.indexOf(item, start) item: 查找的元素 start:字符串中开始检索的位置,默认为0。
let arr = [1, 2, 3, 4, 5];
let result = arr.indexOf(2);
// 得到 result = 1;

八、slice()

定义： 按照条件查找出其中的部分内容。
参数：

  • array.slice(n, m)，从索引n开始查找到m处（不包含m）
  • array.slice(n) 第二个参数省略，则一直查找到末尾
  • array.slice(0) 原样输出内容，可以实现数组克隆
  • array.slice(-n,-m) slice支持负参数，从最后一项开始算起，-1为最后一项，-2为倒数第二项

示例：

let arr = [1, 2, 3, 4];
let result = arr.slice(-1, -2);
// 得到 result = [4, 3];

九、forEach()

定义： 用于遍历原数组的每一项，并将每项元素传递给回调函数（注意该方法和map的区别，若直接打印Array.forEach(xxx)，结果为undefined）。

十、reduce()

定义： 接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值。
参数：

  • prev: 必需(初始值或者是计算结束后返回的值)

  • cur: 必需(当前元素)

  • index: 可选(当前元素的索引)

  • arr: 可选(当前元素所属的数组对象)

  • init: 可选(传递给函数的初始值)

      arr.reduce((prev, cur, index, arr) => {  
     xxxxxx
  }, init);

示例：

// 数组各项元素累加，累乘
let arr = [1, 2, 3, 4, 5];
arr.reduce((x, y) => x+y); // 结果15
arr.reduce((x, y) => x*y); // 结果120

十一、reduceRight()

定义： 与reduce方法类似，它是（从右到左）从数组的最后一项开始，向前逐个遍历到第一位，迭代数组的所有项，然后构建一个最终返回的值。
示例： 略。

avatar
文章
阅读
粉丝