js 数组常用函数总结

//1. 向数组末尾添加单个元素
const numbers = ["cat", "dog", "bird"];
const length = numbers.push( "pig");
console.log(numbers);  // ['cat', 'dog', 'bird', 'pig']
console.log(length);   // 4
//2、向数组末尾添加多个元素
const fruits = ['apple', 'banana'];
fruits.push('kiwi', 'orange');
console.log(fruits);  // ['apple', 'banana', 'kiwi', 'orange']

2、unshif

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

javascript 复制代码

//1. 向数组开头添加单个元素
const numbers = ["cat", "dog", "bird"];
const length = numbers.unshift( "pig");
console.log(numbers);  // [ 'pig','cat', 'dog', 'bird']
console.log(length);   // 4
//1. 向数组开头添加多个元素
const fruits = ['banana', 'orange'];
fruits.unshift('apple', 'kiwi');
console.log(fruits);  // ['apple', 'kiwi', 'banana', 'orange']

3、pop

功能：删除数组的最后一个元素，并返回删除的元素。

javascript 复制代码

//删除数组的最后一个元素
const fruits = ['apple', 'banana', 'kiwi'];
const removedElement = fruits.pop();
console.log(fruits);          // ['apple', 'banana']
console.log(removedElement);  // 'kiwi'

4、shift

功能：删除数组的第一个元素，并返回删除的元素。

javascript 复制代码

//删除数组的第一个元素
const fruits = ['apple', 'banana', 'kiwi'];
const removedElement = fruits.shift();
console.log(fruits);          // ['banana', 'kiwi']
console.log(removedElement);  // 'apple'
//如果删除空数组，结果将返回undefined
const emptyArray = [];
const removedElement = emptyArray.shift();
console.log(emptyArray);     // []
console.log(removedElement);  // undefined

5、concat

功能：将两个或多个数组合并成一个新数组 。原数组不变。

javascript 复制代码

//1. 连接两个数组:
const array1 = [1, 2, 3];
const array2 = [4, 5, 6];
const concatenatedArray = array1.concat(array2);
console.log(concatenatedArray);  // [1, 2, 3, 4, 5, 6]
//2. 连接数组和值:
const array = [1, 2, 3];
const value = 4;
const concatenatedArray = array.concat(value);
console.log(concatenatedArray);  // [1, 2, 3, 4]
//3. 连接多个数组：
const array1 = [1, 2];
const array2 = [3, 4];
const array3 = [5, 6];
const concatenatedArray = array1.concat(array2, array3);
console.log(concatenatedArray);  // [1, 2, 3, 4, 5, 6]

6、slice

功能：从数组中提取指定范围的元素并返回一个新数组。

slice() 方法返回数组一部分的浅拷贝。
它返回一个新数组，并且不会修改原始数组。

javascript 复制代码

//array.slice(start,end);
//start 为提取元素起始位置的索引（包括该索引对应的元素）；
//end 是提取元素结束位置的索引（不包括该索引对应的元素）；
//如果未指定 end 参数，则提取从起始索引位置到数组末尾的所有元素。

//1.提取指定范围内的元素
const fruits = ['apple', 'banana', 'kiwi', 'orange', 'grape'];
const slicedElements = fruits.slice(1, 4);
console.log(slicedElements);  // ['banana', 'kiwi', 'orange']

//2.提取指定位置到数组末尾的元素
const numbers = [1, 2, 3, 4, 5];
const slicedElementsToEnd = numbers.slice(2);
console.log(slicedElementsToEnd);  // [3, 4, 5]

//3.复制数组
const originalArray = [1, 2, 3, 4, 5];
const copiedArray = originalArray.slice();
console.log(copiedArray);  // [1, 2, 3, 4, 5]

7、splice

功能：删除、替换或添加元素到数组的指定位置。

javascript 复制代码

//array.splice(start,deleteCount,item1,item2,...)
//start 是要修改的起始位置的索引；
//deleteCount 是要删除的元素数。
//您可以根据需要指定item1、item2等参数来插入新元素。
//如果未指定deleteCount，则删除从起始索引位置开始的所有元素。

//1.删除元素
const numbers = [1, 2, 3, 4, 5];
const deletedElements = numbers.splice(2, 2);
console.log(numbers);          // [1, 2, 5]
console.log(deletedElements);  // [3, 4]

//2.更换元素
const fruits = ['apple', 'banana', 'kiwi'];
const replacedElements = fruits.splice(1, 1, 'orange', 'grape');
console.log(fruits);             // ['apple', 'orange', 'grape', 'kiwi']
console.log(replacedElements);   // ['banana']

//3.插入元素
const colors = ['red', 'blue', 'green'];
colors.splice(1, 0, 'yellow', 'purple');
console.log(colors);  // ['red', 'yellow', 'purple', 'blue', 'green']

8、join

功能：使用指定的分隔符将数组中的所有元素连接成字符串。

javascript 复制代码

//array.join(separator)
//分隔符是可选字符串参数，指定元素之间的分隔符，默认为逗号（,）

//1.数组之间用"-"分隔
const fruits = ['apple', 'banana', 'kiwi'];
const joinedString = fruits.join('-');
console.log(joinedString);  // "apple-banana-kiwi"

//2.默认使用逗号作为分隔符
const numbers = [1, 2,3, 4, 5];
const joinedStringDefault = numbers.join();
console.log(joinedStringDefault);  // "1,2,3,4,5"

9、indexOf

功能：返回指定元素在数组中第一次出现的索引，如果没有找到则返回-1。

javascript 复制代码

//array.indexOf（searchElement,formIndex)

//1.搜索数组项第一次出现时的下标位置
const fruits = ['apple', 'banana', 'kiwi', 'banana', 'orange'];
const index = fruits.indexOf('banana');
console.log(index);  // 1

//2.从指定位置开始从前向后查找数组项第一次出现的下标位置
const numbers = [1, 2, 3, 4, 5, 3, 2, 1];
const indexFromIndex = numbers.indexOf(3, 3);
console.log(indexFromIndex);  // 5

10、lastIndexOf

功能：返回指定元素在数组中最后一次出现的索引，如果没有找到则返回-1。

javascript 复制代码

//array.lastIndexOf（searchElement,formIndex)
//searchElement表示要查找的元素，
//fromIndex则是起始查找位置。
//如果没有设置fromIndex，则默认从数组末尾开始查找。
//该方法返回最后一个匹配的元素的位置，若没有找到，则返回-1。

//1.搜索数组项最后一次出现时的下标位置
const fruits = ['apple', 'banana', 'kiwi', 'banana', 'orange'];
const lastIndex = fruits.lastIndexOf('banana');
console.log(lastIndex);  // 3

//2.从指定索引位置开始从后向前查找第一个出现的下标位置
const numbers = [1, 2, 3, 4, 5, 3, 2, 1];
const lastIndexFromIndex = numbers.lastIndexOf(3, 4);
console.log(lastIndexFromIndex);  // 2

11、forEach

功能：对数组中的每个元素执行指定的函数，不返回新数组。

javascript 复制代码

//forEach()方法不能中断或跳过迭代。

12、map

功能：对数组中的每个元素执行指定的函数，并返回由执行结果组成的新数组。

javascript 复制代码

//array.map(callback(element,index,array));
//callback是回调函数

const numbers = [1,2,3,4,5,6];
const doubledNumbers = numbers.map(el=>el * 2);
console.log(doubledNumbers );  // [2,4,6,8,10,12]

13、filter

功能：根据指定条件过滤掉数组中符合条件的元素，返回一个新数组。

javascript 复制代码

//array.filter(callback(element,index,array));

const numbers = [1,2,3,4,5,6];
const oddNumbers = numbers.filter(el=> el%2);
console.log(oddNumbers );  // [1,3,5]

14、reduce

功能：对数组中的所有元素执行指定的归约函数，并返回单值结果。将数组缩减为单个值。

javascript 复制代码

//array.reduce(callback(accumulator,currentValue,index,array));
//参数说明：callback是回调函数，可以接受四个参数：
//accumulator：累加器，用于保存计算结果。
//currentValue：当前遍历的元素。
//index：当前遍历元素的索引。
//array：正在遍历的数组。

const numbers = [2,3,1,4];
let result = numbers.reduce((sum, current) => sum + current, 2);  
console.log(result);//12

15、sort

功能：对数组元素进行排序。

javascript 复制代码

//1.不传递参数调用sort，会直接修改原数组，返回排序后的数组
const fruits = ['banana','apple','kiwi','pear'];
fruits.sort();
console.log(fruits); //['apple','banana','kiwi','pear']

//2.传入比较函数，该函数接受两个参数，返回一个代表比较结果的数字
const numbers = [10,5,8,2,3];
numbers.sort((a,b)=>a-b);
console.log(numbers );  // [2,3,5,8,10]

16、reverse

功能：反转数组中元素的顺序。会直接修改原数组，不会创建新数组。

javascript 复制代码

//reverse会直接修改原数组，不会返回新数组，可以使用slice()先复制一个新数组，再reverse
const numbers = [1,2,3,4,5];
const reversedNumbers = numbers.slice().reverse();
console.log(numbers);  // [1,2,3,4,5]
console.log(reversedNumbers);  //[5,4,3,2,1]

17、includes

功能：判断数组是否包含指定元素，返回true或false。

javascript 复制代码

//array.includes（searchElement,formIndex)

//1. 检查数组是否包含特定元素
const numbers = [1, 2, 3, 4, 5];
console.log(numbers.includes(3));  // true
console.log(numbers.includes(6));  // false

//2.使用fromIndex参数指定搜索的起始位置
const numbers = [1, 2, 3, 4, 5];
console.log(numbers.includes(3, 2));  // true, search starts from index 2
console.log(numbers.includes(3, 4));  // false, search starts from index 4

//3. 检查数组中是否包含字符串
const fruits = ['apple', 'banana', 'kiwi', 'pear'];
console.log(fruits.includes('banana'));  // true
console.log(fruits.includes('grape'));   // false

18、some

功能：检查数组中是否至少有一个元素满足指定条件，返回true或false。

javascript 复制代码

//array.some(callback(element,index,array));

//1、检查数组中是否有大于10的元素
const numbers = [5, 8, 12, 3, 9];
const hasGreaterThan10 = numbers.some(element => element > 10);
console.log(hasGreaterThan10);  // true

//2. 检查数组中是否有偶数
const numbers = [3, 7, 5, 12, 9];
const hasEvenNumber = numbers.some(element => element % 2 === 0);
console.log(hasEvenNumber);  // true

//3. 检查数组中是否存在包含特定字符的字符串
const fruits = ['apple', 'banana', 'kiwi', 'pear'];
const hasStrWithChar = fruits.some(element => element.includes('a'));
console.log(hasStrWithChar);  // true

//4、检查数组中是否存在满足复杂条件的元素
const students = [
  { name: 'Alice', score: 85 },
  { name: 'Bob', score: 92 },
  { name: 'Charlie', score: 76 },
];
const hasPassingScore = students.some(student => student.score >= 80);
console.log(hasPassingScore);  // true

19、every

功能：检查数组中所有元素是否满足指定条件，返回true或false。

javascript 复制代码

//array.every(callback(element,index,array));

//1.检查数组中的所有元素是否都大于 0
const numbers = [5, 8, 12, 3, 9];
const allGreaterThan0 = numbers.every(element => element > 0);
console.log(allGreaterThan0);  // true

//2.检查数组中的所有元素是否都是偶数
const numbers = [2, 4, 6, 8, 10];
const allEvenNumbers = numbers.every(element => element % 2 === 0);
console.log(allEvenNumbers);  // true

//3.检查数组中的所有字符串是否以大写字母开头
const words = ['Apple', 'Banana', 'Cherry', 'Durian'];
const allUpperCaseStart = words.every(element => /^[A-Z]/.test(element));
console.log(allUpperCaseStart);  // true

//4.检查数组中的所有对象是否满足特定条件
const students = [
  { name: 'Alice', score: 85 },
  { name: 'Bob', score: 92 },
  { name: 'Charlie', score: 76 },
];
const allPassingScore = students.every(student => student.score >= 80);
console.log(allPassingScore);  // false

20、toString

功能：toString() 方法返回一个由逗号分隔的字符串。它不会修改原始数组。

javascript 复制代码

const colors = ["Red", "Green", "Blue", "Yellow", "Purple"];
console.log(colors.toString( )); //"Red, Green, Blue, Yellow, Purple"

21.、find

ES5 使用 indexOf() 和 lastIndexOf() 方法来查找数组中的元素。 find() 方法是在 ES6 中引入的。

功能：返回数组中满足条件的第一个元素的值。如果没有找到合适的元素，则返回 undefined。

javascript 复制代码

let numbers = [1, 3, 4, 6, 7];
console.log(numbers.find(e => e % 2 == 0)); // 4

22、findLast

功能：返回数组中满足条件的最后一个元素的值。如果没有找到合适的元素，则返回 undefined。

javascript 复制代码

let numbers = [1, 3, 4, 6, 7];
console.log(numbers.findLast(e => e % 2 == 0)); // 6

23、 findIndex

功能：返回数组中满足条件的第一个元素的索引，如果没有找到合适的元素，则返回 -1。

javascript 复制代码

let numbers = [1, 15, 7, 8, 10, 15];
let index = numbers.findIndex(number => number === 15);
console.log(index); // 1

24、findLastIndex

功能：返回数组中满足条件的最后一个元素的索引，如果没有找到合适的元素，则返回 -1。

javascript 复制代码

let numbers = [1, 15, 7, 8, 10, 15];
let index = numbers.findLastIndex(number => number === 15);
console.log(index); // 5

25、fill

功能：将数组中的所有元素更改为静态值。返回修改后的数组。

javascript 复制代码

let numbers = [1,2,3,4,5,6];

//1.fill(value)将数组中所有元素修改为value
let result = numbers.fill(0);
console.log(result);//[0,0,0,0,0,0]

//2.fill(value, start)将数组中从start开始的元素（包括start）修改为value
let result = numbers.fill(0,2);
console.log(result);//[1,2,0,0,0,0]

//3.fill(value, start, end) 
//将数组中从start开始的元素（包括start）到end结束的元素（不包括end）修改为value
let result = numbers.fill(0,2,4);
console.log(result);//[1,2,0,0,5,6]

26、reduceRight

功能：对数组中的所有元素从右到左执行指定的归约函数，从而产生一个输出值。

javascript 复制代码

const list = [😀, 😫, 😀, 😫, 🤪];
list.reduceRight((⬜️, ⚪️) => ⬜️ + ⚪️); // 🤪 + 😫 + 😀 + 😫 + 😀

const list = [1, 2, 3, 4, 5];
list.reduceRight((total, item) => total + item, 0); // 15

27、 at

返回指定索引处的值。索引前加负号，表示从右向左找。

javascript 复制代码

const list = [1, 2, 3, 4, 5];
console.log(list.at(1)); // 2
console.log(list.at(-1)); // 5
console.log(list.at(-2)); // 4

28、 copyWithin

复制数组中的数组元素，并返回修改后的新数组。

第一个参数是开始复制元素的目标。
第二个参数是开始复制元素的索引。
第三个参数是停止复制元素的索引。

javascript 复制代码

const list = [1, 2, 3, 4, 5];
const result = list.copyWithin(0, 3, 4); 
console.log(result);// [4,2,3,4,5]

const list = [1, 2, 3, 4, 5,6];
const result = list.copyWithin(0, 3, 5); 
console.log(result);// [4,5,3,4,5,6]

29、 flat

返回一个新数组，其中所有子数组元素递归连接到指定深度。

javascript 复制代码

const list = [1, 2, [3, 4, [5, 6]]];
const result = list.flat(Infinity); 
console.log(result);// [1, 2, 3, 4, 5, 6]

30、 flatMap

返回通过将给定的回调函数应用于数组的每个元素而形成的新数组。

javascript 复制代码

const list = [1, 2, 3];
const result = list.flatMap((el) => [el, el * el]);
console.log(result); // [1, 1, 2, 4, 3, 9]

31、 Array.from

从类数组或可迭代对象创建一个新数组。

javascript 复制代码

const list = "123456";
let result =Array.from(list); 
console.log(result);//[1,2,3,4,5,6]

const range = (n) => Array.from({ length: n }, (_, i) => i + 1);
console.log(range(10)); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

32、 Array.of()

使用可变数量的参数创建一个新数组，而不管参数的数量或类型。

javascript 复制代码

const list = Array.of(1, 2, 3, 4, "apple",{name:"Lucy",age:18});
console.log(list);//[1,2,3,4,"apple",{"name": "Lucy","age": 18}]

33、Array.isArray()

如果给定值是一个数组，则返回 true。

javascript 复制代码

const list = Array.isArray([1, 2, 3, 4, 5]);
console.log(list); // true
const list2 = Array.isArray(5); 
console.log(list2);// false