美文网首页
一些 JavaScript 中的代码小技巧

一些 JavaScript 中的代码小技巧

作者: ForeverYoung20 | 来源:发表于2019-01-17 11:49 被阅读20次

    JSON.stringify

    JSON.stringify(value[, replacer [, space]])

    参数:

    1. value:将要被序列化的变量的值。

    2. replacer:替代器。可以是函数或者是数组。

      1. 函数时:value 每个属性都要经过这个函数的处理,该函数的返回值就是最后被序列化后的值。

      2. 数组时:要求该数组的元素是字符串,且这些元素会被当做 value 的键(key)进行匹配,最后序列化的结果,是只包含该数组每个元素为 key 的值。

    3. space:指定输出数值的代码缩进,美化格式之用,可以是数字(<= 10)或者字符串。

    eg:

    // 使用“函数”当替代器
    function replacer(key, value) {
      if (typeof value === "string") {  // value 为字符串的不返回
        return undefined;
      }
      return value;
    }
    
    var foo = {
      foundation: "Mozilla", 
      model: "box", 
      week: 45, 
      transport: "car", 
      month: 7
    };
    var jsonString = JSON.stringify(foo, replacer);
    
    // {"week":45,"month":7}
    
    // 使用“数组”当替代器
    const user = {
      name: 'zollero',
      nick: 'z',
      skills: ['JavaScript', 'CSS', 'HTML5']
    };
    JSON.stringify(user, ['name', 'skills'], 2);  // 仅仅匹配key值为'name'、'skills'的值
    
    // "{
    //   "name": "zollero",
    //   "skills": [
    //     "JavaScript",
    //     "CSS",
    //     "HTML5"
    //   ]
    // }"
    

    ****注意****

    如果一个对象有 toJSON 属性,当它被序列化的时候,不会对该对象进行序列化,而是将它的toJSON 方法的返回值进行序列化

    eg:

    var obj = {
      foo: 'foo',
      toJSON: function () {
        return 'bar';
      }
    };
    JSON.stringify(obj);      // '"bar"'
    JSON.stringify({x: obj}); // '{"x":"bar"}'
    

    用 Set 来实现数组去重

    Set 和 ...(拓展运算符)可以很简单的进行数组去重。

    eg:

    const removeDuplicateItems = arr => [...new Set(arr)];
    removeDuplicateItems([42, 'foo', 42, 'foo', true, true]);
    //=> [42, "foo", true]
    

    函数参数值校验

    通过 ES6 中为函数增加参数默认值的特性来做函数参数值的校验

    eg:

    function fix(a = require()) {
      console.log('a', a)
    }
    function require() {
      throw new Error('缺少了参数 a')
    }
    
    fix(1);
    // a 1
    fix();
    // Uncaught Error: 缺少了参数 a
    

    用解构赋值过滤对象属性

    使用 ES6 中的 解构赋值 和 拓展运算符 的特性来过滤属性

    eg:

    // 我们想过滤掉对象 types 中的 inner 和 outer 属性
    const { inner, outer, ...restProps } = {
      inner: 'This is inner',
      outer: 'This is outer',
      v1: '1',
      v2: '2',
      v4: '3'
    };
    console.log(restProps);
    // { v1: "1", v2: "2", v4: "3" }
    

    Object.is

    ES6 中提供了一个新的方法:Object.is(),它具有 === 的一些特点,而且更好、更准确。


    相关文章

      网友评论

          本文标题:一些 JavaScript 中的代码小技巧

          本文链接:https://www.haomeiwen.com/subject/xltidqtx.html