记录数组相关indexOf(),map(),forEach(),filter()，findIndex()方法

优雅格子衫

已于 2024-10-17 10:09:57 修改

阅读量214

点赞数 1

CC 4.0 BY-SA版权

文章标签： javascript 前端开发语言

于 2024-05-02 15:40:50 首次发布

本文链接：https://blog.youkuaiyun.com/qq_61869009/article/details/138231693

本文介绍了JavaScript中数组的五个常用方法：indexOf用于查找元素是否存在并获取索引，map用于创建新数组并处理每个元素，forEach用于遍历数组，filter用于筛选符合条件的元素，以及如何通过对比两个数组找出不同的元素。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.数组的indexOf方法

该方法返回某个元素在字符串中或数组中的位置。

//1.在string中使用
let str = 'orange';
 
str.indexOf('o'); //0
str.indexOf('n'); //3
str.indexOf('c'); //-1  未找到返回-1

//2.在数组中使用
let list = ['1','2','3','4'];
console.log(list.indexOf('2')) //如果存在返回会返回索引值 1
console.log(list.indexOf('6')) //如果不存在返回会返回 -1
let index = list.indexOf('2')
if(index !== -1){
   list.splice(index, 1);
}

2.数组的map方法

返回一个新的数组新数组中的元素是经过map函数内部代码块处理过的数据

				list:[
					{
						id:1,
						name:'张三',
						age:18
					},
					{
						id:2,
						name:'李四',
						age:10
					},
					{
						id:3,
						name:'王五',
						age:20
					}
				],
let arry = list.map(item=>{
	return item.age + 1
})
console.log(arry);
//过滤作用
let alllist =this.list.map(item=>{
				return {
					id:item.id,
					name:item.name
				}
			}) 
			console.log(alllist);

3.数组的forEach方法

数组遍历拿到每一项

   data() {
     return {
        list:[
          {
            id:1,
            name:'张三',
            isshow:false
          },
          {
            id:2,
            name:'李斯特',
            isshow:true

          },
          {
            id:3,
            name:'王麻子',
            isshow:false

          }
        ]
     }
   },
   mounted() {
     this.list.forEach(item=>{
      console.log(item)
     })
   },

4.数组的filter方法

拿到符合条件的某一项，返回一个数组。

    const list = [
      {
        id: 1,
        name: '张三',
        isshow: false
      },
      {
        id: 2,
        name: '李斯特',
        isshow: true

      },
      {
        id: 3,
        name: '王麻子',
        isshow: false

      }
    ]
    const islist = list.filter(item => {
      return item.isshow
    })
    console.log(islist);

5.两个数组对比拿到不同的

list:[
	{
		id:1,
		name:'张三'
	},
	{
		id:2,
		name:'李四'
	},

		id:3,
		name:'王五'
	},
],
ids:[1,2]

let returnArr = this.list.filter((item) => {
	let index = this.ids.findIndex((v) => {
		return item.id == v
	});
	return index == -1;
});
console.log(returnArr);