1.object中拓展的方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>对象优化</title>
</head>
<body>
<script>
const person = {
name: "jack",
age: 21,
language: ['java', 'js', 'css']
}
console.log(Object.keys(person));//["name", "age", "language"]
console.log(Object.values(person));//["jack", 21, Array(3)]
console.log(Object.entries(person));//[Array(2), Array(2), Array(2)]
console.log("-------------------------------------");
</script>
</body>
</html>
assign(dest, …src) :将多个 src 对象的值 拷贝到 dest 中。(第一层为深拷贝,第二层为浅拷贝)
//assign 合并
const target = { a: 1 };
const source1 = { b: "小生不才" };
const source2 = { c: 3 };
//{a:1,b:2,c:3}
Object.assign(target, source1, source2);
console.log(target);
console.log("-------------------------------------");
2.声明对象简写
属性名和属性值变量名一样,可以省略
//2)、声明对象简写
const age = 23
const name = "张三"
//常规写法
const person1 = { age: age, name: name }
//console.log(person1);
//es6写法 属性名和属性值变量名一样,可以省略
const person2 = { age, name }
console.log(person2);
console.log("-------------------------------------");
3.对象的函数属性简写
//3)、对象的函数属性简写
let person3 = {
name: "jack",
// 普通写法
eat: function (food) {
console.log(this.name + "在吃" + food);
},
//箭头函数this不能使用,可使用对象.属性
eat2: food => console.log(person3.name + "在吃" + food),
eat3(food) {
console.log(this.name + "在吃" + food);
}
}
person3.eat("香蕉");
person3.eat2("苹果")
person3.eat3("橘子");
console.log("-------------------------------------");
4.对象拓展运算符
拓展运算符(…)用于取出参数对象所有可遍历属性然后拷贝到当前对象
//4)、对象拓展运算符
// 1、拷贝对象(深拷贝)
let p1 = { name: "Amy", age: 15 }
let someone = { ...p1 }
console.log(someone) //{name: "Amy", age: 15}
let s = p1;
console.log(s);
// 2、合并对象
let age1 = { age: 15 }
let name1 = { name: "Amy" }
let p2 = {name:"zhangsan"}
//覆盖以前的值
p2 = { ...age1, ...name1 }
console.log(p2)
5.完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>对象优化</title>
</head>
<body>
<script>
const person = {
name: "jack",
age: 21,
language: ['java', 'js', 'css']
}
console.log(Object.keys(person));//["name", "age", "language"]
console.log(Object.values(person));//["jack", 21, Array(3)]
console.log(Object.entries(person));//[Array(2), Array(2), Array(2)]
console.log("-------------------------------------");
//assign 合并
const target = { a: 1 };
const source1 = { b: "小生不才" };
const source2 = { c: 3 };
//{a:1,b:2,c:3}
Object.assign(target, source1, source2);
console.log(target);
console.log("-------------------------------------");
//2)、声明对象简写
const age = 23
const name = "张三"
//常规写法
const person1 = { age: age, name: name }
//console.log(person1);
//es6写法
const person2 = { age, name }
console.log(person2);
console.log("-------------------------------------");
//3)、对象的函数属性简写
let person3 = {
name: "jack",
// 普通写法
eat: function (food) {
console.log(this.name + "在吃" + food);
},
//箭头函数this不能使用,可使用对象.属性
eat2: food => console.log(person3.name + "在吃" + food),
eat3(food) {
console.log(this.name + "在吃" + food);
}
}
person3.eat("香蕉");
person3.eat2("苹果")
person3.eat3("橘子");
console.log("-------------------------------------");
//4)、对象拓展运算符
// 1、拷贝对象(深拷贝)
let p1 = { name: "Amy", age: 15 }
let someone = { ...p1 }
console.log(someone) //{name: "Amy", age: 15}
let s = p1;
console.log(s);
// 2、合并对象
let age1 = { age: 15 }
let name1 = { name: "Amy" }
let p2 = {name:"zhangsan"}
//覆盖以前的值
p2 = { ...age1, ...name1 }
console.log(p2)
</script>
</body>
</html>