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 = 25
console.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.98
console.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.age
console.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.friend
friend.name = "john"
console.log(info.friend.name)
</script>
</body>
</html>
08 创建一系列对象的方式
8.1 第1种方式: 字面量的方式
这种方式虽然可以创建,但是可以发现它们是非常类似,只有属性的值不一样,这样写就会写大量的重复代码
8.2 第2种方式: 函数的方式
8.3 第3种方式: 通过js提供的方式[ES5]
new一个对象时,js帮我们做的事情如下
