JS 开发中数组常用的方法

大家有没有想过，js数组为什么会有这么多的方法，没错，就是为了不同场景下处理数据的需要，就像设计模式一样，都是为了能更好的处理当前场景的需要。

首先怎么创建一个数组呢，

// 两种方式
// 1,构造函数模式 （Array,是浏览器引擎自动创建的构造函数，js 所有直接可用的东西都是浏览器默认创建的，各个浏览器厂商根据ECMAScript的标准去默认支持）
let arr = new Array()
// 2，字面量表示法
let arr2 = []
console.log(arr,'arr')
console.log(arr2,'arr2')

1,基本方法 判断数组 数组的增删改查 转换成字符串 合并数组

1.1 判断是否是一个数组 isArray

// Array.isArray()  返回 boolean 值
let arr = [1,2]
let isArr =  Array.isArray(arr)
console.log(isArr)
// true
// 可以看到，arr是一个数组，如果不是，返回false

1.2 向数组里添加数据 push unshift

// 从数组后面添加数据 push
let arr = [1,2]
arr.push(3) //可以push 一个或多个如 arr.push(3,4)
console.log(arr) // [1,2,3]
// 从数据前面添加数据 unshift
let arr2 = [1,2]
arr2.unshift(0);
console.log(arr2); //[0,1,2]

1.3 从数组里删除数据 pop shift

// 删除数组最后一位数据 pop
let arr = [1,2,3]
arr.pop()
console.log(arr) // [1,2]
// 删除数组第一位数据 shift
let arr2 = [1,2,3]
arr2.shift()
console.log(arr2) // [2,3]

1.4 改变数组数据 splice

// splice(index,num,data) // index => 数组下标 num => 删除的数量 data => 插入的数据
let arr = [1,2,3]
//示例 替换数组第二个元素数字2为数字4
arr.splice(1,1,4)
console.log(arr) // [1,4,3]

1.5 查找数组中的数据 indexOf lastIndexOf includes

//indexOf(data,index) lastIndexOf(data,index); data=> 要查找的数据，index（可选项） 从那个下标开始查
//indexOf()从数组的开头（位置0）开始向后查找，lastIndexOf()方法则从数组的末尾开始向前查找,返回找到的下标 没有找到返回 -1
// includes,意思包含包括，判断是否包含，返回boolean值
let arr = [1,2,3]
let index = arr.indexOf(1)
let index2= arr.indexOf(7)
console.log(index) // 0
console.log(index2) // -1

let arr2 = [1,2,3,4]
let index3 = arr.lastIndexOf(3)
let index4 = arr.lastIndexOf(8)
console.log(index3) // 2
console.log(index4) // -1

let arr3 = [1,2,3,4]
let index5 = arr.includes(3)
console.log(index5) // true

1.6 数组转换成字符串 join(str)

// join(str)  // 默认以逗号 , 连接，可以指定连接符
let arr = [1,2,3]
let str =  arr.join('-')
console.log(str) // 1-2-3

1.7 数组合并（扩展）concat

// join  // 默认以逗号 , 连接，可以指定连接符
let arr = [1,2,3]
let arr2 = [4,5,6]
let arr3 = arr.concat(arr2)
console.log(arr)
console.log(arr2)
console.log(arr3)
// [1, 2, 3]
// [4, 5, 6]
// [1, 2, 3, 4, 5, 6]
// 可以看到原数组都没变，concat之后返回一个新数组

// es6 数组的扩展 (... 扩展运算符)
let arr4 = [1,2,3]
arr5 = [...arr4,4,5,6]
console.log(arr4)
console.log(arr5)
// [1, 2, 3]
// [1, 2, 3, 4, 5, 6]

2.数组的迭代方法 什么是迭代，对于js数组来说，就是通过遍历原数组执行callback的过程

2.1 Array.every(callback) 遍历数组 执行callback函数的条件 返回 Boolean 值

let arr = [1,2,3,5,6]
let data = arr.every((item,index)=> {
    console.log(item,index)
    return item < 3
})
console.log(data,'data')
// 1,0
// 2,1
// 3,2
// false data
// 可以看到，当循环到第一个不符合条件时，终止遍历，同时返回 boolean

2.2 Array.some(callback) 遍历数组 执行callback函数的条件 返回 Boolean 值

let arr = [1,2,3,5,6]
let data = arr.some((item,index)=> {
    console.log(item,index)
    return item < 3
})
console.log(data,'data')
// 1,0
// true data
// 当有一个符合，终止遍历，同时返回 boolean

2.3 Array.filter(callback) 遍历数组 执行callback函数的条件 返回 符合条件的新数组

let arr = [1,2,3,5,6]
let data = arr.filter((item,index)=> {
    console.log(item,index)
    return item < 3
})
console.log(data,'data') // [1,2]
// filter 过滤，每一项都参与了循环

2.4 Array.map(callback) 遍历数组 执行callback函数的条件 全部执行后返回新的数组

let arr = [1,2,3,5,6]
let data = arr.map((item,index)=> {
    console.log(item,index)
    return item*2
})
console.log(data,'data') //  [2, 4, 6, 10, 12]
// map 映射，每一项都参与了循环，通过callback函数后 返回新的数组

2.5 Array.reduce(callback(previousValue,currentValue,index,array))

//callback （执行数组中每个值的函数，包含四个参数）
// 1、previousValue  上一次调用回调返回的值，或者是提供的初始值（initialValue）
// 2、currentValue  数组中当前被处理的元素
// 3、index  当前元素在数组中的索引）
// 4、array  调用 reduce 的数组
// 注：如果是第一次调用 callback，previousValue 为第一个元素的值,currentValue 是第二个元素的值
let arr = [1,2,3,5,6]
let data = arr.reduce((previousValue,currentValue,index)=> {
    console.log(previousValue,currentValue,index)
    return previousValue +  currentValue
})
console.log(data,'data') //  [2, 4, 6, 10, 12]
// 1 2 1
// 3 3 2
// 6 5 3
// 11 6 4
// 17 'data'
// 可以看出来，第一次执行callback的时候，是执行数组的第二个元素，其中 previousValue 为第一个元素的值,currentValue 是第二个元素的值
// 注：不管 reduce 作为累加累乘还是取最大值，其都是 拿callback的值和下一个元素再去执行callback,大家记住这一点就可以

2.6 Array.forEach(callback) 遍历数组 执行callback 不返回新值，只是遍历操作

let arr = [1,2,3,5,6]
let arr2 = []
arr.forEach((item,index)=> {
    console.log(item,index)
    arr2.push(item*2)
})
console.log(arr2,'data') //  [2, 4, 6, 10, 12]
// forEach 遍历循环，每一项都参与了循环，执行callback函数

2.7 Array.find(callback) 遍历数组 找到符合callback的项，中断循环并返回，没有找到返回 underfined

let arr = [1,2,3,5,6]
let item =  arr.find((item,index)=> {
    console.log(item,index)
    return item > 4
})
console.log(item,'data')
// 1 0
// 2 1
// 3 2
// 5 3
// 5 'data' 元素
// 可以看到，当遍历到 5时，跳出了循环

2.8 Array.findIndex(callback) 遍历数组，返回数组中第一个满足条件的索引(从0开始), 不满足返回-1

let arr = [1,2,3,5,6]
let item =  arr.findIndex((item,index)=> {
    console.log(item,index)
    return item > 4
})
console.log(item,'data')
// 1 0
// 2 1
// 3 2
// 5 3
// 3 'data' 下标3
// 可以看到，当遍历到下标3时，跳出了循环

上面是开发中常用的数组的方法，基本能够满足开发中绝大部分的场景