JavaScript自学Day5-对象和内置对象

TSyyds
109 阅读6分钟

日期：2023-03-31 学习目标：知道对象数据类型的特征，能够利用数组对象渲染页面

对象

什么是对象

对象（object），是JavaScript中的一种数据类型，由属性和方法两部分构成。

对象（object）可以理解为一种无序的数据集合（数组是有序的数据集合），多用来描述某个事物

例：

let obj = {
	name: '小王',
	age: 28,
	gender: '男'
}

对象的使用

对象的声明语法：

let 对象名 = {
	属性名：属性值，
	方法名：函数
}

其中，{} 为对象字面量，其中存放对象的属性和方法

对象的属性和访问

对象的字面量中，数据描述性的信息称为属性，如人的姓名、身高、年龄、性别等，一般是名词性的。

注意：

  1. 属性都是成对出现的（名/值对），包括属性名和值，它们之间使用英文 : 分隔
  2. 多个属性之间使用英文 , 分隔
  3. 属性就是依附在对象上的变量
  4. 属性名可以使用 "" 或 ''，一般情况下省略，除非名称遇到特殊符号如空格、中横线（-）等

例：

    // 通过对象描述一个人的数据信息
    // person 是一个对象，它包含了一个属性 name
    // 属性都是成对出现的，属性名 和 值，它们之间使用英文 : 分隔
    let person = {
      name: '小明', // 描述人的姓名
      age: 18, // 描述人的年龄
      stature: 185, // 描述人的身高
      gender: '男', // 描述人的性别
    }

声明对象，并添加了若干属性后，可以使用 . 或 [] 获得对象中属性对应的值，称之为属性访问。

    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

对象的增删改查：

// 声明对象
let person = {
	uname: '小王',
	age: 18,
	gender: '男',
	hobby: '篮球'
}

// 1. 查    访问对象的属性
console.log(person.uname)     //对象名.属性名
console.log(person['uname'])  //对象名['属性名']

// 2. 改    相当于给对象的属性重新赋值
person.age = 26               //对象名.属性名 = 新值
console.log(person.age)       //结果为 26

// 3. 增    给对象一个新属性并赋值
person.address = '中国大陆'    //对象名.新属性 = 新值
// console.log(person)     

// 4. 删（了解） 
delete person.hobby           //delete 对象名.属性名

注意： 访问对象时，对于多词属性或者含有-符号等属性，.操作不能使用。 此时可以采取： 对象[‘属性’]方式（单引号和双引号均可）

let person = {
	name: '小王',
	age: 18,
	gender: '男',
	hobby: '篮球',
	'person-stature':181
}
console.log(person['person-stature'])

对象[‘属性’] 方式，可以用于其他正常属性 []语法里面的值如果不添加引号，会默认当成变量解析

扩展：也可以动态为对象添加方法，动态添加与直接定义是一样的，只是语法上更灵活。

// 声明一个空的对象（没有任何属性）
let user = {}
// 动态追加属性
user.name = '小明'
user['age'] = 18

// 动态添加与直接定义是一样的，只是语法上更灵活

对象的方法和调用

对象字面量中的数据行为性的信息称为方法，一般是动词性的，其本质是函数。

  1. 方法是由方法名和函数两部分构成，它们之间使用:分隔
  2. 多个属性之间使用英文 , 分隔
  3. 方法是依附在对象中的函数
  4. 方法名可以使用 "" 或 ''，一般情况下省略，除非名称遇到特殊符号如空格、中横线等

例：

// 方法是依附在对象上的函数
let person = {
	name: '刘德华',
	age: 18,
	// 方法是由方法名和函数两部分构成，它们之间使用 : 分隔
	sing: function () {
		console.log('小兔子乖乖，把门开开...')
	},
	run: function () {
		console.log('我跑的非常快...')
	}
}

声明对象，并添加了若干方法后，可以使用 . 或 [] 调用对象中函数，称之为方法调用。

// 方法是依附在对象上的函数
let person = {
	name: '刘德华',
	age: 18,
	// 方法是由方法名和函数两部分构成，它们之间使用 : 分隔
	sing: function () {
		console.log('小兔子乖乖，把门开开...')
	},
	'person-run': function () {
		console.log('我跑的非常快...')
	}
}
person.sing()
person['person-run']()

扩展：也可以动态为对象添加方法，动态添加与直接定义是一样的，只是语法上更灵活。

// 声明一个空的对象（没有任何属性，也没有任何方法）
let user = {}
// 动态追加属性
user.name = '小明'
user.['age'] = 18

// 动态添加方法
user.move = function () {
  console.log('移动一点距离...')
}

注：无论是属性或是方法，同一个对象中出现名称一样的，后面的会覆盖前面的。

null 也是 JavaScript 中数据类型的一种，通常只用它来表示不存在的对象。使用 typeof 检测类型它的类型时，结果为 object

遍历对象

for遍历对象遇到的问题：

  1. 对象没有像数组一样的length属性,所以无法确定长度
  2. 对象里面是无序的键值对，没有规律，不像数组里面有规律的下标 遍历对象使用的方法：for in

使用for in遍历数组：【不推荐】

let arr = ['小明', 18, '男', '河南省']
for (let k in arr) {
  console.log(k)  // k为数组索引号  但其为字符串型
  console.log(arr[k])  // arr[k]
}

上例遍历结果如图：

遍历数组.jpg

使用for in遍历对象：

let person = {
	name: '小明',
	age: 18,
	gender: '男',
	hometown: '河南省'
}
for(let k in person){
	console.log(k)
	console.log(person[k])
}

上例遍历结果如图：

遍历对象.jpg

注意：

  1. for in语法中的 k 是一个变量, 在循环的过程中依次代表对象的属性名
  2. 由于 k 是变量, 所以必须使用 [ ] 语法解析
  3. k 是获得对象的属性名， 对象名[k] 是获得 属性值

k 为属性名 字符串型 带引号 obj.'uname' k === 'uname' obj[k] 获得属性值 obj['uname'] obj[k]

案例——遍历数组中的对象：

let students = [
 { name: '小明', age: 18, gender: '男', hometown: '河北省' },
 { name: '小红', age: 19, gender: '女', hometown: '河南省' },
 { name: '小刚', age: 17, gender: '男', hometown: '山西省' },
 { name: '小丽', age: 18, gender: '女', hometown: '山东省' }
]
for (let i = 0; i < students.length; i++) {
	for (let k in students[i]) {
		console.log((students[i])[k])
	}
}

内置对象

内置对象是JavaScript内部提供的对象，包含各种属性和方法给开发者调用

像是console、document都是JavaScript的内置对象，而像是console.log()则是调用了console中的log()方法

内置对象——Math

Math对象是JavaScript提供的一个“数学”对象，它提供了一些数学常数属性和数学函数方法

Math对象的属性：

属性名属性值
Math.PI表示一个圆的周长与直径的比例，Math.PI≈3.14159
Math.E表示自然对数的底数，Math.E≈2.718

Math对象的方法

方法名作用
Math.random生成 0 到 1 间的随机数
Math.abs求绝对值
Math.round四合五入取整
Math.floor对一个数向下取整
Math.ceil对一个数向上取整
Math.max得到一组数字的最大值；如果无参，得到-Infinity
Math.min得到一组数字的最小值；如果无参，得到Infinity
Math.pow求一个数字的幂次方
Math.sqrt求一个数的算术平方根
// 0 ~ 1 之间的随机数, 包含 0 不包含 1
Math.random()

// 求绝对值
Math.abs(-5)  //5

// 向上取整，舍弃小数部分，整数部分加1
Math.ceil(3.4)  //4

// 向下取整，舍弃小数部分，整数部分不变
Math.floor(4.68)  //4

// 四舍五入取整
Math.round(5.46539)  //5
Math.round(4.849)  //5

// 求最大值
Math.max(10, 21, 7, 24, 13)  //24

// 求最小值
Math.min(24, 18, 6, 19, 21)  //6

// 求幂次方
Math.pow(4, 2) // 求 4 的 2 次方
Math.pow(2, 3) // 求 2 的 3 次方

// 求算术平方根
Math.sqrt(16)  //4
avatar
文章
阅读
粉丝