JSON.stringify()与JSON.parse()的区别、用法

1.JSON对象与JSON字符串

    const person = { "name": "tom", "age": '19', "sex": "man" };
    console.log(person, typeof (person), person.name); // { "name": "tom", "age": '19', "sex": "man" } object tom
    const personStr = '{"name": "tom", "age":"19", "sex":"man"}';
    console.log(personStr, typeof(personStr)); // '{ "name": "tom", "age": '19', "sex": "man" }' string

• 普通对象const person = { name: "tom", age: '19', sex: "man" };json对象与普通对象的区别就是每一个键都用双引号括起来
• JSON字符串也是字符串，由单引号或双引号括起来，因为字符串的格式符合json的格式，所以叫做json字符串

2.JSON.stringify()与JSON.parse()的区别

• JSON.stringify()是将JSON对象转化为JSON字符串
• JSON.parse()是将JSON字符串转化为JSON对象

    const array = [1, 2, 3];
    const arrayStr = JSON.stringify(array);
    console.log(arrayStr, typeof(arrayStr)); // '[1, 2, 3]'  string

    const array1 = JSON.parse(arrayStr);
    console.log(array1, typeof(array1)); // [1, 2, 3]  object

3.JSON.stringify()的用法

1. 判断数组是否包含某对象

  const array2 = [{ name: 'LIU', age: 17 }, { name: 'SUN', age: 70 }];
  const obj = { name: 'LIU', age: 17 };
  console.log(JSON.stringify(array2).indexOf(JSON.stringify(obj)) !== -1); // true

1. indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。
2. 如果没有找到匹配的字符串则返回 -1。
3. indexOf() 方法区分大小写。

2. 判断两个对象/数组是否相等

  const array3 = [1, 2, 3];
  const array4 = [1, 2, 3];
  console.log(array3 === array4); // false
  console.log(JSON.stringify(array3) === JSON.stringify(array4)); // true

3. 实现对象深拷贝

 deepClone(obj) {
   const _obj = JSON.stringify(obj);
   return JSON.parse(_obj);
  }


 const obj1 = { name: 'LIU', age: 17 };
 const _obj1 = this.deepClone(obj);
 console.log(obj1 === _obj1, JSON.stringify(obj1) === JSON.stringify(_obj1));   // false true
 
 _obj1.name = 'SUN';
 console.log(obj1, _obj1); // { name: 'LIU', age: 17 }  { name: 'SUN', age: 17 }

4. LocalStorage/sessionStorage默认只能存储字符串，而实际开发中我们需要缓存的类型大多为对象类型，这就要用到JSON字符串与JSON对象的相互转化。存储时利用JSON.stringify()将对象转化为字符串，取出时利用JSON.parse()将字符串转化为对象即可。

  // 存入Local Storage
  setLocalStorage(key, val) {
    window.localStorage.setItem(key, JSON.stringify(val));
  }

  // 从Local Storage取出
  getLocalStorage(key) {
    const val = window.localStorage.getItem(key);
    return val;
  }

  this.setLocalStorage('test', [1, 2, 3]);
  const a = this.getLocalStorage('test');
  console.log(a);   // [1, 2, 3]