用javascript解析json（JavaScript JSON.stringify的使用总结）

时间：2022-03-30 09:49:33类别：编程学习

用javascript解析json

JavaScript JSON.stringify的使用总结

1、基本用法

JSON.stri.jpg" alt="用javascript解析json（JavaScript JSON.stringify的使用总结）" border="0" />

let json1 = {
  title: "Json.stri.jpg" alt="用javascript解析json（JavaScript JSON.stringify的使用总结）" border="0" />

默认情况下，JSON.stri.jpg" alt="用javascript解析json（JavaScript JSON.stringify的使用总结）" border="0" />

"{"title":"Json.stri.jpg" alt="用javascript解析json（JavaScript JSON.stringify的使用总结）" border="0" />

在序列化JavaScript对象时，所有函数和原型成员都会有意地在结果中省略。此外，值为undefined的任何属性也会被跳过。最终得到的就是所有实例属性均为有效JSON数据类型的表示。

在JSON.stri.jpg" alt="用javascript解析json（JavaScript JSON.stringify的使用总结）" border="0" />

2、第二个参数--过滤器

如果第二个参数是一个数组，那么JSON.stri.jpg" alt="用javascript解析json（JavaScript JSON.stringify的使用总结）" border="0" />

let json1 = {
  title: "Json.stri.jpg" alt="用javascript解析json（JavaScript JSON.stringify的使用总结）" border="0" />

在这个例子中，JSON.stri.jpg" alt="用javascript解析json（JavaScript JSON.stringify的使用总结）" border="0" />

"{"weixin":"frontJS"}"

如果第二个参数是一个函数，则行为又有不同。提供的函数接收两个参数：属性名（key）和属性值（value）。可以根据这个key决定要对相应属性执行什么操作。这个key始终是字符串，只是在值不属于某个键/值对时会是空字符串。

const students = [
  {
    name: 'james',
    score: 100,
  }, {
    name: 'jordon',
    score: 60,
  }, {
    name: 'kobe',
    score: 90,
  }
];

function replacer (key, value) {
  if (key === 'score') {
    if (value === 100) {
      return 'S';
    } else if (value >= 90) {
      return 'A';
    } else if (value >= 70) {
      return 'B';
    } else if (value >= 50) {
      return 'C';
    } else {
      return 'E';
    }
  }
  return value;
}
console.log(JSON.stri.jpg" alt="用javascript解析json（JavaScript JSON.stringify的使用总结）" border="0" />

上面的代码，我们通过replacer将成绩从百分制替换为成绩等级。

用javascript解析json（JavaScript JSON.stringify的使用总结）

值得注意的是，如果stri.jpg" alt="用javascript解析json（JavaScript JSON.stringify的使用总结）" border="0" />

3、第三个参数--字符串缩进

JSON.stri.jpg" alt="用javascript解析json（JavaScript JSON.stringify的使用总结）" border="0" />

let json1 = {
  title: "Json.stri.jpg" alt="用javascript解析json（JavaScript JSON.stringify的使用总结）" border="0" />

这样得到的jsonText格式如下：

{
    "title": "Json.stri.jpg" alt="用javascript解析json（JavaScript JSON.stringify的使用总结）" border="0" />

JSON.stri.jpg" alt="用javascript解析json（JavaScript JSON.stringify的使用总结）" border="0" />

4、toJSON()方法--自定义JSON序列化

有时候，对象需要在JSON.stri.jpg" alt="用javascript解析json（JavaScript JSON.stringify的使用总结）" border="0" />

下面的对象为自定义序列化而添加了一个toJSON()方法：

let json1 = {
  title: "Json.stri.jpg" alt="用javascript解析json（JavaScript JSON.stringify的使用总结）" border="0" />

注意，箭头函数不能用来定义toJSON()方法。主要原因是箭头函数的词法作用域是全局作用域，在这种情况下不合适。

二、使用场景

1、判断数组是否包含某对象，或者判断对象是否相等。

//判断数组是否包含某对象
let data = [
    {name:'浪里行舟'},
    {name:'前端工匠'},
    {name:'前端开发'},
    ],
    val = {name:'浪里行舟'};
console.log(JSON.stri.jpg" alt="用javascript解析json（JavaScript JSON.stringify的使用总结）" border="0" />

我们还可以使用JSON.stri.jpg" alt="用javascript解析json（JavaScript JSON.stringify的使用总结）" border="0" />

// 判断对象是否相等
let obj1 = {
    a: 1,
    b: 2
  }
  let obj2 = {
    a: 1,
    b: 2,
  }
console.log(JSON.stri.jpg" alt="用javascript解析json（JavaScript JSON.stringify的使用总结）" border="0" />

不过这种方式存在着较大的局限性，对象如果调整了键的顺序，就会判断出错！

// 调整对象键的位置后
let obj1 = {
    a: 1,
    b: 2
  }
  let obj2 = {
    b: 2,
    a: 1,
  }
console.log(JSON.stri.jpg" alt="用javascript解析json（JavaScript JSON.stringify的使用总结）" border="0" />

2、使用localStorage/sessionStorage时

localStorage/sessionStorage默认只能存储字符串，而实际开发中，我们往往需要存储对象类型，那么此时我们需要在存储时利用json.stri.jpg" alt="用javascript解析json（JavaScript JSON.stringify的使用总结）" border="0" />

// 存数据
function setLocalStorage(key,val) {
    window.localStorage.setItem(key, JSON.stri.jpg" alt="用javascript解析json（JavaScript JSON.stringify的使用总结）" border="0" />

用javascript解析json（JavaScript JSON.stringify的使用总结）

3、实现对象深拷贝

开发中，有时候怕影响原数据，我们常深拷贝出一份数据做任意操作，使用JSON.stri.jpg" alt="用javascript解析json（JavaScript JSON.stringify的使用总结）" border="0" />

let arr1 = [1, 3, {
    username: ' kobe'
}];
let arr2 = JSON.parse(JSON.stri.jpg" alt="用javascript解析json（JavaScript JSON.stringify的使用总结）" border="0" />

用javascript解析json（JavaScript JSON.stringify的使用总结）

这是利用JSON.stri.jpg" alt="用javascript解析json（JavaScript JSON.stringify的使用总结）" border="0" />

这种方法虽然可以实现数组或对象深拷贝,但不能处理函数和正则，因为这两者基于JSON.stri.jpg" alt="用javascript解析json（JavaScript JSON.stringify的使用总结）" border="0" />

let arr1 = [1, 3, function () { }, {
  username: ' kobe'
}];
let arr2 = JSON.parse(JSON.stri.jpg" alt="用javascript解析json（JavaScript JSON.stringify的使用总结）" border="0" />

用javascript解析json（JavaScript JSON.stringify的使用总结）

三、使用注意事项

JSON.stri.jpg" alt="用javascript解析json（JavaScript JSON.stringify的使用总结）" border="0" />

1、被转换值中有 NaN 和 Infinity

let myObj = {
  name: "浪里行舟",
  age: Infinity,
  money: NaN,
};
console.log(JSON.stri.jpg" alt="用javascript解析json（JavaScript JSON.stringify的使用总结）" border="0" />

2、被转换值中有 undefined、任意的函数以及 symbol 值

分为两种情况：

数组,undefined、任意的函数以及symbol值在序列化的过程中会被转换成 null

JSON.stri.jpg" alt="用javascript解析json（JavaScript JSON.stringify的使用总结）" border="0" />

非数组,undefined、任意的函数以及symbol值在序列化的过程中会被忽略

JSON.stri.jpg" alt="用javascript解析json（JavaScript JSON.stringify的使用总结）" border="0" />

3、循环引用

如果一个对象的属性值通过某种间接的方式指向该对象本身，那么就是一个循环引用。比如：

let bar = {
  a: {
    c: foo
  }
};
let foo = {
  b: bar
};

JSON.stri.jpg" alt="用javascript解析json（JavaScript JSON.stringify的使用总结）" border="0" />

这种情况下，序列化会报错的：

// 错误信息
Uncaught ReferenceError: foo is not defined
    at <anonymous>:3:8

4、含有不可枚举的属性值时

不可枚举的属性默认会被忽略：

let personObj = Object.create(null, {
  name: { value: "浪里行舟", enumerable: false },
  year: { value: "2021", enumerable: true },
})

console.log(JSON.stri.jpg" alt="用javascript解析json（JavaScript JSON.stringify的使用总结）" border="0" />

四、总结

JSON.stri.jpg" alt="用javascript解析json（JavaScript JSON.stringify的使用总结）" border="0" />

以上就是JavaScript JSON.stri.jpg" alt="用javascript解析json（JavaScript JSON.stringify的使用总结）" border="0" />

标签：

JavaScript JSON.stringi

用javascript解析json（JavaScript JSON.stringify的使用总结）