JavaScript常用数组Array方法和使用场景

喜欢撸猫的帅伟
583 阅读6分钟

「这是我参与2022首次更文挑战的第2天，活动详情查看：2022首次更文挑战」

前言

在开发过程中，我们经常会使用很多的Array方法，接下来我会整理一些我自己平时开发过程中使用频率比较高的Array方法并结合使用场景来和大家一起记录并学习。

常用数组方法

1.map: 映射

var arr =[10, 20, 30, 40, 50];
var newArr = arr.map(function(item,index,arr){ 
    return item = item + 1 
},this);
console.log(arr);
// [10, 20, 30, 40, 50]
console.log(newArr);
//[11, 21, 31, 41, 51]

map() 方法创建一个新数组，数组中的每个元素调用的回调函数后的返回值被塞入新数组中，最后返回新的数组。

使用场景：不修改原数组数据，需要新一个数组接收处理好的数据。

  • 实际需求举例 需求： 将下面学生的信息整理成'学号+下划线+名字'，输出给老师
var students = [
  {
    order: 1,
    name: "张三",
    age: 18
  },
  {
    order: 2,
    name: "李四",
    age: 19
  },
  {
    order: 3,
    name: "王二",
    age: 16
  },
]
var studentsId = students.map(function(item,index,arr){
   return {
       id: `${item.order}_${item.name}`
   } 
},this);
console.log(studentsId);

image.png

通过map方法我们遍历了组数的每个元素，并返回我们针对这个数组元素处理后的结果，最后生成我们需要的新数组而不会改变原本数组；

2.forEach: 迭代

    var arr =[10, 20, 30, 40, 50];
    var newArr = arr.forEach(function(item,index,arr){
       arr[index] = item + 1; 
    },this);
    console.log(arr);
    // [11, 21, 31, 41, 51]
    console.log(newArr);
    // undefined

forEach() 方法不创建新的数组而且返回值是undefined，数组中的每个元素调用回调函数的返回值也是undefined。

  • 实际需求举例 需求： 将学生的'学号+下划线+名字'，变成学生的id,存储进原来的students数据中
var students = [
  {
    order: 1,
    name: "张三",
    age: 18
  },
  {
    order: 2,
    name: "李四",
    age: 19
  },
  {
    order: 3,
    name: "王二",
    age: 16
  },
]
students.forEach(function(item,index,arr){
   arr[index]["id"] = `${item.order}_${item.name}`
},this);
console.log(students);

image.png

我们通过forEach方法给原本数组的每一个元素都新增了一个属性id，并将值${item.order}_${item.name}赋予这个属性，达到修改数组本身内容，并不需要生成新的数组。

使用场景：需要修改原数组的内容，并不需要生成新的数组。

3.filter: 过滤

    var arr =[10, 20, 30, 40, 50];
    var newArr = arr.filter(function(item,index,arr){
        return item > 20;
    },this);
    console.log(arr);
    // [10, 20, 30, 40, 50]
    console.log(newArr);
    // [30, 40, 50]

filter() 方法创建一个新数组，数组中的所有元素通过回调函数规则返回值是true的元素被塞入新数组中，最后返回新的数组。

使用场景： 需要从数组中用筛选出我们需要的元素，并输出成新的数组。

  • 实际需求举例 需求：筛选出这些学生中的已经成年的学生
var students = [
  {
    name: "张三",
    age: 18
  },
  {
    name: "李四",
    age: 19
  },
  {
    name: "王二",
    age: 16
  },
]
var adultStudents = students.filter(function(item) {
  return item.age > 17
})
console.log(adultStudents)

image.png

我们通过filter方法从一个大的数组中筛选出我们的需要的元素并生成一个新的数组，方便之后使用。

4.find / findIndex / indexOf：查询

  1. find() 当数组中的第一个元素通过回调函数规则返回值是true的时候，返回这个元素 本身。
  • 实际需求举例

需求：根据学号找出学生资料

var students = [
  {
    id: 1,
    name: "张三",
    age: 18
  },
  {
    id: 2,
    name: "李四",
    age: 19
  },
  {
    id: 3,
    name: "王二",
    age: 17
  },
]

function findStudent(id){
    return students.find(function(student,index,arr){
       return student.id === id;
    })
}
let student = findStudent(1);
console.log(student);
//{id: 1, name: '张三', age: 18}
  1. findIndex() 当数组中的第一个元素通过回调函数规则返回值是true的时候，返回这个元素的 索引值，如果回调函数都返回false，则返回 -1。

可以用来判断某个元素是否存在在这个数组中

  • 实际需求举例 需求：找出这些学生们年龄的分布
var students = [
  {
    name: "张三",
    age: 18
  },
  {
    name: "李四",
    age: 19
  },
  {
    name: "王二",
    age: 17
  },
  {
    name: "王王",
    age: 17
  },
  {
    name: "王王王",
    age: 19
  },
]
var ages=[];
students.forEach((item,index) =>{
    var studentIndex = students.findIndex(function(student,key,arr){
       return students[index].age === student.age
    });
    if(studentIndex === index){
        ages.push(item.age);
    }
})
console.log(ages); 
// [18, 19, 17]
  1. indexOf()传入一个元素,找到该元素在数组中的第一个索引值，如果不存在，则返回 -1。

可以用来判断某个元素是否存在在这个数组中

  • 实际需求举例

需求：数组去重

var nums=[1,2,2,3,3,4,4,5,5,6];
var newNums=[];
nums.forEach((item,index) =>{
    if(nums.indexOf(item)==index){
        newNums.push(item);
    }
})
console.log(newNums); 
// [1, 2, 3, 4, 5, 6]

indexOf() 和 findIndex()虽然都是用来找数组的索引值，我们可以根据不同情况选择合适的方法：
当数组元素是基本数据类型的时候，我们使用 indexOf() 来查找元素的索引值会比较方便一些；
当数组元素是复杂数据类型的时候，我们使用 findIndex() 来查找元素的索引值，制定复杂的规则，更加灵活。

5.reduce: 累加

PS：其实我个人并不是很常用，但总是要写一个大家不常用的来装个X，不然大家进来就没有收获。 XD

arr.reduce(callback(accumulator, currentValue，index, array)，initialValue)

reduce()方法callback(accumulator, currentValue，index, array)接收4个参数:

  • accumulato：上一次回调函数返回的累积值
  • currentValue：当前元素
  • index：当前元素索引值
  • array：调用reduce()的数组

reduce()方法initialValue参数:

  • initialValue: 第一次调用 callback函数时的第一个参数accumulator的值,果没有提供初始值，则将使用数组中的第一个元素

  • 用法

var nums = [1, 2, 3, 4, 5];
var total = nums.reduce(function(prevValue, item, index, arr) {
  return prevValue + item;
}, 0)
console.log(total);
//0 + 1 + 2 + 3 + 4 + 5 = 15
  • 实际需求举例 需求：计算出这些学生们一共借了多少书
var students = [
  {
    name: "张三",
    books: 2
  },
  {
    name: "李四",
    books: 3
  },
  {
    name: "王二",
    books: 4
  },
]
let bookCounts = students.reduce(function(prevCounts, item) {
  return prevCounts + item.books;
},0);
console.log(bookCounts)
// 9

上面的需求是最基本的累加用法，下面还有进阶的用法：

需求：统计出这些学生们各个年龄的人数

var students = [
  {
    name: "张三",
    age: 18
  },
  {
    name: "李四",
    age: 19
  },
  {
    name: "王二",
    age: 17
  },
  {
    name: "王王",
    age: 17
  },
  {
    name: "王王王",
    age: 19
  },
]
let agesObj = students.reduce(function(prevCounts, item) {
  if(item.age in prevCounts){
      prevCounts[item.age] = prevCounts[item.age] + 1;
    } else {
      prevCounts[item.age] = 1
    }
  return prevCounts;
},{});
console.log(agesObj)
//{17: 2, 18: 1, 19: 2}

通过对reduce()灵活运用，我们可以很方便地做一些统计的工作，比起传统方法是优雅了很多。

总结

以上就是我个人在使用JavaScript中使用频率比较高的几个Array方法，大家可以讨论并补充一下平时自己使用的比较多的Array方法。Thanks♪(･ω･)ﾉ

avatar
文章
阅读
粉丝