知道对象数据类型的特征,能够利用数组对象渲染页面
对象是 JavaScript 数据类型的一种,之前已经学习了数值类型、字符串类型、布尔类型、undefined。对象数据类型可以被理解成是一种数据集合。它由属性和方法两部分构成。
声明一个对象类型的变量与之前声明一个数值或字符串类型的变量没有本质上的区别。
x12<html lang="en">3<head>4 <meta charset="UTF-8">5 <title>JavaScript 基础 - 对象语法</title>6</head>7<body>89 <script>10 // 声明字符串类型变量11 let str = 'hello world!'12 13 // 声明数值类型变量14 let num = 1991516 // 声明对象类型变量,使用一对花括号17 // user 便是一个对象了,目前它是一个空对象18 let user = {}19 </script>20</body>21</html>数据描述性的信息称为属性,如人的姓名、身高、年龄、性别等,一般是名词性的。
: 分隔, 分隔"" 或 '',一般情况下省略,除非名称遇到特殊符号如空格、中横线等xxxxxxxxxx2112<html lang="en">3<head>4 <meta charset="UTF-8">5 <title>JavaScript 基础 - 对象语法</title>6</head>7<body>89 <script>10 // 通过对象描述一个人的数据信息11 // person 是一个对象,它包含了一个属性 name12 // 属性都是成对出现的,属性名 和 值,它们之间使用英文 : 分隔13 let person = {14 name: '小明', // 描述人的姓名15 age: 18, // 描述人的年龄16 stature: 185, // 描述人的身高17 gender: '男', // 描述人的性别18 }19 </script>20</body>21</html>声明对象,并添加了若干属性后,可以使用 . 或 [] 获得对象中属性对应的值,我称之为属性访问。
xxxxxxxxxx3012<html lang="en">3<head>4 <meta charset="UTF-8">5 <title>JavaScript 基础 - 对象语法</title>6</head>7<body>89 <script>10 // 通过对象描述一个人的数据信息11 // person 是一个对象,它包含了一个属性 name12 // 属性都是成对出现的,属性名 和 值,它们之间使用英文 : 分隔13 let person = {14 name: '小明', // 描述人的姓名15 age: 18, // 描述人的年龄16 stature: 185, // 描述人的身高17 gender: '男', // 描述人的性别18 };19 20 // 访问人的名字21 console.log(person.name) // 结果为 小明22 // 访问人性别23 console.log(person.gender) // 结果为 男24 // 访问人的身高25 console.log(person['stature']) // 结果为 18526 // 或者27 console.log(person.stature) // 结果同为 18528 </script>29</body>30</html>扩展:也可以动态为对象添加属性,动态添加与直接定义是一样的,只是语法上更灵活。
xxxxxxxxxx1912<html lang="en">3<head>4 <meta charset="UTF-8">5 <title>JavaScript 基础 - 对象语法</title>6</head>7<body>89 <script>10 // 声明一个空的对象(没有任何属性)11 let user = {}12 // 动态追加属性13 user.name = '小明'14 user['age'] = 1815 16 // 动态添加与直接定义是一样的,只是语法上更灵活17 </script>18</body>19</html>数据行为性的信息称为方法,如跑步、唱歌等,一般是动词性的,其本质是函数。
, 分隔"" 或 '',一般情况下省略,除非名称遇到特殊符号如空格、中横线等xxxxxxxxxx2412<html lang="en">3<head>4 <meta charset="UTF-8">5 <title>JavaScript 基础 - 对象方法</title>6</head>7<body>89 <script>10 // 方法是依附在对象上的函数11 let person = {12 name: '小红',13 age: 18,14 // 方法是由方法名和函数两部分构成,它们之间使用 : 分隔15 singing: function () {16 console.log('两只老虎,两只老虎,跑的快,跑的快...')17 },18 run: function () {19 console.log('我跑的非常快...')20 }21 }22 </script>23</body>24</html>声明对象,并添加了若干方法后,可以使用 . 或 [] 调用对象中函数,我称之为方法调用。
xxxxxxxxxx3012<html lang="en">3<head>4 <meta charset="UTF-8">5 <title>JavaScript 基础 - 对象方法</title>6</head>7<body>89 <script>10 // 方法是依附在对象上的函数11 let person = {12 name: '小红',13 age: 18,14 // 方法是由方法名和函数两部分构成,它们之间使用 : 分隔15 singing: function () {16 console.log('两只老虎,两只老虎,跑的快,跑的快...')17 },18 run: function () {19 console.log('我跑的非常快...')20 }21 }22 23 // 调用对象中 singing 方法24 person.singing()25 // 调用对象中的 run 方法26 person.run()2728 </script>29</body>30</html>扩展:也可以动态为对象添加方法,动态添加与直接定义是一样的,只是语法上更灵活。
xxxxxxxxxx2312<html lang="en">3<head>4 <meta charset="UTF-8">5 <title>JavaScript 基础 - 对象方法</title>6</head>7<body>89 <script>10 // 声明一个空的对象(没有任何属性,也没有任何方法)11 let user = {}12 // 动态追加属性13 user.name = '小明'14 user.['age'] = 1815 16 // 动态添加方法17 user.move = function () {18 console.log('移动一点距离...')19 }20 21 </script>22</body>23</html>注:无论是属性或是方法,同一个对象中出现名称一样的,后面的会覆盖前面的。
null 也是 JavaScript 中数据类型的一种,通常只用它来表示不存在的对象。使用 typeof 检测类型它的类型时,结果为 object。
xxxxxxxxxx71let obj = {2 uname: 'pink'3}4for(let k in obj) {5 // k 属性名 字符串 带引号 obj.'uname' k === 'uname'6 // obj[k] 属性值 obj['uname'] obj[k]7}for in 不提倡遍历数组 因为 k 是 字符串
回想一下我们曾经使用过的 console.log,console其实就是 JavaScript 中内置的对象,该对象中存在一个方法叫 log,然后调用 log 这个方法,即 console.log()。
除了 console 对象外,JavaScritp 还有其它的内置的对象
Math 是 JavaScript 中内置的对象,称为数学对象,这个对象下即包含了属性,也包含了许多的方法。
xxxxxxxxxx21// 圆周率2console.log(Math.PI);xxxxxxxxxx21// 0 ~ 1 之间的随机数, 包含 0 不包含 12Math.random()xxxxxxxxxx21// 舍弃小数部分,整数部分加12Math.ceil(3.4)xxxxxxxxxx21// 舍弃小数部分,整数部分不变2Math.floor(4.68)xxxxxxxxxx31// 取整,四舍五入原则2Math.round(5.46539)3Math.round(4.849)xxxxxxxxxx21// 找出最大值2Math.max(10, 21, 7, 24, 13)xxxxxxxxxx21// 找出最小值2Math.min(24, 18, 6, 19, 21)xxxxxxxxxx31// 求某个数的多少次方2Math.pow(4, 2) // 求 4 的 2 次方3Math.pow(2, 3) // 求 2 的 3 次方xxxxxxxxxx21// 求某数的平方根2Math.sqrt(16)数学对象提供了比较多的方法,这里不要求强记,通过演示数学对象的使用,加深对对象的理解。