es6 对象的扩展

偏执的太偏执、 2022-02-01 14:45 445阅读 0赞

对象的扩展

      • 传统对象属性写法
      • es6对象属性写法
      • 属性名表达式
      • 属性的可枚举性和遍历
        • 可枚举性
          • 四个操作会忽略enumerable为false的属性:
        • 属性的遍历
          • 以上属性遍历的次序规则
      • Object.is()
      • Object.assign()
      • Object.setPrototypeOf()
      • Object.getPrototypeOf()
      • Object.keys()
      • Object.values()
      • Object.entries()
      • Object.fromEntries()

传统对象属性写法

  1. var a = "aaa";
  2. var b = "130";
  3. //传统属性写法
  4. var c = {
  5. "a":a,
  6. "b":b
  7. }
  8. console.log(c); // { a:"aaa",b:"130"}

es6对象属性写法

  1. var a = "aaa";
  2. var b = "130";
  3. //es6属性写法
  4. var c = { a,b};
  5. console.log(c); // { a:"aaa",b:"130"}
  6. //传统表示法
  7. var obj = {
  8. fn:function(){
  9. console.log('传统表示法')
  10. }
  11. }
  12. //es6表示法
  13. var obj = {
  14. fn(){
  15. console.log('es6表示法')
  16. }
  17. }

属性名表达式

  1. var a = "a";
  2. var b = "b";
  3. var c = "c";
  4. var d = "d";
  5. var E = {
  6. [ a+b ] : "啦啦啦啦",
  7. [ c+d ](){
  8. return "hello!!!"
  9. }
  10. }
  11. console.log(E.ab); // "啦啦啦啦"
  12. console.log(E.cd()); // "hello!!!"

注意: 属性名表达式简洁表示法,不能同时使用,会报错。

  1. //报错写法
  2. var a = "b";
  3. var b = "c";
  4. var c = { [b] }
  5. //正确写法
  6. var a = "b"
  7. var c = { [a]:"c" }

注意: 属性名表达式如果是一个对象,默认情况下会自动将对象转为字符串[object Object],这一点要特别小心。

  1. var A = { a: 1};
  2. var B = { b: 2};
  3. var Object = {
  4. [A]: 'valueA',
  5. [B]: 'valueB'
  6. };
  7. Object // Object {[object Object]: "valueB"}

属性的可枚举性和遍历

可枚举性

对象的每个属性都有一个描述对象(Descriptor),用来控制该属性的行为。Object.getOwnPropertyDescriptor方法可以获取该属性的描述对象。

  1. let obj = { foo: 123 };
  2. Object.getOwnPropertyDescriptor(obj, 'foo')
  3. // {
  4. // value: 123,
  5. // writable: true,
  6. // enumerable: true,
  7. // configurable: true
  8. // }
  • 描述对象的enumerable属性,称为“可枚举性”,如果该属性为false,就表示某些操作会忽略当前属性。
四个操作会忽略enumerable为false的属性:

for...in循环:只遍历对象自身的和继承的可枚举的属性。
Object.keys():返回对象自身的所有可枚举的属性的键名。
JSON.stringify():只串行化对象自身的可枚举的属性。
Object.assign(): 忽略enumerable为false的属性,只拷贝对象自身的可枚举的属性

属性的遍历

  • for...in for…in循环遍历对象自身的和继承的可枚举属性(不含 Symbol 属性)。
  • Object.keys(obj) Object.keys返回一个数组,包括对象自身的(不含继承的)所有可枚举属性(不含 Symbol 属性)的键名。
  • Object.getOwnPropertyNames(obj) Object.getOwnPropertyNames返回一个数组,包含对象自身的所有属性(不含 Symbol 属性,但是包括不可枚举属性)的键名。
  • Object.getOwnPropertySymbols(obj) Object.getOwnPropertySymbols返回一个数组,包含对象自身的所有 Symbol 属性的键名。
  • Reflect.ownKeys(obj) Reflect.ownKeys返回一个数组,包含对象自身的所有键名,不管键名是 Symbol 或字符串,也不管是否可枚举。
以上属性遍历的次序规则
  • 首先遍历所有数值键,按照数值升序排列。
  • 其次遍历所有字符串键,按照加入时间升序排列。
  • 最后遍历所有 Symbol 键,按照加入时间升序排列

Object.is()

Object.is() 比较两个值是否严格相等,或者说全等(===)

  1. var a = '10';
  2. var b = 10;
  3. var c = 10;
  4. Object.is(a,b); // false
  5. Object.is(b,c); // true

Object.assign()

Object.assign() 将源对象的属性赋值到目标对象上。用于对象的合并,参数至少两个或者更多。

  1. //目标对象
  2. var obj = { "a":1};
  3. //源对象
  4. var newObj = { "b":2,"c":3};
  5. Object.assign(obj,newObj); //{ a:1,b:2,c:3 }

注意 若赋值过程中,对象属性出现重复,后面的属性值就会覆盖前面的属性值

  1. //目标对象
  2. var obj = { "a":1};
  3. //源对象
  4. var newObj = { "b":2,"c":3};
  5. var newObj2 = { "b":4}
  6. Object.assign(obj,newObj,newObj2); //{ a:1,b:4,c:3 }

注意 如果该参数不是对象,则会先转成对象,然后返回。
由于undefinednull无法转成对象,所以如果它们作为参数,就会报错

  1. let obj = { a: 1};
  2. Object.assign(obj) === obj; // true
  3. Object.assign(undefined) // 报错
  4. Object.assign(null) // 报错

Object.setPrototypeOf()

Object.setPrototypeOf() 设置一个对象的prototype属性

  1. //自定义一个Person类(函数)
  2. function Person(){
  3. }
  4. //函数都有一个预属性prototype对象
  5. Person.prototype = {
  6. //给prototype对象添加一个say方法
  7. say(){
  8. console.log('hello');
  9. }
  10. };
  11. //实例化Person对象,赋值给变量allen
  12. let allen = new Person();
  13. //调用类的say方法
  14. allen.say();
  15. //结果:打印出hello
  16. //使用Object.setPrototypeOf
  17. Object.setPrototypeOf(
  18. allen,
  19. { say(){ console.log('hi')}
  20. });
  21. //再次调用类的say方法
  22. allen.say();
  23. //结果:打印出hi

Object.getPrototypeOf()

Object.getPrototypeOf() 获取一个对象的prototype属性

  1. //自定义一个Person类(函数)
  2. function Person(){
  3. }
  4. //函数都有一个预属性prototype对象
  5. Person.prototype = {
  6. //给prototype对象添加一个say方法
  7. say(){
  8. console.log('hello');
  9. }
  10. };
  11. //实例化Person对象,赋值给变量allen
  12. let allen = new Person();
  13. //调用类的say方法
  14. allen.say();
  15. //结果:打印出hello
  16. //获取allen对象的prototype属性
  17. Object.getPrototypeOf(allen);
  18. //结果:打印{say:function(){.....}}

Object.keys()

Object.keys()方法返回一个数组,成员是参数对象自身的(不含继承的)所有可遍历(enumerable)属性的键名。

  1. var obj = { a: 'aaa', b: 123 };
  2. Object.keys(obj)
  3. // ["a", "b"]

Object.values()

Object.values()方法返回一个数组,成员是参数对象自身的(不含继承的)所有可遍历(enumerable)属性的键值

  1. var obj = { a: 'aaa', b: 123 };
  2. Object.values(obj)
  3. // ["aaa", 123]

Object.values只返回对象自身的可遍历属性

  1. let obj = Object.create({ }, { p: { value: 42}});
  2. Object.values(obj) // []

Object.values会过滤属性名为 Symbol 值的属性。

  1. Object.values({ [Symbol()]: 123, foo: 'abc' });
  2. // ['abc']

如果Object.values方法的参数是一个字符串,会返回各个字符组成的一个数组。

  1. Object.values('foo')
  2. // ['f', 'o', 'o']

Object.entries()

Object.entries()方法返回一个数组,成员是参数对象自身的(不含继承的)所有可遍历(enumerable)属性的键值对数组。

  1. let obj = { a: 'aaa', b: 111 };
  2. Object.entries(obj)
  3. // [ ["a", "aaa"], ["b", 111] ]

Object.entries的基本用途是遍历对象的属性。

  1. let obj = { one: 1, two: 2 };
  2. for (let [k, v] of Object.entries(obj)) {
  3. console.log(
  4. `${ JSON.stringify(k)}: ${ JSON.stringify(v)}`
  5. );
  6. }
  7. // "one": 1
  8. // "two": 2

Object.entries方法的另一个用处是,将对象转为真正的Map结构。

  1. const obj = { foo: 'bar', baz: 42 };
  2. const map = new Map(Object.entries(obj));
  3. map // Map { foo: "bar", baz: 42 }

Object.fromEntries()

Object.fromEntries()方法是Object.entries()的逆操作,用于将一个键值对数组转为对象。

  1. Object.fromEntries([
  2. ['a', 'aaa'],
  3. ['b', 12]
  4. ])
  5. // { a: "aaa", b: 12 }

发表评论

表情:
评论列表 (有 0 条评论,445人围观)

还没有评论,来说两句吧...

相关阅读

    相关 es6 对象扩展

    1.属性的简洁表示法     function f(x,y) \{       return \{x,y\};     \}     // 等同于     funct

    相关 ES6-对象扩展

    在[JavaScript原生对象-Object对象详解][JavaScript_-Object]中已经比较详细的介绍了Object对象,其中已经多次提高了ES6,这一篇将详细的

    相关 ES6 对象扩展

    属性的简洁表示法 ES6允许直接写入变量和函数,作为对象的属性和方法。这样的书写更加简洁。 下面代码表明,ES6允许在对象之中,直接写变量。这时,属性名为变量名, 属