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

优雅格子衫

已于 2024-07-10 09:06:33 修改

阅读量71

点赞数 1

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

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

本文链接：https://blog.csdn.net/qq_61869009/article/details/138231693

版权

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

摘要由CSDN通过智能技术生成

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函数内部代码块处理过的数据

let list = [1,2,3,4]
let arry = list.map(item=>{
	return item + 1
})
console.log(arry);

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);