当前位置:首页 > 经验

超详细的 JS 数组方法 js的数组有哪些常用方法

当我学会这样记忆这些JS数组的方法后,我的整个世界豁然开朗了

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

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

一、map

  1. map返回新数组,不改变原数组。
  2. 原始数组的每一项都会调用提供的函数并返回新的数组。
[●, ●, ■, ●].map(● => ■) → [■, ■, ■, ■]

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

二、filter

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

  1. find返回的是数组中的一项,不改变原数组。
  2. 通过函数处理后返回符合元素中的第一项,只要找到符合的就把这一项给返回出去。
[○, △, □, △].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

  1. 返回的是索引值,不改变原数组。
  2. 通过函数处理后返回符合元素中的第一项的索引值,和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

  1. every返回布尔值,不改变原数组。
  2. every是检查数组中的所有元素是否都符合条件,如果都符合返回true,有一项不符合就返回false
[○, ○, ○, △].every( ○ => true )  →  false
let 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

  1. some返回的是布尔值。
  2. 检查数组中是否有任意一个元素符合条件,只要有一个符合就返回true。
[△, ○, ○, △].some( △ => true )  →  true
let 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

  1. concat返回新数组。
  2. 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

  1. 返回字符串。
  2. 将数组的每个元素拼接成字符串,没有传参就直接拼接,如果有参数就将参数当做拼接符连接。
[○, □, △, ○].join('-')  →  ○-□-△-○
let arr =  ['贝', '加', '尔', '湖', '畔'];
let joinStr = arr.join('-')

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

九、reduce

  1. 累加结果
  2. 可以做一个累加器
[1, 2, 3, 4].reduce((total, current) => total + current , 10)  →  20
let arr = [1, 2, 3, 4];
let reduceRes = arr.reduce((total, current) => total + current, 10);

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

十、forEach

  1. forEach改变了原数组
  2. 对数组中每一项都执行一次函数。
[●, ●, ■, ●].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

  1. flat改变原数组
  2. flat用于将数组扁平化,参数为要扁平化的层数,可以直接传入Infinity,表示全部扁平化。
[○, □, [△, [△, ○]]].fill(Infinity)  →  [○, □, △, △, ○]
let arr = [1, 2, [[3], 4]];
arr.flat(Infinity);

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

十二、fill

  1. fill改变原数组。
  2. fill作用为填充数组。第一个参数为要填充的内容,后面的两个参数分别为开始到结束的位置。
[○, □, △, ○].fill(☆, 2, 3)  →  [○, □, ☆, ○]
let arr = [1, 2, 3, 4];
arr.fill('你好', 2, 3);
/*
  console.log(arr): [1, 2, '你好', 4]
*/
声明:此文信息来源于网络,登载此文只为提供信息参考,并不用于任何商业目的。如有侵权,请及时联系我们:fendou3451@163.com
标签:

  • 关注微信

相关文章