JSON比較全解析

JSON（JavaScript Object Notation）是一種輕量級的數據交換格式，易於人閱讀和編寫，同時也易於機器解析和生成。在前後端數據交互過程中，使用JSON作為數據格式開始變得越來越普遍。本篇文章將從多個方面對JSON比較進行詳細的闡述，包括比較器、比較返回差異的JS代碼、比較插件、比較差異以及優缺點、比較兩個JSON字元串和JSON對象數組。

一、JSON比較器

JSON比較器是將兩個JSON對象進行比較的工具，一般將輸入的兩個JSON分別標記為源JSON和目標JSON，對比不同之處並展示出來。

const object1 = {
  name: 'Jon Snow',
  age: 26,
  address: {
    city: 'Winterfell',
    country: 'the North'
  }
}

const object2 = {
  name: 'Arya Stark',
  age: 22,
  address: {
    city: 'Winterfell',
    country: 'the North'
  }
}

// 比較兩個JSON
const compareJSON = (json1, json2) => {
  // 轉換為JSON字元串，比較元素是否相等
  if (JSON.stringify(json1) === JSON.stringify(json2)) {
    console.log('JSONs are equal')
  } else {
    console.log('JSONs are not equal')
  }
}

compareJSON(object1, object2) // 返回結果為 JSONs are not equal

二、JSON比較返回差異JS代碼

JSON比較返回差異JS代碼是指，比較工具返回兩個JSON之間的差異，並將差異以JS代碼的形式返回，以便後續做進一步的處理。

const json1 = {
  name: 'Jon',
  age: 25,
  address: {
    city: 'Winterfell',
    country: 'the North'
  }
}

const json2 = {
  name: 'Jon Snow',
  age: 26,
  address: {
    city: 'Winterfell',
    country: 'the North'
  }
}

// 比較差異
const compareJSONDiff = (json1, json2, prefix = 'obj') => {
  Object.keys(json1).forEach(key => {
    const currentKeyPath = `${prefix}.${key}`
    if (typeof json2[key] === 'undefined') {
      console.log(`Delete ${currentKeyPath}`)
    } else if (JSON.stringify(json1[key]) !== JSON.stringify(json2[key])) {
      console.log(`Changed ${currentKeyPath} to ${JSON.stringify(json2[key])}`)
    }
  })

  Object.keys(json2).forEach(key => {
    const currentKeyPath = `${prefix}.${key}`
    if (typeof json1[key] === 'undefined') {
      console.log(`Add ${currentKeyPath} with value ${JSON.stringify(json2[key])}`)
    }
  })
}

compareJSONDiff(json1, json2) 
// 返回結果為 Changed obj.name to "Jon Snow"，Changed obj.age to 26

三、JSON比較插件

JSON比較插件是用於瀏覽器的插件，它可以通過插入一個兼容各種瀏覽器的插件，在頁面上展示出兩個JSON的差異，讓開發人員能夠方便的對JSON數據進行比較和修改。

比較插件功能可以使用比較器和比較返回差異JS代碼實現，不再贅述。

四、JSON比較差異工具

JSON比較差異工具是一種用於比較兩個JSON文件並展示其中差異的工具。常用於比較兩個不同版本之間的JSON數據的差異。

JSON比較差異工具可以使用程序自動實現比較，同時也可以在頁面上展示出比較結果。

五、比較兩個JSON key是否相同

比較兩個JSON key是否相同是用於判斷兩個JSON文件是否具有相同的key，若具有相同的key，則返回值為true；否則為false。

代碼示例：

function compareKeys(json1, json2) {
  const keys1 = Object.keys(json1)
  const keys2 = Object.keys(json2)

  if (keys1.length !== keys2.length) {
    return false
  }

  return keys1.every(key => keys2.includes(key))
}

const json1 = {
  name: 'Jon',
  age: 25,
}

const json2 = {
  name: 'Jon Snow',
  age: 26,
}

console.log(compareKeys(json1, json2)) // 返回結果為 true，因為兩個JSON具有相同的key。

六、JSON/XML比較優缺點

JSON與XML是兩種常用的數據交換格式，它們都有各自的優缺點。

JSON的優點：

• JSON是一個輕量級的數據交換格式，易於編寫和解析
• JSON在JavaScript中的解析速度非常快，而且它是純文本，可以被任何編程語言解析
• JSON的可讀性更好，非常適合用於Web應用程序
• JSON支持基本數據類型，如數組、對象、字元串、數字等
• 相對於XML，JSON的效率更高

JSON的缺點：

• JSON不支持注釋
• JSON不具有DTD（Document Type Definition，文檔類型定義）和Schema的驗證功能
• JSON不支持國際化

總的來看，JSON比XML更適合Web應用程序的數據交換。

七、比較兩個JSON字元串是否相同

比較兩個JSON字元串是否相同是用於比較兩個JSON字元串是否相等，若相等則返回true，否則返回false。

代碼示例：

function compareStrings(json1, json2) {
  if (JSON.parse(json1).toString() === JSON.parse(json2).toString()) {
    return true
  } 
  return false
}

const json1 = '{"name": "Jon", "age": 25}'
const json2 = '{"name": "Jon", "age": 25}'

console.log(compareStrings(json1, json2)) // 返回結果為 true

八、比較兩個JSON對象數組取出不同的值

比較兩個JSON對象數組取出不同的值是用於比較兩個JSON對象數組，並取出它們之間不同的值。

代碼示例：

function getDifferentValues(arr1, arr2) {
  const diffValues = []
  arr1.forEach((obj1, index) => {
    const obj2 = arr2[index]
    Object.keys(obj1).forEach(key => {
      if (obj1[key] !== obj2[key]) {
        diffValues.push({ index: index, key: key, value1: obj1[key], value2: obj2[key] })
      }
    })
  })

  return diffValues
}

const arr1 = [{ name: 'Jon', age: 25 }, { name: 'Arya', age: 22 }]
const arr2 = [{ name: 'Jon Snow', age: 26 }, { name: 'Arya Stark', age: 22 }]

console.log(getDifferentValues(arr1, arr2)) // 返回結果為 [{ index: 0, key: 'name', value1: 'Jon', value2: 'Jon Snow' }, { index: 0, key: 'age', value1: 25, value2: 26 }]

總結

本篇文章從多個方面對JSON比較進行了詳細的闡述，包括JSON比較器、比較返回差異JS代碼、比較插件、比較差異、比較兩個JSON字元串、比較兩個JSON對象數組取出不同值等。在實際開發過程中，選擇合適的比較工具和方法，能大大提高開發效率。