引言
大家好，欢迎来到我的博客！今天我们要来探讨的是JavaScript中的数组，作为前端开发人员，熟练掌握数组方法可以让我们J的开发工作更加高效和轻松。在这篇博文中，我将为大家总结一些JavaScript中最常用的数组方法，希望能够帮助大家更好地理解和运用这些方法。
创建数组
1.数组字面量
var arr = ['hello', 'a', 'b', 4];
console.log(arr); // 输出 [ 'hello', 'a', 'b', 4 ]
2. Array()
var arr = new Array('hello', 'a', 'b', 4);
console.log(arr); // 输出 [ 'hello', 'a', 'b', 4 ]
3.String.prototype.split()
// 4也会作为String存入数组中
var arr = 'hello, a, b, 4'.split(", ");
console.log(arr); // 输出 [ 'hello', 'a', 'b', '4' ]
数组转化为字符串
1.toString()
// 输出以逗号分隔
const arr = ['hello', 'a', 'b', 4];
const str = arr.toString();
console.log(str); // 输出 "hello,a,b,4"
2.join()
//间隔自定义
const arr = ['hello', 'a', 'b', 4];
const str = arr.join('');
console.log(str); // 输出 "helloab4"
数组中查找元素
1.indexOf()
从前往后查找，返回数组中第一个与指定值相等的元素的索引，如果没有找到匹配项，则返回 -1。
const arr = ['hello', 'a', 'b', 4];
console.log(arr.indexOf('hello')); // 输出 0
console.log(arr.indexOf('c'));// 输出 -1
2.lastIndexOf()
从后往前查找，返回数组中第一个与指定值相等的元素的索引，如果没有找到匹配项，则返回 -1。
const arr = ['hello', 'a', 'b', 4];
console.log(arr.lastIndexOf('hello')); // 输出 0
console.log(arr.lastIndexOf('c'));// 输出 -1
3.filter()
从前往后查找，返回数组中第一个符合条件元素的索引，如果没有找到匹配项，则返回 -1。
// 查找条件自定义
console.log(arr.findIndex(element => element === 'hello')); // 输出 0
console.log(arr.findIndex(element => element === 'c')); // 输出 -1
4.find()
返回数组中满足提供的测试函数的第一个元素的值。如果没有元素满足条件，则返回undefined
const arr = [1, 2, 3, 4, 5];
// 查找数组中第一个大于等于3的元素
const result1 = arr.find(element => element >= 3);
console.log(result1); // 输出 3
// 查找数组中第一个小于0的元素
const result2 = arr.find(element => element < 0);
console.log(result2); // 输出 undefined
5.findIndex()
从前往后查找，返回数组中所有符合条件元素的索引，如果没有找到匹配项，则返回[]空数组。
const numbers = [1, 2, 3, 4, 5];
const foundValues = numbers.filter(element => element > 3);
console.log(foundValues); // 输出 [4, 5]，因为数组中大于3的元素有两个
6.includes()
检测数组是否包含某个元素，包含返回true，不包含则返回false。
const arr = ['hello', 'a', 'b', 4];
console.log(arr.includes('hello')); // 输出 true
console.log(arr.includes('c'));// 输出 false
7.some()
检测数组中的元素是否满足指定条件，只要一个满足条件即返回true，否则返回false
const arr = [1, 2, 3, 4, 5];
// 检查数组中是否有元素大于等于 4
const result1 = arr.some(element => element >= 4);
console.log(result1); // 输出 true
// 检查数组中是否有元素小于 0
const result2 = arr.some(element => element < 0);
console.log(result2); // 输出 false
数组中添加元素
1.push()
向数组尾部追加一个新元素
const arr = ['hello', 'a', 'b', 4];
arr.push(5)
console.log(arr);// 输出 [ 'hello', 'a', 'b', 4, 5 ]
2.unshift()
向数组头部追加一个新元素
const arr = ['hello', 'a', 'b', 4];
arr.unshift(5)
console.log(arr);// 输出 [ 5, 'hello', 'a', 'b', 4 ]
3.splice(n,0,m)
往n处加入m（0也可以换为null）
const arr = ['hello', 'a', 'b', 4];
arr.splice(2, 0, 3);
console.log(arr); // 输出 [ 'hello', 'a', 3, 'b', 4 ]
4.扩展运算符
const arr = ['hello', 'a', 'b', 4];
const newArr = [...arr, 3, 4];
console.log(newArr); // 输出 [ 'hello', 'a', 'b', 4, 3, 4 ]
数组中移除元素
1.pop()
删除数组末尾的元素
const arr = ['hello', 'a', 'b', 4];
arr.pop();
console.log(arr); // 输出 [ 'hello', 'a', 'b' ]
2.shift()
删除数组开头的元素
const arr = ['hello', 'a', 'b', 4];
arr.shift();
console.log(arr); // 输出 [ 'a', 'b', 4 ]
3.splice()
删除指定位置的元素（可以指定删除的个数）
const arr = ['hello', 'a', 'b', 4];
arr.splice(1, 1); // 从索引为1的位置删除1个元素
console.log(arr); // 输出 [ 'hello', 'b', 4 ]
4.filter()
通过特定条件删除元素
const arr = [1, 2, 3, 4];
const newArr = arr.filter(num => num !== 2);
console.log(newArr); // 输出 [1, 3, 4]
5.slice()和扩展运算符
删除指定位置的元素
const arr = ['hello', 'a', 'b', 4];
const newArr = [...arr.slice(0, 1), ...arr.slice(2)];
console.log(newArr); // 输出 [ 'hello', 'b', 4 ]
替换数组中多个元素
splice()
const arr = ['hello', 'a', 'b', 4];
arr.splice(1, 2, 6, 7);
console.log(arr);// 输出 [ 'hello', 6, 7, 4 ]
从索引1开始，删除2个元素（'a', 'b'），然后在同一位置插入新元素6, 7，使得数组中的元素被替换为新元素。
合并多个数组
1.concat()
const arr1 = [1, 2];
const arr2 = [3, 4];
const arr3 = [5, 6];
const mergedArray = arr1.concat(arr2, arr3);
console.log(mergedArray); // 输出 [1, 2, 3, 4, 5, 6]
2.扩展运算符
const arr1 = [1, 2];
const arr2 = [3, 4];
const arr3 = [5, 6];
const mergedArray = [...arr1, ...arr2, ...arr3];
console.log(mergedArray); // 输出 [1, 2, 3, 4, 5, 6]
复制数组
1.slice()
const originalArray = [1, 2, 3];
const copiedArray = originalArray.slice();
console.log(copiedArray); // 输出 [1, 2, 3]
2.concat()
const originalArray = [1, 2, 3];
const copiedArray = originalArray.concat();
console.log(copiedArray); // 输出 [1, 2, 3]
3.扩展运算符
const originalArray = [1, 2, 3];
const copiedArray = [...originalArray];
console.log(copiedArray); // 输出 [1, 2, 3]
4.Array.from()
const originalArray = [1, 2, 3];
const copiedArray = Array.from(originalArray);
console.log(copiedArray); // 输出 [1, 2, 3]
遍历数组
1.for循环
const arr = [1, 2, 3, 4, 5];
for (let i = 0; i < arr.length; i++) {
console.log(arr[i]);
}
2.forEach方法
const arr = [1, 2, 3, 4, 5];
arr.forEach(element => {
console.log(element);
});
3.for...of循环
const arr = [1, 2, 3, 4, 5];
for (const element of arr) {
console.log(element);
}
4.map方法
const arr = [1, 2, 3, 4, 5];
arr.map(element => {
console.log(element);
});
5.reduce方法
const arr = [1, 2, 3, 4, 5];
arr.reduce((previousValue, currentValue) => {
console.log(currentValue);
}, 0);
数组排序
1.sort()
const arr = [3, 1, 4, 1, 5, 9, 2, 6];
// 正序排序
arr.sort((a, b) => a - b);
console.log(arr); // 输出 [1, 1, 2, 3, 4, 5, 6, 9]
// 倒序排序
arr.sort((a, b) => b - a);
console.log(arr); // 输出 [9, 6, 5, 4, 3, 2, 1, 1]
2.reverse()
进行反转排序
const arr = [3, 1, 4, 1, 5, 9, 2, 6];
arr.reverse();
console.log(arr); // 输出 [6, 2, 9, 5, 1, 4, 1, 3]
其它方法
1.fill()
将数组中指定范围的元素都替换为一个固定的值。
const arr = [1, 2, 3, 4, 5];
// 将数组中索引为1到3的元素替换为0
arr.fill(0, 1, 4);
console.log(arr); // 输出 [1, 0, 0, 0, 5]
2.Array.isArray()
确定传递的值是否是一个数组。它返回一个布尔值，如果值是数组则返回 true，否则返回 false。
const arr = [1, 2, 3];
console.log(Array.isArray(arr)); // 输出 true
const obj = {key: 'value'};
console.log(Array.isArray(obj)); // 输出 false
3.flat()
用于将嵌套多层的数组扁平化为一层它会创建一个新数组，其中包含原数组中的所有元素，并将嵌套数组展开为一层。
flat() 方法可以接受一个可选的参数，用于指定要展开的层级深度。如果不传入参数，则默认展开所有层级。
const arr = [1, [2, 3], [4, [5, 6]]];
const flattenedArray = arr.flat();
console.log(flattenedArray); // 输出 [1, 2, 3, 4, 5, 6]
只展开两层的嵌套数组
const arr = [1, [2, [3, [4]]]];
const partiallyFlattenedArray = arr.flat(2);
console.log(partiallyFlattenedArray); // 输出 [1, 2, 3, [4]]
结语
以上就是我为大家总结的几个JavaScript数组常用方法，希朥您能在日常开发中灵活运用这些方法，提高工作效率。今天的内容就到这里了。如果您觉得这篇文章有帮助或启发了您，别忘了给我一个鼓励的赞哦！
