数组的深度剖析：探索13个构建块API方法

2023-10-17 11:41:12

手写数组的13个API方法，解锁代码的奥妙

数组是JavaScript中用于存储一系列元素的强大工具。它可以容纳不同类型的数据，并提供一系列操作方法来访问、修改和操纵其中的元素。通过对这些方法的深入理解，我们可以充分发挥数组的潜力，让我们的代码更加灵活高效。

1. concat：连接两个或多个数组

const array1 = [1, 2, 3];
const array2 = [4, 5, 6];

// 手写实现concat方法
function concat(arr1, arr2) {
  const newArr = [];
  for (let i = 0; i < arr1.length; i++) {
    newArr.push(arr1[i]);
  }
  for (let i = 0; i < arr2.length; i++) {
    newArr.push(arr2[i]);
  }
  return newArr;
}

const result = concat(array1, array2);
console.log(result); // [1, 2, 3, 4, 5, 6]

2. slice：从数组中截取元素

const array = [1, 2, 3, 4, 5, 6];

// 手写实现slice方法
function slice(arr, startIndex, endIndex) {
  const newArr = [];
  if (startIndex < 0) {
    startIndex = arr.length + startIndex;
  }
  if (endIndex === undefined) {
    endIndex = arr.length;
  } else if (endIndex < 0) {
    endIndex = arr.length + endIndex;
  }
  for (let i = startIndex; i < endIndex; i++) {
    newArr.push(arr[i]);
  }
  return newArr;
}

const result = slice(array, 2, 4);
console.log(result); // [3, 4]

3. push：向数组尾部添加元素

const array = [1, 2, 3];

// 手写实现push方法
function push(arr, ...elements) {
  for (let i = 0; i < elements.length; i++) {
    arr[arr.length] = elements[i];
  }
  return arr.length;
}

const result = push(array, 4, 5, 6);
console.log(result); // 6
console.log(array); // [1, 2, 3, 4, 5, 6]

4. pop：从数组尾部删除元素

const array = [1, 2, 3, 4, 5, 6];

// 手写实现pop方法
function pop(arr) {
  const lastElement = arr[arr.length - 1];
  arr.length--;
  return lastElement;
}

const result = pop(array);
console.log(result); // 6
console.log(array); // [1, 2, 3, 4, 5]

5. shift：从数组头部删除元素

const array = [1, 2, 3, 4, 5, 6];

// 手写实现shift方法
function shift(arr) {
  const firstElement = arr[0];
  for (let i = 1; i < arr.length; i++) {
    arr[i - 1] = arr[i];
  }
  arr.length--;
  return firstElement;
}

const result = shift(array);
console.log(result); // 1
console.log(array); // [2, 3, 4, 5, 6]

6. unshift：向数组头部添加元素

const array = [1, 2, 3, 4, 5, 6];

// 手写实现unshift方法
function unshift(arr, ...elements) {
  for (let i = arr.length + elements.length - 1; i >= elements.length; i--) {
    arr[i] = arr[i - elements.length];
  }
  for (let i = 0; i < elements.length; i++) {
    arr[i] = elements[i];
  }
  return arr.length;
}

const result = unshift(array, 0, -1);
console.log(result); // 8
console.log(array); // [0, -1, 1, 2, 3, 4, 5, 6]

7. indexOf：查找元素在数组中的索引

const array = [1, 2, 3, 4, 5, 6];

// 手写实现indexOf方法
function indexOf(arr, element, fromIndex = 0) {
  for (let i = fromIndex; i < arr.length; i++) {
    if (arr[i] === element) {
      return i;
    }
  }
  return -1;
}

const result = indexOf(array, 3);
console.log(result); // 2

const result2 = indexOf(array, 7);
console.log(result2); // -1

8. lastIndexOf：查找元素在数组中的最后一个索引

const array = [1, 2, 3, 4, 5, 3, 6];

// 手写实现lastIndexOf方法
function lastIndexOf(arr, element, fromIndex = arr.length - 1) {
  for (let i = fromIndex; i >= 0; i--) {
    if (arr[i] === element) {
      return i;
    }
  }
  return -1;
}

const result = lastIndexOf(array, 3);
console.log(result); // 5

const result2 = lastIndexOf(array, 7);
console.log(result2); // -1

9. filter：过滤数组中的元素

const array = [1, 2, 3, 4, 5, 6];

// 手写实现filter方法
function filter(arr, callback) {
  const newArr = [];
  for (let i = 0; i < arr.length; i++) {
    if (callback(arr[i], i, arr)) {
      newArr.push(arr[i]);
    }
  }
  return newArr;
}

const result = filter(array, (element) => element % 2 === 0);
console.log(result); // [2, 4, 6]

10. map：映射数组中的元素

const array = [1, 2, 3, 4, 5, 6];

// 手写实现map方法
function map(arr, callback) {
  const newArr = [];
  for (let i = 0; i < arr.length; i++) {
    newArr.push(callback(arr[i], i, arr));
  }
  return newArr;
}

const result = map(array, (element) => element * 2);
console.log(result); // [2, 4, 6, 8, 10, 12]

11. reduce：累积数组中的元素

const array = [1, 2, 3, 4, 5, 6];

// 手写实现reduce方法
function reduce(arr, callback, initialValue) {
  let accumulator = initialValue;
  for (let i = 0; i < arr.length; i++) {
    accumulator = callback(accumulator, arr[i], i, arr);
  }
  return accumulator;
}

const result = reduce(array, (accumulator, element) => accumulator + element, 0);
console.log(result); // 21