重新梳理JScript基础知识之对象篇

大家好，欢迎来到IT知识分享网。

1.什么是对象？

对象（object）：是一种数据类型，一种无序的数据集合，用来描述某一事物。

js中的数据类型分为两大类：基本数据类型和引用数据类型

基本数据类型有：数字型、字符串型、布尔型、undefined、null。

引入数据类型有：arr数组、function函数和object对象。

2.对象的使用

1.对象生声明的语法

let 对象名 = {}

// 例如

let person =  {}

2.对象是由属性和方法组成

属性是描述一些信息或者特征。

方法是描述行为或者功能。

let 对象名 = { 属性名: 属性值, 方法名: 函数 }

3.属性

用来描述数据的信息称为属性，一般用名词

 let obj = { uname: '张三', age: 22, gender: '男' }

注意：

• 属性都是都是成对出现，属性名和属性值直接是用英文 : 隔开的
• 多个属性之间是用英文 ，隔开
• 属性就是依附在对象上的变量 在对象外面是变量，对象内是属性

4.属性的访问

对象名.属性  或者

对象名[‘属性’]

5.对象中的方法

数据具有行为性的信息称为方法，实际上就是函数

 let obj = { uname: '张三', sayHi: function () { document.write('Hi') } }

• 方法是由方法名和函数组成 直接用英文 : 隔开
• 多个属性和方法用英文 , 隔开
• 方法也是依附在对象上的函数

6.方法的访问

 let obj = { uname: '张三', sayHi: function () { document.write('Hi') } } obj.sayHi() //对象名.方法名()

小括号一定不能省略

3.操作对象

操作对象和数组是一样的就是增、删、改、查

查询对象：对象名: 属性  或对象名[‘属性值’]    对象名.方法名()

改：对象.属性 = 值   对象.方法 = function() {}

曾：对象名.新属性名 = 新值

查： delete 对象名.属性名

 //新增属性 let obj = { uname: '张三', sayHi: function () { document.write('Hi') } } obj.age = 22 obj.gender = '男' obj['hobby'] = '打篮球' console.log(obj) //新增方法 obj.sing = function () { document.write('song') } obj.sing()

4.遍历对象

 for (let k in obj) { console.log(k) //打印的是属性名 console.log(obj[k]) // 打印的是属性值 }

对象是用for in 的方法遍历 一般不用遍历数组的方法来遍历对象

重点：k 是获取的对象的属性名，对象名[k] 获取的是属性值

不能写成对象名[k] 不然会报错

案例：打印数据并渲染成表格

 <script> 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++) { // console.log(students[i]) //打印的是students 这个数组里面的每一个 对象 的元素 console.log(students[i].name) // 遍历出每一个名字 console.log(students[i].age) // 遍历出每一个年龄 console.log(students[i]['gender']) // 遍历出每一个性别 console.log(students[i]['hometown']) // 遍历出每一个地址 } </script>

5.内置对象

在JavaScript中的内部给我们提供的一些对象 我们可以直接调用

像document.write()和console.log()就是内置对象

• random：生成0-1之间的随机数（包含0不包括1）
• ceil：向上取整
• floor：向下取整
• max：找最大数
• min：找最小数
• pow：幂运算
• abs：绝

生成1-10的随机数

 Math.floor(Math.random() * (10 + 1))

生成5-10的随机数

Math.floor(Math.random() * (5 + 1)) + 5

生成n-m的随机数

Math.floor(Math.random() * (M – N + 1)) + N

案例：

点名: 每次刷新网页运行, 在控制台 随机输出一位同学的名字 [“老赵”, “老李”, “小传”, “小黑”]，如果输出了，则数组中删除这个名字

 <script> // 引入公式 function getRandom(min, max) { min = Math.ceil(min); max = Math.floor(max); return Math.floor(Math.random() * (max - min + 1)) + min; //含最大值，含最小值 } let arr = ["老赵", "老李", "小传", "小黑"] // 生成一个包含0和3的随机数并声明一个变量来接收 索引号最大值 = arr.length - 1 let random = getRandom(0, arr.length - 1) // 通过数组[随机数] 就可以随机点名 // arr[random] console.log(arr[random]) // 通过splice(删除位置,删除个数)来删除被点到的人 arr.splice(random, 1) console.log(arr) </script>