改变原数组的方法
1. push() 末尾添加元素
- 描述：数组中添加一个值
- 返回：返回添加后的数组的长度
const arr = [1,2,3,4,5]
const result = arr.push(6)
console.log(arr) // [1,2,3,4,5,6]
console.log(result) // 6
2.pop() 末尾删除元素
- 描述：删除数组中最后一个值
- 返回：返回删除的值
const arr = [1,2,3,4]
const result = arr.pop()
console.log(arr) // [1,2,3]
console.log(result) // 4
3.shift() 头部删除元素
- 描述：删除数组中的第一个值
- 返回：返回删除的值
const arr = [1,2,3,4]
const result = arr.shift()
console.log(arr) // [2,3,4]
console.log(result) // 1
4. unshift() 头部插入元素
- 描述：在数组头部插入一个或多个元素
- 返回：插入后的数组的长度
const arr = [1,2,3,4]
const result = arr.unshift(9) // 也可以插入多个arr.unshift(9,8,7)
console.log(arr) // [9,1,2,3,4]
console.log(result) // 5
5.reverse() 反转数组
- 描述：反转数组
- 返回：反转后的数组
const arr = [1,2,3,4]
const result = arr.reverse()
console.log(result) // [4,3,2,1]
6.sort() 数组排序
- 描述：数组排序
- 返回：排序后的数组
const arr1 = [2,34,1,45,8,90]
const result1 = arr1.sort((a,b) => a-b) // 从小到大
const arr2 = [2,34,1,45,8,90]
const result2 = arr2.sort((a,b) => b-a) // 从大到小
console.log(result1) // [1,2,8,34,45,90]
console.log(result2) // [90,45,34,8,2,1]
7.splice() 截取数组
- 描述：截取数组并且可以插入新的值
- 返回：截取的数组
使用：三个参数
splice(index, howmany, item1,item2...)
- index是从第几个下标开始截取
- howmany截取几个
- items在截取的位置插入数据
const arr = [1,2,3,4,5]
const result1 = arr.splice(1,2) //从下标1开始截取2个
console.log(result1) // [2,3]
const arr2 = [1,2,3,4,5]
const result2 = arr2.splice(1,2,45,67)
console.log(arr2) // [1,45,67,4,5]
console.log(result2) // [2,3]
不改变原数组的方法
1.slice() 截取数组
- 描述：截取数组
- 返回：截取的数组
const arr = [10,20,30,40,50]
const result = arr.slice(1,3) // 截取下标[1,3) 不包括3
console.log(result) // [20,30]
2.concat() 连接数组
- 描述：连接数组
- 返回：连接后的数组
const arr = [1,2,3]
const result = arr.concat([10,20])
console.log(result) // [1,2,3,10,20]
3.join() 数组转为字符串
- 描述：数组转为字符串
- 返回：返回字符串
const arr = [1,2,3,4]
const result = arr.join() // '1,2,3,4'
const result2 = arr.join('-')
console.log(result2) // '1-2-3-4'
4.toString() 数组转为字符串
- 描述：转为字符串 等同于join()
- 返回：返回字符串
const arr = [1,2,3]
const result = arr.toString() // '1,2,3'
5.indexOf() 头部开始元素第一次出现的位置
- 描述：从头部开始找出某个元素第一次出现的位置
- 返回：返回该元素的下标，没有返回-1
const arr = [1,2,3,4]
const result = arr.indexOf(3) // 2
const result2 = arr.indexOf(7) // -1
6.lastIndexOf() 尾部开始查找元素第一次出现的位置
- 描述：从尾部开始找出某个元素第一次出现的位置
- 返回：该元素的下标，没有返回-1
const arr = [2,3,4,4,5,6]
const result = arr.lastIndexOf(4) // 3
7.forEach() 遍历循环数组
- 描述：遍历循环数组
- 返回：无
使用：forEach((item,index,arr)=>{console.log()})
- item 数组中每一项
- index 下标
- 该数组
const arr = [1,2,3,4]
arr.forEach(item => {console.log(item)})
8.map() 遍历映射数组
- 描述：映射数组
- 返回：映射完后的数组
使用：map((item,index,arr)=>{console.log()})
- item 数组中的每一项
- index 下标
- arr 该数组
const arr = [10,20,30,40]
const result = arr.map(item => {
return item + 1
})
console.log(result) // [11,21,31,41]
9.filter() 过滤数组
- 描述：过滤数组
- 返回：过滤后的数组
使用：filter((item,index,arr)=>{console.log()})
- item 数组中的每一项
- index 下标
- arr 该数组
const arr = [12,2,34,5,78]
const result = arr.filter(item => {
return item > 10
})
console.log(result) // [12,34,78]
10. some() 判断数组中是否有满足条件的元素
- 描述：判断数组中是否有满足条件的元素
- 返回：只要有一项满足返回true，否则返回false
使用：some((item,index,arr)=>{console.log()})
- item 数组中的每一项
- index 下标
- arr 该数组
const arr = [1,23,34,-12,4]
const result = arr.some(item => {
return item < 0
})
console.log(result) // true
11.every() 判断数组中是否每一项都满足条件
- 描述：判断数组中是否每一项都满足条件
- 返回：所有项都满足返回true，否则返回false
使用：every((item,index,arr)=>{console.log()})
- item 数组中的每一项
- index 下标
- arr 该数组
const arr = [1,23,34,-12,4]
const result = arr.every(item => {
return item < 0
})
console.log(result) // false
const result2 = arr.every(item => {
return typeof item == 'number' //判断每一项是不是都是number类型
})
console.log(result2) // true
12. find() 找出数组中满足条件的第一个元素
- 描述：找出数组中满足条件的第一个元素
- 返回：返回这个元素值
使用：find((item,index,arr)=>{console.log()})
- item 数组中的每一项
- index 下标
- arr 该数组
const arr = [1,23,34,-12,4]
const result = arr.find(item => {
return item > 10
})
console.log(result) // 23
13. includes() 数组中是否包含元素
- 描述：数组中是否含有某个元素
- 返回：包含返回true，没有返回false
const arr = [1,2,3,5]
const result = arr.includes(4) // false
14. reduce() 超级重要 超级重要
- 描述：叠加器
- 返回：叠加后的结果
使用：reduce((prev,item,index,arr)=>{console.log()},initVal)
- prev 回调初始值，如果设置了initVal则initVal为初始值，没有的话默认数组第一个为初始值
- item 当前元素，如果设置了initVal则从第一个元素开始，没有设置的话prev为第一个元素,item从第二个元素开始
- index 为item的下标
- arr 为该数组
- initVal 初始值
const arr = [1,2,3,4,5]
const result = arr.reduce((prev,item)=>{
return prev + item
})
console.log(result) // 15 这就是累加器1+2+3+4+5
const result2 = arr.reduce((prev,item)=>{
return prev + item
},10)
console.log(result2) // 25 初始值为10 所以就是10+1+2+3+4+5
// 数组去重的时候可以使用 特好用
const arr2 = [1,23,34,23,1,4,6,4,67,6,98,4]
const result3 = arr2.reduce((prev,item)=>{
return prev.includes(item) ? prev : [...prev,item]
},[])
console.log(result3) // [1, 23, 34, 4, 6, 67, 98]
15.Array.from()
- 描述：将伪数组或者可迭代对象转为数组
- 返回：转换后的数组
使用：Array.from(arrLike,mapFn,thisArg)
- arrLike：就是伪数组或者可迭代对象
- mapFn：遍历数组中的每个值，可以对每一项单独处理
- thisArg： mapFn中的this
通常用来转换伪数组arguments为数组，也可以用来遍历数组处理数据
// 1. 将伪数组处理为数组
const fun = function(){
const args = Array.from(arguments)
console.log(args)
}
fun(1,2,3) // [1,2,3]
// 2. 将Set Map可迭代对象转为数组
console.log(Array.from(new Set([1,2,3]))) // [1,2,3]
console.log(Array.from(new Set('123'))) // ['1','2','3']
const maps = new Map()
maps.set('a',1)
maps.set('b',2)
console.log(Array.from(maps)) // [['a',1],['b',2]]
// 3. 可以拷贝数组
// 浅拷贝
const arr = [1,2,3]
const copyarr = Array.from(arr)
console.log(copyarr) // [1,2,3]
// 深拷贝
function deepCopy(val){
return Array.isArray(val) ? Array.from(val, v => deepCopy(v)) : val
}
const deeparr = [1,2,[3,4],5]
const deeparrcopy = deepCopy(deeparr)
console.log(deeparrcopy) // [1,2,[3,4],5]
// 4. 生成空数组
const length = 3
//{length}相当于{length:5}可以理解成伪数组中的length
const arr = Array.from({length}, v => null)
console.log(arr) // [null, null, null]
// 5. 生成序列数
const num = 5
const arr = Array.from({ length:num }, (v,index) => index)
console.log(arr) // [0,1,2,3,4]
