在我们日常的实际开发中，经常遇到需要各种需要处理的数组，JavaScript中虽然提供了各式各样的方法，但本菜鸟很长一段时间都分不清楚这些是干什么用的，也偷懒不去看……

前一段时间在网上冲浪时，看到一个评论里有人用符号表示了一个方法，觉得十分形象生动，于是便花了半天时间重新学习了一些常见的数组方法，并用符号、图标进行具象化的整理，我觉得本菜鸟今天又博学了一点点。

一、map

1. map返回新数组，不改变原数组。
2. 原始数组的每一项都会调用提供的函数并返回新的数组。

[●,●,■,●].map(●=>■)→[■,■,■,■]

letarr=['杜甫','李白','李商隐','白居易'];
letmapArr=arr.map(e=>'苏轼');
//console.log(mapArr):["苏轼","苏轼","苏轼","苏轼"]

二、filter

1. filter返回新数组，不改变原数组。
2. 数组内的每一项通过函数处理后，返回一个各项都符合条件的数组。 在下面这个数组中，如果想把宋朝的诗词人过滤出来，就可以使用filter方法。

[○,△,□,△].filter(△=>true)→[△,△]

letarr=[
{id:0,name:'杜甫',age:'唐'},
{id:1,name:'李白',age:'唐'},
{id:2,name:'李商隐',age:'唐'},
{id:3,name:'苏轼',age:'宋'},
{id:4,name:'辛弃疾',age:'宋'}
];
letfilterArr=arr.filter(e=>e.age==='宋');

/**
*console.log(filterArr):[
*{id:3,name:'苏轼',age:'宋'},
*{id:4,name:'辛弃疾',age:'宋'}
*]
*/

三、find

1. find返回的是数组中的一项，不改变原数组。
2. 通过函数处理后返回符合元素中的第一项，只要找到符合的就把这一项给返回出去。

[○,△,□,△].find(△=>true)→(first)△

letarr=[
{id:0,name:'杜甫',age:'唐'},
{id:1,name:'李白',age:'唐'},
{id:2,name:'李商隐',age:'唐'},
{id:3,name:'苏轼',age:'宋'},
{id:4,name:'辛弃疾',age:'宋'}
];
letfindItem=arr.find(e=>e.age==='宋');

/**
*console.log(findItem):{id:3,name:"苏轼",age:"宋"};
*/

四、findIndex

1. 返回的是索引值，不改变原数组。
2. 通过函数处理后返回符合元素中的第一项的索引值，和find方法一样，都是只找到第一个符合的就返回。

[○,△,□,△].findIndex(△=>true)→(first)△

letarr=[
{id:0,name:'杜甫',age:'唐'},
{id:1,name:'李白',age:'唐'},
{id:2,name:'李商隐',age:'唐'},
{id:3,name:'苏轼',age:'宋'},
{id:4,name:'辛弃疾',age:'宋'}
];
letfindItem=arr.find(e=>e.age==='宋');

/**
*console.log(findItem):{id:3,name:"苏轼",age:"宋"};
*/

五、every

1. every返回布尔值，不改变原数组。
2. every是检查数组中的所有元素是否都符合条件，如果都符合返回true，有一项不符合就返回false

[○,○,○,△].every(○=>true)→false

letarr=[
{id:0,name:'杜甫',age:'唐'},
{id:1,name:'李白',age:'唐'},
{id:2,name:'李商隐',age:'唐'},
{id:3,name:'苏轼',age:'宋'},
{id:4,name:'辛弃疾',age:'宋'}
];
leteveryFlag=arr.every(e=>e.age==='宋');

/**
*console.log(everyFlag):false
*/

六、some

1. some返回的是布尔值。
2. 检查数组中是否有任意一个元素符合条件，只要有一个符合就返回true。

[△,○,○,△].some(△=>true)→true

letarr=[
{id:0,name:'杜甫',age:'唐'},
{id:1,name:'李白',age:'唐'},
{id:2,name:'李商隐',age:'唐'},
{id:3,name:'苏轼',age:'宋'},
{id:4,name:'辛弃疾',age:'宋'}
];
letsomeFlag=arr.some(e=>e.age==='宋');

/**
*console.log(someFlag):true
*/

七、concat

1. concat返回新数组。
2. concat是合并两个数组，将两个数组合并成一个新的数组并返回。

[○,□,△].concat([△,○])→[○,□,△,△,○]

letarr=[
{id:0,name:'杜甫',age:'唐'},
{id:1,name:'李白',age:'唐'},
{id:2,name:'李商隐',age:'唐'},
{id:3,name:'苏轼',age:'宋'},
{id:4,name:'辛弃疾',age:'宋'}
];
letnewArr=[
{id:5,name:'李清照',age:'宋'}
];
letconcatArr=arr.concat(newArr);

/*
console.log(concatArr):[
{id:0,name:'杜甫',age:'唐'},
{id:1,name:'李白',age:'唐'},
{id:2,name:'李商隐',age:'唐'},
{id:3,name:'苏轼',age:'宋'},
{id:4,name:'辛弃疾',age:'宋'},
{id:5,name:'李清照',age:'宋'}
]
*/

八、join

1. 返回字符串。
2. 将数组的每个元素拼接成字符串，没有传参就直接拼接，如果有参数就将参数当做拼接符连接。

[○,□,△,○].join('-')→○-□-△-○

letarr=['贝','加','尔','湖','畔'];
letjoinStr=arr.join('-')

/*
console.log(joinStr):贝-加-尔-湖-畔
*/

九、reduce

1. 累加结果
2. 可以做一个累加器

[1,2,3,4].reduce((total,current)=>total+current,10)→20

letarr=[1,2,3,4];
letreduceRes=arr.reduce((total,current)=>total+current,10);

/*
console.log(reduceRes):20
*/

十、forEach

1. forEach改变了原数组
2. 对数组中每一项都执行一次函数。

[●,●,■,●].forEach(●=>■)→[■,■,■,■]

letarr=[
{id:0,name:'杜甫'},
{id:1,name:'李白'},
{id:2,name:'李商隐'}
]
letforEachArr=arr.forEach(e=>e.age='唐')
/**
*arr:[
*{id:0,name:'杜甫',age:'唐'},
*{id:1,name:'李白',age:'唐'},
*{id:2,name:'李商隐',age:'唐'}
*]
*
*forEachArr:undefined
*/

十一、flat

1. flat改变原数组
2. flat用于将数组扁平化，参数为要扁平化的层数，可以直接传入Infinity，表示全部扁平化。

[○,□,[△,[△,○]]].fill(Infinity)→[○,□,△,△,○]

letarr=[1,2,[[3],4]];
arr.flat(Infinity);

/*
console.log(arr):[1,2,3,4]
*/

十二、fill

1. fill改变原数组。
2. fill作用为填充数组。第一个参数为要填充的内容，后面的两个参数分别为开始到结束的位置。

[○,□,△,○].fill(☆,2,3)→[○,□,☆,○]

letarr=[1,2,3,4];
arr.fill('你好',2,3);
/*
console.log(arr):[1,2,'你好',4]
*/