JavaScript 数组方法，底层原理（部分）

本文通过使用 .map() 循环重新创建常见的 JavaScript 数组方法 - .includes()、.concat()、.flat() 和 for 来揭秘它们的功能。虽然 for 循环可能看起来效率较低且难以阅读，但了解其底层机制可以让您对内置数组方法有更深入的了解。让我们潜入吧！

---

.map()

.map() 方法通过将函数应用于现有数组的每个元素来生成新数组。 它仅处理非空元素并保持原始数组不变。

考虑一个银行应用程序需要来自数据结构的客户名称列表。 虽然 .map() 是最有效的解决方案，但让我们看看如何通过 for 循环实现此目的：

<code class="language-javascript">const bankAccounts = [
  {
    id: 1,
    name: "Susan",
    balance: 100.32,
    deposits: [150, 30, 221],
    withdrawals: [110, 70.68, 120],
  },
  { id: 2, name: "Morgan", balance: 1100.0, deposits: [1100] },
  {
    id: 3,
    name: "Joshua",
    balance: 18456.57,
    deposits: [4000, 5000, 6000, 9200, 256.57],
    withdrawals: [1500, 1400, 1500, 1500],
  },
  { id: 4, name: "Candy", balance: 0.0 },
  { id: 5, name: "Phil", balance: 18, deposits: [100, 18], withdrawals: [100] },
];

// Using a 'for' loop:
function getAllClientNamesLoop(array) {
  const acctNames = [];
  for (const acct of array) {
    acctNames.push(acct.name);
  }
  return acctNames;
}

// Using .map():
function getAllClientNamesMap(array) {
  return array.map(acct => acct.name);
}

console.log(getAllClientNamesLoop(bankAccounts)); // Output: ['Susan', 'Morgan', 'Joshua', 'Candy', 'Phil']
console.log(getAllClientNamesMap(bankAccounts)); // Output: ['Susan', 'Morgan', 'Joshua', 'Candy', 'Phil']</code>

for 循环方法需要创建一个空数组并迭代推送名称。 .map() 方法明显更加简洁和可读。

.includes()

此方法检查数组是否包含特定值，返回true或false。

让我们构建一个函数来使用 for 循环和 .includes():

来演示这一点

<code class="language-javascript">// Using a 'for' loop:
function doesArrayIncludeLoop(array, value) {
  let isIncluded = false;
  for (const elem of array) {
    if (elem === value) {
      isIncluded = true;
      break; // Optimization: Exit loop once value is found
    }
  }
  return isIncluded;
}

// Using .includes():
function doesArrayIncludeIncludes(array, value) {
  return array.includes(value);
}

console.log(doesArrayIncludeLoop([1, 1, 2, 3, 5], 6)); // Output: false
console.log(doesArrayIncludeIncludes([1, 1, 2, 3, 5], 3)); // Output: true</code>

for 循环版本初始化一个标志并进行迭代，而 .includes() 提供了直接且更干净的解决方案。

.concat()

此方法将两个或多个数组合并为一个新数组。

这是使用 for 循环和 .concat() 的比较：

<code class="language-javascript">// Using 'for' loops:
function concatArraysLoop(arr1, arr2) {
  const concatenatedArray = [...arr1, ...arr2]; //Spread syntax for conciseness
  return concatenatedArray;
}

// Using .concat():
function concatArraysConcat(arr1, arr2) {
  return arr1.concat(arr2);
}

console.log(concatArraysLoop([0, 1, 2], [5, 6, 7])); // Output: [0, 1, 2, 5, 6, 7]
console.log(concatArraysConcat([0, 1, 2], [5, 6, 7])); // Output: [0, 1, 2, 5, 6, 7]</code>

再次，.concat() 提供了卓越的简洁性和可读性。

.flat()

.flat() 方法将嵌套数组展平为单层数组。 它接受一个可选的深度参数。

让我们使用这两种方法将数组展平一层：

<code class="language-javascript">// Using 'for' loops:
function flatArraysLoop(array) {
  const flattenedArray = [];
  for (const elem of array) {
    if (Array.isArray(elem)) {
      flattenedArray.push(...elem); //Spread syntax
    } else {
      flattenedArray.push(elem);
    }
  }
  return flattenedArray;
}

// Using .flat():
function flatArraysFlat(array) {
  return array.flat();
}

console.log(flatArraysLoop([1, 2, 3, [4, [5, 6]], 10])); // Output: [1, 2, 3, 4, [5, 6], 10]
console.log(flatArraysFlat([1, 2, 3, [4, [5, 6]], 10])); // Output: [1, 2, 3, 4, [5, 6], 10]</code>

使用 for 循环展平更深的嵌套数组变得越来越复杂，突出了 .flat(depth) 的强大功能和简单性。

---

这个探索展示了 JavaScript 内置数组方法的优雅和高效。 第二部分将深入研究更多数组方法。 请随意分享您的想法和问题！ （第二部分的链接将在此处）

以上是JavaScript 数组方法，底层原理（部分）的详细内容。更多信息请关注PHP中文网其他相关文章！