实现 JSON.stringify 与 JSON.parse ​

const noop = () => {}
const obj = {
  null: null,
  undefined: undefined, // 忽略, 在数组中会转为 null
  symbol: Symbol(), // 忽略, 在数组中会转为 null
  fn_1: noop, // 忽略, 在数组中会转为 null
  nan: NaN, // 转为 null
  regexp: /abc/, // 转为 '{}' 字符串
  num_1: 0,
  num_2: -0, // 转为 0
  num_3: Infinity, // 转为 null
  num_4: -Infinity, // 转为 null
  date: new Date('2022-02-17T08:53:59.659Z'), // 转为字符串 2022-02-17T08:53:59.659Z
  bool_1: true,
  bool_2: false,
  // 值在数组中
  arr_1: [NaN, 0, -0, Infinity, new Date('2022-02-17T08:53:59.659Z')],
  arr_2: [undefined, Symbol(), noop] // 作为属性会忽略，在数组中会转为 null
}

// key 为 Symbol 也会忽略

console.log(JSON.stringify(noop)) // 函数       单独转换时，会返回 undefined
console.log(JSON.stringify(undefined)) // undefined 单独转换时，会返回 undefined
console.log(JSON.stringify(obj, null, 2))

// 实现 JSON.stringify
// 参见 https://github.com/YvetteLau/Step-By-Step/issues/39#issuecomment-508327280

const jsonStringify = function jsonStringify(data) {
  let dataType = typeof data

  if (dataType !== 'object') {
    let result = data
    // data 可能是 string/number/null/undefined/boolean
    if (Number.isNaN(data) || data === Infinity) {
      // NaN 和 Infinity 序列化返回 'null'
      result = 'null'
    } else if (
      dataType === 'function' ||
      dataType === 'undefined' ||
      dataType === 'symbol'
    ) {
      // function, undefined, symbol 序列化返回 undefined
      return undefined
    } else if (dataType === 'string') {
      result = `"${data}"`
    }
    // boolean 返回 String()
    return String(result)
  } else if (dataType === 'object') {
    if (data === null) {
      return 'null'
    } else if (data.toJSON && typeof data.toJSON === 'function') {
      return jsonStringify(data.toJSON())
    } else if (data instanceof Array) {
      let result = []
      // 如果是数组
      // toJSON 方法可以存在于原型链中
      data.forEach((item, index) => {
        if (
          typeof item === 'undefined' ||
          typeof item === 'function' ||
          typeof item === 'symbol'
        ) {
          result[index] = 'null'
        } else {
          result[index] = jsonStringify(item)
        }
      })
      result = `[${result}]`
      return result.replace(/'/g, `"`)
    } else {
      // 普通对象
      /**
       * 循环引用抛错(暂未检测，循环引用时，堆栈溢出)
       * symbol key 忽略
       * undefined, 函数, symbol 为属性值，被忽略
       */
      let result = []
      Object.keys(data).forEach((item, index) => {
        if (typeof item !== 'symbol') {
          // key 如果是symbol对象，忽略
          if (
            data[item] !== undefined &&
            typeof data[item] !== 'function' &&
            typeof data[item] !== 'symbol'
          ) {
            // 键值如果是 undefined、函数、symbol 为属性值，忽略
            result.push(`"${item}":${jsonStringify(data[item])}`)
          }
        }
      })
      return `{${result}}`.replace(/'/g, `"`)
    }
  }
}

const jsonStr = '{}'

console.log(JSON.parse(jsonStr))

// 实现 JSON.parse

// 1. 使用 eval 实现
function parse1(json) {
  return eval(`(${json})`)
}

// 2. 上述方案如果数据中传入了可执行的 JS 代码，很可能造成 XSS 攻击，
// 因此调用 eval 之前，需要对数据进行校验
function parse2(json) {
  const rx_one = /^[\],:{}\s]*$/
  const rx_two = /\\(?:["\\\/bfnrt]|u[0-9a-fA-F]{4})/g
  const rx_three =
    /"[^"\\\n\r]*"|true|false|null|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?/g
  const rx_four = /(?:^|:|,)(?:\s*\[)+/g

  if (
    rx_one.test(
      json.replace(rx_two, '@').replace(rx_three, ']').replace(rx_four, '')
    )
  ) {
    return eval(`(${json})`)
  }
}

// 3. 使用 new Function 实现
// Function 与 eval 有相同的字符串参数特性
function parse3(json) {
  return new Function(`return ${json}`)()
}

// 以下是 MDN polyfill 的实现
// From https://github.com/douglascrockford/JSON-js/blob/master/json2.js
if (typeof JSON.parse !== 'function') {
  var rx_one = /^[\],:{}\s]*$/
  var rx_two = /\\(?:["\\\/bfnrt]|u[0-9a-fA-F]{4})/g
  var rx_three =
    /"[^"\\\n\r]*"|true|false|null|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?/g
  var rx_four = /(?:^|:|,)(?:\s*\[)+/g
  var rx_dangerous =
    /[\u0000\u00ad\u0600-\u0604\u070f\u17b4\u17b5\u200c-\u200f\u2028-\u202f\u2060-\u206f\ufeff\ufff0-\uffff]/g
  JSON.parse = function (text, reviver) {
    // The parse method takes a text and an optional reviver function, and returns
    // a JavaScript value if the text is a valid JSON text.

    var j

    function walk(holder, key) {
      // The walk method is used to recursively walk the resulting structure so
      // that modifications can be made.

      var k
      var v
      var value = holder[key]
      if (value && typeof value === 'object') {
        for (k in value) {
          if (Object.prototype.hasOwnProperty.call(value, k)) {
            v = walk(value, k)
            if (v !== undefined) {
              value[k] = v
            } else {
              delete value[k]
            }
          }
        }
      }
      return reviver.call(holder, key, value)
    }

    // Parsing happens in four stages. In the first stage, we replace certain
    // Unicode characters with escape sequences. JavaScript handles many characters
    // incorrectly, either silently deleting them, or treating them as line endings.

    text = String(text)
    rx_dangerous.lastIndex = 0
    if (rx_dangerous.test(text)) {
      text = text.replace(rx_dangerous, function (a) {
        return '\\u' + ('0000' + a.charCodeAt(0).toString(16)).slice(-4)
      })
    }

    // In the second stage, we run the text against regular expressions that look
    // for non-JSON patterns. We are especially concerned with "()" and "new"
    // because they can cause invocation, and "=" because it can cause mutation.
    // But just to be safe, we want to reject all unexpected forms.

    // 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
    // replace the JSON backslash pairs with "@" (a non-JSON character). Second, we
    // replace all simple value tokens with "]" characters. Third, we delete all
    // open brackets that follow a colon or comma or that begin the text. Finally,
    // 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.

    if (
      rx_one.test(
        text
          .replace(rx_two, '@')
          .replace(rx_three, ']')
          .replace(rx_four, '')
      )
    ) {
      // In the third stage we use the eval function to compile the text into a
      // JavaScript structure. The "{" operator is subject to a syntactic ambiguity
      // in JavaScript: it can begin a block or an object literal. We wrap the text
      // in parens to eliminate the ambiguity.

      j = eval('(' + text + ')')

      // In the optional fourth stage, we recursively walk the new structure, passing
      // each name/value pair to a reviver function for possible transformation.

      return typeof reviver === 'function'
        ? walk(
            {
              '': j
            },
            ''
          )
        : j
    }

    // If the text is not JSON parseable, then a SyntaxError is thrown.

    throw new SyntaxError('JSON.parse')
  }
}