JavaScript中的对象

一,对象简介

对象（Object）：JavaScript里的一种数据类型（引用类型），也是用于存储数据的

好处：可以用来详细的描述某个事物，是用键值对形式存储语义更明了

特点：对象数据是无序的，数组有序的

 1.对象属性

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

1. 属性都是成 对出现的，包括属性名和值，它们之间使用英文 : 分隔

2. 多个属性之间使用英文 , 分隔

3. 属性就是依附在对象上的变量（对象外是变量，对象内是属性）

①定义对象属性

<script>

  // 对象也是一种数据类型，保存数据同时可以更直观的描述事物

  // 1. 定义对象属性

  let pig = {
    sex: '女',
    age: 4,
    uname: '佩奇',
    weight: 12.6

 }

</script>

②访问对象属性

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

<script>

  // 对象也是一种数据类型，保存数据同时可以更直观的描述事物

 // 1. 定义对象属性

  let pig = {
    sex: '女',
    age: 4,
    uname: '佩奇',
    weight: 12.6

 }
  // 2. 访问对象属性 对象.属性

  console.log(pig.age)  // 4

  console.log(pig.weight)  // 12.6

</script>

2.对象方法

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

1. 方法是由方法名和函数两部分构成，它们之间使用 : 分隔

2. 多个属性之间使用英文 , 分隔

3. 方法是依附在对象中的函数（对象外是函数，对象内是方法）

①定义对象方法

// let fn = function() {}
// 对象方法

// 1. 定义对象方法

let pig = {
  uname: '佩奇',
  sing: function () {
    console.log('唱歌')
 },
  dance: function () {
    console.log('跳舞')
 }
}

console.log(pig)

②调用对象方法

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

// let fn = function() {}
// 对象方法

// 1. 定义对象方法

let pig = {
  uname: '佩奇',
  sing: function () {
    console.log('唱歌')
 },
  dance: function () {
    console.log('跳舞')
 },
  sum: function (x, y) {  // 2

    // console.log(x + y)

    return x + y
}
}

console.log(pig)

// 2. 调用对象方法

pig.sing() // 唱歌

pig.dance()  // 跳舞

// 3. 方法可以传递参数也可以有返回值，跟函数使用基本类似

let re = pig.sum(1, 2) // 1 实参

console.log(re)

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

二,操作对象

 对象本质是无序的数据集合, 操作对象数据无非就是 增 删 改 查

}

// 1. 查： 对象.属性 对象.方法

<script>

  // 操作对象：对数据 查、增、改、删

  let pig = {
    uname: '佩奇',
    sing: function () {
      console.log('唱歌')
   }

console.log(pig.uname)  // 得到属性值

pig.sing()

// 2. 增：对象.新属性 = 新值   对象.新方法 = function(){}

pig.age = 4

pig.dance = function () {
  console.log('跳舞')
}

console.log(pig)

// 3. 改：对象.属性 = 新值 对象.方法 = 新匿名函数

pig.uname = '小猪佩奇'

pig.sing = function () {
  console.log('哼哼哼！！')
}

console.log(pig)

// 4. 删： 了解，因为我们很少对对象里面的数据做删除操作 delete

delete pig.age

delete pig.dance
console.log(pig)

</script>

1,查找属性的另外写法

对于多词属性比如中横线分割的属性，点操作就不能用了

我们可以采取： 

对象['属性'] 方式， 单引号和双引号都阔以，当然也可以用于其他正常属性

<script>

  // 查询属性的另外写法 对象['属性'] 这个属性必须加引号

  let pig = {
    'pig-name': '佩奇',
    age: 4

 }

// console.log(pig.pig - name) // NaN

console.log(pig['pig-name']) // 佩奇

console.log(pig['age']) // 4   === pig.age 

</script>

总结：多词属性或者需要解析变量的时候使用 [] 语法，其余的直接使用点语法

2,遍历对象

for 遍历对象的问题：

      对象没有长度length，而且是无序的

所以我们要利用 for in 遍历对象

语法:

for (let 变量 in 对象) {
  console.log(变量) // 属性名

  console.log(对象[变量]) // 属性值

}

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

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

3. 一定记住： k 是获得对象的属性名， 对象名[k] 是获得 属性值

4. 一般不用这种方式遍历数组、主要是用来遍历对象

<script>

  // 遍历对象

  let pig = {
    sex: '女',
    age: 4,
    uname: '佩奇',
    weight: 12.6,
 }

// for (let key in pig) {
//   console.log(key) // key 是属性  
//   console.log(pig[key]) // 对象[变量] 是值

// }

for (let key in pig) {
  console.log(key)  // key 是属性   对象.属性

  // console.log(pig.key)   // pig.key undefined 因为key是个变量不是属性

  // key 'sex' 'age'   对象[key] 对象['sex'] 对象['age']

  console.log(pig[key])
}

// 注意：数组遍历用传统for， for in 主要用来遍历对象

let arr = ['red', 'green', 'pink']

for (let k in arr) {
  console.log(k)// 得到字符串类型的索引号

}

</script>

三,内置对象

内置对象：JavaScript内部提供的对象，包含各种属性和方法给开发者调用 回想一下我们曾经使用过的 console.log ， console 其实就是 JavaScript 中内置的对象，该对象中存 在一个方法叫 log ，然后调用 log 这个方法，即 console.log()

除了 console 对象外，JavaScritp 还有其它的内置的对象

1.Math

Math 是 JavaScript 中内置的对象，称为数学对象，这个对象下即包含了属性，也包含了许多的方法。

<script>

  // 内置对象Math 

  // 1. PI 属性 圆周率

  console.log(Math.PI)

// 2. max 方法 找最大值

console.log(Math.max(8, 4, 2)) // 8
// 3. min 方法 找最小值

console.log(Math.min(8, 4, 2)) // 2
// 4. abs 方法 取绝对值 

console.log(Math.abs(-1))  // 1
// 5. ceil 方法 向上取整   ceil 天花板   往大了取

console.log(Math.ceil(1.1)) // 2

console.log(Math.ceil(1.5)) // 2

console.log(Math.ceil(1.8)) // 2

console.log(Math.ceil(-1.1)) // -1

console.log(Math.ceil(-1.5)) // -1

console.log(Math.ceil(-1.8)) // -1
// 6. floor 方法 向下取整 floor 地板 往小了取

console.log(Math.floor(1.1)) // 1

console.log(Math.floor(1.5)) // 1

console.log(Math.floor(1.8)) // 1

console.log(Math.floor(-1.1)) // -2

console.log(Math.floor(-1.5)) // -2

console.log(Math.floor(-1.8)) // -2
// 7. round 方法 四舍五入取整 

console.log(Math.round(1.1)) // 1

console.log(Math.round(1.5)) // 2

console.log(Math.round(1.8)) // 2
console.log(Math.round(-1.1)) // -1

console.log(Math.round(-1.8)) // -2

console.log(Math.round(-1.5)) // -1

</script>

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

2.随机数 random

lMath.random() 随机数， 返回一个0 - 1之间，并且包括0不包括1的随机小数 [0, 1）

如何生成0-10的随机整数呢？

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

如何生成5-15的随机整数？

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

如何生成N-M之间的随机整数

Math.floor(Math.random() * (M - N + 1)) + N
Math.floor(Math.random() * (差值 + 1)) + 最小值

总结

JavaScript中的对象是一种复合数据类型，用于存储多个键值对。对象可以包含属性和方法，可以通过点号或方括号访问属性和方法。

总的来说，JavaScript中的对象是非常灵活和强大的数据类型，可以用于创建复杂的数据结构和模拟现实世界的实体。对象的属性和方法可以动态添加、修改和删除，同时可以通过原型链实现继承和多态。