<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
const person = {
name: "jack",
age: 21,
language: ['java', 'js', 'css']
}
// 获取对象的所有 key 形成的数组
console.log(Object.keys(person));
// 获取对象的所有 value 形成的数组
console.log(Object.values(person));
// 获取对象的所有 key 和 value 形成的二维数组
console.log(Object.entries(person));
const target = {a:1}
const source1 = {b:"2"}
const source2 = {c:3}
// Object.assign 方法的第一个参数是目标对象,后面的参数都是源对象。
Object.assign(target, source1, source2)
console.log(target)
// 对象声明简写
const age = 23
const name = "zhangsan"
const person1 = {age:age, name:name}
console.log(person1)
// 简写方式
const person2 = {age, name}
console.log(person2)
// 对象的函数属性简写
let person3 = {
name:"jack",
eat:function(food) {
console.log(this.name + "在吃" + food)
},
// 简写情况下不能使用this
eat2: food => console.log(this.name + "在吃" + food),
eat3: food => console.log(person3.name + "在吃" + food)
}
person3.eat("apple")
person3.eat2("apple")
person3.eat3("apple")
// 对象扩展运算符
// 1、拓展运算符(...)用于取出参数对象所有可遍历属性然后拷贝到当前对象 -- 深拷贝
let person4 = {
name: "Amy",
age: 15
}
let someone = { ...person4 }
console.log(someone) //{name: "Amy", age: 15}
// 2、合并对象
let age1 = { age: 15 }
let name1 = { name: "Amy" }
let person5 = { ...age1, ...name1 } //如果两个对象的字段名重复,后面对象字 段值会覆盖前面对象的字段值 console.log(person2) //{age: 15, name: "Amy"}
console.log(person5)
</script>
</body>
</html>
ES6数组API方法、声明对象简写、声明属性简写、对象拓展运算符
最新推荐文章于 2023-10-23 15:54:54 发布