文章和代码已经归档至【Github仓库:https://github.com/timerring/front-end-tutorial 】或者公众号【AIShareLab】回复 javascript 也可获取。
对象
对象是 JavaScript 数据类型的一种,之前已经学习了数值类型、字符串类型、布尔类型、undefined。对象数据类型可以被理解成是一种数据集合。它由属性和方法两部分构成。
语法
声明一个对象类型的变量与之前声明一个数值或字符串类型的变量没有本质上的区别。
// 声明字符串类型变量
let str = 'hello world!'
// 声明数值类型变量
let num = 199
// 声明对象类型变量,使用一对花括号
// user 便是一个对象了,目前它是一个空对象
// {} 是对象字面量
let user = {
}
属性和访问
数据描述性的信息称为属性,如人的姓名、身高、年龄、性别等,一般是名词性的。
- 属性都是成对出现的,包括属性名和值,它们之间使用英文
:
分隔 - 多个属性之间使用英文
,
分隔 - 属性就是依附在对象上的变量
- 属性名可以使用
""
或''
,一般情况下省略,除非名称遇到特殊符号如空格、中横线等// 通过对象描述一个人的数据信息 // person 是一个对象,它包含了一个属性 name // 属性都是成对出现的,属性名 和 值,它们之间使用英文 : 分隔 let person = { name: '小明', // 描述人的姓名 age: 18, // 描述人的年龄 stature: 185, // 描述人的身高 gender: '男', // 描述人的性别 }
声明对象,并添加了若干属性后,可以使用 .
或 []
获得对象中属性对应的值,我称之为属性访问。
<script>
// 通过对象描述一个人的数据信息
// person 是一个对象,它包含了一个属性 name
// 属性都是成对出现的,属性名 和 值,它们之间使用英文 : 分隔
let person = {
name: '小明', // 描述人的姓名
age: 18, // 描述人的年龄
stature: 185, // 描述人的身高
gender: '男', // 描述人的性别
};
// 访问人的名字
console.log(person.name) // 结果为 小明
// 访问人性别
console.log(person.gender) // 结果为 男
// 访问人的身高
console.log(person['stature']) // 结果为 185
// 或者
console.log(person.stature) // 结果同为 185
</script>
扩展:也可以动态为对象添加属性,动态添加与直接定义是一样的,只是语法上更灵活。
// 声明一个空的对象(没有任何属性)
let user = {
}
// 动态追加属性
user.name = '小明'
user['age'] = 18
// 动态添加与直接定义是一样的,只是语法上更灵活
方法和调用
数据行为性的信息称为方法,其本质是函数。
- 方法是由方法名和函数两部分构成,它们之间使用 : 分隔
- 多个属性之间使用英文
,
分隔 - 方法是依附在对象中的函数
- 方法名可以使用
""
或''
,一般情况下省略,除非名称遇到特殊符号如空格、中横线等
<script>
// 方法是依附在对象上的函数
let person = {
name: '小红',
age: 18,
// 方法是由方法名和函数两部分构成,它们之间使用 : 分隔
singing: function () {
console.log('两只老虎,两只老虎,跑的快,跑的快...')
},
run: function () {
console.log('我跑的非常快...')
}
}
</script>
声明对象,并添加了若干方法后,可以使用 .
或 []
调用对象中函数,称之为方法调用。
<script>
// 方法是依附在对象上的函数
let person = {
name: '小红',
age: 18,
// 方法是由方法名和函数两部分构成,它们之间使用 : 分隔
singing: function () {
console.log('两只老虎,两只老虎,跑的快,跑的快...')
},
run: function () {
console.log('我跑的非常快...')
}
}
// 调用对象中 singing 方法
person.singing()
// 调用对象中的 run 方法
person.run()
</script>
扩展:也可以动态为对象添加方法,动态添加与直接定义是一样的,只是语法上更灵活。
<script>
// 声明一个空的对象(没有任何属性,也没有任何方法)
let user = {
}
// 动态追加属性
user.name = '小明'
user.['age'] = 18
// 动态添加方法
user.move = function () {
console.log('移动一点距离...')
}
</script>
注:无论是属性或是方法,同一个对象中出现名称一样的,后面的会覆盖前面的。
多词属性或-等属性
对于多词属性或则 - 等属性,点操作就不能用了。
我们可以采取: 对象[‘属性’]
方式,单引号和双引号都可以。
let person = {
'user-name' : 'timerring',
}
console.log(person.user-name) // NaN
console.log(person['user-name']) // timerring
null
null 也是 JavaScript 中数据类型的一种,通常只用它来表示不存在的对象。使用 typeof 检测类型它的类型时,结果为 object
。
遍历对象
对象没有像数组一样的 length 属性, 所以无法确定长度,对象里面是无序的键值对(前后关系不会影响), 没有规律,不像数组里面有规律的下标。
<script>
// for in 我们不推荐遍历数组
let arr = ['pink', 'red', 'blue']
for (let k in arr) {
console.log(k) // 数组的下标 索引号 但是是字符串类型的 '0'
console.log(arr[k]) // arr[k]
}
// 1. 遍历对象 for in
let obj = {
uname: 'pink老师',
age: 18,
gender: '男'
}
// 2. 遍历对象
for (let k in obj) {
console.log(k) // 属性名 'uname' 'age'
// console.log(obj.k)
// 翻译过来就是:console.log(obj.'uname') 实际不能这么用,可以采用另一种方法:
// console.log(obj['uname']) 'uname' === k
console.log(obj[k]) // 输出属性值 obj[k]
}
</script>
⚠for in 不提倡遍历数组因为 k 是字符串类型的。
记住:k
是获得对象的属性名,对象名[k]
是获得属性值
内置对象
回想一下我们曾经使用过的 console.log
,console
其实就是 JavaScript 中内置的对象,该对象中存在一个方法叫 log
,然后调用 log
这个方法,即 console.log()
。
除了 console
对象外,JavaScritp 还有其它的内置的对象
Math
Math
是 JavaScript 中内置的对象,称为数学对象,这个对象下即包含了属性,也包含了许多的方法。
属性
- Math.PI,获取圆周率
// 圆周率 console.log(Math.PI);
方法
Math.random()
: 0 ~ 1 之间的随机数, 包含 0 不包含 1[0, 1)
Math.ceil(3.4)
: 舍弃小数部分,整数部分加1(向上取整)Math.floor(4.68)
: 舍弃小数部分,整数部分不变Math.round(4.849)
: 四舍五入取整Math.max(10, 21, 7, 24, 13)
: 在一组数中找出最大的Math.min(24, 18, 6, 19, 21)
: 在一组数中找出最小的Math.pow(4, 2)
: 求 4 的 2 次方Math.sqrt(16)
: 求平方根