Vue 2 源码中的工具函数 - (二、转化类函数)

二、转化类函数

1. toString 转字符串

function toString (val) {
  return val == null
    ? ''
    : Array.isArray(val) || (isPlainObject(val) && val.toString === _toString)
      ? JSON.stringify(val, null, 2)
      : String(val)
}

用 Array.isArray 判断变量是否为数组类型 或者 是Object类型，是则用 JSON.stringify 转换；

若为 其他 类型，用 String() 转换 。

2. toNumber 转数字

• 通过parseFloat 转数字

  • 转换成功，将成功的部分返回；

  • 转换失败，返回原来的值。

  function toNumber (val) {
      var n = parseFloat(val);
      return isNaN(n) ? val : n
  }
  ​
  eg:
  toNumber(123)
  // 123
  toNumber('123')
  // 123
  toNumber('a')
  // 'a'
  toNumber('123a')
  // 123
  toNumber('a123')
  // 'a123'

3. camelize 连字符 转 小驼峰

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

4. capitalize 首字母大写

var capitalize = cached(function (str) {
    return str.charAt(0).toUpperCase() + str.slice(1)
});
​
eg:
capitalize('hello')   // 'Hello'

5. hyphenate 小驼峰 转 连字符

var hyphenateRE = /\B([A-Z])/g;
var hyphenate = cached(function (str) {
return str.replace(hyphenateRE, '-$1').toLowerCase()
});
​
eg: 
hyphenate('onClick'); // 'on-click'

6. toArray 类数组转为数组，默认从0位置开始

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
}
​
eg:
function fn(){
  var arr1 = toArray(arguments);
  console.log(arr1); // [1, 2, 3, 4, 5]
  var arr2 = toArray(arguments, 2);
  console.log(arr2); // [3, 4, 5]
}
​
fn(1,2,3,4,5); 
​
​
toArray('1,2,3')
// ['1', ',', '2', ',', '3']

7. toObject 数组转对象

function toObject (arr) {
    var res = {};
    for (var i = 0; i < arr.length; i++) {
        if (arr[i]) {
            extend(res, arr[i]); // 合并
        }
    }
    return res
}
​
eg:
toObject(['hello', 'world'])
// {0: 'w', 1: 'o', 2: 'r', 3: 'l', 4: 'd'}

更多分享可以关注公众号：前端怪咖