数组常用方法

130 阅读4分钟

image.png

上篇

1.1 Array.push()

 Array.push(),向数组的末尾添加一个或多个元素,并返回新的数组长度
        const arr = [1, 20, 40]
        const lenth=arr.push(99) // 4
        arr // [1, 20, 40,99]
        
  Array.unshift(),向数组的开头添加一个或多个元素,并返回新的数组长度

1.2 Array.shift()

Array.shift(),删除了数组第一个元素,修改了原数组,并返回的是数组第一个元素的值
    let a=['aa','bb','cc']
    a.shift() // ['aa']
    a // ['bb','cc']
Array.pop(),,删除了数组最后一个元素,修改了原数组,并返回的是数组最后一个元素的值

1.3 Array.concat()

Array.concat(arr1,arr2…),合并两个或多个数组,生成一个新的数组
        let arr = [1, 2, 3]
        let arr1 = [4, 5, 6];
        let newArr = [];
        let re = newArr.concat(arr, arr1)
        console.log(re); // [1, 2, 3, 4, 5, 6]

1.4 Array.join()

Array.join(),将数组的每一项用指定字符连接形成一个字符串。默认连接字符为 “,” 逗号
        const arr = ['a', 1, 'b'];
        const str = arr.join();
        console.log(str); // a,1,b
        const str1 = arr.join(''); // a1b
        const str2 = arr.join('&'); //a&1&b

1.5 Array.slice()

// slice 切片功能,不改变原数组
let a=['a', 1, 'b']
a.slice() // ['a', 1, 'b'] 相对于复制原数组
a.slice(1,2) // [1] 从索引1开始切片,不包括索引2

1.6 Array.splice()

// splice 剪切功能
// splice 功能有:插入,删除,替换(改变原数组)
 let arr=['1','2','3','4']
 // 表示从索引 1 开始到索引 2 结束 删除中间的元素
  let arr1=arr.splice(1,2) // ['2','3'] 返回被删除的数组元素
  console.log(arr) // ['1','3','4'] 即['2','3']被删除了
  let arr1=arr.splice(1,2'你好') //  ['1', 'hi', '4'] 表示从索引1开始索引2结束 剪切插入 'hi'

1. Array.reverse()

Array.reverse(),将数组倒序。原数组改变

1. Array.sort()

Array.sort(),对数组元素进行排序
        const arr = [1, 20, 3, 4];
        const newArr = arr.sort((a, b) => a - b) // 从小到大
        const newArr1 = arr.sort((a, b) => b - a) // 从大到小

1.7 Array.indexof()

`indexOf` 检测当前值在数组中第一次出现的位置索引

参数:array.indexOf(item,start) item:查找的元素 start:字符串中开始检索的位置。

`返回值:第一次查到的索引,未找到的话返回-1。`

1.8 Array.includes()

// includes 可以判断一个数组中是否包含某一个元素,并返回true 或者false
['a','b','c'].includes('a') // true

['a','b','c'].includes(1) // false

// includes可以包含两个参数,第二个参数表示判断的起始位置
['a','b','c'].includes('a',1) // false

下篇

1.1 forEach()

`forEach 迭代(遍历) 数组  相当于循环遍历每一个数组,跟for循环很类似`
        let arr1 = [1, 2, 3, 4];
        arr1.forEach((item, index) => {
            console.log('当前的循环项' + item);
            console.log('当前的循环项的索引号' + index);
        });
 `forEach 区别在于他会一直执行里面的代码,数组有几个长度,他就回执行几次`

1.2 filter()

`filter() 创建一个新的数组,返回指定条件的所有元素,返回的是新数组`
 let arr1 = [1, 2, 3, 4];
        let arr2 = arr1.filter((item, index) => {
            return item >= 2;
        })
`filter 区别在于他是需要一个变量来接收返回值的,数组有几个长度就回执行几次  `      

1.3 some()

`some() 查找数组中满足条件的元素,返回值是布尔值,第一个满足条件就不会继续查找`
`使用场景:如果查询数组中唯一的元素, 用some方法更合适,因为它找到这个元素,就不在进行循环,效率更高]`
 let arr1 = [1, 2, 3, 4];
        let arr2 = [];
        let arr3 = arr1.some((item, index) => {
            if (item == 2) {
                arr2.push(item);
                return true // 终止循环 迭代效率逼foreach 高 满足条件就不会继续查找!
            }
        })
`some()与filter()区别 some 遇到return true 停止遍历,而filter不会,它会一直执行里面的代码`        

1.4 every()

`every()方法用于检测数组中的所有元素是否都满足指定条件(该条件为一个函数)。
every()方法会遍历数组的每一项,如果有有一项不满足条件,则表达式返回false,剩余的项将不会再执
行检测;如果遍历完数组后,每一项都符合条,则返回true。`
 const arr = [
      { id: 1, name: '西瓜', state: true },
      { id: 2, name: '榴莲', state: false },
      { id: 3, name: '草莓', state: true },
    ]

    // 需求:判断数组中,水果是否被全选了!
    const re = arr.every(item => item.state == true);// false 

1.5 reduce()

`还有更多高级用法待补充`
[](https://blog.csdn.net/hzxOnlineOk/article/details/120561855)
const arr = [
      { id: 1, name: '西瓜', state: true, price: 10, count: 1 },
      { id: 2, name: '榴莲', state: false, price: 80, count: 2 },
      { id: 3, name: '草莓', state: true, price: 20, count: 3 },
    ]
    // 需求:把购物车数组中,已勾选的水果,总价累加起来!
     // let amt = 0;
    // arr.filter(item => item.state == true).forEach(item => amt += item.price * item.count);
    // console.log(amt);
    
     // arr.filter(item => item.state).reduce((累加的结果, 当前循环项) => { }, 初始值)
 const result = arr.filter(item => item.state).reduce((amt, item) => amt += item.price * item.count, 0)

 console.log(result)

1.6 map()

`map()`方法,它返回一个新的数组,数组中的元素为原始数组调用函数处理后的值
 不改变 原数组
let array = [1, 2, 3]
let newArray = array.map(item => item * 10)
console.log(newArray)  // [10,20,30]