Appearance
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]"