JS 对象的操作

一文介绍js中的Object对象的操作 API。

对象的基本操作

对象属性的操作可以通过 对象.属性名 或者是 对象["属性名"] 两种方式读取，前者优雅，后者灵活。

新增属性

在对象中保存的值称为属性

语法: 对象.属性名 = 属性值;

const person = {
  name: "Li",
};
person.age = 18;

console.log(person); // {name: 'Li', age: 18}

查询属性
语法: 对象.属性名 / 对象["属性名"] (必须是字符串)
如果读取对象中没有的属性，不会报错但是会返回 Undefined
```
const person = {
  name: "Li",
  age: 18,
};

console.log(person.name); // Li
console.log(person["age"]); // 18
```

修改属性

语法: 对象.属性名 = 新属性值

const person = {
  name: "Li",
  age: 18,
};
person.age = 19;

console.log(person); // {name: 'Li', age: 19}

删除属性

语法：delete 对象.属性名

const person = {
  name: "Li",
  age: 18,
};
delete person.age;

console.log(person); // {name: 'Li'}

ES5 对象方法

Object.create()

该方法创建一个新对象，使用现有的对象来提供新创建的对象的proto

const person = {
  name: "name",
  age: 0,
  country: "country",
  say: function () {
    console.log(
      `I am ${this.name} and my age is ${this.age}, I from ${this.country}`
    );
  },
};
// 创建一个原型为person的对象，可以对me对象进行赋值
const me = Object.create(person);
console.log(me);

// 创建一个原型为null的空对象
const o = Object.create(null);
console.log(o);

Object.defineProperty(object, property, descriptor)

该方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象。

const object = {};

Object.defineProperty(object, "property1", {
  value: 42,
  writable: false,
});

object.property1 = 77;
// throws an error in strict mode

console.log(object.property1);
// expected output: 42

Object.defineProperties(object, descriptors)

方法直接在一个对象上定义新的属性或修改现有属性，并返回该对象。

var object = {};
Object.defineProperties(object, {
  property1: {
    value: true,
    writable: true,
  },
  property2: {
    value: "Hello",
    writable: false,
  },
  // etc. etc.
});

Object.getOwnPropertyNames(object)

方法返回一个由指定对象的所有自身属性的属性名（包括不可枚举属性但不包括 Symbol 值作为名称的属性）组成的数组。

var arr = ["a", "b", "c"];
console.log(Object.getOwnPropertyNames(arr).sort()); // ["0", "1", "2", "length"]

// 类数组对象
var obj = { 0: "a", 1: "b", 2: "c" };
console.log(Object.getOwnPropertyNames(obj).sort()); // ["0", "1", "2"]

// 使用Array.forEach输出属性名和属性值
Object.getOwnPropertyNames(obj).forEach(function (val, idx, array) {
  console.log(val + " -> " + obj[val]);
});
// 输出
// 0 -> a
// 1 -> b
// 2 -> c

//不可枚举属性
var my_obj = Object.create(
  {},
  {
    getFoo: {
      value: function () {
        return this.foo;
      },
      enumerable: false,
    },
  }
);
my_obj.foo = 1;

console.log(Object.getOwnPropertyNames(my_obj).sort()); // ["foo", "getFoo"]

Object.getPrototypeOf(object)

方法返回指定对象的原型（内部[[Prototype]]属性的值）。返回给定对象的原型。如果没有继承属性，则返回 [null](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/null) 。

var proto = {};
var obj = Object.create(proto);
Object.getPrototypeOf(obj) === proto; // true

var reg = /a/;
Object.getPrototypeOf(reg) === RegExp.prototype; // true

Object.getOwnPropertyDescriptor(object, property)

方法返回指定对象上一个自有属性对应的属性描述符。（自有属性指的是直接赋予该对象的属性，不需要从原型链上进行查找的属性）

const object = {
  property1: 42,
};

const descriptor1 = Object.getOwnPropertyDescriptor(object, "property1");

console.log(descriptor1.configurable);
// expected output: true

console.log(descriptor1.value);
// expected output: 42

ES6 对象方法

Object.values(object)

将对象值转换为数组

const person = {
  name: "Li",
  age: 18,
  country: "China",
};
const myArray = Object.values(person);
console.log(myArray); // ['Li', 18, 'China']

Object.keys(object)

以数组返回可枚举属性，经常使用 Object.keys(object).length 判断对象的长度或者对象是否存在

const person = {
  name: "Li",
  age: 18,
  country: "China",
};
const myArray = Object.keys(person);
console.log(myArray); // ['name', 'age', 'country']

Object.is(object1, object2)
Object.is 判断两个值是否完全相等，几乎和===等价。
tip
相等运算符（==）和严格相等运算符（===）。它们都有缺点，前者会自动转换数据类型，后者的 NaN 不等于自身，以及+0 等于-0。ES6 提出“Same-value equality”（同值相等）算法，它用来比较两个值是否严格相等
```
console.log(Object.is(NaN, NaN)); //true
console.log(NaN === NaN); //false

var aa = {};
var bb = {};
console.log(aa === bb); //false
console.log(Object.is(aa === bb)); //false
```
Object.assign(target, source1, source2...)
Object.assign() 方法用于将所有可枚举属性的值从一个或多个源对象分配到目标对象。它将返回目标对象。也就是说将拷贝一个对象或多个源对象的属性值到目标对象（浅拷贝）。
tip
如果目标对象中的属性具有相同的键，则属性将被源对象中的属性覆盖。后面的源对象的属性将类似地覆盖前面的源对象的属性。
```
const target = { a: 1, b: 2 };
const source = { b: 4, c: 5 };
const returnedTarget = Object.assign(target, source);

console.log(target); // { a: 1, b: 4, c: 5 }
console.log(returnedTarget); // { a: 1, b: 4, c: 5 }
```
Object.entries()
方法返回一个给定对象自身可枚举属性的键值对数组，其排列与使用 for...in 循环遍历该对象时返回的顺序一致（区别在于 for-in 循环还会枚举原型链中的属性）。
```
const object = {
  a: "somestring",
  b: 42,
};

for (const [key, value] of Object.entries(object)) {
  console.log(`${key}: ${value}`);
}
// expected output:
// "a: somestring"
// "b: 42"
```

Object.fromEntries()

entries 的逆操作

const entries = new Map([
  ["foo", "bar"],
  ["baz", 42],
]);

const obj = Object.fromEntries(entries);

console.log(obj);
// expected output: Object { foo: "bar", baz: 42 }

对象的基本操作​

ES5 对象方法​

ES6 对象方法​

对象的基本操作

ES5 对象方法

ES6 对象方法