vue2中不能使用 ?. 和 ??的解决方法

362 阅读2分钟

es6中新增的?.??这两个运算符算是相当有用的,但是在vue2中是不能使用的,这就导致本来简单的判断变得异常繁琐。

比如我们有一个数据:

const data = {
    list: [
        [
            { name: 'test1' },
            { name: 'test2' }
        ]
    ]
}

想拿到test1正常的写法应该是data.list[0][0].name,但是如果情况复杂了呢:
list属性可能不存在或者
list属性存在但是值不是一个数组
list存在但是一个空数组,
list存在但他的第一项是个空数组,也就是这个样子([[]]),

这样的场景应该有遇到吧,在获取网络请求的数据时,往往会遇到这样的。此时不能使用?.可选运算符,这种判断将异常的繁琐 好在lodash提供了get()方法,他的描述是这样:

/**
 * Gets the value at `path` of `object`. If the resolved value is
 * `undefined`, the `defaultValue` is returned in its place.
 *
 * @static
 * @memberOf _
 * @since 3.7.0
 * @category Object
 * @param {Object} object The object to query.
 * @param {Array|string} path The path of the property to get.
 * @param {*} [defaultValue] The value returned for `undefined` resolved values.
 * @returns {*} Returns the resolved value.
 * @example
 *
 * var object = { 'a': [{ 'b': { 'c': 3 } }] };
 *
 * _.get(object, 'a[0].b.c');
 * // => 3
 *
 * _.get(object, ['a', '0', 'b', 'c']);
 * // => 3
 *
 * _.get(object, 'a.b.c', 'default');
 * // => 'default'
 */

我们再对这个方法做一个小包装,代码如下:

function getValue(object, path, defaultValue) {
  const value = get(object, path);
  if (defaultValue !== undefined) {
    const isType = Object.prototype.toString.call(value) === Object.prototype.toString.call(defaultValue)
    return isType ? value : defaultValue
  };
  return value
};

object, path, defaultValue参数保持和lodash.get()中的一致,但是最后一个参数我们做一个处理
就是说如果传入了第三个参数,期望得到的value的类型和我传入的备选的数据类型一致,我们才认为拿到了正确的数据,此时返回这个value才合适,因为可能value和我们期望的不一样,比如我们传入的默认的是一个[],而value是一个{},而业务层中有用Array.prototype.find()方法,而对象是没有这个方法的,页面就会报错。

第三个参数不传时,我们传入的path不存在于这个对象上,get方法会返回undefined;

最后可以将这个方法挂在到vue原型对象上来全局使用:

Vue.prototype.$getValue = getValue

觉得有用点个赞吧!