A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

本帖最后由 社会佩奇 于 2019-8-15 11:10 编辑

  • 深克隆(deepclone)
[JavaScript] 纯文本查看 复制代码
const newObj = JSON.parse(JSON.stringify(oldObj));
[JavaScript] 纯文本查看 复制代码
    function checkedType(target) {
        return Object.prototype.toString.call(target).slice(8,-1); //返回检测的数据类型
    }
    function clone(target) {
        //判断拷贝的数据类型
        //初始化变量result 成为最终克隆的数据
        let result,targetType=checkedType(target);
        if(targetType === 'Object'){
            result = {}
        }else if(targetType === 'Array'){
            result = []
        }else{
            return target;
        }
        //遍历目标数据
        for(let i in target){
            //获取遍历数据结构的每一项值
            let value = target[i];
           //判断目标结构里的每一项值是否存在对象/数组
            if(checkedType(value) === 'Object' || checkedType(value) === 'Array'){
                //继续遍历获取到的value值
               result=clone(value);
            }else{ //获取到的value值是基本的数据类型或者是函数
                result=value;
            }
        }
        return result;
}

  • 实现一个call
[JavaScript] 纯文本查看 复制代码
Function.prototype.myCall = function (context) {
    context.fn = this;
    let args = [];
    for (let i = 1, len = arguments.length; i < len; i++) {
      args.push(arguments);
    }
    context.fn(...args);
    let result = context.fn(...args);
    delete context.fn;
    return result;
  };

  • 实现apply
[JavaScript] 纯文本查看 复制代码
Function.prototype.myapply = function (context, arr) {
      var context = Object(context) || window;
      context.fn = this;

      var result;
      if (!arr) {
        result = context.fn();
      } else {
        var args = [];
        for (var i = 0, len = arr.length; i < len; i++) {
          args.push("arr[" + i + "]");
        }
        result = eval("context.fn(" + args + ")");
      }

      delete context.fn;
      return result;
    };

  • 实现bind
[JavaScript] 纯文本查看 复制代码
if (!Function.prototype.bind) {
  Function.prototype.bind = function (oThis) {
    if (typeof this !== 'function') {
      // closest thing possible to the ECMAScript 5
      // internal IsCallable function
      throw new TypeError('Function.prototype.bind - what is trying to be bound is not callable');
    }

    var aArgs = Array.prototype.slice.call(arguments, 1),
      fToBind = this,
      fNOP = function () { },
      fBound = function () {
        // this instanceof fBound === true时,说明返回的fBound被当做new的构造函数调用
        return fToBind.apply(this instanceof fBound ? this : oThis,
          // 获取调用时(fBound)的传参.bind 返回的函数入参往往是这么传递的
          aArgs.concat(Array.prototype.slice.call(arguments)));
      };
    // 维护原型关系
    if (this.prototype) {
      // Function.prototype doesn't have a prototype property
      fNOP.prototype = this.prototype;
    }
    // 下行的代码使fBound.prototype是fNOP的实例,因此
    // 返回的fBound若作为new的构造函数,new生成的新对象作为this传入fBound,新对象的__proto__就是fNOP的实例
    fBound.prototype = new fNOP();
    return fBound;
  };
}

  • 模拟Object.create
[JavaScript] 纯文本查看 复制代码
function create(proto) {
  function F() {}
  F.prototype = proto;

  return new F();
}

  • 解析 URL 参数为对象
[JavaScript] 纯文本查看 复制代码
function parseParam(url) {
  const paramsStr = /.+\?(.+)$/.exec(url)[1]; // 将 ? 后面的字符串取出来
  const paramsArr = paramsStr.split('&'); // 将字符串以 & 分割后存到数组中
  let paramsObj = {};
  // 将 params 存到对象中
  paramsArr.forEach(param => {
    if (/=/.test(param)) { // 处理有 value 的参数
      let [key, val] = param.split('='); // 分割 key 和 value
      val = decodeURIComponent(val); // 解码
      val = /^\d+$/.test(val) ? parseFloat(val) : val; // 判断是否转为数字

      if (paramsObj.hasOwnProperty(key)) { // 如果对象有 key,则添加一个值
        paramsObj[key] = [].concat(paramsObj[key], val);
      } else { // 如果对象没有这个 key,创建 key 并设置值
        paramsObj[key] = val;
      }
    } else { // 处理没有 value 的参数
      paramsObj[param] = true;
    }
  })

  return paramsObj;
}

0 个回复

您需要登录后才可以回帖 登录 | 加入黑马