JavaScript手写数组的常用函数总结

接下来我将从以下三个方面详细讲解“JavaScript手写数组的常用函数总结”的完整攻略：

1. 常用函数列表
2. 函数的实现
3. 示例说明

1. 常用函数列表

下面是JavaScript手写数组的常用函数列表，包括函数名称、参数和作用：

函数名称	参数	作用
push	element	在数组末尾添加一个元素并返回新的长度
pop	无	删除数组末尾的元素并返回该元素
shift	无	删除数组开头的元素并返回该元素
unshift	element	在数组开头添加一个元素并返回新的长度
splice	index, num, element1, element2, ...	在指定位置插入/删除元素并返回被删除的元素组成的新数组
concat	array1, array2, ...	连接多个数组并返回合并后的新数组
slice	start, end	从指定位置截取数组并返回新的数组
map	callback	根据回调函数处理每个元素并返回新的修改后的数组
filter	callback	根据回调函数过滤出符合条件的元素并返回新的数组
reduce	callback, initValue	根据回调函数对数组元素进行归纳计算并返回计算结果

2. 函数的实现

接下来我们对这些常用函数进行手写实现。

push

Array.prototype.push1 = function(...args) {
  for (let i = 0; i < args.length; i++) {
    this[this.length] = args[i];
  }
  return this.length;
}

pop

Array.prototype.pop1 = function() {
  if (this.length === 0) return undefined;
  const res = this[this.length - 1];
  delete this[this.length - 1];
  this.length--;
  return res;
}

shift

Array.prototype.shift1 = function() {
  if (this.length === 0) return undefined;
  const res = this[0];
  for (let i = 0; i < this.length - 1; i++) {
    this[i] = this[i+1];
  }
  delete this[this.length - 1];
  this.length--;
  return res;
}

unshift

Array.prototype.unshift1 = function(...args) {
  const newLength = args.length + this.length;
  for (let i = newLength - 1; i >= args.length; i--) {
    this[i] = this[i - args.length];
  }
  for (let i = 0; i < args.length; i++) {
    this[i] = args[i];
  }
  return newLength;
}

splice

Array.prototype.splice1 = function(start, num, ...args) {
  let res = [];
  const deleteCount = Math.min(num, this.length - start);
  for (let i = start; i < start + deleteCount; i++ ) {
    res.push(this[i]);
    delete this[i];
  }
  for (let i = this.length - 1; i >= start + deleteCount; i--) {
    this[i + args.length - deleteCount] = this[i];
  }
  for (let i = 0; i < args.length; i++) {
    this[start + i] = args[i];
  }
  this.length = this.length - deleteCount + args.length;
  return res;
}

concat

Array.prototype.concat1 = function(...args) {
  const res = [];
  for (let i = 0; i < this.length; i++) {
    res.push(this[i]);
  }
  for (let i = 0; i < args.length; i++) {
    if (Array.isArray(args[i])) {
      for (let j = 0; j < args[i].length; j++) {
        res.push(args[i][j]);
      }
    } else {
      res.push(args[i]);
    }
  }
  return res;
}

slice

Array.prototype.slice1 = function(start, end) {
  const res = [];
  const startIndex = start >= 0 ? start : Math.max(this.length + start, 0);
  const endIndex = end ? end : this.length;
  for (let i = startIndex; i < endIndex; i++) {
    res.push(this[i]);
  }
  return res;
}

map

Array.prototype.map1 = function(callback) {
  const res = [];
  for (let i = 0; i < this.length; i++) {
    res.push(callback(this[i], i, this));
  }
  return res;
}

filter

Array.prototype.filter1 = function(callback) {
  const res = [];
  for (let i = 0; i < this.length; i++) {
    if (callback(this[i], i, this)) {
      res.push(this[i]);
    }
  }
  return res;
}

reduce

Array.prototype.reduce1 = function(callback, initValue) {
  let res = initValue !== undefined ? initValue : this[0];
  let startIndex = initValue !== undefined ? 0 : 1;
  for (let i = startIndex; i < this.length; i++) {
    res = callback(res, this[i], i, this);
  }
  return res;
}

3. 示例说明

下面是两个手写数组函数的示例说明：

例子1：手写一个数组扁平化函数

function flatten(arr) {
  return arr.reduce1((prev, cur) => {
    return prev.concat(Array.isArray(cur) ? flatten(cur) : [cur]);
  }, []);
}

console.log(flatten([1, 2, [3, 4], [5, [6, 7]]])); // [1, 2, 3, 4, 5, 6, 7]

例子2：手写一个过滤偶数的数组函数

function filterEven(arr) {
  return arr.filter1(item => item % 2 === 0);
}

console.log(filterEven([1, 2, 3, 4, 5, 6])); // [2, 4, 6]

至此，“JavaScript手写数组的常用函数总结”的完整攻略就讲解完了，希望能对大家有所帮助！