every、some、reduce 和 reduceRight

Array.prototype.every()

every 方法用于测试数组中的所有元素是否都通过了指定函数的测试。如果数组中的某个元素不满足条件，遍历将会停止。

data.every(
  function (element, index, array) {
    console.log(element);
    return element.is_free === '0';
  },
  { a: 1 }
);

重写 every

下面是 every 方法的自定义实现：

Array.prototype.myEvery = function (callback) {
  const array = this;
  const length = array.length;
  const thisArg = arguments[1] || window;
  let result = true;

  for (let i = 0; i < length; i++) {
    if (!callback.call(thisArg, array[i], i, array)) {
      result = false;
      break;
    }
  }
  return result;
};

data.myEvery(
  function (element, index, array) {
    console.log(element);
    console.log(this);
    return element.is_free === '0';
  },
  { a: 1 }
);

Array.prototype.some()

some 方法用于测试数组中是否至少有一个元素通过了指定函数的测试。如果找到这样的元素，遍历将会停止。

data.some(
  function (element, index, array) {
    console.log(element);
    return element.is_free === '0';
  },
  { a: 1 }
);

重写 some

下面是 some 方法的自定义实现：

Array.prototype.mySome = function (callback) {
  const array = this;
  const length = array.length;
  const thisArg = arguments[1] || window;
  let result = false;

  for (let i = 0; i < length; i++) {
    if (callback.call(thisArg, array[i], i, array)) {
      result = true;
      break;
    }
  }
  return result;
};

data.mySome(
  function (element, index, array) {
    console.log(element);
    console.log(this);
    return element.is_free === '0';
  },
  { a: 1 }
);

Array.prototype.reduce()

reduce 方法对数组中的每个元素执行一个由您提供的 reducer 函数，将其结果汇总为单个输出值。

const cookieDataString = 'a=1; b=2; c=3;';

const cookieArray = cookieDataString.split('; ');
const cookieObject = cookieArray.reduce(function (accumulator, current) {
  const [key, value] = current.split('=');
  accumulator[key] = value;
  return accumulator;
}, {});
console.log(cookieObject);

重写 reduce

下面是 reduce 方法的自定义实现：

Array.prototype.myReduce = function (callback, initialValue) {
  const array = this;
  const length = array.length;
  const thisArg = arguments[2] || window;
  let accumulator = initialValue;

  for (let i = 0; i < length; i++) {
    accumulator = callback.call(thisArg, accumulator, array[i], i, array);
  }
  return accumulator;
};

const cookieDataString = 'a=1; b=2; c=3;';

const cookieArray = cookieDataString.split('; ');
const cookieObject = cookieArray.myReduce(function (accumulator, current) {
  const [key, value] = current.split('=');
  accumulator[key] = value;
  return accumulator;
}, {});
console.log(cookieObject);

重写 reduceRight

reduceRight 方法与 reduce 类似，但它从数组的末尾开始遍历。

Array.prototype.myReduceRight = function (callback, initialValue) {
  const array = this;
  const length = array.length;
  const thisArg = arguments[2] || window;
  let accumulator = initialValue;

  for (let i = length - 1; i >= 0; i--) {
    accumulator = callback.call(thisArg, accumulator, array[i], i, array);
  }
  return accumulator;
};

搜索功能

以下是一个实现课程搜索功能的示例：

<input type="text" id="J_search" placeholder="搜索课程" />
<ul class="J_list">
  <span>- 暂无数据 -</span>
</ul>
<div id="J_data"></div>

(function (document) {
  const searchInput = document.getElementById('J_search');
  const listElement = document.getElementsByClassName('J_list')[0];

  const initialize = function () {
    bindEvents();
  };

  function bindEvents() {
    searchInput.addEventListener('input', searchCourse, false);
  }

  function searchCourse() {
    const query = this.value.trim();
    if (query.length > 0) {
      const filteredData = filterData(data, query);
      const listHTML = createList(filteredData);
      listElement.innerHTML = listHTML || `<span>暂无数据</span>`;
    } else {
      listElement.innerHTML = `<span>暂无数据</span>`;
    }
  }

  function filterData(data, keyword) {
    return data.reduce(function (accumulator, current) {
      if (current.course.includes(keyword)) {
        accumulator.push(current);
      }
      return accumulator;
    }, []);
  }

  function createList(data) {
    if (!data || data.length === 0) {
      return '';
    }

    return data
      .map(function (item) {
        return `<li>${item.course}</li>`;
      })
      .join('');
  }

  initialize();
})(document);