速查表
编号 | 方法名 | 功能 | 是否改变原对象(内容) |
---|---|---|---|
1 | Object.freeze(obj) | 阻止修改现有属性的特性和值,并阻止添加新属性 | n |
2 | Object.assign(target,source1,source2,...) | 主要用于对象的合并,此方法只拷贝源对象的自身属性,不拷贝继承的属性 | n |
3 | Object.create(obj[, propertiesObject]) | 创建一个新对象,并指定它的原型对象,返回创建的对象 | n |
4 | Object.defineProperties(obj, props) | 在一个对象上定义新的属性或修改现有属性,并返回该对象 | y |
5 | hasOwnProperty(key) | 判断对象自身属性中是否具有指定的属性 | n |
6 | Object.getOwnPropertyDescriptor(obj, prop) | 返回指定对象上一个自有属性对应的属性描述符 | n |
7 | Object.getOwnPropertyDescriptors(obj) | 获取一个对象的所有自身属性的描述符 | n |
8 | Object.getOwnPropertyNames(obj) | 返回一个由指定对象的所有自身属性的属性名组成的数组 | n |
9 | Object.is(obj1, obj2) | 判断两个值是否相同 | n |
10 | Object.keys(obj) | 返回一个由给定对象的自身可枚举属性组成的数组 | n |
11 | Object.values(obj) | 返回一个给定对象自己的所有可枚举属性值组成的数组 | n |
12 | Object.entries(obj) | 返回一个给定对象自己的所有可枚举属性的键值对数组 | n |
1. Object.freeze(obj)
阻止修改现有属性的特性和值,并阻止添加新属性。
两种用法:Object.freeze({}) 或 Object.freeze(obj)。
let a = {};
a.sex = '男';
console.log(a.sex, 111); //男 111
Object.freeze(a);
a.sex = '女';
console.log(a.sex, 222); //男 222 修改属性无效
let b = Object.freeze({
name: "piter",
age: 10
});
console.log(b.name, 333); //piter 333
b.name = "bob";
console.log(b.name, 444); //piter 444 修改属性无效
2. Object.assign(target,source1,source2,...)
该方法主要用于对象的合并,将源对象source的所有可枚举属性合并到目标对象target上,此方法只拷贝源对象的自身属性,不拷贝继承的属性。
Object.assign方法实行的是浅拷贝,而不是深拷贝。也就是说,如果源对象某个属性的值是对象,那么目标对象拷贝得到的是这个对象的引用。同名属性会替换。
Object.assign只能进行值的复制,如果要复制的值是一个取值函数,那么将求值后再复制。
Object.assign可以用来处理数组,但是会把数组视为对象。
let target = {
age: 10,
page: 1
};
let objA = {
age: 12,
year: 20,
newObj: {
sex: '男'
}
};
Object.assign(target, objA);
console.log(target, '拷贝之后');
// {
// age: 12,
// newObj: {
// sex: '男'
// },
// page: 1,
// year: 20
// }
// 拷贝之后
// 同名属性会被覆盖
target.newObj.sex = '女'; // 拷贝为对象引用
console.log(target.newObj.sex, '修改拷贝后对象里面的属性'); // 女 修改拷贝后对象里面的属性
function Person() {
this.name = 'bob';
};
Person.prototype.age = 20;
let man = new Person();
man.age = 29;
let obj = {
sex: '男'
};
Object.assign(obj, man);
console.log(obj, '构造函数拷贝后的属性===');
// {sex: "男", name: "bob", age: 29} "构造函数拷贝后的属性==="
// 只能拷贝自身的属性,不能拷贝prototype
console.log(Object.assign([1, 2, 3], [4, 5]), '数组使用该方法===');
// [4, 5, 3]
// 把数组当作对象来处理
3. Object.create(obj[, propertiesObject])
Object.create 方法创建一个新对象,使用现有的对象来提供新创建的对象的__proto__。它允许你创建一个新对象,并指定它的原型对象。
Object.create(null) 创建的对象是一个空对象,在该对象上没有继承 Object.prototype 原型链上的属性或者方法,例如:toString(), hasOwnProperty()等方法。
Object.create 方法接受两个参数:Object.create(obj, propertiesObject) 。
propertiesObject:可选。该参数对象是一组属性与值,该对象的属性名称将是新创建的对象的属性名称,值是属性描述符(这些属性描述符的结构与 Object.defineProperties 的第二个参数一样)。
注意:该参数对象不能是 undefined,另外只有该对象中自身拥有的可枚举的属性才有效,也就是说该对象的原型链上属性是无效的。属性描述符具体字段如下:
(1) enumerable 对象属性是否可通过for-in循环,flase为不可循环,默认值为true
(2) writable 对象属性是否可修改,flase为不可修改,默认值为true
(3) configurable 能否使用delete、能否修改属性特性、或能否修改访问器属性,false为不可重新定义,默认值为true
(4) value 属性值
Object.create 和 new Object()的区别
比较 | New | Object.create |
---|---|---|
构造函数 | 保留原构造函数属性 | 丢失原构造函数属性 |
原型链 | 原构造函数prototype属性 | 原构造函数 |
作用对象 | function | function 和 object |
var o = Object.create(Object.prototype, {
// foo会成为所创建对象的数据属性
foo: {
enumerable: false, //对象属性是否可通过for-in循环,flase为不可循环,默认值为true
writable: true, //对象属性是否可修改,flase为不可修改,默认值为true
configurable: true, //能否使用delete、能否修改属性特性、或能否修改访问器属性,false为不可重新定义,默认值为true
value: "goodnice" // 属性值
},
// bar会成为所创建对象的访问器属性
bar: {
configurable: false,
get: function() {
return 10
},
set: function(value) {
console.log("Setting `o.bar` to", value);
}
}
});
console.log(o);
// {foo:'goodnice'}
var test = Object.create(null);
console.log(test);
// {} No Properties
// 也就是在对象本身不存在属性跟方法,原型链上也不存在属性和方法
4. Object.defineProperties(obj, props)
直接在一个对象上定义新的属性或修改现有属性,并返回该对象。
var obj = {};
Object.defineProperties(obj, {
'property1': {
value: true,
writable: true
},
'property2': {
value: 'Hello,word',
writable: false
}
});
console.log(obj); // {property1: true, property2: "Hello,word"}
Object.defineProperty(obj,prop,descriptor)
在一个对象上定义一个新属性,或者修改一个对象的现有属性, 并返回这个对象。
obj---需要定义属性的对象;
prop---需要定义或修改的属性的名字;
descriptor---将被定义或修改的属性的描述符。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>test</title>
</head>
<body>
<div id="test">这是一个测试</div>
<script>
var test = document.getElementById("test");
var data = {};
var i = 0;
Object.defineProperty(data, "b", {
set: function(newValue) {
// 当data.b的值改变的时候更新#test的视图
test.textContent = newValue;
},
get: function() {}
});
setInterval(function() {
i++;
data["b"] = "data.b的值更新了,视图更新" + i;
}, 1000);
</script>
</body>
</html>
5. hasOwnProperty(key)
判断对象自身属性中是否具有指定的属性。
用来检测一个对象是否包含指定的属性,而且这个属性存在于对象本身中,而不是在原型链上。
let person = {
name: "Alice",
age: 25
};
console.log(person.hasOwnProperty('name')); // true
console.log(person.hasOwnProperty('gender')); // false
// 添加一个继承自 Object 原型链的属性
Object.prototype.address = 'Beijing';
console.log(person.hasOwnProperty('address')); // false
console.log(person.address); // Beijing
6. Object.getOwnPropertyDescriptor(obj, prop)
返回指定对象上一个自有属性对应的属性描述符(自有属性指的是直接赋予该对象的属性,不需要从原型链上进行查找的属性)。
如果指定的属性存在于对象上,则返回其属性描述符对象(property descriptor),否则返回 undefined。
const obj = {
name: 'John',
age: 30
};
const descriptor = Object.getOwnPropertyDescriptor(obj, 'name');
console.log(descriptor.value); // 'John'
console.log(descriptor.writable); // true
console.log(descriptor.enumerable); // true
console.log(descriptor.configurable); // true
7. Object.getOwnPropertyDescriptors(obj)
获取一个对象的所有自身属性的描述符。
var obj = {
name: 'bob',
age: 18
};
console.log(Object.getOwnPropertyDescriptors(obj));
// 运行结果
// {
// "name": {
// "value": "bob",
// "writable": true,
// "enumerable": true,
// "configurable": true
// },
// "age": {
// "value": 18,
// "writable": true,
// "enumerable": true,
// "configurable": true
// }
// }
8. Object.getOwnPropertyNames(obj)
返回一个由指定对象的所有自身属性的属性名(包括不可枚举属性但不包括 Symbol 值作为名称的属性)组成的数组。
var obj1 = {
age: 10,
sex: "男",
name: "bob"
};
Object.getOwnPropertyNames(obj1).forEach(function(val) {
console.log(val, '遍历的值'); // age sex name 拿到的是实际是对象的键(key)
});
var obj2 = {
x: 1,
y: 2
};
Object.defineProperty(obj2, 'z', {
enumerable: false
});
console.log(Object.getOwnPropertyNames(obj2)); // ["x", "y", "z"] 包含不可枚举属性
console.log(Object.keys(obj2)); // ["x", "y"] 只包含可枚举属性
9. Object.is(obj1, obj2)
判断两个值是否相同。
如果下列任何一项成立,则两个值相同:
(1) 两个值都是 undefined;
(2) 两个值都是 null;
(3) 两个值都是 true 或者都是 false;
(4) 两个值是由相同个数的字符按照相同的顺序组成的字符串;
(5) 两个值指向同一个对象;
(6) 两个值都是数字并且都是 0 或者都是正零 +0 或负零 -0;
(7) 都是 NaN;
(8) 都是除零和 NaN 外的其它同一个数字。
console.log(Object.is('foo', 'foo')); // true
console.log(Object.is(window, window)); // true
console.log(Object.is('foo', 'bar')); // false
console.log(Object.is([], [])); // false
var test = {
a: 1
};
console.log(Object.is(test, test)); // true
console.log(Object.is(null, null)); // true
// 特例
console.log(Object.is(0, -0)); // false
console.log(Object.is(-0, -0)); // true
console.log(Object.is(NaN, 0 / 0)); // true
10. Object.keys(obj)
返回一个由给定对象的自身可枚举属性组成的数组,数组中属性名的排列顺序和使用 for…in 循环遍历该对象时返回的顺序一致(两者的主要区别是 for…in 循环还会枚举其原型链上的属性)。
let arr = ["a", "b", "c"];
console.log(Object.keys(arr)); //["0", "1", "2"]
let obj = {
age: 20,
sex: '男'
};
console.log(Object.keys(obj)); //["age", "sex"]
11. Object.values(obj)
返回一个给定对象自己的所有可枚举属性值组成的数组,值的顺序和使用 for…in 循环遍历该对象时的顺序相同(区别在于 for-in 循环枚举原型链中的属性)。
var obj = {
10: 'a',
1: 'b',
2: 'c'
};
console.log(Object.values(obj)); // ['b', 'c', 'a']
var obj1 = {
0: 'a',
1: 'b',
2: 'c'
};
console.log(Object.values(obj1)); // ['a', 'b', 'c']
12. Object.entries(obj)
返回一个给定对象自身可枚举属性的键值对数组,顺序和使用 for…in 循环遍历该对象时的顺序相同(区别在于 for-in 循环枚举原型链中的属性)。
var obj = {
name: "zhangsan",
age: 18
};
console.log(Object.entries(obj)); // [ ['name', 'zhangsan'], ['age', 18] ]