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

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

一、map

map返回新数组，不改变原数组。

原始数组的每一项都会调用提供的函数并返回新的数组。

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

二、filter

filter返回新数组，不改变原数组。

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

[○, △, □, △].filter( △ => true )  →  [△, △]let arr = [  { id: 0, name: '杜甫', age: '唐' },  { id: 1, name: '李白', age: '唐' },  { id: 2, name: '李商隐', age: '唐' },  { id: 3, name: '苏轼', age: '宋' },  { id: 4, name: '辛弃疾', age: '宋' }];let filterArr = arr.filter( e => e.age === '宋' );/** * console.log(filterArr): [ *    { id: 3, name: '苏轼', age: '宋' }, *    { id: 4, name: '辛弃疾', age: '宋' } * ] */

三、find

find返回的是数组中的一项，不改变原数组。

通过函数处理后返回符合元素中的第一项，只要找到符合的就把这一项给返回出去。

[○, △, □, △].find( △ => true )  → (first)△let arr = [  { id: 0, name: '杜甫', age: '唐' },  { id: 1, name: '李白', age: '唐' },  { id: 2, name: '李商隐', age: '唐' },  { id: 3, name: '苏轼', age: '宋' },  { id: 4, name: '辛弃疾', age: '宋' }];let findItem = arr.find( e => e.age === '宋' );/** * console.log(findItem): {id: 3, name: "苏轼", age: "宋"}; */

四、findIndex

返回的是索引值，不改变原数组。

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

[○, △, □, △].findIndex( △ => true )  → (first)△let arr = [  { id: 0, name: '杜甫', age: '唐' },  { id: 1, name: '李白', age: '唐' },  { id: 2, name: '李商隐', age: '唐' },  { id: 3, name: '苏轼', age: '宋' },  { id: 4, name: '辛弃疾', age: '宋' }];let findItem = arr.find( e => e.age === '宋' );/** * console.log(findItem): {id: 3, name: "苏轼", age: "宋"}; */

五、every

every返回布尔值，不改变原数组。

every是检查数组中的所有元素是否都符合条件，如果都符合返回true，有一项不符合就返回false

[○, ○, ○, △].every( ○ => true )  →  falselet arr = [  { id: 0, name: '杜甫', age: '唐' },  { id: 1, name: '李白', age: '唐' },  { id: 2, name: '李商隐', age: '唐' },  { id: 3, name: '苏轼', age: '宋' },  { id: 4, name: '辛弃疾', age: '宋' }];let everyFlag = arr.every( e => e.age === '宋' );/** * console.log(everyFlag): false */

六、some

some返回的是布尔值。

检查数组中是否有任意一个元素符合条件，只要有一个符合就返回true。

[△, ○, ○, △].some( △ => true )  →  truelet arr = [  { id: 0, name: '杜甫', age: '唐' },  { id: 1, name: '李白', age: '唐' },  { id: 2, name: '李商隐', age: '唐' },  { id: 3, name: '苏轼', age: '宋' },  { id: 4, name: '辛弃疾', age: '宋' }];let someFlag = arr.some( e => e.age === '宋' );/** * console.log(someFlag): true */

七、concat

concat返回新数组。

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

[○, □, △].concat([△, ○])  →  [○, □, △, △, ○]let arr = [  { id: 0, name: '杜甫', age: '唐' },  { id: 1, name: '李白', age: '唐' },  { id: 2, name: '李商隐', age: '唐' },  { id: 3, name: '苏轼', age: '宋' },  { id: 4, name: '辛弃疾', age: '宋' }];let newArr = [ { id: 5, name: '李清照', age: '宋' }];let concatArr = 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

返回字符串。

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

[○, □, △, ○].join('-')  →  ○-□-△-○let arr =  ['贝', '加', '尔', '湖', '畔'];let joinStr = arr.join('-')/*  console.log(joinStr): 贝-加-尔-湖-畔*/

九、reduce

累加结果

可以做一个累加器

[1, 2, 3, 4].reduce((total, current) => total + current , 10)  →  20let arr = [1, 2, 3, 4];let reduceRes = arr.reduce((total, current) => total + current, 10);/*  console.log(reduceRes): 20*/

十、forEach

forEach改变了原数组

对数组中每一项都执行一次函数。

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

十一、flat

flat改变原数组

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

[○, □, [△, [△, ○]]].fill(Infinity)  →  [○, □, △, △, ○]let arr = [1, 2, [[3], 4]];arr.flat(Infinity);/*  console.log(arr): [1, 2, 3, 4]*/

十二、fill

fill改变原数组。

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

[○, □, △, ○].fill(☆, 2, 3)  →  [○, □, ☆, ○]let arr = [1, 2, 3, 4];arr.fill('你好', 2, 3);/*  console.log(arr): [1, 2, '你好', 4]*/