zoukankan      html  css  js  c++  java
  • Unexpected token o in JSON at position 1

    学习es6里解构赋值的时候JSON应用的时候遇到Unexpected token o in JSON at position 1 这个错误

    const json = {"name1":"es","price":"200"}
    const {name1,price} = JSON.parse(json)
    console.log(name1,price)   
    

    发现json不是一个字符串,导致报错。JSON.parse(里面必须是一个json字符串)
    正确的写法是,如下:

    const json = '{"name1":"es","price":"200"}'
    const {name1,price} = JSON.parse(json)
    console.log(name1,price)   
    

    到这里就解决了问题!

    结束的时候普及一下JSON.parse()和JSON.stringify()方面的知识:

    JSON.parse() 方法用于将一个 JSON 字符串转换为对象,如:
    const str = '{"name1":"es","price":"200"}'
    
    JSON.parse(str);
    
    //结果为一个Object
    
    //{name1: 'es', price: '200'}
    

    JSON.stringify() 方法是将一个JavaScript值(对象或者数组)转换为一个 JSON字符串,如:

    const a = {a:1,b:2};
    
    JSON.stringify(a);
    
    //结果为 '{"a":1,"b":2}'
    

    学习到新的知识,就做个记录吧!
    一. JSON.stringify()的几种妙用
    1.判断数组是否包含某对象,或者判断对象是否相等
    //判断数组是否包含某对象

    let data = [
        {name:'javascript'},
        {name:'vue'},
        {name:'React'},
        ],
        val = {name:'React'};
    JSON.stringify(data).indexOf(JSON.stringify(val) !== -1;  // true
    
    //判断两数组/对象是否相等
    let a = [1,2,3],
        b = [1,2,3];
    JSON.stringify(a) === JSON.stringify(b);//true
    

    2.实现对象深拷贝
    如果怕影响原数据,我们常深拷贝出一份数据做任意操作,其实使用JSON.stringify()与JSON.parse()来实现深拷贝是很不错的选择

    //深拷贝
    function deepClone(data) {
        let _data = JSON.stringify(data),
            dataClone = JSON.parse(_data);
        return dataClone;
    };
    //测试
    let arr = [1,2,3],
        _arr = deepClone(arr);
    arr[0] = 2;
    console.log(arr,_arr)//[2,2,3]  [1,2,3]
    

    3.JSON.stringify()与toString()的区别
    这两者虽然都可以将目标值转为字符串,但本质上还是有区别的

    let arr = [1,2,3];
    JSON.stringify(arr);//'[1,2,3]'
    arr.toString();//1,2,3
    

    本文来自博客园,作者:小基狠努力啊,转载请注明原文链接:https://www.cnblogs.com/ylh188/p/15670919.html

  • 相关阅读:
    事件代理(event的target属性)
    搜狗输入法软件分析
    软件工程概论项目——第7天
    软件工程概论项目——第6天
    软件工程概论项目-第5天
    软件工程概论项目——第四天
    软件工程概论项目——典型用户场景分析
    软件工程概论项目-第三天
    软件工程概论项目-第二天
    软件工程概论项目——第一天
  • 原文地址:https://www.cnblogs.com/ylh188/p/15670919.html
Copyright © 2011-2022 走看看