如何在JavaScript中更好的使用数组

使用Array.includes替代Array.indexOf

indexOf:返回在数组中可以找到的一个给定元素的第一个索引，假如不存在，则返回-1 includes:判断数组中能否有当前元素

eg：

const characters = [  'ironman',  'black_widow',  'hulk',  'captain_america',  'hulk',  'thor',];console.log(characters.indexOf('hulk'));// 2console.log(characters.indexOf('batman'));// -1console.log(characters.includes('hulk'));// trueconsole.log(characters.includes('batman'));// false

使用Array.find替代Array.filter

Array.filter 是一个十分有用的方法。它通过回调函数过滤原数组，并将过滤后的项作为新数组返回。正如它的名字所示，我们将这个方法用于过滤，（一般而言）会取得一个长度更短的新数组 Array.find与 Array.filter 一样需要一个回调函数，（但只是返回）符合条件的第一项。当找到符合回调函数过滤条件的第一个元素时，它会立即中止往下的搜寻。不再遍历整个数组

const characters = [  { id: 1, name: 'ironman' },  { id: 2, name: 'black_widow' },  { id: 3, name: 'captain_america' },  { id: 4, name: 'captain_america' },];function getCharacter(name) {  return character => character.name === name;}console.log(characters.filter(getCharacter('captain_america')));// [//   { id: 3, name: 'captain_america' },//   { id: 4, name: 'captain_america' },// ]console.log(characters.find(getCharacter('captain_america')));// { id: 3, name: 'captain_america' }

使用Array.some替代Array.find

Array.some 与 Array.includes 使用上的区别。两者都返回一个布尔值，表示某项能否存在于数组之中，一旦找到对应的项，立即中止遍历数组。不同的是 Array.some 的参数是回调函数，而 Array.includes 的参数是一个值（均不考虑第二个可选参数）。

假设希望知道值为 value 的项能否存在于数组中，既可以编写代码：[].includes(value)， 也可以给 Array.some 传入 item => item === value 作为回调函数。Array.includes 使用更简单，Array.some 可操控性更强

const characters = [  { id: 1, name: 'ironman', env: 'marvel' },  { id: 2, name: 'black_widow', env: 'marvel' },  { id: 3, name: 'wonder_woman', env: 'dc_comics' },];function hasCharacterFrom(env) {  return character => character.env === env;}console.log(characters.find(hasCharacterFrom('marvel')));// { id: 1, name: 'ironman', env: 'marvel' }console.log(characters.some(hasCharacterFrom('marvel')));// true

使用Array.reduce替代Array.filter与Array.map的组合

在使用 Array.find 和 Array.includes 前检查浏览器能否支持相关方法，上述两个方法在 Internet Explorer 上并不支持（可以使用 Polyfill）

const characters = [  { name: 'ironman', env: 'marvel' },  { name: 'black_widow', env: 'marvel' },  { name: 'wonder_woman', env: 'dc_comics' },];console.log(  characters    .filter(character => character.env === 'marvel')    .map(character => Object.assign({}, character, { alsoSeenIn: ['Avengers'] })));// [//   { name: 'ironman', env: 'marvel', alsoSeenIn: ['Avengers'] },//   { name: 'black_widow', env: 'marvel', alsoSeenIn: ['Avengers'] }// ]console.log(  characters    .reduce((acc, character) => {      return character.env === 'marvel'        ? acc.concat(Object.assign({}, character, { alsoSeenIn: ['Avengers'] }))        : acc;    }, []))// [//   { name: 'ironman', env: 'marvel', alsoSeenIn: ['Avengers'] },//   { name: 'black_widow', env: 'marvel', alsoSeenIn: ['Avengers'] }// ]