javascript JS-常用代码片段

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了javascript JS-常用代码片段相关的知识,希望对你有一定的参考价值。

/**
 * 许多实用工具库给Object.prototype添加新的方法或属性,这些方法和属性可被所有对象继承并使用
 * ES5之前,这些添加的方法不可定义为可枚举的,因此可在for/in中枚举出来
 * 可通过下列方法过滤
 */
for (var p in object) {
  if (object.hasOwnProperty(p)) { //跳过继承的属性
    continue;
  }
}
for (var p in object) {
  if (typeof o[p] === "function") {
    continue; //跳过方法
  }
}

/**
 * 用来枚举属性对象的工具函数
 */

//把p中的可枚举属性复制到o中,返回o
//如果o和p中含有同名属性,则覆盖o中属性
//此函数不处理getter和setter以及复制属性
function extend(o, p) {
  for (var prop in p) {
    o[prop] = p[prop];
  }
  return o;
}
//如果o和p中有同名属性,o中属性不受影响
//此函数不处理getter和setter以及复制属性
function merge(o, p) {
  for (var prop in p) {
    if (o.hasOwnProperty(prop)) {
      continue;
    }
    o[prop] = p[prop];
  }
  return o;
}

//如果o中的属性在p中没有同名属性,则从o中删除此属性
function restrict(o, p) {
  for (var prop in o) {
    if (!(prop in p)) {
      delete o[prop];
    }
    return o;
  }
}


//如果o中的属性在p中存在同名属性,则从o中删除该属性
function subtract(o, p) {
  for (var prop in p) {
    delete o[prop]; //删除一个不存在的属性不会报错
  }
  return o;
}

//返回一个同时拥有o,p属性的新对象
//如果o、p中有重名属性,使用p中的属性
function union(o, p) {
  return extend(extend({}, o), p);
}
//返回一个同时拥有o、p属性的新对象
//很像求o\p的交集,但p中属性的值被忽略
function intersection(o, p) {
  return restrict(extend({}, o), p);
}
//返回一个包含o中可枚举的自由属性的名字
function keys(o) {
  if (typeof o !== "object") {
    throw TypeError();
  }
  var result = [];
  for (var prop in o) {
    if (o.hasOwnProperty(prop)) { //判断是否是自有属性
      result.push(prop);
    }
  }
  return result;
}

/**
 * 2D笛卡尔坐标对象
 */
var p = {
  x: 1.0,
  y: 1.0,
  get r() {
    return Math.sqrt(this.x * this.x + this.y * this.y);
  },
  set r(newValue) {
    var oldValue = Math.sqrt(this.x * this.x + this.y * this.y);
    var ratio = newValue / oldValue;
    this.x *= ratio;
    this.y *= ratio;
  },
  //theta是只读存取器属性,它只有getter方法
  get theta() {
    return Math.atan2(this.x, this.y);
  }
};


/**
 * 这个对象产生严格自增序列号
 */
var serialnum = {
  //$符号暗示这个属性是一个私有属性
  $n: 0,
  //返回当前值,然后自增
  get next() {
    return this.$n++;
  },
  //给n设置新的值,但只有当它比当前值大时才设置成功
  set next(n) {
    if (n >= this.$n) {
      this.$n = n;
    } else {
      throw "序列号的值不能比当前值小";
    }
  }
};

/**
 * 这个对象有一个可以返回随机数的存取器属性
 * 每次产生的随机数都在0~255之间
 */
var random = {
  get octet() {
    return Math.floor(Math.random() * 256);
  },
  get uint16() {
    return Math.floor(Math.random() * 65536);
  },
  get int16() {
    return Math.floor(Math.random() * 65536) - 32768;
  }
};


/**
 * 给Object.prototypet添加一个不可枚举的extend()方法
 * 这个方法继承自调用他的对象,将作为参数传入的对象属性一一复制
 * 除了值之外,也复制属性的所有特性,厨房在目标对象中存在同名的属性,
 * 参数对象的所有自有对象(包括不可枚举的属性)也会一一复制。
 */
Object.defineProperty(Object.prototype,
  "extend", //定义Object.prototype.extended
  {
    writable: true,
    enumerable: false, //定义为不可枚举
    configurable: true,
    value: function(o) { //值就是这个函数
      //得到所有的自由属性,包括不可枚举属性
      var names = Object.getOwnPropertyNames(o);
      for (var i = 0; i < names.length; i++) {
        //如果属性已存在,则跳过
        if (names[i] in this) {
          continue;
        }
        //获得o中的属性的描述符
        var desc = Object.getOwnPropertyDescriptor(o, names[i]);
        //用它给this创建一个属性
        Object.defineProperty(this.names[i], desc);
      }
    }
  });

  /**
   * 返回任意对象的类属性(class)
   */
  function callof(o) {
    if (o===null) {
      return "Null";
    }
    if (o===undefined) {
      return "Undefined";
    }
    return Object.prototype.toString.call(o).slice(8,-1);
  }


/**
 * 二维数组,九九乘法表
 */

var table = new Array(10);
for (var i = 0; i < table.length; i++) {
  table[i] = new Array(10);
}
for (var row = 0; row < table.length; row++) {
  for (var col = 0; col < table[row].length; col++) {
    table[row][col] = row * col;
  }
}
//使用其计算(查询)5*7
var product = table[5][7];


/**
 * 在数组中查询所有出现的x,并返回一个包含匹配索引的数组
 */
function findAll(a, x) {
  var result = [],
    len = a.length,
    pos = 0; //开始搜索的位置
  while (pos < len) {
    pos = a.indexOf(x, pos);
    if (pos === -1) break;
    result.push(pos);
    pos = pso + 1;
  }
  return result;
}

/**
 * 判断数组
 */
var isArray = Function.isArray || function(o) {
  return typeof o === "object" && Object.prototype.toString.call(o) == "[object Array]";
};

/**
 * 判断o是否是一个类数组对象
 * 在客户端js中需要用o.nodeType!=3排除DOM文本节点
 */
function isArrayLike(o) {
  if (o && //o非null、undefined
    typeof === "object" &&
    isFinite(o.length) && //o是有限数值
    o.length >= 0 &&
    o.length === Math.floor(o.length) && //  o.length是整数
    o.length < 4294967296) { //o.length<2^32
    return true;
  } else {
    return false;
  }
}

/**
 * 利用闭包实现的私有属性存取器方法
 * setter方法会用判断函数来检测参数的合法性,然后存储它
 *
 * getter、setter所操作的属性并没有存储在对象o中,相反这个值仅仅保存在函数的局部变量中
 * getter、setter同样是局部函数,因此可以访问这个局部变量
 * 亦即,对于存取器方法来说这个变量是私有的,无法绕过存取器方法来设置或修改这个值
 */

 function addPrivateProperty(o, name, predicate) {
   var value;
   o["get" + name] = function() {
     return value;
   }
   o["set" + name] = function(v) {
     if (predicate && !predicate(v)) {
       throw Error("set" + name + ":invalid value" + v);
     } else {
       value = v;
     }
   }
 }
 //使用
 o = {};
 addPrivateProperty(o, "Name", function(x) {
   return typeof x === "string";
 });
 o.setName("Frank");
 console.log(o.getName());
 o.setName(o);//试图设置一个错误类型的值

/**
 * monkey-patching
 * 将对象o中名为m的方法替换为另一个方法
 * 可以在调用原始的方法之前和之后记录日志信息
 */
function trace(o, m) {
  var original = o[m];
  o[m] = function() {
    console.log(new Date(), "Entering:", m);
    var result = original.apply(this, arguments);
    console.log(new Date(), "Exiting:", m);
    return result;
  }
}
/**
 * bind实现
 */
function bind(f, o) {
  if (f.bind) {
    return f.bind(o);
  } else {
    return function() {
      return f.apply(o, arguments);
    };
  }
}

以上是关于javascript JS-常用代码片段的主要内容,如果未能解决你的问题,请参考以下文章

常用Javascript代码片段集锦

javascript常用代码片段

js常用代码片段(更新中)

js常用代码片段

js 常用代码片段

前端开发常用js代码片段