01 JS对象中key的类型
02 创建对象的方法
03 对象的常见操作
3.1 访问对象的属性
<!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>var person = {name: "kobe",age: 30,height: 1.98}console.log(person.age)console.log(person.height)</script>
</body>
</html>
3.2 修改对象的属性
<!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>var person = {name: "kobe",age: 30,height: 1.98}person.age = 25console.log(person.age)</script>
</body>
</html>
3.3 给对象中添加属性
<!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>var person = {name: "kobe",age: 30,}person.height = 1.98console.log(person.height)</script>
</body>
</html>
该属性存在就修改,不存在就添加上去
3.4 删除对象中的属性
<!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>var person = {name: "kobe",age: 30,}delete person.ageconsole.log(person.age)</script>
</body>
</html>
04 对象的方括号使用
主要是因为key是一个字符串的原因
05 对象的遍历
5.1 for循环示例
<!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>var info = {name: "kobe",age: 30,height: 1.98}var infokeys = Object.keys(info)for (var i = 0; i < infokeys.length; i++) {console.log(infokeys[i])}</script>
</body>
</html>
5.2 for ... in ...
<!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>var info = {name: "kobe",age: 30,height: 1.98}for (var key in info) {console.log(info[key])}</script>
</body>
</html>
06 内存分配初步理解图
07 js中一些现象的理解
7.1 现象1: 2个对象的比较
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script>var obj1 = {}var obj2 = {}console.log(obj1 === obj2)</script>
</body>
</html>
因为在js中只要是对象就一定会在堆内存中创建一个新的对象，就意味着它们在堆内存中会有2个不同的地址，所以它们肯定是不等的
7.2 现象2: 引用赋值
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script>var info = {name: "kobe",friend: {name: "james"}}var friend = info.friendfriend.name = "john"console.log(info.friend.name)</script>
</body>
</html>
08 创建一系列对象的方式
8.1 第1种方式: 字面量的方式
这种方式虽然可以创建,但是可以发现它们是非常类似,只有属性的值不一样,这样写就会写大量的重复代码
8.2 第2种方式: 函数的方式
8.3 第3种方式: 通过js提供的方式[ES5]
new一个对象时,js帮我们做的事情如下
![[Leetcode]经典算法](https://img2024.cnblogs.com/blog/1533409/202407/1533409-20240707143909389-488349685.png)
![[CISCN2019 华北赛区 Day2 Web1]Hack World](https://img2024.cnblogs.com/blog/3405761/202407/3405761-20240707142821338-1813361823.png)
![[CISCN2019 华东南赛区]Double Secret](https://img2024.cnblogs.com/blog/3405761/202407/3405761-20240707141434347-1552185618.png)
![[CISCN2019 华东南赛区]Web11](https://img2024.cnblogs.com/blog/3405761/202407/3405761-20240707141315907-1058684114.png)
![[CISCN 2019 初赛]Love Math](https://img2024.cnblogs.com/blog/3405761/202407/3405761-20240707140704592-333746264.png)