js对象

2.7k 词
js对象

对象#

保存网站用户信息,比如姓名,年龄,电话号码等,用之前的数据类型来保存不方便

因此引入对象(Object)这一数据类型,可以详细地描述某个事物

可以理解是一种无序的数据集合,不同于数组(有序的数据集合)

用来描述某个事物,例如描述一个人:姓名、年龄、性别(属性)、吃饭、跑步(功能)

对象声明#

实际开发中,多使用花括号{},{}是字面量

                
JavaScript
let 对象名 = {} let 对象名 = new Object() // 声明了一个person对象 let person={}

对象方法及属性#

属性:信息或特征,如手机:尺寸、颜色、重量,属性成对出现,包含属性名和值

方法:功能或行为,如手机:打电话、发短信、玩游戏

                
JavaScript
let 对象名 = {   属性名:属性值,   方法名:函数 } let obj = {   'uname':'德华',   age:18,   gender:'沃尔玛购物袋(bushi)' }

在JavaScript中,如果一个对象的属性名和变量名相同,并且你想将这个变量作为属性值传递给该对象,你可以使用ES6的简写语法。

pname和cname都是变量,而params是一个对象。当你将pname和cname作为属性值传递给params对象时,你可以使用简写语法,只写一次变量名即可。

                    
JavaScript
const pname = '重庆' const cname = '重庆市' let params = { pname, cname } // 这相当于以下写法 let params = { pname:pname, cname:cname }

简写语法只适用于当 属性名和变量名相同 时。它可以提高代码的可读性,并减少不必要的重复。

对象使用#

#

对象添加新数据

                    
JavaScript
对象名.新属性名 = 新值

#

删除对象中属性

                    
JavaScript
delete 对象名.属性名

#

属性重新赋值

                    
JavaScript
对象名.属性名 = 值

#

查询对象

                    
JavaScript
对象名.属性名 // 使用中括号查找,属性名需要加引号 对象名['属性名']

对象中的方法#

数据行为性的信息称为方法,如跑步、唱歌等,一般是动词性的,其本质是函数

方法名可以使用""或'',一般情况下省略,除非遇到特殊符号如空格、中横线-等

                
JavaScript
let person = { name:'andy', sayHi:function(txt){ document.write('hi~'+txt) } }

方法调用:对象名.方法名(),可传参

person.sayHi('boy~')

遍历对象#

for遍历对象的问题:

  • 对象没有像数组一样的length属性,所以无法确定长度
  • 对象里面是无序的键值对,没有规律,不像数组里面有规律的下标
                
JavaScript
for (let k in obj){ console.log(k) // 打印属性名 console.log(obj[k]) // 打印属性值

for in语法中的k是一个变量,在循环的过程中依次代表对象的属性名

由于k是变量,所以必须使用[]语法解析

k:获得对象的属性名,对象名[k]:获得属性值

案例-遍历数组对象#

需求1:把下面数据中的对象打印到控制台

需求2:将数据渲染为表格

                
JavaScript
// 定义一个存储了若干学生信息的数组 let students=[ {name:'小明',age:18,gender:'男',hometown:'河北省'}, {name:'小红',age:19,gender:'女',hometown:'河南省'}, {name:'小刚',age:17,gender:'女',hometown:'上东省'}, {name:'andy',age:16,gender:'男',hometown:'四川省'} ]
学生表
序号 姓名 年龄 性别 家乡

内置对象#

js内部提供的对象,包含各种属性和方法

eg:document.write()、console.log()

Math#

Math对象是js提供的一个"数学"对象

提供了一系列做数学运算的方法

方法 功能 方法 功能
random 生成0~1之间的随机数(包含0不包含1) ceil 向上取整
floor 向下取整 max 最大数
min 最小数 pow 幂运算
abs 绝对值 round 四舍五入整数
                    
JavaScript
// 向上取整 console.log(Math.ceil(1.1)) // 2 console.log(Math.ceil(1.5)) // 2 // 最大值 console.log(Math.max(1,2,3,4)) // 4