JS数组的常用操作方法

1.forEach

遍历数组，参数为一个回调函数，回调函数有三个参数：当前元素，元素索引，整个数组；无返回值

let data = [1,3,5,7,9,11,13];
let result = data.forEach((item)=>{
	console.log('item = '+(item+1));
	return item + 1;//无效
});
//result is undefined
data.forEach((item,index,arr)=>{
	console.log(`item = ${item} ,index = ${index}`);
	arr[index] = item + 1;
});
//data : [2, 4, 6, 8, 10, 12, 14]

2.map

与forEach类似，遍历数组，回调函数返回值组成一个新数组返回，新数组索引结构和原数组一致，原数组不变

let data = [1,3,5,7,9,11,13];
let result = data.map((item)=>{
	console.log('item = '+(item+1));
	return item + 1;
});
// data: [1,3,5,7,9,11,13]
// result: [2, 4, 6, 8, 10, 12, 14]
result = data.map((item,index,arr)=>{
	return `i ${item}${index}`+arr.length;
});
//result:["i 107", "i 317", "i 527", "i 737", "i 947", "i 1157", "i 1367"]

3.filter

返回数组的一个子集，回调函数用于逻辑判断是否返回，返回true则把当前元素加入到返回数组中，false则不加，新数组只包含返回true的值，索引缺失的不包括，原数组保持不变

let data = [1,2,3,4,5,6,7,8,9];
let result = data.filter((item)=>{
	console.log('item = '+(item+1));
	return item%2 == 1;
});
// data: [1,2,3,4,5,6,7,8,9];
// result:[1, 3, 5, 7, 9]
result = data.filter((item,index,arr)=>{
	return index > 4;
});
//result:[6, 7, 8, 9]

4.find

返回第一个符合条件的值，当数组中的元素在测试条件时返回 true 时, find() 返回符合条件的元素，之后的值不会再调用执行函数；如果没有符合条件的元素返回 undefined

let data = [1,3,5,7,9,11,13];
let result = data.find((item,index,arr)=>{
	return item > 5 && index > 4;
});
//result = 11

5.every

every是“所有”函数的每个回调函数都返回true的时候才会返回true，当遇到false的时候终止执行，返回false；

let data = [1,3,5,7,9,11,13];
let result = data.every((item,index,arr)=>{
	return item % 2 == 1;
});
//result = true

6.some

some函数是“存在”有一个回调函数返回true的时候终止执行并返回true，否则返回false。

let data = [1,3,5,7,9,11,13];
let result = data.every((item,index,arr)=>{
	return item % 2 == 0;
});
//result = false

示例：链式调用示例：

• 原始数据

{
    "date":"20190906",
    "stories":[
        {
            "image_hue":"0x615d5a",
            "title":"孩子常会跟幼儿园里骂他的同学打架，怎么教他赢回小孩子的尊严？",
            "url":"https://daily.zhihu.com/story/9714935",
            "hint":"Cecilia · 3 分钟阅读",
            "ga_prefix":"090620",
            "images":[
                "https://pic3.zhimg.com/v2-d1726350b67e8d40400bf06ecd88d54a.jpg"
            ],
            "type":0,
            "id":9714935
        }
    ]
}

• 输出含有图片的item,并只获取其中的

fetch('https://news-at.zhihu.com/api/4/news/before/20190907')
  .then((res) => res.json())
  .then((res) => {
   let json = JSON.parse(JSON.stringify(res));
   const repos = json.stories.filter((item,index,arr) => {
            return item.images && item.images.length>0;
   		 }).map((item,index,arr) => {
   		   const r = {};
          r.image = item.images[0];
          r.title = item.title;
          r.url = item.url;
          r.type = 'image';
          r.index = index;
          return r;
      });
   console.log(JSON.stringify(repos))
  });

• 返回示例：

[
    {
        "image":"https://pic3.zhimg.com/v2-d1726350b67e8d40400bf06ecd88d54a.jpg",
        "title":"孩子常会跟幼儿园里骂他的同学打架，怎么教他赢回小孩子的尊严？",
        "url":"https://daily.zhihu.com/story/9714935",
        "type":"image",
        "index":0
    }
]

参考

• https://www.cnblogs.com/goloving/p/8560323.html