用纯JavaScript替代jQuery之技巧篇

        接上一篇：用纯JavaScript替代jQuery之事件篇

>>>>Array Each

jQuery

$.each(array, function(i, item){

});

谷歌浏览器，火狐浏览器，IE8+

function forEach(array, fn) {
  for (i = 0; i < array.length; i++)
    fn(array[i], i);
}

forEach(array, function(item, i){

});

谷歌浏览器，火狐浏览器，IE9+

array.forEach(function(item, i){

});

>>>>深度扩展

jQuery

$.extend(true, {}, objA, objB);

谷歌浏览器，火狐浏览器，IE8+

var deepExtend = function(out) {
  out = out || {};

  for (var i = 1; i < arguments.length; i++) {
    var obj = arguments[i];

    if (!obj)
      continue;

    for (var key in obj) {
      if (obj.hasOwnProperty(key)) {
        if (typeof obj[key] === 'object')
          deepExtend(out[key], obj[key]);
        else
          out[key] = obj[key];
      }
    }
  }

  return out;
};

deepExtend({}, objA, objB);

>>>>Bind

jQuery

$.proxy(fn, context);

谷歌浏览器，火狐浏览器，IE8+

fn.apply(context, arguments);

谷歌浏览器，火狐浏览器，IE9+

fn.bind(context);

jQuery

$.extend({}, objA, objB);

谷歌浏览器，火狐浏览器，IE8+

var extend = function(out) {
  out = out || {};

  for (var i = 1; i < arguments.length; i++) {
    if (!arguments[i])
      continue;

    for (var key in arguments[i]) {
      if (arguments[i].hasOwnProperty(key))
        out[key] = arguments[i][key];
    }
  }

  return out;
};

extend({}, objA, objB);

>>>>Index Of

jQuery

$.inArray(item, array);

谷歌浏览器，火狐浏览器，IE8+

function indexOf(array, item) {
  for (var i = 0; i < array.length; i++) {
    if (array[i] === item)
      return i;
  }
  return -1;
}

indexOf(array, item);

谷歌浏览器，火狐浏览器，IE9+

array.indexOf(item);

>>>>Is Array

jQuery

$.isArray(arr);

谷歌浏览器，火狐浏览器，IE8+

isArray = Array.isArray || function(arr) {
  return Object.prototype.toString.call(arr) == '[object Array]';
}

isArray(arr);

谷歌浏览器，火狐浏览器，IE9+

Array.isArray(arr);

>>>>Map

jQuery

$.map(array, function(value, index){
});

谷歌浏览器，火狐浏览器，IE8+

function map(arr, fn) {
  var results = [];
  for (var i = 0; i < arr.length; i++)
    results.push(fn(arr[i], i));
  return results;
}

map(array, function(value, index){

});

谷歌浏览器，火狐浏览器，IE9+

array.map(function(value, index){

});

>>>>Now

jQuery

$.now();

谷歌浏览器，火狐浏览器，IE8+

new Date().getTime();

谷歌浏览器，火狐浏览器，IE9+

Date.now();

>>>>Parse Html

jQuery

$.parseHTML(htmlString);

谷歌浏览器，火狐浏览器，IE8+

var parseHTML = function(str) {
  var el = document.createElement('div');
  el.innerHTML = str;
  return el.children;
};

parseHTML(htmlString);

谷歌浏览器，火狐浏览器，IE9+

var parseHTML = function(str) {
  var tmp = document.implementation.createHTMLDocument();
  tmp.body.innerHTML = str;
  return tmp.body.children;
};

parseHTML(htmlString);

>>>>解析 Json

jQuery

$.parseJSON(string);

谷歌浏览器，火狐浏览器，IE8+

JSON.parse(string);

>>>>Trim

jQuery

$.trim(string);

谷歌浏览器，火狐浏览器，IE8+

string.replace(/^\s+|\s+$/g, '');

谷歌浏览器，火狐浏览器，IE9+

string.trim();

>>>>Type

jQuery

$.type(obj);

谷歌浏览器，火狐浏览器，IE8+

Object.prototype.toString.call(obj)
                .replace(/^\[object (.+)\]$/, "$1")
                .toLowerCase();