Day 24 [编程03] [译文] 如何在JavaScript 中更好地使用数组

文章选自

作者：sea_ljf

连接：https://juejin.im/post/6844903671646715911

原文连结：https://www.freecodecamp.org/news/heres-how-you-can-make-better-use-of-javascript-arrays-3efd6395af3c/

来源：掘金

Array.includes以及Array.indexOf

• 如果在之後的代码中需要用到（给给定元素的）索引，那麽Array.indexOf是不二之选。

• 如果只想知道这个数组里面是否有包含该元素(是个布尔问题)。则建议使用Array.includes

补充：

通常这两个方法用来检测简单数组

代码

const subjects = [
  'Math',
  'PE',
  'English',
  'History',
  'English',
];

console.log(subjects.indexOf('History')); // 3
console.log(subjects.indexOf('Calculus')); // -1

console.log(subjects.includes('History')); // true
console.log(subjects.includes('Calculus')); // false

Array.find以及Array.filter

• 假如今天知道使用filter方法过滤後的数组仅会剩余一项 (比方说透过唯一id过滤出来的数组)，则建议使用Array.find

性能分析

• filter：为了获取所有符合条件的元素，会遍历整个数组，假如我们先决条件已经知道过滤後仅会有一个元素存在，则只要找到该元素即可不用遍历下去
• find：当找到符合调的元素会立即返回并结束遍历

代码

const subjects = [
  {id: 1, name: 'Math'},
  {id: 2, name: 'PE'},
  {id: 3, name: 'English'},
  {id: 4, name: 'History'},
  {id: 5, name: 'English'},
];

// 如果过滤出的数组不知道有几个元素则用filter
function getSubject(name) {
  return subjects.filter(ele => {
    return ele.name === name
  })
}
console.log(getSubject('English'))

// 因为透过唯一的id过滤出来，所以必定有一项
function getSubjectById(id) {
  return subjects.find(ele => {
    return ele.id === id
  })
}
console.log(getSubjectById(3))

Array.some以及Array.find

两者关系与 Array.includes 和 Array.indexof 很像

建议：

• 如果需要知道存在的元素是甚麽用Array.find
• 如果仅需要知道元素存不存在则用Array.some

代码

let school = [
  {id: 1, name: 'Mike', class: 'classA'},
  {id: 3, name: 'Jack', class: 'classB'},
  {id: 7, name: 'Nick', class: 'classB'},
  {id: 10, name: 'Banny', class: 'classA'}
]

console.log(school.find((stu) => {
  return stu.class === 'classA'
}));
// { id: 1, name: 'ironman', env: 'marvel' }

console.log(school.some((stu) => {
  return stu.class === 'classA';
}));
// true

Array.some 与 Array.includes的差别

两者都会返回布尔值，判断元素是否存在於数组里

差别在於

• Array.some负责处理对象数组(因为较复杂所以需回调函数)

  // 比方这种数组里面每个元素都是对象
  let school = [
    {id: 1, name: 'Mike', class: 'classA'},
    {id: 3, name: 'Jack', class: 'classB'},
    ...
  ]
  

• Array.includes负责处理简单数组

  const subjects = [
    'Math',
    'History',
    ...
  ];
  

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

原因：

後面那个组合会遍历数组两次，且map使用的临时数组是filter过滤出来的，（一般而言）该数组无法复用

代码

目的：

获得一个数组，由characters筛选出env为marbel，并在每个元素新增alsoSeenIn属性

const characters = [
  { name: 'ironman', env: 'marvel' },
  { name: 'black_widow', env: 'marvel' },
  { name: 'wonder_woman', env: 'dc_comics' },
];

主要：

// filter + map 方法
console.log(
  characters
    .filter(character => character.env === 'marvel')
    .map(character => Object.assign({}, character, { alsoSeenIn: ['Avengers'] }))
);

// reduce 方法
console.log(
  characters
    .reduce((acc, character) => {
      return character.env === 'marvel'
        // 如果 character.env === 'marvel' 为真，则浅拷贝出一个对象(该对象已经做了map的事情)，并将该对象concat进累加器里
        ? acc.concat(Object.assign({}, character, { alsoSeenIn: ['Avengers'] }))
        // 如果为false，则累加器保持原样
      	: acc;
    }, [])
)