总结下JSON 和对象字面量的区别及字面量在es6中的简洁表示法

一、类型的区别
JSON
值可以是：数字（整数或浮点数），字符串（在双引号中），逻辑值（true 或 false），数组（在方括号中），对象（在花括号中），null。

对象字面量
值可以是任何类型，而且函数，undefined或者是正则都是可以的。

var book={
      name:es6,
      author:ruanyifeng
      showContent:function(){
            alert('content')
      }
}

二、语法
JSON
要求严格，名称/值对都必须在双引号中！！数据在名称/值对中，数据由逗号分隔，花括号保存对象，方括号保存数组。

var book={
      "name":"es6",
      "author":"ruanyifeng"
}

字面量
对象字面量属性不用引号也可以，用双引号，单引号都可以。

var book={
      "name":"es6",
      "author":"ruanyifeng"
}

var book={
      name:es6,
      author:ruanyifeng
      showContent:function(){
            alert('content')
      }
}

三、顺便说道下，ES6中对象字面量简洁表示法的使用场景。

1、属性的简写

//es5
const obj = {a:a};
//es6
const obj = {a}

2、函数、方法的简写

//es5
let o = {
    fn : function(){
      return "hello!"
    }
}

//es6
let o = {
  fn(){
    return "hello!"
  }
}

3、export时的简写

//es5
export default {
    getItem:getItem,
    getType:getType
}

//es6
export default {getItem,getType}

4、函数返回时的简写

//es5
function getPoint(){
    let x=1;
    let y=2;
    return {x:x,y:y}
}

//es6
function getPoint(){
    let x=1;
    let y=2;
    return {x,y}
}

四、再回顾下JSON对象的两个方法

//1、将字面量对象转化为json字符串，序列化
JSON.stringify(obj)；

//2、将json字符串转化成字面量对象，反序列化
JSON.parse(str)；

同时采用这两个方法可以实现字面量对象的深拷贝

let obj={x:1,y:2,z:{name:"Joe"}};
let otherObj = JSON.parse(JSON.stringify(obj));
if(obj === otherObj){
    console.log("它们还是同一个对象，深拷贝失败！")
}
else{
    console.log("它们不是同一个对象，深拷贝成功！")
}
//结果：它们不是同一个对象，深拷贝成功！

参考：
1、http://www.w3school.com.cn/json/json_syntax.asp
2、ES6标准入门
3、javascript高级程序设计
4、https://blog.csdn.net/ForMyQianDuan/article/details/80421195
5、http://www.runoob.com/json/json-parse.html

总结下JSON 和 对象字面量的区别 及字面量在es6中的简洁表示法

猜你喜欢

总结下JSON 和对象字面量的区别及字面量在es6中的简洁表示法