js常见的数据操作集合

在实际开发中有一些操作会经常碰到，例如数组去重、对象复制、对象合并、颜色转换等，在这里把常用操作进行归类，便于以后进行查阅。

1、数组去重

去除数组中重复的元素。

function unique(arr) {
  var res = [];
  var json = {};
  for(var i = 0; i < arr.length; i++){
    if(!json[arr[i]]){
      res.push(arr[i]);
      json[arr[i]] = 1;
    }
  }
  return res;
}

unique([1,3,4,3,2,1,4,6,2]);
//=> [1,3,4,2,6]

2、对象深复制

常见的可以使用JSON.parse()来进行复制：

function deepCopy(obj) {
  return JSON.parse(JSON.stringify(obj));
}

这种方法有一个缺点就是只能复制对象中的可枚举属性，其他属性不可复制，例如function。这时可以采用如下方法：

function getType(obj) {
  //tostring会返回对应不同的标签的构造函数
  var toString = Object.prototype.toString;
  var map = {
    [object Boolean]  : boolean, 
    [object Number]   : number, 
    [object String]   : string, 
    [object Function] : function, 
    [object Array]    : array, 
    [object Date]     : date, 
    [object RegExp]   : regExp, 
    [object Undefined]: undefined,
    [object Null]     : null, 
    [object Object]   : object
  };
  if(obj instanceof Element) {
    return element;
  }
  return map[toString.call(obj)];
}

function deepCopy(obj) {
  var type = getType(obj);
  var obj;
  if(type === array){
    obj = [];
  } else if(type === object){
    obj = {};
  } else {
    //不再具有下一层次
    return obj;
  }
  if(type === array){
    for(var i = 0, len = obj.length; i < len; i++){
      obj.push(deepCopy(obj[i]));
    }
  } else if(type === object){
    for(var key in obj){
      obj[key] = deepCopy(obj[key]);
    }
  }
  return obj;
}

3、颜色格式转换

RGB转16进制：

function rgb2hex(rgb) {
  var s = "#";
  for (var i = 0; i < 3; i++) {
    var c = Math.round(rgb[i]).toString(16);
    if (c.length == 1)
      c = 0 + c;
    s += c;
   }
   return s;
}

rgb2hex([24,124,255]);
//=> "#187cff"

16进制转RGB：

function hex2rgb(color) {
  var r = parseInt(color.substr(1, 2), 16);
  var g = parseInt(color.substr(3, 2), 16);
  var b = parseInt(color.substr(5, 2), 16);
  return new Array(r, g, b);
}

hex2rgb(#187cff);
//=>  [24, 124, 255]

4、计算渐变色

给定渐变色的个数，计算两个颜色之间的渐变色

function gradient(c1, c2, step) {
   var Gradient = [];
   var A = hex2rgb(c1);
   var B = hex2rgb(c2);

   for (var N = 0; N < step; N++) {
    let t = [];
    for (var c = 0; c < 3; c++) {
      t[c] = A[c] + (B[c]-A[c]) / step * N;
    }
    Gradient.push(rgb2hex(t));
   }
   return Gradient;
}

gradient(#000000, #ffffff, 3);
//=> ["#000000", "#555555", "#aaaaaa"]

5、合并两个对象

function mergeObjs(def, obj) {
  if (!obj) {
    return def;
  } else if (!def) {
    return obj;
  }

  for (var i in obj) {
    // 是一个对象
    if (def[i] && typeof(def[i]) === typeof(obj[i]) && obj[i] != null && obj[i].constructor == Object) {
      def[i] = mergeObjs(def[i], obj[i]);
    } else {
      def[i] = obj[i];
    }
  }
  return def;
}

var a = {a:2,b:[1,2],c:abc,d:true}
var b = {b: 5, c: [3,4,5], e: false}
mergeObjs(a, b);
//=> {a:2,b:5,c:[3,4,5],d:true,e:false}

6、解析URL

function parseUrl(url) {
  var parser = document.createElement(a);    
  parser.href = url;
  var paramPart = parser.search.substr(1).split(&);
  parser.query = paramPart.reduce(function(res, item) {
    var parts = item.split(=);
    res[parts[0]] = parts[1];
    return res;
  }, {});
  var {protocol, hostname, port, pathname, search, hash, host, query} = parser;
  return {protocol, hostname, port, pathname, search, hash, host, query};
}

parseUrl(http://www.example.com/home?a=3&b=6);
/* 
{
  "protocol": "http:",
  "hostname": "www.example.com",
  "port": "",
  "pathname": "/home",
  "search": "?a=3&b=6",
  "hash": "",
  "host": "www.example.com",
  "query": {
    "a": "3",
    "b": "6"
  }
}
*/