js数组常用方法总结

一 带回调函数的

1 forEach 遍历数组

foreach方法 无返回值 语法： 数组变量.forEach((数组中的每一项，数组的索引值)=>{执行函数体})

     let arr = [10, 5, 3, 7]
	 arr.forEach((val, index) => {
            console.log(val + '---' + index);
       })

控制台输出结果：

2 map 对数组的每一项进行操作

map方法 返回新数组 语法：数组.map((数组中的每一项，数组的索引值)=> { return 值 })

     let arr2 = [1, 5, 3, 9]
        // 需求：  输出一个新数组arr22 arr22中每一项的值比arr2中每一项的值加一
        let arr22 = arr2.map((val, index) => {
            return val + 1
        })
        console.log(arr2);
        console.log(arr22);

控制台输出结果：

3 filter方法 过滤数组

filter方法 返回过滤后数组 语法：数组.filter((数组中的每一项，数组的索引值)=> { return 条件 })

       let arr3 = [23, 10, 4, 50, 7]
        // 需求：过滤出大于10的元素 
        let newarr3 = arr3.filter((val, index) => {
            return val > 10
        })
        console.log(arr3);
        console.log(newarr3);

控制台输出结果：

4 find方法 查找元素和 findIndex方法 查找索引

find方法 查找元素 返回满足条件的项 语法 数组.find((value, index) =>return 条件))
findIndex方法 查找索引 返回满足条件的索引

        let arr4 = [9, 4, 5, 23, 5]
        let a = arr4.find((val, index) => {
            return val === 9
        })
        console.log(a);
        // findIndex方法   查找索引   返回满足条件的索引
        let b = arr4.findIndex((val, index) => {
            return val === 5
        })
        console.log(b);

控制台输出：

5 reduce方法 累计运算

reduce方法 累计运算 返回累计结果 语法：数组变量.reduce((sum, value, index) =>{return 下一个sum初始值}，0) 此时的0为累计的初始值

 // 需求 ：求数组的和
        let arr5 = [4, 3, 6, 7, 9]
        let c = arr5.reduce((sum, val, index) => {
            sum += val
            return sum
        }, 0)
        //输出打印为29
        console.log(c);

6 every方法 判断每一项是否满足条件 以及some 方法 判断是否有一项满足条件

every方法 测试所有 返回布尔值 数组.every((value, index) => {return 条件})
some 方法 测试至少一个 返回布尔值 数组.some((value, index) => { return 条件 })

 let arr6 = [3, 5, 7, 6, 9]
        let f = arr6.every((val, index) => {
            return val > 4
        })
        // 有一项不满足条件就输出false
        console.log(f);
        let t = arr6.some((val, index) => {
            return val > 4
        })
        // 有一个满足条件就输出为true
        console.log(t);

二 能修改原数组的

1 push方法 末尾插入

push方法 末尾插入 返回值数组新长度

 let arrr = [1, 2, 34, 5]
      let x = arrr.push(7)
      console.log(x);
      console.log(arrr);

控制台输出：

2 pop方法 末尾删除

pop方法 末尾删除 返回删除的元素

        let y = arrr.pop()
        console.log(y);
        console.log(arrr);

控制台输出结果：

3 unshift方法 头部插入

unshift方法 头部插入 返回数组新长度

        let xx = arrr.unshift(2)
        console.log(xx);
        console.log(arrr);

控制台输出结果：

4 shift方法 头部删除 返回删除的元素

shift方法 头部删除 返回删除的元素

        let yy = arrr.shift()
        console.log(yy);
        console.log(arrr);

控制台输出结果：

5 reverse 颠倒数组

5reverse 颠倒数组 返回颠倒后数组

        let newarrr = arrr.reverse()
        console.log(newarrr);

控制台输出结果：

6 splice 删除/新增元素

splice 删除/新增元素 返回值被删除元素形成的数组 语法：数组变量.splice(起始, 删除个数，拼接的东西1，拼接的东西2，…)

        let ara = [1, 2, 3, 4, 5]
        let ara1 = ara.splice(1, 2, 'item')
        console.log(ara);
        console.log(ara1);

控制台输出结果：

7 sort 排序

sort 排序 返回原数组

        let rraa = [
            { name: '李白', age: 12 },
            { name: '张一山', age: 24 },
            { name: '赵露思', age: 19 },
            { name: '迪丽热巴', age: 22 },
        ]
        // 需求：按年龄大小排列数组对象
        rraa.sort((a, b) => {
            return a.age - b.age
        })
        console.log(rraa);

控制台输出结果：

8 concat方法 合并数组

concat方法用来合并数组 返回新数组

三 不能修改原数组的

1 slice方法 截取数组

slice方法 截取数组, 返回值 截取完数组 语法：数组.slice(起始，终止)

       let shuzu = [1, 2, 3, 45, 6]
       // 截取从第2项到最后
       let res = shuzu.slice(1)
       let res1 = shuzu.slice(1, 2)
       console.log(shuzu);
       console.log(res);
       console.log(res1);

控制台输出结果：

2 join方法 以符号拼接每项

join方法 以符号拼接每项 返回值 字符串 语法;数组.join(符号)

        let res2 = shuzu.join(',,,')
        console.log(res2);

控制台输出结果：

3 flat方法 铺平

flat方法 铺平 返回值新数组 语法：数组.flat()

       let shuzu1 = [1, 2, 3, [4, 5, [6, 7, [8, 9]]]]
       let res3 = shuzu1.flat()
       console.log(res3);
       let res4 = shuzu1.flat(2)
       console.log(res4);
       // Infinity无穷的意思 
       let res5 = shuzu1.flat(Infinity)
       console.log(res5);

控制台输出结果：

4 indexOf 查找值 和lastlndexOf 查找值(从后)

indexOf 查找值 返回值下标 语法：数组indexof(值)

        console.log(shuzu.indexOf(45));

控制台输出结果：

lastlndexOf 查找值(从后) 返回值下标 语法：数组.lastIndexOf(值)

        console.log(shuzu.lastIndexOf(45));

控制台输出结果：

5 include方法 查找数组是否包含元素

includes() 方法用于判断数组中是否包含某个指定的元素，如果包含，则方法返回 true，否则返回 false。
语法： array.includes(searchElement[, fromIndex])
其中：
searchElement：需要查找的元素，必选。
fromIndex：可选，从该索引处开始查找元素。如果省略该参数，则从数组的头开始查找。如果 fromIndex 大于或等于数组长度，则返回 false。

        const numbers = [1, 2, 3, 4, 5];
        console.log(numbers.includes(3));  //true
        console.log(numbers.includes(6));   //false