这节课依旧是介绍相关的 API，这些 API 都比较简单，实在忘记了，直接上网搜就行。代码都在 code 目录下边，把这些常见的一些数组 API 给过一遍，有个印象，可以看懂，就 pass。

Array 的静态成员和实例成员

凡是通过 Array 构造函数创建的对象，都是数组。

静态成员

  • from方法：可以将一个伪数组转换为真数组
  • isArray方法：判断一个给定的数据，是否为一个真数组
  • of方法：类似于中括号创建数组，依次赋予数组每一项的值

实例成员

  • fill方法：用某个数据填充数组
  • pop
  • push
  • reverse：将当前数组颠倒顺序
  • shift
  • sort：对数组进行排序
  • splice
  • unshift

以下是纯函数

  • concat
  • includes: 数组中是否包含满足条件的元素
  • join
  • slice
  • indexOf
  • lastIndexOf
  • forEach: 遍历数组
  • every：是否所有元素都满足条件
  • some：是否至少有一个元素满足条件
  • filter：过滤，得到满足条件的元素组成的新数组
  • find: 查找第一个满足条件的元素，返回元素本身，如果没有找到，返回undefined
  • findIndex: 查找第一个满足条件的元素，返回元素的下标
  • map：映射，将数组的每一项映射称为另外一项
  • reduce：统计，累计

无副作用函数（纯函数）：不会导致当前对象发生改变

reduce

若面试的时候要问数组的 api，那应该也是问 reduce 这个 api 了，一般会问 reduce 的实现原理。在介绍 reduce 的原理之前，先看看下面的案例，了解一下它的功能。

Array.prototype.reduce() mdn

image.png

  1. Array.prototype.myReduce = function (fn, initVal) {
  2.   if (initVal === undefined) {
  3.     initVal = this[0];
  4.     for (let i = 1; i <= this.length - 1; i++) {
  5.       console.log(initVal, this[i], i, this);
  6.       initVal = fn(initVal, this[i], i, this);
  7.     }
  8.     return initVal;
  9.   } else {
  10.     for (let i = 0; i <= this.length - 1; i++) {
  11.       console.log(initVal, this[i], i, this);
  12.       initVal = fn(initVal, this[i], i, this);
  13.     }
  14.     return initVal;
  15.   }
  16. };
  18. let r1 = [0, 1, 2, 3, 4].myReduce(function (p, n) {
  19.   return p + n;
  20. });
  22. let r2 = [0, 1, 2, 3, 4].myReduce(function (p, n) {
  23.   return p + n;
  24. }, 0);
  26. console.log(r2); // => 10
  27. console.log(r1); // => 10

对于初学者的我们而言，理解起来还是有点困难的，下面做一个简单地分析：

第一步：先了解一下 reduce 的调用方式，我们在调用 reduce 这个 api 时，有可能会传入两个参数，也有可能只会传入一个参数。对比两者之间的区别。
第二步：观察 accumulator 这个值，不难发现它是再不断累加的，若我们传递了第二个参数，那么 accumulator 的初始值就是我们传入的第二个参数的值；否则，accumulator 为数组的首项。我们在封装 myReduce 方法时，accumulator 应该定义为一个变量，每次调用函数 fn 时，都将该变量作为第一个参数传入，这样就可以实现累加的效果。

像是上面这样仿照原生的 api 来实现一个 myReduce api，我们也称之为 Polyfill，我们在看文档时，看到标题 Polyfil，我们就可以将其理解为仿照原生 api 实现原理的代码。

reduce Ployfill

PS：简单看 Ployfill 这一部分，简单看看就好，看懂最好，看不懂说明目前水平还不够。😓

  1. /*
  2. var arr = [1, 2, 3, 4, 5, 6, -1, -2, -3, -4, -5, -6];
  3. 去掉数组中的负数，然后对每一项平方，然后再对每一项翻倍，然后求和 不许使用循环语句。
  4. */
  5. var arr = [1, 2, 3, 4, 5, 6, -1, -2, -3, -4, -5, -6];
  6. var result = arr.filter(function (item) {
  7.   return item >= 0;
  8. }).map(function (item) {
  9.   return item * item;
  10. }).map(function (item) {
  11.   return item * 2;
  12. }).reduce(function (sum, item) {
  13.   return sum += item;
  14. }, 0)
  15. console.log(result);
  1. var arr = [1, 2, 3, 4, 5, 6, -1, -2, -3, -4, -5, -6];
  2. // 去掉数组中的负数， 然后对每一项平方， 然后再对每一项翻倍， 然后求和
  3. // 不许使用循环
  5. var result = arr.filter(function (item) {
  6.   return item >= 0;
  7. }).map(function (item) {
  8.   return item ** 2;
  9. }).map(function (item) {
  10.   return item * 2;
  11. }).reduce(function (s, item) {
  12.   return s + item;
  13. }, 0);
  15. console.log(result); // 182