zoukankan      html  css  js  c++  java
  • js便签笔记(10)

    1. 如何理解“json”

    首先应该意识到,json是一种数据转换格式,既然是个“格式”,就是个抽象的东西。它不是js对象,也不是字符串,它只是一种格式,一种规定而已。

    这个格式规定了如何将js对象转换成字符串、以及转换成怎样的字符串——序列化 —— JSON.stringify 接口;

    以及如何将一个有效字符串转换成js对象——反序列化—— JSON.parse 接口;

    2. 关于作者

    json作者是 道格拉斯.克劳福德 ,是一位js大牛,写过一本《javascript语言精粹》,相信不少朋友都看过。短短200页书,果然写出了“精粹”。

    3. 浏览器支持

    W3C已经将json接口定义到标准中,目前主流浏览器也都默认支持json接口。但是还有不少IE6用户,可得小心。我曾经遇到过这样的bug。

    4. valueOf() 的用法

    var n1 = 10;
    var n2 = new Number(10);
    console.log(typeof n1);  //number
    console.log(typeof n2);  //object
    console.log(typeof n2.valueOf());  //number 

    如上代码,通过valueOf()方法,可以将一个(Number/String/Boolean)对象,转换成其对应的基本类型。

    在json.stringify方法中,如果遇到一个属性值的类型是object时,首先要排除 new Number/String/Boolean(...) 这三种情况,它就是通过valueOf来操作的。

    5. 对特殊字符的处理

    json.js源码中考虑了一些无意义的unicode字符,并且对他们进行了自定义的处理。相关的正则表达式如下:

    escapable = /[\"x00-x1fx7f-x9fu00adu0600-u0604u070fu17b4u17b5u200c-u200fu2028-u202fu2060-u206fufeffufff0-uffff]/g;
    cx = /[u0000u00adu0600-u0604u070fu17b4u17b5u200c-u200fu2028-u202fu2060-u206fufeffufff0-uffff]/g;

    这两个正则表达式,分别用在stringify和parse方法中。可以用图形形象表达这两个正则的内容,如下图:

    因此,解读json.js源码,还必须了解unicode字符集的基础知识。

    6. 在遇到Date类型或者Number类型时,都不要忘记用 isFinite()来验证有效性。

    7. JSON.parse() 对传入字符串的验证

    大家用JSON.parse(),而不直接用eval()的原因,就是因为前者是安全转换。那么这里的“安全”是通过什么来保障的呢?

    源码中通过四步验证来保证。下面是这四步验证,以及我写的注释:

    // We split the second stage into 4 regexp operations in order to work around   
                // crippling inefficiencies in IE's and Safari's regexp engines. First we       // 01. 将反斜线格式变为“@”,如把'\n'变为'@'
                // replace the JSON backslash pairs with '@' (a non-JSON character). Second, we // 02. 将简单值替换为“]”
                // replace all simple value tokens with ']' characters. Third, we delete all    // 03. 将“: [”、“, [”替换为空字符串
                // open brackets that follow a colon or comma or that begin the text. Finally,  // 04. 看剩下的字符串是否只是 whitespace or ']' or ',' or ':' or '{' or '}'
                // we look to see that the remaining characters are only whitespace or ']' or
                // ',' or ':' or '{' or '}'. If that is so, then the text is safe for eval.     // 如果是这样,那么text就可以安全的被执行eval()函数
    
                if (/^[],:{}s]*$/       //只包含 whitespace or ']' or ',' or ':' or '{' or '}'
                        .test(text.replace(/\(?:["\/bfnrt]|u[0-9a-fA-F]{4})/g, '@')  // 例如:'\n'->'@','\u4e00'-> '@',而'
    ','u4e00'则不变
                            .replace(/"[^"\
    
    ]*"|true|false|null|-?d+(?:.d*)?(?:[eE][+-]?d+)?/g, ']')   // 将 "abc"、true、false、null、数字,替换成“]”
                            .replace(/(?:^|:|,)(?:s*[)+/g, ''))) {...}

    8. JSON.stringify(value, replacer, space) 第二个参数可以传伪数组

    大家可能知道第二个参数replacer可以传入function或者Array,但是它也可以传如一个伪数组,模拟传入Array的情况。伪数组要这样写:

    {
        0 : 'a',
        1 : 'b',
        2 : 'x',
        length : 3  
    }

    不过注意!浏览器中自带的JSON接口,不一定支持,例如chrome中就不识别。所以这里要谨慎使用。安全期间还是用标准的Array好一些。

    9. 两个JS基础知识

    第一,value 是数组时,注意 Object.prototype.toString.apply(value) 和 value.toString() 的区别;

    第二,在 for ... in 循环中,要判断 Object.prototype.hasOwnProperty.call(value, k)

    不解释,看不明白的需要去翻书。

    --------------------------------------------------------------------------

    json2.js源码解读教程

    PetShop4.0源码解读

    ---------------------------------------------------------------------------

    10. 总结

    以上是我在解读json2.js源码过程中做的一点随意的笔记,列出来跟大家分享。

  • 相关阅读:
    串匹配(C/C++实现)
    稀疏数组-矩阵存储【C语言实现】
    mysql frm、MYD、MYI数据文件恢复,导入MySQL中
    我们为什么要分库分表?
    golang 使用goto进行多错误处理
    mongodb 查看、创建、修改、删除索引
    MyBatis中模糊搜索使用like匹配带%字符时失效问题
    MySQL 用 limit 为什么会影响性能?
    【java框架】SpringBoot(10) -- SpringBoot巧用 @Async提升API接口并发能力
    【Java代码之美】 -- Java17新特性初探
  • 原文地址:https://www.cnblogs.com/wangfupeng1988/p/3821572.html
Copyright © 2011-2022 走看看