透视数组之眼：探索ES6数组新增特性与模拟实现

ES6作为JavaScript语言的重大版本更新，不仅在语法上进行了革新，还对数组这个基础数据结构进行了全方位的升级。为了更深入地理解这些新增特性，本文将通过模拟实现的方式，带领读者逐一探索数组在ES6中的变化。

1. 静态方法：Array.from()和Array.of()

ES6新增了两个静态方法：Array.from()和Array.of()，用于创建数组。这两个方法的区别在于：Array.from()可以将类数组对象（如字符串、NodeList、Set、Map等）转换为真正的数组，而Array.of()只能将一系列元素直接转换为数组。

// 模拟实现Array.from()
function from(arrayLike, mapFn, thisArg) {
  if (arrayLike == null) {
    throw new TypeError('Array.from requires an array-like object - not null or undefined');
  }
  const result = [];
  for (let i = 0, len = arrayLike.length; i < len; i++) {
    result.push(mapFn ? mapFn.call(thisArg, arrayLike[i], i, arrayLike) : arrayLike[i]);
  }
  return result;
}

// 模拟实现Array.of()
function of(...elements) {
  return [...elements];
}

2. 实例方法：Array.includes()

Array.includes()方法用于判断一个数组是否包含某个元素，该方法接收两个参数：要查找的元素和可选的起始索引。如果找到该元素，则返回true；否则，返回false。

// 模拟实现Array.includes()
Array.prototype.includes = function(searchElement, fromIndex = 0) {
  for (let i = fromIndex; i < this.length; i++) {
    if (this[i] === searchElement) {
      return true;
    }
  }
  return false;
};

3. 实例方法：Array.find()和Array.findIndex()

Array.find()方法用于查找数组中第一个符合指定条件的元素，该方法接收一个回调函数作为参数，该回调函数接收数组中的每个元素和索引作为参数，并返回一个布尔值。如果找到符合条件的元素，则返回该元素；否则，返回undefined。

Array.findIndex()方法与Array.find()方法类似，但它返回的是符合条件的元素的索引，而不是元素本身。

// 模拟实现Array.find()
Array.prototype.find = function(predicate, thisArg) {
  for (let i = 0, len = this.length; i < len; i++) {
    const result = predicate.call(thisArg, this[i], i, this);
    if (result) {
      return this[i];
    }
  }
  return undefined;
};

// 模拟实现Array.findIndex()
Array.prototype.findIndex = function(predicate, thisArg) {
  for (let i = 0, len = this.length; i < len; i++) {
    const result = predicate.call(thisArg, this[i], i, this);
    if (result) {
      return i;
    }
  }
  return -1;
};

4. 实例方法：Array.fill()

Array.fill()方法用于用某个值填充数组中的指定范围。该方法接收三个参数：要填充的值、起始索引和结束索引（可选）。如果省略起始索引和结束索引，则整个数组都将被填充。

// 模拟实现Array.fill()
Array.prototype.fill = function(value, start = 0, end = this.length) {
  for (let i = start; i < end; i++) {
    this[i] = value;
  }
  return this;
};

5. 实例方法：Array.copyWithin()

Array.copyWithin()方法用于将数组的一部分复制到数组的另一部分。该方法接收三个参数：目标起始索引、源起始索引和源结束索引（可选）。如果省略源结束索引，则将源数组的剩余部分复制到目标数组中。

// 模拟实现Array.copyWithin()
Array.prototype.copyWithin = function(target, start = 0, end = this.length) {
  if (target < start) {
    for (let i = end - 1; i >= start; i--) {
      this[target + i - start] = this[i];
    }
  } else {
    for (let i = start; i < end; i++) {
      this[target + i - start] = this[i];
    }
  }
  return this;
};

结语

通过模拟实现的方式，我们深入探索了ES6中数组新增的特性，包括静态方法Array.from()和Array.of()，以及实例方法Array.includes()、Array.find()、Array.findIndex()、Array.fill()和Array.copyWithin()。这些新特性的加入，使数组更加强大和灵活，让开发者在处理数组数据时更加得心应手。