1. 对象
<!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>
/*
对象：
- 是js中的一种复合数据类型，相当于是一个容器，可以存储不同类型的数据
*/
let people = {
name: '孙笑川',
age: 33
}
console.log(people)
/*
向对象中添加属性：
对象.属性名 = 属性值
读取对象中的属性：
对象.属性名
*/
people.classNo = 1
console.log('添加属性', people)
console.log('你好，我叫', people.name)
//修改属性
people.name = '药水哥'
console.log(people.name)
//删除属性
delete people.classNo
console.log('删除属性', people)
</script>
</body>
</html>
2. 对象的属性
<!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>
/*
属性名：
- 通常是一个字符串
- 一般情况下属性名不建议取得太特殊，如关键字，特殊符号等等
- 可以使用符号作为属性名
使用symbol添加的属性一般是不希望被外界访问的属性
- 使用 [] 操作属性时，可以使用变量
属性值：
- 对象的属性值可以是任意的数据类型
*/
let people = Object()
people.name = '孙笑川'
people.age = 33
people["classNo"] = 1
console.log(people)
let customSymbol = Symbol()
people[customSymbol] = '使用symbol添加的属性'
console.log('使用符号作为属性名', people)
console.log('Symbol()', people[customSymbol])
let variableName = 'job'
people[variableName] = '主播' //等价于people["job"] = '主播'
console.log(people[variableName]) //主播
console.log('---------------------------')
let animal = Object()
animal.name = '狗子'
animal.age = 1
animal.info = Object()
animal.info.address = '西伯利亚'
console.log(animal)
/*
in 运算符：
- 用来检查对象中是否含有某个属性
- 语法： 属性名 in 对象
- 返回结果为布尔值
*/
console.log('animal对象有name这个属性吗?', 'name' in animal)
</script>
</body>
</html>
3. 对象的字面量
<!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>
/*
对象字面量：
- 可以直接使用{}来创建对象
- 使用{}创建的对象，可以直接向里面添加属性
语法：
{
属性名: 属性值
[属性名]: 属性值
}
*/
let a = Object()
let b = {
name: '孙笑川',
["age"]: 33
}
console.log(a)
console.log(b)
</script>
</body>
</html>
4. 枚举属性
<!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>
/*
枚举属性：将对象中的所有属性全部获取
for in语句：
- 语法：
for (let propName in [obejct]) {
......
}
- 对象有几个属性，for-in的循环体就会执行几次
每执行一次，就会将一个属性名赋值给我们所定义的变量propName(变量名根据具体场景来命名)
- 注：并不是所有属性都额可以枚举，如关键字、符号
*/
let people = {
name: '孙笑川',
age: 33,
address: '四川成都',
[Symbol()]: '符号添加的属性原则上不希望被访问到'
}
for (let propName in people) {
console.log(propName, people[propName])
}
</script>
</body>
</html>
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>
/*
- 原始值属于不可变类型（一旦创建就无法修改）
- 在内存中不会去重复的创建原始值
*/
let a = 1
let b = 2
console.log(a)
console.log(b)
console.log('-----------------------------')
/*
- 对象属于可变类型
- 对象创建完成后，可以继续添加、删除属性
- 注：如果两个变量同时指向同一个对象，通过一个变量修改其中的属性时，另一个变量也会产生影响
*/
let obj = {
name: '孙笑川',
age: 33
}
let p1 = obj
let p2 = obj
console.log(p1)
console.log(p2)
console.log(p1 == p2);
console.log('-----------------------------')
p1.name = '药水哥'
console.log(p1)
console.log(p2)
</script>
</body>
</html>
6. 变量和对象
<!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>
/*
修改对象：
- 修改对象时，如果有其他变量指向该对象，则修改后所有的变量都会受影响
修改变量：
- 只会影响当前的变量
*/
let obj = {
name: '孙笑川',
age: 33
}
let p1 = obj
let p2 = obj
console.log(p1)
console.log(p2)
console.log('-----------------------')
p2 = null //修改变量
console.log(p2)
console.log('-----------------------')
p2 = {}
p2.name = '药水哥' //修改对象
console.log(p2)
/*
在使用变量存储对象时，容易遇到修改变量，而影响变量指向的对象的问题
所以通常情况下，声明存储对象的变量时会使用 const 关键字
注：const 只是禁止变量被重新赋值，而不会影响变量指向的对象中的属性的修改
*/
</script>
</body>
</html>
7. 方法
<!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>
/*
方法：
- 当对象的其中一个属性指向一个函数时，该函数就称为该对象的方法
*/
let obj = {}
obj.name = '孙笑川'
obj.age = 33
obj.hobby = function() {
console.log('抽象艺术直播！')
}
obj.hobby()
</script>
</body>
</html>
评论 (0)