属性的获取
可以使用.或者[] 获取属性
const obj = {
name: 'lily',
age: 18,
}
obj.name; // lily
obj['age']; // 18 注意[]里可以是字符换也可以变量
const aaa = 'age';
obj[aaa]; // -> obj['age'] 18 变量aaa
//还可以增加属性
obj.hobby = 'sing'
解构赋值
const obj = { name: 'lily', age: 18 };
// 获取对象的值可以通过解构的方式
const {name, age} = obj;
console.log(name); // 'lily'
console.log(age); // 18
// 也可以添加默认值
const {name, age, hobby = 'sing'} = obj;
console.log(hobby); // sing 如果对象中不存在hobby属性或者hobby为空，则使用'sing'默认值，若是有值则会覆盖默认值
delete
属性的删除
const obj = {
name: 'lily',
age: 18,
}
delete obj.name;
obj; // { age: 18 }
for..in
遍历对象
const obj = {
name: 'lily',
age: 18,
}
for(let item in obj) {
console.log(`${item}:${obj[item]}`) // name:lily age:18
}
Object.assign()
语法： Object.assign(target, ...sources)
将source对象中属性合并到target上，如果有相同的属性，source中的属性会覆盖target中的属性
let target = {
name: 'lily',
age: 18,
}
let source = {
name: 'sala',
hobby: 'sing'
}
let source2 = {
height: 180,
weight: 200
}
Object.assign(target, source);
// 合并之后target为 {name: 'sala', age: 18, hobby: 'sing'}
Object.assign(target, source, source2);
// 合并之后target为 {name: 'sala', age: 18, hobby: 'sing', height: 180, weight: 200}
Object.assign() 还有其他用法，可自行百度深入了解
拓展运算符...
也可用来合并对象。此方法对于对象的第一层是深拷贝，若是多层也是浅拷贝了，具体见下面的深拷贝之Object.assign()类似
let name = {name: 'lily'};
let age = {age: 18};
let person = {...name, ...age};
// person: {name: 'lily', age: 18}
Object.keys()
返回一个由对象所有key值组成的数组
let obj = { name: 'lily', age: 18};
let keys = Object.keys(obj);
// keys: ['name', 'age']
// 由此可以获取对象的长度
Object.keys(obj).length; // 2
// 还可以对keys进行循环 取出taeget的key值和对应的value值
Object.keys(obj).forEach(item => {
console.log(`${item}:${obj[item]}`) // name: 'lily' age: 18
})
Object.values()
返回一个由对象所有value值组成的数组
let obj = { name: 'lily', age: 18};
let values = Object.values(obj);
// values: ['lily', 18]
Object.entries()
返回一个由对象所有[key ,value]值组成的二维数组，
let obj = { name: 'lily', age: 18};
let entries = Object.entries(obj);
// entries [['name', 'lily'],['age', 18]]
对象的深拷贝与浅拷贝
-
浅拷贝
- 拷贝后的对象属性发生变化，原对象属性也会发生变化
let obj = { name: 'lily', age: 18};
let obj1 = obj; // obj1: { name: 'lily', age: 18};
obj1.name = 'kefan';
// 此时 obj.name 也会变成 'kefan'
- 深拷贝
两个对象之间没有任何关系,修改obj1中的属性，obj不会改变其原有属性值
- 通过json实现，不能拷贝方法，会造成方法丢失
let obj = { name: 'lily', age: 18 };
let obj2 = JSON.parse(JSON.stringify(obj));
obj2.name = 'huahua';
obj.name; // 'lily'
// 如果对象中有方法属性
let obj = {
name: 'lily',
age: 18,
show: function() {
console.log('aaa')
}
};
let obj2 = JSON.parse(JSON.stringify(obj));
obj2; // { name: 'lily', age: 18 } show方法丢失了
- 通过for-in遍历循环实现
let obj = { name: 'lily', age: 18 };
let obj2 = {};
for(let item in obj){
obj2[item] = obj[item]
}
obj2; // { name: 'lily', age: 18 };
obj2.name = 'huahua';
obj.name; // 'lily'
// 以上只是针对一层的拷贝，若是深层次的，需进行递归处理
function deepClone(obj) {
//判断是数组还是对象, 是数组就创建一个空数组，否则创建一个空对象
let objClone = Array.isArray(obj) ? [] : {};
// 判断obj是不是object类型，并且不为空
if(obj && typeof obj === "object"){
// 对obj进行遍历
for(let key in obj){
// 判断obj中是否存在key属性
if(obj.hasOwnProperty(key)){
if(obj[key] && typeof obj[key] === "object"){ // 判断如果obj[key]存在，并且obj[key]是仍是对象类型的时候，进行递归处理
objClone[key] = deepClone(obj[key]);
} else { // 否则就是浅复制
objClone[key] = obj[key];
}
}
}
}
}
let obj = {
name: 'lily',
age: 18,
obj: {
hobby: 'sing'
}
};
let obj2 = deepClone(obj);
- 使用Object.assign() 进行对象合并
let target = {};
let source = { name: 'lily', age: 18 };
//将source合并到target上
Object.assign(target, source);
console.log(target); // { name: 'lily', age: 18 };
source.age = 200;
console.log(target.age); // 18
// 但是Object.assign() 只是针对对象的第一层是深拷贝，如果是两层或两层以上就是浅拷贝了
let source2 = {
name: 'lily',
age: 18,
obj: {
hobby: 'sing'
}
};
Object.assign(target, source2);
console.log(target); // { name: 'lily', age: 18, obj: {hobby: 'sing'} };
source2.obj.hobby = 'dance';
target.obj.hobby; // dance
深拷贝 浅拷贝还可以使用函数库lodash里的clone和deepClone
