了解Vue

(1)_toString

function _toString (val) {
  return val == null
    ? ''
    : typeof val === 'object'
      ? JSON.stringify(val, null, 2)
      : String(val)
}

这个函数还是比较好理解的,如果传入的值为空,则返回空字符串;否则,如果传入的是对象,则将其变为 JSON 的数据格式(强调:JSON 是字符串!);否则以字符串的形式输出。

这里面,我们需要学习的是 JSON.stringify(val, null, 2) 这个方法,其中的 2 表示缩进为 2 个空格,其中的第二个 null 参数表示序列化,如果为 null 则表示所有属性都被序列化。
(2) toNumber

function toNumber (val) {
  var n = parseFloat(val);
  return isNaN(n) ? val : n
}

该函数表示将传入的值转化为数值,如果传入的不是数字,则返回这个值。这里面,我们需要了解到 parseFloat 这个函数,返回它遇到的第一个不是数字的前面的所有数字。

比如说:parseFloat('123ab'),返回的是 123;parseFloat('ab123') 则返回 NaN 。

所以,这也是为什么这里使用了 isNaN() 这个函数。当然,在 ES6 的规范中,建议还是使用 Number.isNaN() 和 Number.parseFloat() 更好。
(3)makeMap

function makeMap (
  str,  //  字符串
  expectsLowerCase  // 转换为小写
) {
  var map = Object.create(null);
  var list = str.split(',');
  for (var i = 0; i < list.length; i++) {
    map[list[i]] = true;
  }
  return expectsLowerCase
    ? function (val) { return map[val.toLowerCase()]; }
    : function (val) { return map[val]; }
}
// 检查 tag 标签是否为内置的标签
var isBuiltInTag = makeMap('slot,component', true);

关于这个函数,官方的说法是:创建一个 map 并返回一个函数以确定是否该键存在于这个 map 中。至少目前,我们看不出它的作用来,后面用到了再说吧。

其中我们需要学习到 Object.create() 这个方法是干什么的,它和 new Object() 有什么区别。Object.create() 这个方法的用处就是创建一个对象,它可以继承指定的原型。比如说,我有一个对象:

Object.create(null, {
   a: {
     value: 1
   }
 }

它等价于:

const obj = {
  a: 1
}

记住,这是错误的!因为我们这里设置的第一个参数为 null,那么这个对象是没有原型的!也就是说,它没有对象原型上的方法。如果要等价的话,那么我们的参数要设置为 {}。

Object.create({}, {
   a: {
     value: 1
   }
 }

这样,才是等价的。

在这里,设置为 null 的意思就是说,创建一个没有原型的对象。
(4)remove$1

function remove$1 (arr, item) {
  if (arr.length) {
    var index = arr.indexOf(item);
    if (index > -1) {
      return arr.splice(index, 1)
    }
  }
}

这个函数的意思是,从数组中移除掉一个值。这个函数很典型。首先,如果它是一个数组,那么则找到想要的这个值第一次出现时的索引值;如果数组中存在这个值,那么就使用 splice() 这个方法将其移除并返回。

我们来测试一下这个方法:

remove$1([1, 2, 3], 2)
// 返回 [2],原数组变为[1, 3]
remove$1([1, 2, 3, 2], 2)
// 返回 [2],原数组变为[1, 3, 2]

这个函数我们平时也是可以用到的,但是这个函数呢,只能返回第一个被查询到的值。这是 indexOf() 这个函数的局限性,记住这一点。
(5)hasOwnProperty

var hasOwnProperty = Object.prototype.hasOwnProperty;
function hasOwn (obj, key) {
  return hasOwnProperty.call(obj, key)
}

这个函数的作用是检查该属性是否是这个对象所拥有的。说的更加直白一点就是,对象是否有这个键(key),我们来测试一下:

const obj = {
   a: 1,
   b: 2
 };
 console.log(hasOwn(obj, 'c'));  // false
 console.log(hasOwn(obj, 'a'));  // true

这个 obj 中是没有 c 这个键的。这个是被封装起来的函数,平时如果单独使用的话,则可以直接调用 Object.prototype.hasOwnProperty() 这个方法的。
(6)isPrimitive

function isPrimitive (value) {
  return typeof value === 'string' || typeof value === 'number'
}

该函数是判断该值是否为原始值。

原始值有六种类型,分别为 String、Number、Boolean、Symbol、Null 和 Undefined。

当然这里只判断了该值是字符串还是数值类型。
(7)cached

function cached (fn) {
  var cache = Object.create(null);
  return (function cachedFn (str) {
    var hit = cache[str];
    return hit || (cache[str] = fn(str))
  })
}

这个方法的作用是创建一个纯函数的缓存版本。单独看,肯定是看不懂这个函数想表达一个什么意思。来,我们接着往下看:

(1)驼峰化以连字符分隔的字符串。

var camelizeRE = /-(\w)/g;
var camelize = cached(function (str) {
  return str.replace(camelizeRE, function (_, c) { return c ? c.toUpperCase() : ''; })
});

(2)大写字符串。

var capitalize = cached(function (str) {
  return str.charAt(0).toUpperCase() + str.slice(1)
});

(3)连接驼峰命名的字符串。

var hyphenateRE = /([^-])([A-Z])/g;
var hyphenate = cached(function (str) {
  return str
    .replace(hyphenateRE, '$1-$2')
    .replace(hyphenateRE, '$1-$2')
    .toLowerCase()
});

我们先不看上面三个代码,我们先来试着理解 cache() 这个函数。这个函数是干什么的?在 JavaScript 中,有一个很经典的函数写法叫做 “缓存策略”,它是用来加速我们的数据的读取速度的。

它的实现原理:创建一个对象,将我们所写的东西保存到这个对象中,如果说我们后面再次用到了这个东西,那么 JavaScript 就不需要再计算一遍了,直接将这个对象中我们需要的东西提取出来就好了。

这是提高执行速度的一种十分有效的办法,可以作为了解,很多的库都会用到它。
(8)bind$1

function bind$1 (fn, ctx) {
  function boundFn (a) {
    var l = arguments.length;
    return l
      ? l > 1
        ? fn.apply(ctx, arguments)
        : fn.call(ctx, a)
      : fn.call(ctx)
  }
  // 记录原始的 fn 长度
  boundFn._length = fn.length;
  return boundFn
}

该函数的作用与原生的 bind() 方法一致,但官方说,这个函数比原生要快。其中的 ctx 参数的意思是 context,即上下文。其实也就是我们常使用的 this 指定的上下文环境。
(9)toArray

function toArray (list, start) {
  start = start || 0;
  var i = list.length - start;
  var ret = new Array(i);
  while (i--) {
    ret[i] = list[i + start];
  }
  return ret
}

该方法将一个类数组对象转换成真正的数组对象。其中的 list 表示类数组对象,而 start 表示起始的索引值。当然,我们的 ES6 中的 Array.from() 也可以转换,可是它不能指定起始的位置。

我们来测试一下:

console.log(toArray({
   0: 'a',
   1: 'b',
   2: 'c',
   length: 3
}, 1));
// ["b", "c"]

当然了,其实我们使用 ES6 同样可以达到这个效果。我来写一个能达到同样效果的函数吧:

function toArray(list, start = 0) {
   const realArray = Array.from(list);
   return realArray.slice(start);
}

不仅如此,我还可以设置结束的位置:

function toArray(list, start = 0, end = list.length) {
  const realArray = Array.from(list);
  return realArray.slice(start, end);
}

好了,这个函数就到此结束啦。
(10)extend

function extend (to, _from) {
  for (var key in _from) {
    to[key] = _from[key];
  }
  return to
}

该函数的作用是:将属性混合到目标对象中。说的直白一点就是拷贝对象的属性。

比如我这里有一个空对象,还有另一个对象,将另一个对象中的属性拷贝到这个空对象中去:

const a = {};
const b = {
  a: 1,
  b: 2
 };
extend(a, b);
console.log(a);  // {a: 1, b: 2}
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 214,172评论 6 493
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,346评论 3 389
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 159,788评论 0 349
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,299评论 1 288
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,409评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,467评论 1 292
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,476评论 3 412
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,262评论 0 269
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,699评论 1 307
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,994评论 2 328
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,167评论 1 343
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,827评论 4 337
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,499评论 3 322
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,149评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,387评论 1 267
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,028评论 2 365
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,055评论 2 352

推荐阅读更多精彩内容

  • 第5章 引用类型(返回首页) 本章内容 使用对象 创建并操作数组 理解基本的JavaScript类型 使用基本类型...
    大学一百阅读 3,226评论 0 4
  • 本来打算睡觉的,但突然想到今天需要写日记,于是只能加加班了。 上班开始的时候,看了下百度贴吧,搜了京东金融,主要是...
    转瞬之夏的日记本阅读 214评论 0 0
  • 过完年后,二月份来到这个古都找工作,在朋友的介绍下去梨城,那里的一切都是很好,风景气候美丽极咯。 好景不常...
    梧桐树的蓝阅读 224评论 0 0
  • dlgd阅读 139评论 0 0
  • 平息若無閒來時, 浮雲捲雲一陣風. 庭外知了聲聲唱, 酒水幾人一杯杯.
    荒木覺阅读 362评论 7 6