ES6学习（8）- 对象扩展

Posted on | In

简介表示法

注意下列ES5，ES6代码的不同写法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
{
  // 简洁表示法
  let o=1;
  let k=2;
  //es5的写法
  let es5={
    o:o,
    k:k
  };
  //es6的写法
  let es6={
    o,
    k
  };
  console.log(es5,es6);
  //es5中的方法
  let es5_method={
    hello:function(){
      console.log('hello');
    }
  };
  //es6中的方法
  let es6_method={
    hello(){
      console.log('hello');
    }
  };
  console.log(es5_method.hello(),es6_method.hello());
}

属性表示法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
{
  // 属性表达式
  let a='b';
  let es5_obj={
    a:'c',
    b:'c'
  };
  //key 值，表达式 
  let es6_obj={
    [a]:'c'
  }

  console.log(es5_obj,es6_obj);

}

es6_obj输出的值为 b:'c'

扩展运算符

Object.is 判断是否相等
Object.assign 浅拷贝
Object.entries 对象的遍历

1
2
3
4
5
6
7
8
9
10
11
12
13
{
  // 新增API
  console.log('字符串',Object.is('abc','abc'),'abc'==='abc'); true true 
  console.log('数组',Object.is([],[]),[]===[]);//false false 
  
  //浅拷贝 
  console.log('拷贝',Object.assign({a:'a'},{b:'b'}));

  let test={k:123,o:456};
  for(let [key,value] of Object.entries(test)){
    console.log([key,value]);
  }
}

Object新增方法

扩展运算符 

1
2
3
4
5
6
7
8
{
  // 扩展运算符
  // let {a,b,...c}={a:'test',b:'kill',c:'ddd',d:'ccc'};
  // c={
  //   c:'ddd',
  //   d:'ccc'
  // }
}