入门级 js 对象
1. 对象
①. 对象描述
-
对象（object）：JavaScriptt 里的的一种数据类型
-
可以理解为是一种无序的数据集合
-
用来描述某个事物，列如描述一个人
》人有姓名、年龄、性别等信息、还有吃饭睡觉打代码等功能
》 如果用多个变量保存则比较散，用对象比较统一
-
比如描述 班主任 信息：
》 静态特征（姓名，年龄，身高，性别，爱好）=> 可以使用数字，字符串，数组，布尔类型等表示
》 动态行为（篮球，唱，跳。rap）
2. 对象的使用
①. 对象声明语法
<script>
// let 对象名 = {} 如 ： let person = {}
let stu = { }
// 打印一下 这个数据的类型
console.log(typeof stu);
</script>
②.对象有属性和方法组成
- 属性：信息或叫特征（名词）。比如 手机尺寸、颜色、重量等...
- 方法：功能或叫行为（动词）。比如 可以打电话、发信息、放歌
<script>
// let 对象名 = {
// 属性名：属性值,
// 方法名：函数
// }
let stu = {
name: 'jack',
age: 20,
gender: '男',
height: 180,
code: function () {
console.log('我会写代码');
},
}
// 打印一下 这个数据的类型
console.log(typeof stu);
// 打印一下 这个数据
console.log(stu);
</script>
③.属性
- 属性都是成 对出现的，包括属性名和值，它们之间使用英文：分隔
- 多个属性之间使用英文，分隔
- 属性就是依附在对象上的变量（外面是变量，对象内是属性）
- 属性名可以使用 "" 或 ' ' ，一般情况下省略， 除非名称遇到特殊符号如空格，中横线等
<script>
// 描述一个学员
// 对象的成员都是 键值对
// 键：属性名称 方法名称
// 值：属性对应的值，方法的具体的定义
let stu = {
// 键和值使用： 分隔
// 每组键值对使用，分隔
name: 'jack',
age: 20,
gender: '男',
height: 180,
// 下面是行为
code: function () {
console.log('我会写代码');
},
debug: function () {
console.log('我会调bug');
}
}
// 打印一下 这个数据的类型
console.log(typeof stu);
// 打印一下 这个数据
console.log(stu);
</script>
④.属性访问
声明对象，并添加了若干属性后，可以使用. 或[]获得对象中属性对应的值，我们称之为实行访问简单理解就是或的对象里面的属性值。
<script>
let userName = 'color'
let person = {
userName: '海贼王',
color: 'yellow'
}
// 访问它
console.log(person.userName); // 固定用户
console.log(person[userName]);
person['color'];
console.log(person[userName]);// 中括号里 代码没有加字符串 表示一个变量
console.log(person['color']);// 中括号里 代码没有加字符串 表示一个变量
// console.log(person[color]); // color 是一个变量 没有这个变量 报错
console.log(person.sfjjhh); // undefined
</script>
⑤.对象中的方法
数据行为性的信息称为方法，如跑步、唱歌等，一般是动词的，其本质是函数
- 方法是由方法名和函数两部分构成，它们之间使用：分隔
- 多个属性之间使用英文 , 分隔
- 方法是依附在对象中的函数
- 方法名可以用 "" 或 '' ，一般情况下省略，除非名称遇到特殊符号空格、中横线
<script>
let person = {
name : 'andy',
sayHi : function () {
document.write('hi')
// return '来自卖鱼强的问候'
},
}
</script>
⑥. 对象中的方法访问
- 声明对象，并添加了若干方法后，可以使用，调用对象中函数，我称之为方法调用。
- 注意：千万别忘了给方法后面加小括号
<script>
let person = {
name : 'andy',
sayHi : function (msg) {
document.write(msg)
return '来自卖鱼强的问候'
},
}
// document.write(person.sayHi())
// 方法 其实就是一个函数
// 函数 是接收参数
// 函数 有返回值
// 函数的使用 函数()
person.sayHi('大家好 <br>') // 页面上会出现 “你好”
person.sayHi('hello <br>') // 页面上会出现 "hello"
let result = person.sayHi('hello you')// 页面上会出现 "hello you"
console.log('=============')
console.log(result);
</script>
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>
let userName = 'color'
let person = {
userName: '海贼王',
color: 'yellow'
}
// 访问它
console.log(person.userName); // 固定用户
console.log(person[userName]);
person['color'];
console.log(person[userName]);// 中括号里 代码没有加字符串 表示一个变量
console.log(person['color']);// 中括号里 代码没有加字符串 表示一个变量
// console.log(person[color]); // color 是一个变量 没有这个变量 报错
console.log(person.sfjjhh); // undefined
</script>
</body>
</html>
②. 重新赋值
对象.属性 = 值
对象.方法 = function(){}
<script>
let person = {
userName : '程序猿'
}
person.userName = '普通人'
// 增加属性和修改属性都是同样的写法
// 如果该属性对象没有，表示新增
// 如果该属性对象中已经存在，表示修改
// person.userName = '普通人'
console.log(person); // 结果为普通人
// 新增方法也是可以的
// let person = {};
// 新增一个方法 匿名函数 固定写法
person.sayHi = function () {
document.write(`这个是我们新增的 sayHi 方法`)
}
person.sayHi(); // 调用方法
</script>
③. 对象添加新的数据
对象.新属性名 = 新值
<script>
//let person = {
// userName : '程序猿'
// }
// person.userName = '普通人'
// 增加属性和修改属性都是同样的写法
// 如果该属性对象没有，表示新增
// 如果该属性对象中已经存在，表示修改
// person.userName = '普通人'
// console.log(person);
// 新增方法也是可以的
let person = {};
// 新增一个方法 匿名函数 固定写法
person.sayHi = function () {
document.write(`这个是我们新增的 sayHi 方法`)
}
person.sayHi(); // 调用方法
</script>
④. 删除对象中属性
delete 对象名.属性名
<script>
let person = {
userName: '程序猿',
age : '很强'
}
delete (person.age)
console.log(person); // 结果： 程序猿
</script>
⑤. 增加属性
可以动态为对象添加属性，动态添加与直接定义是一样的，只是语法上更灵活
⑥. 新增对象中的方法
- 可以动态为对象添加属性，动态添加与直接定义是一样的，只是语法上更灵活
- 注意：无论是属性或是方法，同一个对象中出现名称一样的，后面的会覆盖前面的。
<script>
person.move = function() {
docment.write('移动一点点')
}
</script>
4. 遍历对象
①.简介
- 对象没有像数组一样的length属性，所以无法确定长度
- 对象里面时无序的键值对，没有规律，不像数组里面有规律的下标
①. 遍历对象
- 一般不用这种方式遍历数组，主要是用来遍历对象
- 一定记住：k 时获得对象的属性名， 对象名[k] 是获得 属性值
<script>
// 创建一个对象
let person = {
age : 18,
name : '男',
height : 180,
};
// 遍历对象
for (let k in person) {
console.log(k);
console.log(person.k); // 找对象中 属性名 “ k ”
console.log(person['k']);// 找对象中 属性名 “ k ”
// k 表示变量 k = "username"
console.log(person[k]);
person["username"] // k 表示变量 k = "username"
console.log(`属性名：${k} 属性值：${person[k]}`);
}
</script>
5. 内置对象
-
js 内部提供的对象，包含各种属性和方法给开发者调用
-
之前有用过
》docment.write()
》 console.log()
①. 内置对象Math
②. 生成任意范围随机数
6.拓展
①.一些术语
②. 基本数据类型和引用数据类型
③. 栈、堆空间分配区别
④. 简单类型的内存分配
⑤. 复杂类型的内容分配
⑥. 代码演示
<script>
let num = 100; // 基本数据类型
let num2 = num;
num2 = 10000;
console.log(num); // 100 互不影响
let person={username:"悟空"};// 引用数据类型
let person2=person; // 引用地址的传递 复制而已 新旧数据 本质是一样的 会收到影响
person2.username="八戒";
console.log(person);// 也是八戒 新旧数据 本质是一样的
</script>
