JavaScript 基础五 对象

JavaScript 基础五 对象

  • 1. 对象
  • 2. 对象使用
    • ① 声明语法
    • ② 对象有属性和方法组成
    • ③ 属性
      • 对象属性的增删改查操作
    • ④ 方法
  • 3. 对象遍历
    • 实例
  • 4. 内置对象
    • ① 内置对象
    • ② 内置对象Math
      • 属性
      • 方法

引入:保存网站用户信息,比如姓名、年龄、电话号码,用以前学过的数据类型不方便。

1. 对象

对象 object 是JavaScript里的一种数据类型。
可以理解为一种无序的数据集合,注意数组是有序的数据集合。

let obj = {
	uname: 'pink',
	age: 18,
	gender: '女'
}

对象的特点:
①无序的数据的集合
②可以详细描述某个事物

2. 对象使用

① 声明语法

let 对象名= {}
let 对象名= new Object()

例如 let person= {} 声明了一个person的对象

{}是对象字面量。

对象和null

let obj = {}
typeof obj 是 object
typeof null 是 object
所以也可以 用 let obj  = null 表示这个变量我以后要来存放对象

② 对象有属性和方法组成

属性:信息或特征(名词)。比如手机尺寸、颜色、重量等
方法:功能或行为(动词)。比如手机打电话、发短信、玩游戏等

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

③ 属性

数据描述性的信息称为属性,如人的姓名、身高、年龄、性别等。

  • 属性都是成对出现的,包括属性名和值,它们之间用英文冒号(:)分隔。
  • 多个属性之间用英文逗号分隔。
  • 属性就是依附在对象上的变量(外面是变量,对象内是属性)
  • 属性名可以使用 双引号或者单引号,一般情况下省略,除非名称遇到特殊符号如空格、中横线等。
  • 对象属性没有顺序。

对象属性的增删改查操作

增删改查
JavaScript 基础五 对象_第1张图片
在这里插入图片描述

对象	['属性名']

④ 方法

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

let person = {
	name: '刘德华',
	singSong: function() {
		console.log('冰雨')
	}
	count: function(x, y) {
		console.log(x+y)
	}
}

方法调用对象名.方法名

person.singSong()

类比 document.wirte()

方法增加也可以和属性增加一样,但是我们一般不这么做:

let user = {}
user.name = 'xiaoming'
user.['age'] = 18

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

3. 对象遍历

对象里面是无序的键值对,没有规律,不像数组里面有规律的下标。

for in语法

let obj = {
	name: 'pink',
	age: 18, 
	gender: '女'
}

for(let k in obj) {
	console.log(k) //获得对象属性是 k
	console.log(obj[k]) //获得对象值是 obj[k]
}

这里不可以写 obj.k。如果是obj.name,那么取出的是name这个属性,但是如果写成了obj.k,取的就是 k 这个属性。当然不仅仅是这么简单,还更因为 key 里面存的是 字符串类型,key 是 ‘name’ 而不是 name

也可以用在数组中,但因为索引是字符串型的,很少会拿这种方式遍历数组。

let arr = ['pink', 'green', 'blue']
for(let k in arr) {
	console.log(k) //数组的下标 索引号 ,请注意这里打印出来的是字符串类型
	
}

数组对象: 数组的每一个成员都是对象

let students = [
	{name: '小明', age: 18, gender: '男', hometown: '河北省'} ,
	{name: '小红', age: 19, gender: '女', hometown: '河男省'} ,
	{name: '小刚', age: 17, gender: '男', hometown: '山东省'} ,
	{name: '小丽', age: 18, gender: '女', hometown: '山西省'} 
]

for(int i = 0; i < students.length; i++) {
	console.log(i) //下标索引号
	console.log(students[i]) //每一个对象
	for(let k in students[i]) {
		
	}
}

实例

JavaScript 基础五 对象_第2张图片

静态写法为:

DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Documenttitle>
head>
<style>
  table {
      width: 600px;
      text-align: center;
  }

  table,
  th,
  td {
      border: 1px solid #ccc;
      border-collapse: collapse;
  }

  caption {
      font-size: 18px;
      margin-bottom: 10px;
      font-weight: 700;
  }

  tr {
      height: 40px;
      cursor: pointer;
  }

  table tr:nth-child(1) {
      background-color: #ddd;
  }

  table tr:not(:first-child):hover {
      background-color: #eee;
  }
style>
<body>
  <table>
    <caption>学生列表caption>
    <tr>
      <th>序号th>
      <th>姓名th>
      <th>年龄th>
      <th>性别th>
      <th>家乡th>
    tr>
    <tr>
      <td>1td>
      <td>小明td>
      <td>18td>
      <td>td>
      <td>河北省td>
    tr>
    <tr>
      <td>2td>
      <td>小红td>
      <td>19td>
      <td>td>
      <td>河南省td>
    tr>
    <tr>
      <td>3td>
      <td>小刚td>
      <td>17td>
      <td>td>
      <td>山西省td>
    tr>
    <tr>
      <td>4td>
      <td>小丽td>
      <td>18td>
      <td>td>
      <td>山东省td>
    tr>
  table>
body>
html>

动态渲染写法:
① 数据准备
② 渲染页面

DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Documenttitle>
head>
<style>
  table {
      width: 600px;
      text-align: center;
  }

  table,
  th,
  td {
      border: 1px solid #ccc;
      border-collapse: collapse;
  }

  caption {
      font-size: 18px;
      margin-bottom: 10px;
      font-weight: 700;
  }

  tr {
      height: 40px;
      cursor: pointer;
  }

  table tr:nth-child(1) {
      background-color: #ddd;
  }

  table tr:not(:first-child):hover {
      background-color: #eee;
  }
style>
<body>
  <table>
    <caption>学生列表caption>
    <tr>
      <th>序号th>
      <th>姓名th>
      <th>年龄th>
      <th>性别th>
      <th>家乡th>
    tr>
    <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++) {
        document.write(`
          
            ${i+1}
            ${students[i].name}
            ${students[i].age}
            ${students[i].gender}
            ${students[i].hometown}
          
        `)
      }
      
    script>
  table>
body>
html>

4. 内置对象

① 内置对象

例如 document.write(), console.log()

② 内置对象Math

Math对象是 JS提供的一个“数学”对象
作用:提供了一系列做数学运算的方法

Math对象包含的方法有:
Ø random:生成0-1之间的随机数(包含0不包括1)
Ø ceil:向上取整
Ø floor:向下取整
Ø max:找最大数
Ø min:找最小数
Ø pow:幂运算
Ø abs:绝对值
Ø Math对象在线文档

属性

  • Math.PI,获取圆周率
// 圆周率
console.log(Math.PI);

方法

  • Math.random,生成 0 到 1 间的随机数
// 0 ~ 1 之间的随机数, 包含 0 不包含 1
Math.random()
  • Math.ceil,数字向上取整
    ceil是天花板的意思。
// 舍弃小数部分,整数部分加1
Math.ceil(3.4) // 4
  • Math.floor,数字向下取整
// 舍弃小数部分,整数部分不变
Math.floor(4.68) // 4
  • 注意区别 parseInt()取整函数
    parseInt可以转化字符
parseInt(1.2) // 1
parseInt('12px') // 12
  • Math.round,四舍五入取整
    小数部分等于0.5会舍入到正方向上相邻的整数。
// 取整,四舍五入原则
Math.round(5.46539)
Math.round(4.849)

Math.round(-20.5)
Math.round(-20.51)
  • Math.max,在一组数中找出最大的
// 找出最大值
Math.max(10, 21, 7, 24, 13)
  • Math.min,在一组数中找出最小的
// 找出最小值
Math.min(24, 18, 6, 19, 21)
  • Math.pow,幂方法
// 求某个数的多少次方
Math.pow(4, 2) // 求 4 的 2 次方
Math.pow(2, 3) // 求 2 的 3 次方
  • Math.sqrt,平方根
// 求某数的平方根
Math.sqrt(16)

数学对象提供了比较多的方法,这里不要求强记,通过演示数学对象的使用,加深对对象的理解。

你可能感兴趣的:(JavaScript,javascript)