1. 创建对象的几种方式
1.使用 { }创建的方式
只创建自有属性
const obj1 = {
name: 'object1',
method: function () {
console.log('object1');
}
}
console.log(obj1);
- new 一个类的实例的方式
可创建自有属性和原型对象属性
const func2 = function () {
this.name = 'object2'
// 如果涉及到继承，不推荐这样创建对象方法
this.method = function () {
console.log('object2');
}
}
func2.prototype.method1 = function () {
console.log('object2');
}
const obj2 = new func2()
console.log(obj2);
- Object.create(obj) 的方式
只创建原型属性
const obj3 = Object.create({
name: {
enumerable: true, // 不可遍历
writable: true, // 不可修改
configurable: true, // 不可删除和配置
value: "object3"
},
other: {
value: 'otherValue',
enumerable: true, // 不可遍历
writable: true, // 不可修改
configurable: true, // 不可删除和配置
get: function () {
return 1000 + '-' + this.value
},
set: function (value) {
this.value = value
}
},
method: function () {
console.log('object3');
}
})
// 按照规则重组属性值
// 获取 other属性的值
console.log(obj3.other.get()); //1000-otherValue
// 设置 other属性的值
obj3.other.set('newOtherValue')
// 获取 other属性的值
console.log(obj3.other.get()); //1000-newOtherValue
2. 对象属性的增、删、改、查
自定义公共对象
function ob() {
this.a = 100
this.b = 200
}
ob.prototype.c = 300
const object = new ob()
- 增：
// 增: 新属性名赋值
function add(object) {
object['c'] = '20000'
object.other = '其他'
console.log(object);
}
add(object)
// 增: definedObjectProperties定义对象新属性和属性权限
function definedObjectProperties(object) {
Object.defineProperties(object, {
'e': { value: 100000, writable: false, enumerable: false, configurable: false },
'f': { value: 200000, writable: false, enumerable: false, configurable: false },
'a': { value: 999999, writable: false, enumerable: false, configurable: false }
})
console.log(object);
}
definedObjectProperties(object)
- 删：
// 删：delete ，操作数组时，内容被删除，位置保留，变成empty，打印它时是undefined
function del(object) {
delete object.a
console.log(object);
const arr = [1, 2, 3]
delete arr[1]
console.log(arr);
}
del(object)
- 改:
和增是一样的，只是针对的是对象的原有属性
- 查：
判断是否有某个属性
// 查询对象是否有a这个key，返回true/false
function search(object) {
const result1 = 'a' in object
console.log(result1);
const result2 = object.hasOwnProperty('a')
console.log(result2);
}
// search(object)
以数组的方式返回对象所有key
// 以数组的方式返回对象自有属性的所有的key
function objKeyAll(object) {
const result = Object.getOwnPropertyNames(object)
console.log(result);
}
// objKeyAll(object)
3. 对象的特性
自定义公共对象
function ob() {
this.a = 100
this.b = 200
}
ob.prototype.c = 300
const object = new ob()
- 对象的枚举
可控制是否遍历对象的原型属性
// 枚举对象所有属性的key和value
function objFor(object) {
for (const key in object) {
// 只遍历自有属性
if (Object.hasOwnProperty.call(object, key)) {
const element = object[key];
console.log(key, element);
}
// 遍历自由属性和原型属性
// const element = object[key];
// console.log(key, element);
}
}
- 定义对象属性的（值和权限）
单个属性
function definedObjectPropety(object) {
// 定义和改变对象属性的：值、可读性、可枚举性、可配置性, 改变原来对象
Object.defineProperty(object, 'e',
{
value: 1,
writable: false, // 是否可修改
enumerable: false, // 是否可枚举
configurable: false // 是否可删除，再修改权限
})
object.e = 10000000000 // 不生效、不报错
delete object.e // 不生效、不报错
console.log(object); // 1 可获取
}
definedObjectPropety(object)
多个属性
// 定义对象的多个属性权限
function definedObjectProperties(object) {
Object.defineProperties(object, {
'e': { value: 100000, writable: false, enumerable: false, configurable: false },
'f': { value: 200000, writable: false, enumerable: false, configurable: false },
'a': { value: 999999, writable: false, enumerable: false, configurable: false }
})
console.log(object);
}
definedObjectProperties(object)
- 对象的合并
- Object.assign(目标对象, otherObj) 只可以合并可枚举的自有属性，浅拷贝
- 如果出现重复的key，不报错，后面的属性覆盖前面的属性
const a = {
a: 1000
}
const e = {
e: 2000
}
Object.assign(object, a, e)
console.log(object);
- ...展开符的方式在新对象中展开对象的属性，只可以合并可枚举的自有属性，深拷贝
- 如果出现重复的key，不报错，后面的属性覆盖前面的属性
const a = {
a: 2000
}
const e = {
e: 1000
}
const newObj = { ...object, ...e, ...f }
console.log(newObj);
4. 对象的getter和setter
参考：https://www.jb51.net/article/141739.htm
- getter 和 setter 操作的属性，不可配置或枚举，可写入、获取
- 常用于对对象复杂属性的提炼
function doing(params) {
const complex = {
data: {
prop: {
username: '鸟蛋',
password: 'nd2739128397'
}
},
get username() {
return this.data.prop.username + 'xx'
},
set username(e) {
return this.data.prop.username = e
},
get password() {
return this.data.prop.password + 'xx'
},
set password(e) {
return this.data.prop.password = e
}
}
// 赋值和获取，两者的效果相同
console.log(complex.data.prop.username);
console.log(complex.username);
complex.username = '新鸟蛋'
console.log(complex.data.prop.username);
console.log(complex.username);
}
doing()
