数组常用方法实现

Wupq 2023-03-01 JavaScript手撸

# 数组 map 的实现

在 JavaScript 中，Array.prototype.map()是一个数组方法，用于创建一个新数组，这个新数组中的元素是原始数组中的每个元素经过调用指定函数处理后得到的结果。 ** 语法：** array.map(callback[, thisArg])

callback：用于处理每个元素的函数。它接收三个参数：当前元素、当前索引和数组本身。该函数应返回一个新的值，这个值将成为新数组中对应位置的元素。 -thisArg（可选）：执行回调函数时用作 this 的值。

** 返回值：**一个新的数组，其长度与原始数组相同，新数组中的每个元素都是原始数组对应元素经过回调函数处理后的结果。

const players = [
  {
    name: "科比",
    num: 24,
  },
  {
    name: "詹姆斯",
    num: 23,
  },
  {
    name: "保罗",
    num: 3,
  },
  {
    name: "威少",
    num: 0,
  },
  {
    name: "杜兰特",
    num: 35,
  },
];
Array.prototype.pq_map = function (callback) {
  const arr = [];
  for (let i = 0; i < this.length; i++) {
    arr.push(callback(this[i], i, this));
  }
  return arr;
};

console.log(
  players.pq_map((item, index) => `${item.name}--${item.num}--${index}`)
);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

map()方法在对数组进行数据转换时非常有用。它可以将一个数组中的元素按照特定的规则进行转换，生成一个全新的数组，而不改变原始数组。这使得它在处理数据集合时非常灵活，可以方便地进行数据的格式化、计算等操作。

# 数组 filter 的实现

在 JavaScript 中，Array.prototype.filter()是一个数组方法，用于创建一个新数组，其中包含通过提供的函数实现的测试的所有元素。 ** 语法：** array.filter(callback[, thisArg])

callback：用来测试每个元素的函数。它接收三个参数：当前元素、当前索引和数组本身。函数应返回一个布尔值，表示当前元素是否应该包含在新数组中。 -thisArg（可选）：执行回调函数时用作 this 的值。

** 返回值：**一个新的数组，包含原数组中通过测试的元素。

const players = [
  {
    name: "科比",
    num: 24,
  },
  {
    name: "詹姆斯",
    num: 23,
  },
  {
    name: "保罗",
    num: 3,
  },
  {
    name: "威少",
    num: 0,
  },
  {
    name: "杜兰特",
    num: 35,
  },
];
Array.prototype.pq_filter = function (callback) {
  const arr = [];
  for (let i = 0; i < this.length; i++) {
    callback(this[i], i, this) ? arr.push(this[i]) : "";
  }
  return arr;
};

console.log(players.pq_filter((item, index) => item.num >= 24)); // [ { name: '科比', num: 24 }, { name: '杜兰特', num: 35 } ]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

filter()方法在数据筛选、去除不需要的元素等场景中非常实用。它不会改变原始数组，而是返回一个满足特定条件的新数组，这使得它在处理数据时非常灵活。

# 数组 forEach 的实现

在 JavaScript 中，Array.prototype.forEach()是一个数组方法，用于对数组的每个元素执行一次给定的函数。 ** 语法：** array.forEach(callback[, thisArg])

callback：为每个元素执行的函数。它接收三个参数：当前元素、当前索引和数组本身。 -thisArg（可选）：执行回调函数时用作 this 的值。

const players = [
  {
    name: "科比",
    num: 24,
  },
  {
    name: "詹姆斯",
    num: 23,
  },
  {
    name: "保罗",
    num: 3,
  },
  {
    name: "威少",
    num: 0,
  },
  {
    name: "杜兰特",
    num: 35,
  },
];
Array.prototype.pq_forEach = function (callback) {
  for (let i = 0; i < this.length; i++) {
    callback(this[i], i, this);
  }
};

players.pq_forEach((item, index, arr) => {
  console.log(item, index);
});
//{ name: '科比', num: 24 } 0
//{ name: '詹姆斯', num: 23 } 1
//{ name: '保罗', num: 3 } 2
//{ name: '威少', num: 0 } 3
//{ name: '杜兰特', num: 35 } 4

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

forEach()方法主要用于遍历数组并对每个元素执行特定的操作。与其他循环方法相比，它更加简洁和易读。但需要注意的是，forEach()方法无法像传统的循环那样使用 break 或 continue 来提前终止循环或跳过某些元素。它在很多场景下都非常有用，比如对数组中的每个元素进行数据处理、更新 DOM 元素等。

# 数组 every 的实现

在 JavaScript 中，Array.prototype.every()是一个数组方法，用于检测数组中的所有元素是否都满足指定条件。 ** 语法：** array.every(callback[, thisArg])

callback：用于测试每个元素的函数。它接收三个参数：当前元素、当前索引和数组本身。函数应返回一个布尔值，表示当前元素是否满足条件。 -thisArg（可选）：执行回调函数时用作 this 的值。

** 返回值：**如果数组中的每个元素都通过测试，则返回 true；否则返回 false。

const players = [
  {
    name: "科比",
    num: 24,
  },
  {
    name: "詹姆斯",
    num: 23,
  },
  {
    name: "保罗",
    num: 3,
  },
  {
    name: "威少",
    num: 0,
  },
  {
    name: "杜兰特",
    num: 35,
  },
];
Array.prototype.pq_every = function (callback) {
  for (let i = 0; i < this.length; i++) {
    if (!callback(this[i], i, this)) {
      return false;
    }
  }
  return true;
};

console.log(players.pq_every((item, index) => item.num >= 0)); //true

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

使用 every 方法可以方便地对数组进行条件判断，它在很多场景下都非常有用，比如验证用户输入的数据是否符合特定要求等。

# 数组 some 的实现

在 JavaScript 中，Array.prototype.some()是一个数组方法，用于检测数组中是否至少有一个元素满足指定条件。 ** 语法：** array.some(callback[, thisArg])

callback：用于测试每个元素的函数。它接收三个参数：当前元素、当前索引和数组本身。函数应返回一个布尔值，表示当前元素是否满足条件。 -thisArg（可选）：执行回调函数时用作 this 的值。

** 返回值：**如果数组中有至少一个元素通过测试，则返回 true；否则返回 false。

const players = [
  {
    name: "科比",
    num: 24,
  },
  {
    name: "詹姆斯",
    num: 23,
  },
  {
    name: "保罗",
    num: 3,
  },
  {
    name: "威少",
    num: 0,
  },
  {
    name: "杜兰特",
    num: 35,
  },
];
Array.prototype.pq_some = function (callback) {
  for (let i = 0; i < this.length; i++) {
    if (callback(this[i], i, this)) {
      return true;
    }
  }
  return false;
};

console.log(players.pq_some((item, index) => item.num >= 50));

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

some()方法在需要快速判断数组中是否存在满足特定条件的元素时非常有用。它可以避免对整个数组进行遍历，一旦找到满足条件的元素就立即返回结果。

Welcome | Wupqの博客

Choose mode