知道对象数据类型的特征,能够利用数组对象渲染页面
- 理解什么是对象,掌握定义对象的语法
- 掌握数学对象的使用
# 对象
对象是 JavaScript 数据类型的一种,之前已经学习了数值类型、字符串类型、布尔类型、undefined。对象数据类型可以被理解成是一种数据集合。它由属性和方法两部分构成。
# 语法
声明一个对象类型的变量与之前声明一个数值或字符串类型的变量没有本质上的区别。
| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <title>JavaScript 基础 - 对象语法</title> |
| </head> |
| <body> |
| |
| <script> |
| |
| let str = 'hello world!' |
| |
| |
| let num = 199 |
| |
| |
| |
| let user = {} |
| </script> |
| </body> |
| </html> |
# 属性和访问
数据描述性的信息称为属性,如人的姓名、身高、年龄、性别等,一般是名词性的。
- 属性都是成 对出现的,包括属性名和值,它们之间使用英文
:
分隔
- 多个属性之间使用英文
,
分隔
- 属性就是依附在对象上的变量
- 属性名可以使用
""
或 ''
,一般情况下省略,除非名称遇到特殊符号如空格、中横线等
| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <title>JavaScript 基础 - 对象语法</title> |
| </head> |
| <body> |
| |
| <script> |
| |
| |
| |
| let person = { |
| name: '小明', |
| age: 18, |
| stature: 185, |
| gender: '男', |
| } |
| </script> |
| </body> |
| </html> |
声明对象,并添加了若干属性后,可以使用 .
或 []
获得对象中属性对应的值,我称之为属性访问。
| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <title>JavaScript 基础 - 对象语法</title> |
| </head> |
| <body> |
| |
| <script> |
| |
| |
| |
| let person = { |
| name: '小明', |
| age: 18, |
| stature: 185, |
| gender: '男', |
| }; |
| |
| |
| console.log(person.name) |
| |
| console.log(person.gender) |
| |
| console.log(person['stature']) |
| |
| console.log(person.stature) |
| </script> |
| </body> |
| </html> |
扩展:也可以动态为对象添加属性,动态添加与直接定义是一样的,只是语法上更灵活。
| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <title>JavaScript 基础 - 对象语法</title> |
| </head> |
| <body> |
| |
| <script> |
| |
| let user = {} |
| |
| user.name = '小明' |
| user['age'] = 18 |
| |
| |
| </script> |
| </body> |
| </html> |
# 方法和调用
数据行为性的信息称为方法,如跑步、唱歌等,一般是动词性的,其本质是函数。
- 方法是由方法名和函数两部分构成,它们之间使用:分隔
- 多个属性之间使用英文
,
分隔
- 方法是依附在对象中的函数
- 方法名可以使用
""
或 ''
,一般情况下省略,除非名称遇到特殊符号如空格、中横线等
| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <title>JavaScript 基础 - 对象方法</title> |
| </head> |
| <body> |
| |
| <script> |
| |
| let person = { |
| name: '小红', |
| age: 18, |
| |
| singing: function () { |
| console.log('两只老虎,两只老虎,跑的快,跑的快...') |
| }, |
| run: function () { |
| console.log('我跑的非常快...') |
| } |
| } |
| </script> |
| </body> |
| </html> |
声明对象,并添加了若干方法后,可以使用 .
或 []
调用对象中函数,我称之为方法调用。
| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <title>JavaScript 基础 - 对象方法</title> |
| </head> |
| <body> |
| |
| <script> |
| |
| let person = { |
| name: '小红', |
| age: 18, |
| |
| singing: function () { |
| console.log('两只老虎,两只老虎,跑的快,跑的快...') |
| }, |
| run: function () { |
| console.log('我跑的非常快...') |
| } |
| } |
| |
| |
| person.singing() |
| |
| person.run() |
| |
| </script> |
| </body> |
| </html> |
扩展:也可以动态为对象添加方法,动态添加与直接定义是一样的,只是语法上更灵活。
| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <title>JavaScript 基础 - 对象方法</title> |
| </head> |
| <body> |
| |
| <script> |
| |
| let user = {} |
| |
| user.name = '小明' |
| user.['age'] = 18 |
| |
| |
| user.move = function () { |
| console.log('移动一点距离...') |
| } |
| |
| </script> |
| </body> |
| </html> |
注:无论是属性或是方法,同一个对象中出现名称一样的,后面的会覆盖前面的。
# null
null 也是 JavaScript 中数据类型的一种,通常只用它来表示不存在的对象。使用 typeof 检测类型它的类型时,结果为 object
。
# 遍历对象
| let obj = { |
| uname: 'pink' |
| } |
| for(let k in obj) { |
| |
| |
| } |
for in 不提倡遍历数组 因为 k 是 字符串
# 内置对象
回想一下我们曾经使用过的 console.log
, console
其实就是 JavaScript 中内置的对象,该对象中存在一个方法叫 log
,然后调用 log
这个方法,即 console.log()
。
除了 console
对象外,JavaScritp 还有其它的内置的对象
# Math
Math
是 JavaScript 中内置的对象,称为数学对象,这个对象下即包含了属性,也包含了许多的方法。
# 属性
# 方法
- Math.random,生成 0 到 1 间的随机数
| |
| Math.round(5.46539) |
| Math.round(4.849) |
| |
| Math.max(10, 21, 7, 24, 13) |
| |
| Math.min(24, 18, 6, 19, 21) |
| |
| Math.pow(4, 2) |
| Math.pow(2, 3) |
数学对象提供了比较多的方法,这里不要求强记,通过演示数学对象的使用,加深对对象的理解。