JavaScript数组操作方法总结

前言

最近在学习JavaScript的时候，发现数组操作方法老是记得不是很清楚，于是去网上找了一些资料，都不是很全，于是自己尝试整理，后来发现一个公众号：小狮子前端 ，这个大佬的整理很详细，于是做了搬运，并且在这个基础上再稍微添加了一些方法，大佬在GitHub上也有网站，里面有很多前端学习资料，附上大佬网址：https://github.com/Chocolate1999/Front-end-learning-to-organize-notes
有兴趣的可以去看看。

数组的遍历查找

for循环

let arr = [1, 2, 3, 4, 5];
for (let i = 0; i < arr.length; i++) {
	console.log(arr[i]);
}
// 1
// 2
// 3
// 4
// 5

for… of 循环

• for…of 语句遍历可迭代对象定义要迭代的数据。简单来说，for…of遍历的就是value。

let arr = ['Chocolate', 'zhlll', 'lionkk'];
for (let val of arr) {
	console.log(val);
}
// Chocolate
// zhlll
// lionkk

for… in 循环

• for…in`语句以任意顺序迭代对象的可枚举属性。简单来说，for…in遍历的就是 key。对于数组，key对应着的是数组的下标索引。

let arr = ['Chocolate', 'zhlll', 'lionkk'];
for (let key in arr) {
	console.log(key);
}
// 0
// 1
// 2

array.forEach()方法

语法：

array.forEach(function(currentValue, index, arr), thisValue)

参数	描述
currentValue	必需。 当前元素
index	可选。当前元素的索引值
arr	可选。当前元素所属的数组对象。
thisValue	可选。传递给函数的值一般用 “this” 值。 如果这个参数为空， “undefined” 会传递给 “this” 值

let arr = ['Chocolate', 'zhlll', 'lionkk'];
arr.forEach(function (cur, index, arr) {
	console.log(cur, index, arr);
})
// Chocolate 0 [ 'Chocolate', 'zhlll', 'lionkk' ]
// zhlll 1 [ 'Chocolate', 'zhlll', 'lionkk' ]
// lionkk 2 [ 'Chocolate', 'zhlll', 'lionkk' ]

发现后面两个参数是可选的，那么可以让后两个参数按需添加即可：

let arr = ['Chocolate', 'zhlll', 'lionkk'];
arr.forEach((cur) => {
	console.log(cur);
})
// Chocolate
// zhlll
// lionkk

疑难点：thisValue

function Foo() {
  this.sum = 0
  this.cnt = 0
}
// 在原型上添加一个名为 doSth 方法
Foo.prototype.doSth = function (arr) {
  arr.forEach(function (cur) {
    this.sum += cur
    this.cnt++
  }, this) // this 指向实例对象
}
let foo = new Foo()
let arr = [1, 2, 3]
foo.doSth(arr)
console.log(foo.sum, foo.cnt)
// 6 3
// 解释： 6 === (1+2+3) 3 === (1+1+1)

注意：如果使用箭头函数表达式来传入函数参数， thisArg 参数会被忽略，因为箭头函数在词法上
绑定了 this 值。

因此，如果对于普通函数的话，可以看做是将 this 通过传参的形式解决无法继承 问题，当然，通过箭
头函数的方式是一个不错的选择！

map遍历

• 返回一个新数组，其结果是该数组中的每个元素 是调用一次提供的回调函数后的返回值。

语法：

let newArray = array.map(function(currentValue, index, arr), thisArg)

callback	为数组中每个元素执行的函数，该函数接收一至三个参数
currentValue	数组中正在处理的当前元素
index (可选)	数组中正在处理的当前元素的索引
arr (可选)	map() 方法正在操作的数组
thisArg	可选参数,当执行回调函数callback,用作this值

示例：

let arr = ['Chocolate', 'zhlll', 'lionkk'];
let newArr = arr.map(function (cur, index, arr) {
  console.log(cur, index, arr);
  return cur + index;
})
// Chocolate 0 [ 'Chocolate', 'zhlll', 'lionkk' ]
// zhlll 1 [ 'Chocolate', 'zhlll', 'lionkk' ]
// lionkk 2 [ 'Chocolate', 'zhlll', 'lionkk' ]
console.log(newArr)
// [ 'Chocolate0', 'zhlll1', 'lionkk2' ]

function Foo() {
  this.sum = 0;
  this.cnt = 0;
}
// 在原型上添加一个名为 doSth 方法
Foo.prototype.doSth = function (arr) {
  let newArr = arr.map(function (cur) {
    this.sum += cur;
    this.cnt++;
    return cur + 10;
  }, this) // this 指向实例对象
  return newArr;
}
let foo = new Foo();
let arr = [1, 2, 3];
console.log(foo.doSth(arr)); // [ 11, 12, 13 ]
console.log(foo.sum);// 6
console.log(foo.cnt);// 3

一些技巧性操作

let arr = [1, 4, 9, 16];
let res = arr.map(Math.sqrt); // 传入Math中sqrt得到数组中每个元素的平方根
console.log(res); // [ 1, 2, 3, 4 ]

总结：

• map 不修改调用它的原数组本身（当然可以在 callback 执行时改变原数组）
  回调函数不返回值时，最后新数组的每个值都为undefined
• this 的值最终相对于 callback 函数的可观察性是依据this规则，也就是 this 指向问题
• map 会返回一个新数组

reduce遍历

• 对数组中的每个元素执行一个由您提供的 reducer 函数(升序执行)，将其结果汇总为单个返回值。

语法：

let res= array.reduce(callback(accumulator, currentValue, currentIndex, array),
initialValue)

callback	为数组中每个元素执行的函数，该函数接收一至4个参数
accumulator	累计器
currentValue	当前值
currentIndex	当前索引
array	数组
initialValue	作为第一次调用 callback函数时的第一个参数的值。 如果没有提供初始值，则将使用数组中的第一个元素。 在没有初始值的空数组上调用 reduce 将报错。

let arr = [3, 5, 7, 1, 2];
let res = arr.reduce(function (acc, cur, index, arr) {
  console.log(acc, cur, index, arr);
  return acc + cur;
}, 0)
// 0 3 0 [ 3, 5, 7, 1, 2 ]
// 3 5 1 [ 3, 5, 7, 1, 2 ]
// 8 7 2 [ 3, 5, 7, 1, 2 ]
// 15 1 3 [ 3, 5, 7, 1, 2 ]
// 16 2 4 [ 3, 5, 7, 1, 2 ]
console.log(res);
// 18

总结：

• 如果数组为空且没有提供 initialValue ，会抛出TypeError 。
• 如果没有提供 initialValue ， reduce 会从索引1的地方开始执行 callback 方法，跳过第一个
  索引。如果提供 initialValue ，从索引0开始。
• acc 为传入函数的返回值，如果是 console.log ，则返回默认值 undefined

filter()

• 创建一个新数组, 其包含通过所提供函数实现的测试的所有元素。

语法：

let newArray = array.filter(function(currentValue, index, arr), thisArg)

callback	为数组中每个元素执行的函数，该函数接收一至三个参数
currentValue	数组中正在处理的当前元素
index(可选)	数组中正在处理的当前元素的索引
arr(可选)	filter() 方法正在操作的数组
thisArg	（可选参数）,当执行回调函数callback,用作this值

let arr = [1, 2, 3, 4, 5];
let newArr = arr.filter(function (cur, index) {
  console.log(cur, index);
  return cur % 2 == 0;
})
// 1 0
// 2 1
// 3 2
// 4 3
// 5 4
console.log(newArr); // [ 2, 4 ]

简单来说，就是返回满足条件的结果。

every()

• 测试一个数组内的所有元素是否都能通过某个指 定函数的测试，它返回的是一个 Boolean 类型的值。

语法：

array.every(function(currentValue, index, arr), thisArg)

callback	为数组中每个元素执行的函数，该函数接收一至三个参数
currentValue	数组中正在处理的当前元素
index(可选)	数组中正在处理的当前元素的索引
arr(可选)	filter() 方法正在操作的数组
thisArg	（可选参数）,当执行回调函数callback,用作this值

let res1 = [1, 2, 3, 4, 5].every(function (cur) {
  return cur > 10;
})
console.log(res1); // false
let res2 = [1, 2, 3, 4, 5].every(function (cur) {
  return cur >= 1;
})
console.log(res2); // true

简单来说，就是返回是否都能满足特定条件的结果，用布尔值返回。

some()

• 测试数组中是不是至少有1个元素通过了被提供的 函数测试，它返回的是一个 Boolean类型的值

语法：

array.some(function(currentValue, index, arr), thisArg)

callback	为数组中每个元素执行的函数，该函数接收一至三个参数
currentValue	数组中正在处理的当前元素
index(可选)	数组中正在处理的当前元素的索引
arr(可选)	filter() 方法正在操作的数组
thisArg	（可选参数）,当执行回调函数callback,用作this值

let res1 = [1, 2, 3, 4, 5].some(function (cur) {
  return cur > 10;
})
console.log(res1); // false
let res2 = [1, 2, 3, 4, 5].some(function (cur) {
  return cur === 1;
})
console.log(res2); // true

简单来说，就是返回是否至少有1个满足特定条件的结果，用布尔值返回。

find 与 findIndex

• find: 返回数组中满足提供的测试函数的第一个元素的值。否则返回 undefined。
• findIndex：数组中通过提供测试函数的第一个元素的索引。否则，返回 -1。

let ele = array.find(function(elemnet, index, arr), thisArg)

let eleIndex = array.findIndex(function(elemnet, index, arr), thisArg)

callback	为数组中每个元素执行的函数，该函数接收一至三个参数
currentValue	数组中正在处理的当前元素
index(可选)	数组中正在处理的当前元素的索引
arr(可选)	filter() 方法正在操作的数组
thisArg	（可选参数）,当执行回调函数callback,用作this值

let res1 = [1, 2, 3, 4, 5].find(function (cur) {
  return cur > 2;
})
console.log(res1); // 3
let res2 = [1, 2, 3, 4, 5].findIndex(function (cur) {
  return cur > 2;
})
console.log(res2); // 2

keys 与 entries

• keys() 方法返回一个包含数组中每个索引键的Array Iterator 对象。
• entries() 方法返回一个新的 Array Iterator对 象，该对象包含数组中每个索引的键/值对。

let arr = ['Chocolate', 'zhlll', 'lionkk'];
let itKeys = arr.keys();
let itEntries = arr.entries();
for (let it of itKeys) {
console.log(it);
}
// 0
// 1
// 2
for (let it of itEntries) {
console.log(it);
}
// [ 0, 'Chocolate' ]
// [ 1, 'zhlll' ]
// [ 2, 'lionkk' ]

values() 与 valueof()

• values()方法返回一个新的 Array Iterator对 象，该对象包含数组每个索引的值
• valueOf() 方法可返回 Boolean 对象的原始值。

let itVals = arr.values();
for (let it of itVals) {
console.log(it);
}
// Chocolate
// zhlll
// lionkk

var fruits = ["Banana", "Orange", "Apple", "Mango"];
var v = fruits.valueOf();
// Banana,Orange,Apple,Mango

Indexof() 与 lastIndexOf()

• indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置，没有找到返回 -1。
• lastIndexOf() 方法可返回一个指定的字符串值最后出现的位置，如果指定第二个参数 start，则在一个字符串中的指定位置从后向前搜索。

var str="Hello world, welcome to the universe.";
var n=str.indexOf("welcome"); // 13

var str="I am from runoob，welcome to runoob site.";
var n=str.lastIndexOf("runoob"); // 28

includes()

• includes() 方法用于判断字符串是否包含指定的子字符串。找到返回true

var str = "Hello world, welcome to the Runoob。";
var n = str.includes("world");   // true

改变原始数组方法

sort()

• 语法：arr.sort([compareFunction])
  

• • compareFunction 可选，用来指定按某种顺序进行排列的函数。
  • 如果省略，元素按照转换为的字符串的各个字符的Unicode位点进行排序。
  • 否则，如果指明了compareFunction：
  • 如果 compareFunction(a, b) 小于 0 ，那么 a会被排列到 b 之前；
  • 如果 compareFunction(a, b) 等于 0 ， a 和b 的相对位置不变。
  • 如果 compareFunction(a, b) 大于 0 ， b 会被排列到 a 之前

let arr = [1, 10, 2, 5, 8, 3];

arr.sort(); // 默认
console.log(arr); // [ 1, 10, 2, 3, 5, 8 ]

arr.sort((a, b) => a - b); // 从小到大排序
console.log(arr); // [ 1, 2, 3, 5, 8, 10 ]

arr.sort((a, b) => b - a); // 从大到小排序
console.log(arr); // [ 10, 8, 5, 3, 2, 1 ]

push()

• 类似栈、队列的一些操作
• push()成功之后会返回数组的长度。

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

pop()

• 类似栈、队列的一些操作

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

shift()

• 类似栈、队列的一些操作

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

unshift()

• 定义：将一个或多个元素添加到数组的开头，并 (该方法修改原有数组)
• 注意：该方法会返回该数组的新长度

let arr = [1, 2, 100];
let res = arr.unshift(4, 5, 6);
console.log(arr); // [ 4, 5, 6, 1, 2, 100 ]
console.log(res); // 6

reverse()

• 定义：将数组中元素的位置颠倒，并返回该数组。

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

splice()

• 通过**删除或替换**现有元素或者原地添加新的元素来修改数组,并以数组形式返回被修改的内容。

• start: 指定修改的开始位置（从0计数）
• 1. 如果超出了数组的长度，则从数组末尾开始添加内容
• 2. 如果是负值，则表示从数组末位开始的第几位（从-1计数，这意味着-n是倒数第n个元素，并且等价于array.length-n）
• 3. 如果负数的绝对值大于数组的长度，则表示开始位置为第0位deleteCount(可选) : 整数,表示要移除的数组元素个数

• deleteCount(可选) : 整数,表示要移除的数组元素个数
• 1. 如果 deleteCount 大于 start 之后的元素的总数，则从 start 后面的元素都将被 删除(含第start 位)
• 2. 如果 deleteCount 被省略了，或者它的值大于等于array.length - start(也就是 说，如果它大于或者等于start之后的所有元素的数量)，那么start之后数组的所有元素都会被删除。
• 3. 如果 deleteCount 是 0 或者负数，则不移除元素。这种情况下，至少应添加一个新 元素。item1, item2, …(可选)要添加进数组的元素,从start 位置开始。如果不指定，则 splice() 将只删除数组元素

// 从第2位开始插入“Chocolate”
let arr = ['one', 'two', 'three'];

arr.splice(2, 0, 'Chocolate');
console.log(arr);// [ 'one', 'two', 'Chocolate', 'three' ]

// 从第 2 位开始删除 1 个元素，然后插入“Chocolate”
let arr = ['one', 'two', 'three'];

arr.splice(2, 1, 'Chocolate');
console.log(arr);// [ 'one', 'two', 'Chocolate' ]

fill()

• fill() 方法用于将一个固定值替换数组的元素。
• 语法：array.fill(value, start, end)

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.fill("Runoob");  // Runoob,Runoob,Runoob,Runoob

数组的映射

Array.map() 方法

• map() 方法返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。
• map() 方法按照原始数组元素顺序依次处理元素。
• 注意： map() 不会对空数组进行检测。
• 注意： map() 不会改变原始数组。

Array.from() 方法

• 定义：通过在每个数组项上使用 callback 调用结果来创建一个新数组。

语法：

Array.from(Array,callback(currentValue, index, arr))

let arr = [1, 2, 3];
let newArr = Array.from(arr, function (cur) {
	return cur + 10;
})
console.log(newArr);// [ 11, 12, 13 ]

数组的连接

Array.concat() 方法

• array.concat(array1[, array2, ...])将一个或多个数组连接到原始数组。

let arrA = [1, 2, 3];
let arrB = [4, 5, 6];
let ans = arrA.concat(arrB);
console.log(ans);// [ 1, 2, 3, 4, 5, 6 ]

…展开修饰符

let arrA = [1, 2, 3];
let arrB = [4, 5, 6];
let ans = [...arrA, ...arrB];
console.log(ans);// [ 1, 2, 3, 4, 5, 6 ]

获取数组的片段

Array.slice() 方法

• 返回一个新的数组对象，这一对象是一个由begin 和 end 决定的原数组的**浅拷贝**（包括begin，不包括 end）——原始数组不会被改变。

语法：

arr.slice([begin[, end]])

• begin (可选)
• 1 提取起始处的索引（从 0 开始），从该索引开始提取原数组元素。
• 2 如果该参数为负数，则表示从原数组中的倒数第几个元素开始提取
• 3 slice(-2) 表示提取原数组中的倒数第二个元素到最后一个元素（包含最后一个元素）
• 4 如果省略 begin，则 slice 从索引 0 开始。
• 5 如果 begin 大于原数组的长度，则会返回空数组。
• end (可选)
• 1 slice(1,4) 会提取原数组中从第二个元素开始一直到第四个元素的所有元素 （索引为 1, 2, 3的元素）
• 2 如果该参数为负数， 则它表示在原数组中的倒数第几个元素结束抽取。
• 3 如果 end 被省略，则 slice 会一直提取到原数组末尾。
• 4 如果 end 大于数组的长度，slice 也会一直提取到原数组末尾。

let fruits = ['Banana', 'Orange', 'Lemon', 'Apple', 'Mango'];
let res = fruits.slice(1, 3);
let res1 = fruits.slice(1);
let res2 = fruits.slice(-1);
let res3 = fruits.slice(0, -1);
console.log(res); // [ 'Orange', 'Lemon' ]
console.log(res1);// [ 'Orange', 'Lemon', 'Apple', 'Mango' ]
console.log(res2);// [ 'Mango' ]
console.log(res3);// [ 'Banana', 'Orange', 'Lemon', 'Apple' ]

转换数组

join()

• 定义：将一个数组（或一个类数组对象）的所有元素连接成一个字符串并返回这个字符串。如果数组只有一个项目，那么将返回该项目而不使用分隔符。

语法：

arr.join(separator)

let arr = ['one', 'two', 'three'];
let res = arr.join('^');
let res1 = arr.join('&');

console.log(res); // one^two^three
console.log(res1); // one&two&three

split()

• 使用指定的分隔符字符串将一个 String 对象分割成子字符串数组，以一个指定的分割字串来决定每个拆分的位置。

语法：

str.split([separator[, limit]])

const str = 'The best Chocolate';

const words = str.split(' ');
console.log(words); // [ 'The', 'best', 'Chocolate' ]
console.log(words[2]); // Chocolate

toString()

• 返回一个字符串，表示指定的数组及其元素。
• 当一个数组被作为文本值或者进行字符串连接操作时，将会自动调用其 toString 方法。

语法：

arr.toString()

let arr = ['one', 'two', 'three'];
console.log(arr.toString()); // one,two,three

数组的扁平化

flat()

• 按照一个可指定的深度递归遍历数组，并将所有元素与遍历到的子数组中的元素合并为一个新数组返回。

语法：

var newArray = arr.flat([depth])

​ 参数depth可选：指定要提取嵌套数组的结构深度，默认值为1.

​ 返回值：一个包含将数组和子数组所有元素的新数组

const arr1 = [0, 1, 2, [3, 4]];
console.log(arr1.flat()); // [ 0, 1, 2, 3, 4 ]
const arr2 = [0, 1, 2, [[[3, 4]]]];
console.log(arr2.flat(2)); // [ 0, 1, 2, [ 3, 4 ] ]

总结备忘

• 添加/删除元素

  • push(...items) — 从结尾添加元素
  • pop() — 从结尾提取元素
  • shift() — 从开头提取元素
  • unshift(...items) — 从开头添加元素
  • splice(pos, deleteCount, ...items) - -从index开始:删除deleteCount 元素并在当前位置I插入元素
  • slice(start, end) 一它从所有元素的开始索引"start" 复制到"end" (不包括"end" )返回-一个新的数组。
  • concat(...items)一返回-个新数组:复制当前数组的所有成员并向其中添加items. 如果有任何items是-个数组，那么就取其元素。

• 查询元素

  • index0f/lastIndex0f(item, pos) - -从pos找到item,则返回索引否则返回-1.
  • includes(value)一如果数组有value, 则返回true，否则返回false。
  • find/filter(func) -通过函数过滤元素，返回true 条件的符合find函数的第一个值或符合 filter 函数的全部值。
  • findIndex和find 类似，但返回索引而不是值。

• 转换数组

  • map(func) 一从每个元素调用func 的结果创建一 个新数组。
  • sort(func) -将数组倒序排列，然后返回.
  • reverse() -在原地颠倒数组，然后返回它。
  • split/join一将字符串转换为数组并返回。
  • reduce(func, initial) - -通过为每个元素调用func 计算数组上的单个值并在调用之间传递中间结果。

• 迭代元素

  • forEach(func)一为每个元表调用 func ,不返回任何东西。

• 其他

  • Array. isArray(arr) 检查arr是否是一个数组。

• 请注意，sort, reverse 和splice 方法修改数组本身。

• arr.some(n)/arr.every(fn)检查数组。

  • 在类似于map的数组的每个元素上调用函数fn.如果任何/所有结果true, 则返回true，否则返回false。

• arr.fill(value, start, end)一 从start 到end用value重填充数组。

• arr.copyWithin(target, start, end)一将其元素从start 到end在target位置复制到本身(覆盖现有) .