ES6方向:对象扩展

1、对象

1、对象的书写形式
      let name = '小陈同学';
      let age = 23;
      let obj = {
        name:name,
        age:age,
        fn:function(){
          return this.name
        }
      }
      //ES写法
      let obj = {
        name,
        age,
        fn(){
          return this.name
        }
      }
1.2、属性名表达式

定义对象的属性,有两种方式

// 写法一
obj.name = '小陈同学';

// 写法二
obj['name'] = '小陈同学'

在ES6中拓展了ES5的缺陷,在使用字面量定义对象时,ES5只允许第一种方式去定义,比如:

let  obj = {
    name:'小陈同学',
    age:22
}

而ES6中拓展了它的定义方式,允许第二种方式去字面量的方式去定义对象

let  obj = {
    ['name'] : '小陈同学',
    ['age']: 22
}

其次还允许这种方式去定义对象内部的方法名

let  obj = {
    ['name']:'小陈同学',
    ['fn'](){
        return 1;
    }
}

但是需要注意的是,这种写法不支持简写,比如:

      //第一种方式
      let name = '小陈同学';
      let age = 23;
      //ES简写的写法
      let obj = {
        name,
        age,
        fn(){
          return this.name
        }
      }
      console.log(obj.fn()); // 打印结果 小陈同学

      // 第二种方式
      let username = '小yu同学';
      let userage = 22;
      let obje = {
        //切记不支持简写!!!!
        [username]:[username],
        [userage]:[userage],
        ['fn'](){
          return obje[username];
        }
      }
      console.log(obje.fn())

第二种写法一定不要去简写,会报错!!!

2、对象新增

2.1、Object.is() 用来比较两个值是否相等

ES5比较两个值是否相等,只有两个运算符:相等运算符(==)以及严格相等运算符(===)。它们都有自身的缺点,前者会自动转换数据类型,比如:123 == '123' 相等运算符会自动处理为true值,隐形的进行了数据类型的转换,而后者严格相等运算符的NaN不等于自身,以及+0等于-0。
ES6提出同值相等算法,Object.is()就是部署这个算法的新方法,它用来比较两个值是否严格相等,类似于严格相等运算符(===)的提升。

      let obj1 = Object.is(123,'123');
      console.log(obj1);// false
      let obj2 = Object.is(NaN,NaN);
      console.log(obj2);// true
      let obj3 = Object.is(+0,-0);
      console.log(obj3);// false
执行结果.png
2.2、Object.assign()用来合并对象的
使用方法:let  新对象 = Object.assign(目标对象,需要合上的对象)

使用示例

      let json = {
        name:'小陈同学',
        age:22,
        addr:'湖南省长沙市'
      }
      let newjson = {
        score:100,
        isShow:true
      }
      let jsons = Object.assign(json,newjson);
      console.log(jsons);
打印结果.png
2.2.1、如果属性名有重复的

如果在合并对象的时候属性名有重复的,那么后面的就会去覆盖前面的

      let json = {
        name:'小陈同学',
        age:22,
        addr:'湖南省长沙市'
      }
      let newjson = {
        name:'小yu同学',
        addr:'安徽省芜湖市',
        score:100,
        isShow:true
      }
      let jsons = Object.assign(json,newjson);
      console.log(jsons);
执行结果.png
2.2.2、如果Object.assign()中只有一个参数,Object.assign()会直接返回该参数
      let json = {
        name:'小陈同学'
      }
      let jsons = Object.assign(json);
      console.log(jsons);
执行结果.png
2.2.3、由于undefined和null无法转成对象,所以如果它们作为参数,就会报错。
Object.assign(undefined)//报错
Object.assign(null)//报错
2.2.4、利用Object.assign()这个方法来拷贝数组
      let arr = [1,2,3];
      let array = new Set(Object.assign([],arr));    //为了能链式的去添加元素,偷个懒...
      array.add(4).add(5).add(6).add(7).add(8);
      console.log('新数组:',array);
      console.log('旧数组:',arr)
执行结果.png

3、Object.keys()、Object.entries()以及Object.values()

用于循环json和对象

3.1、Object.keys()

遍历json的属性

      let json = {
        name: "小yu同学",
        addr: "安徽省芜湖市",
        score: 100,
        isShow: true,
      };

      for(let item of Object.keys(json)){
        console.log(item);
      }
执行结果.png
3.2、Object.values()

遍历json的属性值

      let json = {
        name: "小yu同学",
        addr: "安徽省芜湖市",
        score: 100,
        isShow: true,
      };

      for(let item of Object.values(json)){
        console.log(item);
      }
执行结果.png
3.3、Object.entries()

遍历键值对

      let json = {
        name: "小yu同学",
        addr: "安徽省芜湖市",
        score: 100,
        isShow: true,
      };

      for(let item of Object.entries(json)){
        console.log(item);
      }

执行结果.png

也可以使用解构去做

      let {keys,values,entries} =Object

      let json = {
        name: "小yu同学",
        addr: "安徽省芜湖市",
        score: 100,
        isShow: true,
      };
      for(let item of keys(json)){
        console.log(item); //name  addr  score  isShow
      }
      for(let item of values(json)){
        console.log(item);//小yu同学  安徽省芜湖市  100  true
      }
      for(let item of entries(json)){
        console.log(item);//[name: "小yu同学"]  [addr: "安徽省芜湖市"] [score: 100]  [isShow: true],
      }

4、对象的扩展运算符

4.1、解构赋值与...(扩展运算符)
let { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 };
x // 1
y // 2
z // { a: 3, b: 4 }

由于解构需要等号两边匹配一致,因此,左边是对象,而右边不是一个对象,那么就会出现报错。

4.1.1、解构赋值必须要放到最后一个参数,否则报错
let  {...x,y,z} = obj //报错

let  {x,...y,...z} = obj //报错

let  {x,y,...z} = obj //正确

注意:解构赋值的拷贝是浅拷贝,即如果一个键的值是复合类型的值(数组、对象或是函数),那么解构赋值拷贝的是这个值的引用,而不是这个值的副本。比如:

      let obj = {
        name:'小陈',
        age:22,
        x:{
          addr:'安徽省芜湖市'
        }
      }
      console.log(obj.x.addr);
      let {x,...b} = obj;
      console.log(x.addr);
打印结果.png

指向的是同一个引用对象

4.1.2、扩展运算符可以拷贝对象

扩展运算符可以拷贝对象用于取出参数对象的所有可遍历的属性,拷贝到当前对象之中。

      let a = {x:1,y:2,z:3}
      let c = {...a};
      console.log(c)
执行结果.png
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 214,504评论 6 496
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,434评论 3 389
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 160,089评论 0 349
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,378评论 1 288
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,472评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,506评论 1 292
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,519评论 3 413
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,292评论 0 270
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,738评论 1 307
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,022评论 2 329
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,194评论 1 342
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,873评论 5 338
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,536评论 3 322
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,162评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,413评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,075评论 2 365
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,080评论 2 352

推荐阅读更多精彩内容