Array篇

203 阅读7分钟

1. map

映射,该方法使用和forEach大致相同,但是该方法有返回值,返回一个新数组,新数组的长度和原数组长度相等

(1) 回调执行次数 == 数组长度
(2) 回调函数内部return
return 新元素
如果没有return, 新元素是undefined
(3) 方法自身的返回值
映射后的新数组

const arr = [1, 5, 15, 20, 30];
const res = arr.map((item, index) => {
    return item;
})
console.log(res) // 输出 [1, 5, 15, 20, 30]

2. filter

filter方法: 有返回值, 过滤出符合条件的元素

(1) 回调执行次数 == 数组长度
(2) 回调函数内部return
return true : 满足筛选条件,放入新数组中
return false : 不满足筛选条件,不放入新数组中
(3) 方法自身的返回值
筛选之后的新数组

const arr = [1, 8, 9, 4, 2, 5];
const res = arr.filter((item, index) => {
    return item % 2 === 0;
}); 
console.log(res) // 输出 [8, 4, 2]

过滤出布尔类型为true的项

const arr = [0, "", false, 1, 3, 4];
const res = arr.filter((item, index) => {
    return item
});
console.log(res) // 输出 [1, 3, 4]

3. some

判断 数组中是否有满足条件的元素 (逻辑或 ||, 有任意一个满足即可)

(1) 回调执行次数 != 数组长度
(2) 回调函数内部return return true

  • 循环结束。 找到满足条件的元素, some自身返回true return false :
  • 循环继续。没有找到满足条件的,如果所有的元素都是返回false,最终some默认返回false (3) 方法自身的返回值
    true: 有满足条件的元素
    false: 没有满足条件的元素
const arr = [
  { name: "张三", age: 18, done: false },
  { name: "李四", age: 19, done: true },
  { name: "王五", age: 20, done: true }
]
const res = arr.some((item) => {
  return item.done
})
console.log(res) // 输出 true

4. every

判断数组中所有的项是否满足要求,如果全都满足,才返回true,否则返回false

const arr = [
  { name: "张三", age: 18, done: false },
  { name: "李四", age: 19, done: true },
  { name: "王五", age: 20, done: true }
]
const res = arr.every((item) => {
    return item.done
})
console.log(res) // 输出 false

5. find

找到符合条件的项,并且返回第一项,返回的是元素,如果没有这个元素则返回 undefined

const arr = [
    { id: 1, name: '张三'},
    { id: 2, name: '张三'},
    { id: 3, name: '李四'}
];
const res = arr.find((item) => {
  return item.name
})
console.log(res) // 输出 {id: 1, name: '张三'}

6. findIndex

(1) 回调执行次数 != 数组长度
(2) 回调函数内部return
return true

  • 循环结束。 找到元素,返回当前元素下标 return false :
  • 循环继续。没找到。 如果全部都是false,最终返回固定值-1 (3) 方法自身的返回值\
  • -1 : 没有\
  • 下标 : 有
const arr = [
    { id: 1, name: '张三'},
    { id: 2, name: '张三'},
    { id: 3, name: '李四'}
];
const res = arr.findIndex((item) => {
    return item.name
})
console.log(res) // 输出 0

7. reduce

数组reduce遍历 : 为每一个元素执行一次回调,返回最后一次回调的结果

第一个参数:回调函数 (sum,item,index)=>{}
sum : 上一次回调return 返回值
item: 当前元素
index: 当前下标
第二个参数 : sum初始值。 一般给0, 如果不给,遇到空数组reduce就会报错
reduce自身返回值: 最后一次sum的结果

const arr = [20,50,60,70]
const res = arr.reduce((sum,item,index)=>{
    console.log( sum, item, index) // 第一次 0 20 0 第二次 20 50 1 ....
    return sum + item
}, 0)
console.log(res) // 输出 200

8. forEach

相当于 for循环另一种写法

(1) 回调执行次数 == 数组长度
(2) 回调函数内部return: 无
(3) 方法自身的返回值:无

const arr = [5, 10, 15 ,20 ,30]
arr.forEach( (item,index)=>{
    console.log(item,index) // 输出 第一次 5 0 第二次 10 1 ...
})

9. join

就是把数组转换成字符串,然后给他规定个连接字符,默认的是逗号( , )

const arr = [1,2,3]
console.log(arr.join())      // 1,2,3
console.log(arr.join("-"))    // 1-2-3
console.log(arr.join(""))       // 123
console.log(arr)                // [1, 2, 3](原数组不变)

10. push

向数组的末尾添加新内容
参数:要添加的项。传递多个用逗号隔开,任何数据类型都可以
返回值:新增后数组的长度
是否改变原数组:改变

const arr = [20, 30, 50]
arr.push(100)  // 返回一个新的长度
console.log(arr)  // 结果为 [20, 30, 50, 100]

11. pop

删除数组的最后一项
参数:无
返回值:被删除的项
是否改变原数组:改变

const arr = [20, 30, 50]
arr.pop()  // 删除的最后一项 50
console.log(arr) // 输出 [20, 30]

12. shift

删除数组的第一项
参数:无
返回值:被删除的项
是否改变原数组:改变

const arr = [20, 30, 50]
arr.shift()  // 删除的第一项 20
console.log(arr) // 输出 [30, 50]

13. unshift

向数组首位添加新内容
参数:要添加的项,多项用','隔开
返回值:新数组的长度
是否改变原数组:改变

const arr = ['c','d']
arr.unshift('a','b')
console.log(arr) // 输出 ["a", "b", "c", "d"]

14. slice

参数:

Array.prototype.slice(n, m),从索引n开始查找到m处(不包含m)

Array.prototype.slice(n) 第二个参数省略,则一直查找到末尾

Array.prototype.slice(0)原样输出内容,可以实现数组克隆

Array.prototype.slice(-n,-m) slice支持负参数,从最后一项开始算起,-1为最后一项,-2为倒数第二项

返回值:返回一个新数组

是否改变原数组:不改变

const arr = [1,2,3,4,5,6,7,8,9]
console.log(arr.slice(2,8)) // 从索引2开始查找到索引为8的内容,结果为[3, 4, 5, 6, 7, 8]
console.log(arr.slice(0)) // 返回元素组
console.log(arr.slice(-2,-1)) // 输出 [8]

15. splice

对数组进行增删改

增加:ary.splice(n,0,m)从索引n开始删除0项,把m或者更多的内容插入到索引n的前面

返回空数组

修改:ary.splice(n, index, m)从索引n开始删除x个,m替换删除的部分

把原有内容删除掉,然后用新内容替换掉

删除:ary.splice(n,m) 从索引n开始删除m个内容

(如果第二个参数省略,则从n删除到末尾)

返回删除的新数组,原有数组改变

const arr = [ 33, 44, 55, 66, 77, 88]

//增加
arr.splice( 2, 0, 'a', 'b')
console.log(arr) // [33, 44, "a", "b", 55, 66, 77, 88]

//修改
arr.splice(1,2,'a','b') // [44, 55]
console.log(arr) // 打印 [33, "a", "b", 66, 77, 88]

//删除
console.log(arr.splice(3,2)) // [66, 77]
console.log(arr.splice(3)) // [66, 77, 88]

16. concat

用于连接两个或多个数组

参数:参数可以是具体的值,也可以是数组对象。可以是任意多个

返回值:返回连接后的新数组

是否改变原数组:不改变

const arr = ['你']
const arr1 = arr.concat('好')
console.log(arr1) // ["你", "好"]

17. indexOf

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

参数:Array.prototype.indexOf( item, start)

item: 查找的元素 start: 字符串中开始检索的位置

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

是否改变原数组:不改变

const arr = ['a','b','c','d','e','a','f']
console.log(arr.indexOf('c')) // 2
console.log(arr.indexOf('a', 3)) // 5

18. includes

判断一个数组是否包含一个指定的值

参数:指定的内容

返回值:布尔值

是否改变原数组:不改变

const arr = ['a','b','c','d']
console.log(arr.includes('c')) // true
console.log(arr.includes(2)) // false

19. sort

对数组的元素进行排序(默认是从小到大来排序 并且是根据字符串来排序的)

参数:可选(函数) 规定排序规则 默认排序顺序为按字母升序

返回值:排序后新数组

是否改变原数组:改变

sort在不传递参数情况下,只能处理10以内(个位数)数字排序

const arr = [33, 44, 23, 55, 90, 18, 9]

arr.sort((a,b) => {
    return a-b // [9, 18, 23, 33, 44, 55, 90]
    // return b-a  // [90, 55, 44, 33, 23, 18, 9]
})
console.log(arr)

20. reverse

把数组倒过来排列

参数:无

返回值:倒序后新数组

是否改变原数组:改变

const arr = [2, 4, 6, 8, 10]
console.log(arr.reverse()) // [10, 8, 6, 4, 2]