ES6►object

object

一、属性简写

  • 属性值等于属性名所代表的变量或函数（属性名必须与变量名相同）
  • 简介写法的属性名总是字符串，所以不存在关键字。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
var foo = 'bar';
function obj() {
  return this.foo
}
var zz = {
  foo,
  obj,
  // 同： method: function(){}
  method () {
    return 2;
  },
  class () {
    return 6;
  }
};

console.log(zz)
console.log(zz.class())  // 6

应用：

1
2
3
4
function method1 () {console.log(3)}
function method2 () {}
function method3 () {}
module.exports = {method1, method2, method3}

新增

  • Object.is() 只要两个值是一样的，它们就应该相等

  • === 不能正确处理NaN 和 +0 -0

1
2
3
4
console.log(Object.is(+0, -0))  // false
console.log(Object.is(NaN, NaN))  // true
console.log(+0 === -0)  // true
console.log(NaN === NaN) // false

二、属性名表达式

1
2
3
4
let obj = {
  [propKey]: true,
  ['a' + 'bc']: 123
};

Object.assign()合并对象(浅拷贝) Object.assign(target, …sources)可以设置多个对象，数组也可以

这些参数都会转成对象，如果无法转成对象，就会跳过。这意味着，如果undefined和null不在首参数，就不会报错。

1
2
3
4
5
var obj = { a: 1 };
var obj2 = { b: 2 };
var obj3 = { c: 3 };
Object.assign(obj, obj2, obj3);
obj // {a:1, b:2, c:3}

三、属性枚举

for…in | JSON.stringify() | Object.assign() 会忽略enumerable为false的属性，且for…in会返回继承的属性

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
遍历属性：
（ 1 ） for (key in obj) {}

（ 2 ） Object.keys(obj)
// Object.keys返回一个数组，包括对象自身的（不含继承的）所有可枚举属性（不含 Symbol 属性）。

（ 3 ） Object.getOwnPropertyNames(obj)
// Object.getOwnPropertyNames返回一个数组，包含对象自身的所有属性（不含 Symbol 属性，但是包括不可枚举属性）。

（ 4 ） Object.getOwnPropertySymbols(obj)
// Object.getOwnPropertySymbols返回一个数组，包含对象自身的所有 Symbol 属性。

（ 5 ） Reflect.ownKeys(obj)
// Reflect.ownKeys返回一个数组，包含对象自身的所有属性，不管是属性名是 Symbol 或字符串，也不管是否可枚举。

// 以上都遵守同样的属性遍历的次序规则。

首先遍历所有属性名为数值的属性，按照数字排序。
其次遍历所有属性名为字符串的属性，按照生成时间排序。
最后遍历所有属性名为 Symbol 值的属性，按照生成时间排序。

Object.values() ， Object.entries() ，Object.keys()

1
2
3
4
var obj = { foo: "bar", baz: 42 };
console.log(Object.keys(obj)) // [ "foo", "baz" ]
console.log(Object.values(obj)) // [ "bar", 42 ]
console.dir(Object.entries(obj)) // [ ["foo", "bar"], ["baz", 42] ]

二、非ES6内容

1、Object.create(proto, [propertiesObject])

proto: 新创建对象的原型对象。

propertiesObject:可选。如果没有指定为 undefined，则是要添加到新创建对象的可枚举属性（即其自身定义的属性，而不是其原型链上的枚举属性）对象的属性描述符以及相应的属性名称。这些属性对应Object.defineProperties()的第二个参数。

1
2
3
4
5
6
7
8
9
10
11
12
const person = {
  isHuman: false,
  printIntroduction: function () {
    console.log(`liu`);
  }
};

const me = Object.create(person);

me.name = "yong"; // "name" is a property set on "me", but not on "person"
me.isHuman = true;
console.log(me)

2、实现类继承

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
// Shape - 父类(superclass)
function Shape() {
  this.x = 0;
  this.y = 0;
}

// 父类的方法
Shape.prototype.move = function(x, y) {
  this.x += x;
  this.y += y;
  console.info('Shape moved.');
};

// Rectangle - 子类(subclass)
function Rectangle() {
  Shape.call(this); // call super constructor.
}

// 子类续承父类, 为什么设置constructor。看下图。
Rectangle.prototype = Object.create(Shape.prototype);
Rectangle.prototype.constructor = Rectangle;

var rect = new Rectangle();

console.log('Is rect an instance of Rectangle?',
  rect instanceof Rectangle); // true
console.log('Is rect an instance of Shape?',
  rect instanceof Shape); // true
rect.move(1, 1); // Outputs, 'Shape moved.'

原型链图

创建原型为null的对象

1
2
3
4
5
6
7
8
// 创建一个原型为null的空对象,打印会发现没有__proto__,所以它没有Object 和 Function对象上的方法。例如valueOf()

应用： 当我们遍历对象属性时，是有可能遍历原型上的属性的。但是该方法创建的根本不存在原型。可以放心遍历（当然我们也可以用其他的方法hasOwnerProperty()实现不遍历原型属性。或Object.keys()）
let o = Object.create(null);

let o = {};
// 以字面量方式创建的空对象就相当于: 该方式则有Object上的方法。
o = Object.create(Object.prototype);

创建一个属性

1
2
// 创建一个以另一个空对象为原型,且拥有一个属性p的对象
let o = Object.create({}, { p: { value: 42 } })
返回
顶部