6. Utilities

大部分实用工具都能在 native API 中找到. 其他高级功能可以选用专注于该领域的稳定性和性能都更好的库来代替，推荐 lodash。

• 6.1 基本工具

  • isArray

  检测参数是不是数组。

  // jQuery
  $.isArray(range);
  // Native
  Array.isArray(range);

  • isWindow

  检测参数是不是 window。

  // jQuery
  $.isWindow(obj);
  // Native
  function isWindow(obj) {
    return obj !== null && obj !== undefined && obj === obj.window;
  }

  • inArray

  在数组中搜索指定值并返回索引 (找不到则返回 -1)。

  // jQuery
  $.inArray(item, array);
  // Native
  array.indexOf(item) > -1;
  // ES6-way
  array.includes(item);

  • isNumeric

  检测传入的参数是不是数字。
  Use typeof to decide the type or the type example for better accuracy.

  // jQuery
  $.isNumeric(item);
  // Native
  function isNumeric(n) {
    return !isNaN(parseFloat(n)) && isFinite(n);
  }

  • isFunction

  检测传入的参数是不是 JavaScript 函数对象。

  // jQuery
  $.isFunction(item);
  // Native
  function isFunction(item) {
    if (typeof item === 'function') {
      return true;
    }
    var type = Object.prototype.toString(item);
    return type === '[object Function]' || type === '[object GeneratorFunction]';
  }

  • isEmptyObject

  检测对象是否为空 (包括不可枚举属性).

  // jQuery
  $.isEmptyObject(obj);
  // Native
  function isEmptyObject(obj) {
    return Object.keys(obj).length === 0;
  }

  • isPlainObject

  检测是不是扁平对象 (使用 “{}” 或 “new Object” 创建).

  // jQuery
  $.isPlainObject(obj);
  // Native
  function isPlainObject(obj) {
    if (typeof (obj) !== 'object' || obj.nodeType || obj !== null && obj !== undefined && obj === obj.window) {
      return false;
    }
    if (obj.constructor &&
        !Object.prototype.hasOwnProperty.call(obj.constructor.prototype, 'isPrototypeOf')) {
      return false;
    }
    return true;
  }

  • extend

  合并多个对象的内容到第一个对象。
  object.assign 是 ES6 API，也可以使用 polyfill。

  // jQuery
  $.extend({}, defaultOpts, opts);
  // Native
  Object.assign({}, defaultOpts, opts);

  • trim

  移除字符串头尾空白。

  // jQuery
  $.trim(string);
  // Native
  string.trim();

  • map

  将数组或对象转化为包含新内容的数组。

  // jQuery
  $.map(array, (value, index) => {
  });
  // Native
  array.map((value, index) => {
  });

  • each

  轮询函数，可用于平滑的轮询对象和数组。

  // jQuery
  $.each(array, (index, value) => {
  });
  // Native
  array.forEach((value, index) => {
  });

  • grep

  找到数组中符合过滤函数的元素。

  // jQuery
  $.grep(array, (value, index) => {
  });
  // Native
  array.filter((value, index) => {
  });

  • type

  检测对象的 JavaScript [Class] 内部类型。

  // jQuery
  $.type(obj);
  // Native
  function type(item) {
    const reTypeOf = /(?:^\[object\s(.*?)\]$)/;
    return Object.prototype.toString.call(item)
      .replace(reTypeOf, '$1')
      .toLowerCase();
  }

  • merge

  合并第二个数组内容到第一个数组。

  // jQuery
  $.merge(array1, array2);
  // Native
  // 使用 concat，不能去除重复值
  function merge(...args) {
    return [].concat(...args)
  }
  // ES6，同样不能去除重复值
  array1 = [...array1, ...array2]
  // 使用 Set，可以去除重复值
  function merge(...args) {
    return Array.from(new Set([].concat(...args)))
  }

  • now

  返回当前时间的数字呈现。

  // jQuery
  $.now();
  // Native
  Date.now();

  • proxy

  传入函数并返回一个新函数，该函数绑定指定上下文。

  // jQuery
  $.proxy(fn, context);
  // Native
  fn.bind(context);

  • makeArray

  类数组对象转化为真正的 JavaScript 数组。

  // jQuery
  $.makeArray(arrayLike);
  // Native
  Array.prototype.slice.call(arrayLike);
  // ES6-way
  Array.from(arrayLike);

• 6.2 包含

  检测 DOM 元素是不是其他 DOM 元素的后代.

  // jQuery
  $.contains(el, child);
  // Native
  el !== child && el.contains(child);

• 6.3 Globaleval

  全局执行 JavaScript 代码。

  // jQuery
  $.globaleval(code);
  // Native
  function Globaleval(code) {
    const script = document.createElement('script');
    script.text = code;
    document.head.appendChild(script).parentNode.removeChild(script);
  }
  // Use eval, but context of eval is current, context of $.Globaleval is global.
  eval(code);

• 6.4 解析

  • parseHTML

  解析字符串为 DOM 节点数组.

  // jQuery
  $.parseHTML(htmlString);
  // Native
  function parseHTML(string) {
    const context = document.implementation.createHTMLDocument();
    // Set the base href for the created document so any parsed elements with URLs
    // are based on the document's URL
    const base = context.createElement('base');
    base.href = document.location.href;
    context.head.appendChild(base);
    context.body.innerHTML = string;
    return context.body.children;
  }

  • parseJSON

  传入格式正确的 JSON 字符串并返回 JavaScript 值.

  // jQuery
  $.parseJSON(str);
  // Native
  JSON.parse(str);