Skip to content

Object

对象 (Object) 是Javascript之中键值对的集合,常用于存储和操作数据。

JS
Object.keys(); //["name"]
Object.values(); // ["zhangsan",18]
Object.entries(); // [["name","zhangsan"],["age",18]
Obeject.assign(); // 浅拷贝
Obeject.create(); // 创建对象
Object.freeze(); // 冻结对象
Obeject.seal();// 封闭对象,只可以修改已有属性的值
Object.is(); //比较两个值是否相等
Object.hasOwnProperty(); // 对象自身是否有某个属性,不包含原型链上的
Object.defineProperty(); // 添加或修改对象的属性 v2的ref主要使用

🍎 注意下面是原型链上的方法

JS
// 检查一个对象是否是另一个对象的原型的方法
prototypeObj.isPrototypeOf(object)

//  prototypeObj 被检查的对象的原型
//  object 被检查的对象

const animal = { species: "animal" };
const dog = Object.create(animal);  // dog 的原型是 animal

console.log(animal.isPrototypeOf(dog));  // 输出 true
console.log(dog.isPrototypeOf(animal));  // 输出 false


console.log(Object.prototype.isPrototypeOf(dog));  // 输出 true

Object.keys()

作用:以数组形式返回对象的所有键 (属性名)

JS
const person = { name: "name属性值", age: 30, city: "city属性值" };
const keys=Object.keys(person);
console.log(keys,'keys');  //["name", "age", "city"]

Object.values()

作用:以数组形式返回返回对象的所有值

JS
  const person = { name: "name属性值", age: 30, city: "city属性值" };
  const keys=Object.values(person);
  console.log(keys,'values'); //["name属性值", 30, "city属性值"]

Object.entries()

功能:返回一个对象中每个元素是一个 [key,value] 数组,表示对象的每个键值对。

示例:

JS
const person = { name: "name属性值", age: 30, city: "city属性值" };
const keys=Object.entries(person);
console.log(keys,'entries'); 
//输出:[[ 'name', 'name属性值' ], [ 'age', 30 ], [ 'city', 'city属性值' ]]

Object.assign()

功能:将源对象(一个或者多个)的所有可枚举属性复制到目标对象中,并返回目标对象。

示例:

JS
const a = { a: 1, b: 2 };
const b = { b: 4, c: 5 };
const newTarget = Object.assign({},a, b);
console.log(a,'aaaa'); //输出 { a: 1, b: 2 }
console.log(newTarget); //输出  { a: 1, b: 4, c: 5 }


// 如果我们想要拷贝进原来的对象之中
const a = { a: 1, b: 2 };
const b = { b: 4, c: 5 };
const newTarget = Object.assign(a, b);
console.log(a,'aaaa'); //输出  { a: 1, b: 4, c: 5 }
console.log(newTarget); //输出  { a: 1, b: 4, c: 5 }

Object.freeze()

功能:冻结一个对象,使其不能被修改,即不能添加新的属性,不能删除已有属性,不能修改已有属性的值。

示例:

JS
const obj = { name: "John", age: 30 };
console.log(obj,'obj-未修改'); // { name: 'John', age: 30 }
Object.freeze(obj);
obj.age = 31; // 修改属性值无效
console.log(obj,'obj-修改'); // { name: 'John', age: 30 }

Object.seal()

功能:封闭对象,禁止添加或删除属性,但可以修改已有属性的值

示例:

JS
const obj = { name: "John", age: 30 };
console.log(obj,'obj-未修改'); // { name: 'John', age: 30 }
obj.sex = 1; // 修改属性值有效
obj.age = 31;
console.log(obj,'obj-修改1'); // { name: 'John', age: 30, sex: 1 }
Object.seal(obj);
obj.aihao = '唱歌'; // 修改属性值无效
obj.age = 32; // 修改属性值有效
console.log(obj,'obj-修改2-禁止删除或者添加已经有的属性'); 
// 输出 { name: 'John', age: 32, sex: 1 }

Object.create()

功能:使用指定的原型对象和可选的属性创建一个新对象。

JS
const person = { name: "John", age: 30 };
const employee = Object.create(person);
employee.job = "Developer";
console.log(employee.name); // "John" (继承自 person)
console.log(employee.job);  // "Developer"

Object.hasOwnProperty()

功能:检查对象是否具有指定的属性(不是继承自原型链)

🍎语法

JS
// Object 是要检查的对象,property 是要检查的属性名。
object.hasOwnProperty(property); 

const person = { name: "张三", age: 30 };
console.log(person.hasOwnProperty("name"),'name属性'); // 输出 true name属性
console.log(person.hasOwnProperty("sex",), 'sex属性'); // 输出 false sex属性

🍎示例

JS
const person = { name: "张三", age: 30 };
console.log(person.hasOwnProperty("name"),'name属性'); // 输出 true name属性
console.log(person.hasOwnProperty("city"),'city属性'); // false city属性

Object.getOwnPropertyNames()

功能:返回对象的所有属性名(包括不可枚举的属性)。

JS
const person = { name: "John", age: 30 };
Object.defineProperty(person, "city", {
  value: "城市新值",
  enumerable: false, // 不可枚举
});
const propertyNames = Object.getOwnPropertyNames(person);
console.log(propertyNames); // ["name", "age", "city"]

Object.getOwnPropertyDescriptor()

功能:返回对象指定属性的描述符。

JS
const person = { name: "John", age: 30 };
const descriptor = Object.getOwnPropertyDescriptor(person, "name");
console.log(descriptor); 
// { value: "John", writable: true, enumerable: true, configurable: true }

Object.defineProperty()

功能:在对象上定义新属性或修改现有属性,并可以设置该属性的描述符。

比较热门的框架vue2 里面的ref的参数,其实就是用这个实现的。

🍎示例

JS
//默认情况是允许修改的
const person = { name: "name未修改", age: 30, city: "city属性值" };
console.log(person.name, '修改以前'); //输出 name未修改
Object.defineProperty(person, "name", {
    value: "name已修改",
})
console.log(person.name, '修改以后'); //输出 name已修改
 


//不允许修改的时候
const person = {};
Object.defineProperty(person, "name", {
  value: "John",
  writable: false,  // 不可修改
});
console.log(person.name); // "John"
person.name = "Alice"; // 无效
console.log(person.name); // "John"

🍎 vue2的响应数据的实现

JS
const data = { message: 'Hello' };

Object.defineProperty(data, 'message', {
  get() {
    console.log('getter: ', this._message);
    return this._message;
  },
  set(newValue) {
    console.log('setter: ', newValue);
    this._message = newValue;
  }
});

data.message = 'Hi';  // setter: Hi
console.log(data.message);  // getter: Hi

🍎语法

JS
Object.defineProperty(obj, prop, descriptor);

🍎属性参数描述符(descriptor)

JS
// 下面的可以在文章之中找到
value (属性值) 默认值 undefined

设置属性的值。如果没有定义 getter 和 setter,则该值就是属性的值。


writable (可写性) 默认值 false

布尔值,表示该属性是否可以被修改。如果设置为 false,则无法修改属性的值。


 
configurable (可配置性) 默认值 false

布尔值,表示该属性是否可以被删除或是否可以修改属性的特性(如 writable 和 enumerable)。


enumerable (可枚举性) 默认值 false

一个布尔值,表示该属性是否能被 for...in 循环枚举。


get  默认值是 undefined

函数,定义了该属性的 getter,用于获取属性值。该方法会在访问该属性时执行。



set 默认值是 undefined

函数,定义了该属性的 setter,用于设置属性值。该方法会在修改该属性时执行。

Object.getPrototypeOf()

功能:返回对象的原型。

JS
const person = { name: "John" };
const prototype = Object.getPrototypeOf(person);
console.log(prototype); // Object.prototype

🍓补充

JS
对象的原型(即对象的 [[Prototype]])

// 原型上会有这些内容
constructor: ƒ Object()
hasOwnProperty: ƒ hasOwnProperty()
isPrototypeOf: ƒ isPrototypeOf()
propertyIsEnumerable: ƒ propertyIsEnumerable()
toLocaleString: ƒ toLocaleString()
toString: ƒ toString()
valueOf: ƒ valueOf()

Object.setPrototypeOf()

功能:设置对象的原型。

这个时候用Object.getPrototypeOf() 就可以获取到新的原型了,也就是我们之前设置的newPrototype了。

JS
const person = { name: "John" };
const newPrototype = { greet: function() { console.log("Hello!"); } };
Object.setPrototypeOf(person, newPrototype);
person.greet(); // "Hello!"
console.log(Object.getPrototypeOf(person)); // { greet: [Function: greet] }

Object.is()

功能:判断两个值是否严格相等。

JS
console.log(Object.is(25, 25)); // true
console.log(Object.is(NaN, NaN)); // true (不同于 ===)
console.log(Object.is(0, -0)); // false (不同于 ===)

Object.prototype.toString()

功能:返回对象的字符串表示,常用于类型判断。

JS
const person = { name: "John" };
console.log(person.toString()); // "[object Object]"
console.log(Object.prototype.toString.call([])); // "[object Array]"

Released under the MIT License.