JS 开发中数组常用的方法

时间:2023-03-08 17:19:11
JS 开发中数组常用的方法
大家有没有想过,js数组为什么会有这么多的方法,没错,就是为了不同场景下处理数据的需要,就像设计模式一样,都是为了能更好的处理当前场景的需要。
首先怎么创建一个数组呢,
// 两种方式
// 1,构造函数模式 (Array,是浏览器引擎自动创建的构造函数,js 所有直接可用的东西都是浏览器默认创建的,各个浏览器厂商根据ECMAScript的标准去默认支持)
let arr = new Array()
// 2,字面量表示法
let arr2 = []
console.log(arr,'arr')
console.log(arr2,'arr2')

JS 开发中数组常用的方法

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时,跳出了循环
上面是开发中常用的数组的方法,基本能够满足开发中绝大部分的场景