这一期归纳一下对象的方法总结,主要包含方法,代码,注意事项
1.创建对象
- 字面量
let obj = {name: 'zs'};
- new Object() / new 构造函数
let obj = new Object()
- Object.create()
新建一个空对象,并将现有对象的属性，挂到新建对象的原型上 Object.create() 的第二个参数，为添加的可枚举属性（即自身属性，不是原型上的）
2.枚举遍历对象
- for in 它会得到原型链上的属性
const obj = Object.create({ bar: 'bar' });
obj.name = 'zs';
for (let key in obj) {
console.log(obj[key]); // zs, bar
}
- Object.keys 该方法返回对象自身属性名组成的数组，它会自动过滤掉原型链上的属性
- Object.values 该方法返回对象自身属性值组成的数组，它会自动过滤掉原型链上的属性
- Object.entries 该方法返回对象自身[属性名,属性值]组成的数组，它会自动过滤掉原型链上的属性
- Object.fromEntries 与entries相反,是数组转成对象
- Object.getOwnPropertyNames 该方法返回对象自身属性名组成的数组，包括不可枚举的属性
const obj = Object.create(
{
bar: 'bar'
},
{
baz: {
value: 'baz',
enumerable: false
}
}
);
obj.name = 'zs';
Object.getOwnPropertyNames(obj).forEach((key) => {
console.log(obj[key]); // zs baz
});
Object.values(obj).forEach((key) => {
console.log(key);//zs
});
Object.entries(obj).forEach((key) => {
console.log(key); // [ 'name', 'zs' ]
});
Object.keys(obj).forEach((key) => {
console.log(obj[key]); // zs
});
- Object.getOwnPropertySymbols
obj[Symbol('foo')] = 'Symbol foo';
Object.getOwnPropertySymbols(obj).forEach((key) => {
console.log(key, obj[key]); // Symbol(foo),Symbol foo
});
- Reflect.ownKeys Reflect.ownKeys() 方法是 ES2015 新增的静态方法，该方法返回对象自身所有属性名组成的数组，包括不可枚举的属性和 Symbol 属性
Reflect.ownKeys(obj).forEach((key) => {
console.log(obj[key]); // baz zs Symbol foo
});
3.defineProperty
,define：定义 property：属性,所以defineProperty即给对象定义属性,这是es5中很重要的一个方法
参数一：obj
绑定属性的目标对象
参数二：property
绑定的属性名
参数三：descriptor
属性描述（配置），且此参数本身为一个对象
- 属性值1：value
设置属性默认值
let obj = { name: '' };
Object.defineProperty(obj, 'name', {
value: 'zs'
});
console.log(obj); // zs
- 属性值2：writable
设置属性是否能够修改
Object.defineProperty(obj, 'name', {
value: 'zs',
writable: false
});
obj.name = 'ls';
console.log(obj);
- 属性值3：enumerable
设置属性是否可以枚举，即是否允许遍历
Object.defineProperty(obj, 'name', {
value: 'zs',
enumerable: false
});
for (key in obj) {
console.log(key); //遍历obj中的属性值并打印，此时结果为空
}
- 属性值4：configurable
设置属性是否可以删除或编辑
Object.defineProperty(obj, 'name', {
value: 'zs',
configurable: false
});
delete obj.name;
console.log(obj); // zs
- 属性值5：get
获取属性的值
Object.defineProperty(obj, 'name', {
get() {
console.log(123); // 执行其他操作
return "ls"; // 这里return会修改name的值
}
});
console.log(obj.name); // ls
- 属性值6：set
设置属性的值
Object.defineProperty(obj, 'name', {
set(value) {
console.log(value); // 获取修改的值
}
});
obj.name = 'ls';
defineProperties 同defineProperty只是可以添加多个属性
4.assign
对象拷贝 Object.assign()拷贝的是属性值。假如源对象的属性值是一个对象的引用，那么它也只指向那个引用。第一个参数是他的目标.
- 浅拷贝
let obj1 = { a: 0, b: { c: 0 } };
let obj2 = Object.assign(obj1);
console.log(obj1 === obj2); // true
- 对象合并 不同属性是新增
const o1 = { a: 1 };
const o2 = { b: 2 };
const o3 = { c: 3 };
const obj = Object.assign(o1, o2, o3);
console.log(obj); // { a: 1, b: 2, c: 3 }
console.log(o1); // { a: 1, b: 2, c: 3 }, 注意目标对象自身也会改变。
- 相同属性会被后面的覆盖
const o1 = { a: 1, b: 1, c: 1 };
const o2 = { b: 2, c: 2 };
const o3 = { c: 3 };
const obj = Object.assign({}, o1, o2, o3);
console.log(obj); // { a: 1, b: 2, c: 3 },注意属性被后续参数中具有相同属性的其他对象覆盖
- 继承属性和不可枚举属性是补课拷贝的
- 原始类型会包装为对象
freeze 冻结属性
冻结后的对象不会在被修改, 不能对这个对象进行添加新属性, 不能删除已有属性, 不能修改该对象已有属性的可枚举性, 可配置性, 可写性. 此外冻结一个对象后该对象的原型也不能进行修改. freeze() 返回和传入的参数相同
const obj = {
count: 1
};
const obj2 = Object.freeze(obj);
obj2.count = 2;
console.log(obj2.count); // 1
isFrozen 是否冻结
在vue2中我们冻结我们不要响应式的数据
5.hasOwn / hasOwnProperty
判断对象是否有改属性
const obj = {
count: 1
};
console.log(Object.hasOwn(obj, 'count')); // true
console.log(obj.hasOwnProperty('count')); // true
6.其他
- Object.is()方法可以用于确定两个值是否相同,与==差不多
- toString 转字符串
- isSealed 是否已经封存
- isExtensible 是否可扩展
- Object.isPrototypeOf 是否存在另一个对象的原型上
