前端数组常用API

数组常用方法总结

---

提示：以下是本篇文章正文内容，下面案例可供参考

一.push()方法

在数组最后添加一个或多个新元素,并且返回新数组的长度

 const arr = [1, 2, 3]
 arr.push(4, 5, 6)
 console.log(arr)  //[1,2,3,4,5,6]

二.pop()方法

删除数组最后一个元素,并返回数组末尾删除元素

 const arr = [1, 2, 3, 4]
 const arr2 = arr.pop()
 console.log(arr)  //[1,2,3]
 console.log(arr2)  //4

三.unshift()方法

在数组前面添加一个或多个元素,并返回新元素的长度

const arr = [1, 2, 3,4]
const arr2 = arr.unshift(-1,0)
console.log(arr)  //[-1,0,1,2,3]
console.log(arr2)  //6

四.shift()方法

删除数组首部元素,并返回被删除的元素

const arr = [1, 2, 3, 4]
const arr2 = arr.shift()
console.log(arr)  //[2,3,4]
console.log(arr2)  //1

五.splice()方法

对数组进行删除和修改操作,返回被删除元素组成的数组

const arr = [1, 2, 3, 4]
// splice(删除下标,删除个数,新增内容(可选))
const arr2 = arr.splice(0,2,0)
console.log(arr)  //[0,3,4]
console.log(arr2)  //[1,2]

六.slice()方法

剪切当前数组,并返回一个包含剪切值的新数组,不会改变原数组

const arr = [1, 2, 3, 4]
const arr2 = arr.slice(0,3)
console.log(arr)  //[1,2,3,4]
console.log(arr2)  //[1,2,3]

七.concat()方法

合并两个或多个数组,返回新数组,不会改变原数组

const arr = [1, 2, 3]
const arr2 = [4, 5 , 6]
const arr3 = [7, 8 , 9]
const arr4 = arr.concat(arr2,arr3,10)
console.log(arr4)  //[1,2,3,4,5,6,7,8,9,10]

八.join()方法

将数组转化为字符串,不会改变原有数组,此方法会返回转换后的字符串,默认以 , 分隔

const arr = [1, 2, 3]
const arr2 = arr.join()
const arr3 = arr.join('-')
console.log(arr)  //[1,2,3]
console.log(arr2)  //1,2,3
console.log(arr3)  //1-2-3

九.reverse()方法

颠倒数组元素,会改变原数组

const arr = [1, 2, 3]
arr.reverse()
console.log(arr)  //[3,2,1]

十.indexOf()方法

返回数组元素首次在数组中出现的索引,没找到返回-1

const arr = [1, 2, 3]
const arr2 = arr.indexOf(2)
console.log(arr2)  //1

十一.sort()方法

对数组进行排序  a-b从小到大排序   b-a从大到小

const arr = [4, 2, 5, 1, 3]
arr.sort((a, b) => b - a)
console.log(arr)  //[5,4,3,2,1]

十二.filter()方法 迭代

返回数组中满足条件的元素组成新数组,元素只能做布尔类型判断,不会改变原素组

const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9]
const arr2 = arr.filter((item) => item>5)
console.log(arr)  //[1, 2, 3, 4, 5, 6, 7, 8, 9]
console.log(arr2)  //[6, 7, 8, 9]

十三.map()方法 迭代

方法创建一个新数组,这个新数组由原数组中的每个元素都调用一次提供的函数后的返回值组成,可以做运算,不能过滤原素组元素,不会改变原素组

const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9]
const arr2 = arr.map((item) => item+1)
console.log(arr)  //[1, 2, 3, 4, 5, 6, 7, 8, 9]
console.log(arr2)  //[2, 3, 4, 5, 6, 7, 8, 9, 10]

十四.every()方法 迭代

用于判断数组中的元素是否都满足条件,当每个元素都满足条件时,返回ture,否则false,不会改变原素组

const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9]
const arr2 = arr.every((item) => item<40)
console.log(arr)  //[1, 2, 3, 4, 5, 6, 7, 8, 9]
console.log(arr2)  //ture

十五.some()方法 迭代

判断数组是否至少有一个满足条件,一旦找到一个就立即停止并返回true,否则false,不会改变原素组

const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9]
const arr2 = arr.some((item) => item<2)
console.log(arr)  //[1, 2, 3, 4, 5, 6, 7, 8, 9]
console.log(arr2)  //ture

十六.forEach()方法 迭代

遍历整个数组,中途不能用break中断

const arr = [1, 2, 3, 4]
arr.forEach((item, index, arr) => {
  console.log(item)  //1 2 3 4 
  console.log(index)  //0 1 2 3
})

十七.reduce()方法 迭代

给数组做四则运算  第二个参数一般设为0 不会改变原数组

const arr = [4, 2, 5, 1, 3]
// item1 第一次值为reduce第二个参数也就是70 第二次为第一次运算之后的值 第三次...
// item2 第一次为索引0的值也就是4 第二次是索引1的值2, 第三次...
// index 是索引
const arr2 = arr.reduce((item1, item2, index) => {
  // console.log(item1, item2, index)
  return item1 + item2
}, 70)
console.log(arr) // [4, 2, 5, 1, 3]
console.log(arr2) //85 

十八.find()方法 迭代

查找数组中第一个满足条件的元素,返回这个对象

const arr = ['张三','李四','王五','赵六']
const arr2 = arr.find((item,index) => item === '李四')
console.log(arr); // ['张三','李四','王五','赵六']
console.log(arr2); // 李四

十九.findIndex()方法 迭代

查找数组中第一个满足条件的元素,返回下标

const arr = ['张三','李四','王五','赵六']
const arr2 = arr.findIndex((item,index) => item === '李四')
console.log(arr); // ['张三','李四','王五','赵六']
console.log(arr2); // 1

以上内容均为个人理解 如有错误请见谅😊