常用数组方法分类及示例用法

一、会改变原数组（7类及用法）

push 数组末尾处追加元素

let sum = [1, 2];
sum.push('末尾添加',7,6);
console.log(sum);

unshift 数组开头处追加元素

let sum = [1, 2];
sum.unshift('开头添加',5,6)
console.log(sum);

shift 移除数组的第一个元素

let arr = [1, 2, 3, 4, 5];  
  
// 使用 shift 方法  
let removedElement = arr.shift();  
  
console.log(removedElement); // 输出：1  
console.log(arr); // 输出：[2, 3, 4, 5]

pop 移除数组的最后一个元素

let arr = [1, 2, 3, 4, 5];  
  
// 使用 pop 方法删除最后一个元素  
let removedElement = arr.pop();  
  
console.log(removedElement); // 输出：5  
console.log(arr); // 输出：[1, 2, 3, 4]

splice 移除数组的最后一个元素

let fruits = ["Banana", "Orange", "Apple", "Mango"];  
let removed = fruits.splice(2, 2); // 从索引 2 开始，删除 2 个元素  
  
console.log(fruits);  
// 输出: ["Banana", "Orange"]  
  
console.log(removed);  
// 输出: ["Apple", "Mango"]

reverse 数组中元素转换位置

let drr = ['哈哈', '呵呵']
let d = drr.reverse(1,0)

console.log('交换下标0和1的位置',d);
// 输出: ["呵呵", "哈哈"]

sort 对数组的元素进行排序

let numbers = [40, 1, 5, 200];  
  
numbers.sort(function(a, b) {  
  return a - b;  
});  
  
console.log(numbers);  
// 输出: [1, 5, 40, 200]

二、不会改变原数组（6类及用法）

join() 将数组的所有元素连接成一个字符串.素通过指定的分隔符进行分隔。如果没有提供分隔符，则数组元素将使用逗号（,）作为默认的分隔符。

let fruits = ["Banana", "Orange", "Apple"];  
let fruitString = fruits.join();  
  
console.log(fruitString);  
// 输出: "Banana,Orange,Apple"

concat() 合并两个或多个数组。这个方法不会改变现有的数组，而是返回一个新数组，这个新数组包含了原数组和其他要合并的数组的所有元素。

- 合并两个数组
let array1 = [1, 2, 3];  
let array2 = [4, 5, 6];  
let mergedArray = array1.concat(array2);  
  
console.log(mergedArray);  
// 输出: [1, 2, 3, 4, 5, 6]
- 合并多个数组
let array1 = [1, 2, 3];  
let array2 = [4, 5, 6];  
let array3 = [7, 8, 9];  
let mergedArray = array1.concat(array2, array3);  
  
console.log(mergedArray);  
// 输出: [1, 2, 3, 4, 5, 6, 7, 8, 9]

indexOf() 在数组中查找某个元素，并返回该元素第一次出现的索引。如果数组中没有该元素，则返回 -1。

let array = [10, 20, 30, 40, 50];  

let index = array.indexOf(30);  
console.log(index);  
// 输出: 2

let index2 = array.indexOf(60);  
console.log(index2);  
// 输出: -1

let index = array.indexOf(10, 2);  
console.log(index);  
// 输出: 3
// 第二个 `10` 出现在索引 `3` 的位置，所以 `indexOf()` 返回 `3`

lastIndexOf() 用于在数组中查找某个元素最后一次出现的索引。如果数组中没有该元素，则返回 -1。

let fruits = ["Banana", "Orange", "Apple"];  
let fruitString = fruits.join();  
  
console.log(fruitString);  
// 输出: "Banana,Orange,Apple"

includes() 用于检查一个数组是否包含某个特定的元素，返回一个布尔值。如果数组中存在该元素，则返回 true，否则返回 false。

let array = [1, 2, 3, 4, 5];
console.log(array.includes(2)); // 输出: true
console.log(array.includes(6)); // 输出: false

flat() 用于将嵌套的数组（即包含其他数组的数组）展平为一维数组。这个方法会按照一个可指定的深度递归展平数组，如果不指定深度，它默认会展平到一维。

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

// 展平到一维数组
let flattenedArray = nestedArray.flat();
console.log(flattenedArray); // 输出: [1, 2, 3, 4, 5, [6, 7]]

// 指定深度为2，展平到指定深度
let flattenedToDepth2 = nestedArray.flat(2);
console.log(flattenedToDepth2); // 输出: [1, 2, 3, 4, 5, 6, 7]

三、参数是函数的方法

find(): 遍历查找到对应属性的数组内容

let brr = [
    {
        id: 1,
        age: 18,
        name: '小红'
    }, {
        id: 2,
        age: 20,
        name: '小美'
    }, {
        id: 3,
        age: 21,
        name: '小明'
    }
];
brr.find((item, index) => {
    console.log('查找每项年龄', item.age);
    console.log('查找每项下标', index);
})

效果： 2. findIndex 遍历查找数组的下标

let brr = [
    {
        id: 1,
        age: 18,
        name: '小红'
    }, {
        id: 2,
        age: 20,
        name: '小美'
    }, {
        id: 3,
        age: 21,
        name: '小明'
    }
];
brr.findIndex((item, index) => {
    if(item.id === 3) {
        console.log('返回下标是3的内容', item);
        console.log('当前内容下标值',index);
    }
})

效果： 3. forEach 遍历全部数组

let arr = [1, 4, 8, 3];
arr.forEach((item,index) => {
    console.log('每项数组',item, '每项下标',index);
})

效果： 4. map 遍历所有数据，返回一个新数组

let arr = [1, 4, 8, 3];
arr.map((item,index) => {
    console.log('每项数组',item, '每项下标',index);
})

效果： 5. some 遍历筛选有一个符合条件就可返回对应内容

let brr = [
    {
        id: 1,
        age: 18,
        name: '小红'
    }, {
        id: 2,
        age: 20,
        name: '小美'
    }, {
        id: 3,
        age: 21,
        name: '小明'
    }
];
brr.some((item, index) => {
    if(item.age === 20) {
        console.log('返回年龄是20的内容',item);
        console.log('返回年龄是20岁的下标', index);
    }
})

效果： 6. filter 遍历筛选查找，返回符合的条件多用于模糊查找

let brr = [
    {
        id: 1,
        age: 18,
        name: '小红'
    }, {
        id: 2,
        age: 20,
        name: '小美'
    }, {
        id: 3,
        age: 21,
        name: '小明'
    }
];
brr.filter((item, index) => {
    if(item.age != 18) {
        console.log('年龄不是18岁的内容', item);
        console.log('年龄不是18岁的下标', index);
    }
})

every 测试所有元素是否符合要求返回一个布尔值

let brr = [
    {
        id: 1,
        age: 18,
        name: '小红'
    }, {
        id: 2,
        age: 20,
        name: '小美'
    }, {
        id: 3,
        age: 21,
        name: '小明'
    }
];
let bool = brr.every(item => item.age === 20)
console.log('全部符合则为true，不全部则为false',bool);

效果： 8. reduce 数组累加求和

let crr = [1,1,8,8,5,6,4,7,7];
let he =  crr.reduce((a, b) => a + b);
console.log('累加求和', he);

效果：

21种数组方法（分类常用）

常用数组方法分类及示例用法

一、会改变原数组（7类及用法）

二、不会改变原数组（6类及用法）

三、参数是函数的方法