新的一天开始了，接着昨天没看完的继续了。

数组方法高阶(续)

map

const arr = [1, 2, 3, 4, 5]
arr.map((mov, index, arr) => {
  console.log(mov, index, arr);
})

输出结果

这么看起来好像和之前写到过的forEach()没什么区别，但是既然两者分别存在，肯定会有他的区别。forEach()遍历会改变原数组的值，而map()遍历后会生成一个全新的数组，不会影响原数组。两者有不同的使用环境，同样分不出谁好谁坏。有需求用到它们时再扩展。

filter 顾名思义，过滤器。

const movements = [200, 450, -400, 3000, -650, -130, 70, 1300];
const deposits = movements.filter(mov => {
  return mov > 0
})
console.log(movements);
console.log(deposits);

输出结果

很明显，它可以跟你你所给的筛选条件选出对应值并放在一个数组里将其返回，他还不会影响原数组的值。

reduce

const movements = [200, 450, -400, 3000, -650, -130, 70, 1300];
const balance = movements.reduce((acc, cur, i, arr) => {
  console.log(`${i}:${acc}`);
  return acc + cur
}, 0)
console.log(balance);

返回结果

ruduce()中含有两个参数，前面是方法，后面是acc(累加器)起始值，cur是每一项元素，i是元素对应索引，arr是原数组，这只是reduce()功能的冰山一角，老师解释说reduce应该是目前来说最强大的数组方法，也是最难的，所以想学会它，还是要在实战中使用它。

find

const movements = [200, 450, -400, 3000, -650, -130, 70, 1300];
const firstWithdrawal = movements.find(mov => mov < 0)
console.log(firstWithdrawal);

返回结果

find()方法可以返回数组中第一个符合条件的元素的值，在对象中可以找到满足查找要求的哪一项。顾名思义，他的用法和他的意思相同，就是查找。

findIndex

const movements = [200, 450, -400, 3000, -650, -130, 70, 1300];
const firstWithdrawal = movements.findIndex(mov => mov < 0)
console.log(movements);
console.log(firstWithdrawal);

返回结果

用法和find()方法没有太大区别，只不过find返回的是对应元素的值，findIndex返回的是对应元素的索引。

some

const movements = [200, 450, -400, 3000, -650, -130, 70, 1300];
const anyDeposits1 = movements.some(mov => mov > 3500)
console.log(anyDeposits1);
const anyDeposits2 = movements.some(mov => mov > 1200)
console.log(anyDeposits2);

返回结果

根据返回结果，不难看出some可以根据条件去遍历数组，只要有一个符合条件的，就会返回true，反之返回false。

every

const account4 = {
  owner: 'Sarah Smith',
  movements: [430, 1000, 700, 50, 90],
  interestRate: 1,
  pin: 4444,
};
const aaa = account4.movements.every(mov => mov > 0)
console.log(aaa);
const bbb = account4.movements.every(mov => mov > 50)
console.log(bbb);

返回结果

此方法也是字面意思，它需要此数组中所有元素的值都满足条件才会返回true，反之返回false。

flat

const arr = [[1, 2, 3], [4, 5, 6], 7, 8]
console.log(arr.flat());
const arrDeep = [[[1, 2], 3], [4, [5, 6]], 7, 8]
console.log(arrDeep.flat());
console.log(arrDeep.flat(2));

返回结果

此方法可以将数组内的数组打开放到一个数组了里，但是深度只有一层，如果多层嵌套数组，则需要在方法中加入想要打开的层级，值得注意的是，此方法是ES2019新引入的，所以部分旧版本浏览器并不会兼容它。

flatMap

const overalBalance = accounts.map(acc => acc.movements).flat()
const overalBalance2 = accounts.flatMap(acc => acc.movements)
console.log(overalBalance);
console.log(overalBalance2);

返回结果

flatMap()就像是flat()和map()的综合，但是它默认只能合并一层，并且这个无法改变，所以我们使用时要跟据需求自行恒定。

sort 排序

对于字符串

const owners = ['Jonas', 'Zach', 'Adam', 'Martha']
console.log(owners.sort());
console.log(owners);

返回结果

确实按照字母的顺序排序了，但是需要注意的是原数组也发生了改变。

对于数字

const movements = [200, 450, -400, 3000, -650, -130, 70, 1300];
movements.sort((a, b) => {
  return a - b
})
console.log(movements);
movements.sort((a, b) => {
  return b - a
})
console.log(movements);

返回结果

根据返回结果我们可以清晰地看到return a-b 为升序，return b-a 为降序。

fill 填充数组

const x = new Array(7);
console.log(x);
x.fill(1)
console.log(x);
x.fill(3, 2, 4)
console.log(x);

返回结果

可以看出fill第一个参数是填充数组元素的值，后两个是填充对应的索引，和slice截取数组的方式很像，并且可以观察到fill是会改变原数组的。

from

const y = Array.from({ length: 7 }, () => 1)
console.log(y);
const z = Array.from({ length: 7 }, (cur, index) => index + 1)
console.log(z);

返回结果

此方法用起来感觉更加的简洁，值得注意的一个小细节，第二次使用此方法，我们想获取索引，但是在前面加了一个没有被使用的变量，这就是我们平时说的占位，虽然不用，也要把人家的位置腾出来，不然是无法获取不到索引的，这也是程序员都懂的潜规则。需要注意此方法绝不不局限于这么简单，这只是其中一个小小的用法。

总结

至此，数组的方法就记录完了，现在脑袋是懵的，确实太多了，虽然一大部分之前听过，但是确实没怎么用过，明天老师可能会带着再联系一下这23种方法。愿所有的努力都没有白费把。加油大家。

第十七天前端浅记录

数组方法高阶(续)

总结