JS数组常用函数复习

目录

增删元素

push-添加元素到数组末尾

pop-弹出数组尾元素,并返回值

shift-弹出数组首元素，并返回值

unshift-添加一个或多个数组元素到数组开头，并返回数组长度

splice-插入、删除、替换1或多个数组元素

 合并数组

concat-合并两个及以上数组，返回新数组

扩展运算符

push-会直接修改原数组

数组转换字符串

join-使用指定的分隔符将数组每一个元素拼接成字符串

toString-直接转换成字符串(不好用)

数组排序

sort-将数组中元素按照unicode的顺序排列，原定修改数组

数组反转

reverse-原地反转数组

数组遍历

forEach-对数组每一个元素执行一次操作,没有任何返回值

map-对数组每一个元素执行一次操作,返回新数组

filter-筛选数组中符合条件的所有元素，返回新数组

every-检查每一个元素是否符合条件，返回布尔值

some-检查是否存在元素符合符合条件，返回布尔值

find-返回数组中符合条件的第一个元素

flat-按照指定深度递归遍历数组，将遍历到的元素合并返回新数组

reduce-将数组中的元素通过指定的累加器函数进行累积，返回一个值

索引查找

indexOf / lastIndexOf - 符合条件元素的第一个索引/倒数第一个索引

补充-Array对象的静态方法

Array.from-类数组转换为数组

Array.isArray-检查是否为数组，返回布尔值

Array.of方法用于创建具有给定元素的新数组实例，返回新数组

增删元素

push-添加元素到数组末尾

arr.push(1)

pop-弹出数组尾元素,并返回值

a = arr.pop()

shift-弹出数组首元素，并返回值

b = arr.shift()

unshift-添加一个或多个数组元素到数组开头，并返回数组长度

arr_len = arr.unshift(1,2)

splice-插入、删除、替换1或多个数组元素

array.splice(start, deleteCount, item1, item2, ...)

• start：指定开始修改的位置索引。
• deleteCount：指定要删除的元素数量。如果为 0，则不删除任何元素。
• item1, item2, ...：可选参数，要插入到数组中的元素。

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

// 删除元素
arr.splice(2, 1); // 从索引 2 开始删除 1 个元素
// 结果：[1, 2, 4, 5]

// 插入元素
arr.splice(2, 0, 'a', 'b'); // 从索引 2 开始插入 'a' 和 'b'
// 结果：[1, 2, 'a', 'b', 4, 5]

// 替换元素
arr.splice(1, 2, 'x', 'y', 'z'); // 从索引 1 开始替换 2 个元素，并插入 'x', 'y', 'z'
// 结果：[1, 'x', 'y', 'z', 'b', 4, 5]

 合并数组

concat-合并两个及以上数组，返回新数组

let arr = [1, 2, 3]
let arr2 = [1, 2, 3]
let arr3 = [1, 2, 3]

let arr4 = arr.concat(arr2).concat(arr3)
console.log(arr4) //[1, 2, 3, 1, 2, 3, 1, 2, 3]

扩展运算符

var arr1 = [1, 2, 3];
var arr2 = [4, 5, 6];
var mergedArray = [...arr1, ...arr2];
// 结果：[1, 2, 3, 4, 5, 6]

push-会直接修改原数组

let arr1 = [1, 2, 3];
let arr2 = [4, 5, 6];
Array.prototype.push.apply(arr1, arr2);
console.log(arr1)
// arr1 = [1, 2, 3, 4, 5, 6]

数组转换字符串

join-使用指定的分隔符将数组每一个元素拼接成字符串

var arr = [1, 2, 3];
var str = arr.join(); // 使用默认分隔符 ","
// 结果：str = "1,2,3"

var strWithNull = arr.join(''); // 不使用分隔符
// 结果：strWithNull = "123"

toString-直接转换成字符串(不好用)

var arr = [1, 2, 3];
var str = arr.toString();
// 结果：str = "1,2,3"

数组排序

sort-将数组中元素按照unicode的顺序排列，原地修改数组

注意，如果是按照数字从小到大排列不能直接使用sort

var arr = [36,49,2910,324];
arr.sort();
console.log(arr) // 结果：[2910, 324, 36, 49]

var arr = [36,49,2910,324];
arr.sort(function(a, b) {
    return a - b;
});
console.log(arr) // 升序 [36, 49, 324, 2910]

arr.sort(function(a, b) {
    return b - a;
});
console.log(arr) // 降序 [2910, 324, 49, 36]

数组反转

reverse-原地反转数组

var arr = [36,49,2910,324];
arr.reverse()
console.log(arr) // [324, 2910, 49, 36]

数组遍历

forEach-对数组每一个元素执行一次操作,没有任何返回值

arr.forEach(currentValue, index, array) （map、filter、every、some、find的参数类似）

1. currentValue：当前正在处理的元素。
2. index（可选）：当前正在处理的元素在数组中的索引。
3. array（可选）：调用 forEach() 方法的数组本身。

let arr = [36,49,2910,324];
arr.forEach((item, index) => {
    arr[index] = item + 1
})
console.log(arr) //[37, 50, 2911, 325]

map-对数组每一个元素执行一次操作,返回新数组

let arr = [36,49,2910,324];
newArr = arr.map((item) => {
    return item + 1
})
console.log(newArr) // [37, 50, 2911, 325]

filter-筛选数组中符合条件的所有元素，返回新数组

let arr = [1,2,3,4,5,6,7,8,9,10];
newArr = arr.filter((item) => {
    return item > 5
})
console.log(newArr) // [6, 7, 8, 9, 10]

every-检查每一个元素是否符合条件，返回布尔值

let arr = [1,2,3,4,5,6,7,8,9,10];
newArr = arr.every((item) => {
    return item > 5
})
console.log(newArr) // false

some-检查是否存在元素符合符合条件，返回布尔值

let arr = [1,2,3,4,5,6,7,8,9,10];
newArr = arr.some((item) => {
    return item > 5
}) 
console.log(newArr) // true

find-返回数组中符合条件的第一个元素

let arr = [7, 89, 32, 384, 453];
item = arr.find((item) => {
    return item > 100
})
console.log(item) // 384

flat-按照指定深度递归遍历数组，将遍历到的元素合并返回新数组

let arr = [7, 89, 32, 384, 453, [1, 3, 37, [24, 43]]];
newArr1 = arr.flat() // 默认深度为1
console.log(newArr1) // [7, 89, 32, 384, 453, 1, 3, 37, [24, 43]]

newArr2 = arr.flat(2) // 深度为2
console.log(newArr2) //[7, 89, 32, 384, 453, 1, 3, 37, 24, 43]

reduce-将数组中的元素通过指定的累加器函数进行累积，返回一个值

array.reduce(callback(accumulator, currentValue[, index[, array]])[, initialValue])

• accumulator：累积器，累积的结果。
• currentValue：当前正在处理的元素。
• index（可选）：当前正在处理的元素的索引。
• array（可选）：调用 reduce() 方法的数组本身。
• initialValue 是可选的，用作第一次调用累加器函数时的初始值。如果不提供 initialValue，则将使用数组的第一个元素作为初始值，并从数组的第二个元素开始调用累加器函数。

let arr = [7, 89, 32, 384, 453, 39];
res = arr.reduce((accumulator, currentVal) => {
    return accumulator + currentVal
}, 0)
console.log(res) // 1004 不指定初始值和初始值为0的结果一样

索引查找

indexOf / lastIndexOf - 符合条件元素的第一个索引/倒数第一个索引

const fruits = ['apple', 'banana', 'orange', 'apple'];

const indexOfApple = fruits.indexOf('apple');
console.log(indexOfApple); // 输出 0，因为 'apple' 在数组中的第一个位置

const lastIndexOfApple = fruits.lastIndexOf('apple');
console.log(lastIndexOfApple); // 输出 3，因为 'apple' 在数组中的最后一个位置

补充-Array对象的静态方法

Array.from-类数组转换为数组

Array.from(iterable[, mapFn[, thisArg]]): 从类似数组或可迭代对象创建一个新的数组实例。可以提供一个可选的映射函数来对每个元素进行转换。比如字符串、集合等类数组。

const numbers = new Set([1,2,3]);
const doubled = Array.from(numbers, (num) => num * 2);

console.log(doubled); // 输出：[2, 4, 6]

Array.isArray-检查是否为数组，返回布尔值

const arr = [1, 2, 3];
console.log(Array.isArray(arr)); // 输出：true

const str = "Hello";
console.log(Array.isArray(str)); // 输出：false

Array.of方法用于创建具有给定元素的新数组实例，返回新数组

const arr = Array.of(1, 2, 3);
console.log(arr); // 输出：[1, 2, 3]