认识对象数据类型 - Object

认识对象数据类型 - Object

认识对象数据类型 - Object：

• 是 js 中的一个数据类型, 是一个复杂数据类型
• 是一个 “盒子”, 承载的是 数据
• 是一个无序的数据集合, 也是一个键(key)值(value)对的集合

对象数据类型的创建

1.字面量方式创建对象

创建空对象: var obj = {}

创建带有数据的对象: var obj = { 键值对 }

键值对, 键: 值

可以书写多个, 多个之间使用 逗号(,) 分隔

最后一个键值对后面不需要书写 逗号(,), 可以写但是不推荐

 // 空对象
    var obj = {}
    console.log(obj)

    // 带有数据的对象
    // obj 对象内有一个成员, 键(key) 是 name, 值(value) 是 'Jack'
    var obj = {
      name: 'Jack',
      age: 18,
      gender: '男'
    }
    console.log(obj)

2.置构造函数(类)创建(理解为类)

​ 创建空对象: var obj = new Object()

 // 2. 内置构造函数方式创建对象
    var obj = new Object()
    console.log(obj)

3.对象的基本操作(增删改查)

• ​ 增: 相对内添加成员
• ​ 删: 删除对象内某一个成员
• ​ 改: 修改对象内某一个成员
• ​ 查: 获取对象内某一个成员的值, 根据 key 获取 value

在 JS 内, 对于对象的操作提供了两套语法

1. 点语法

   点语法

   1. 增加

   ​ + 语法: 对象名.键名 = 值

   2. 删除

   ​ + 语法: delete 对象名.键名

   3. 修改

   ​ + 语法: 对象名.键名 = 值

   ​ + 因为对象内 key 不允许重名

   ​ + 当你设置的时候, 原先有就是修改, 原先没有就是增加

   4. 查询

   ​ + 语法: 对象名.键名

   ​ + 在访问的时候, 如果对象内有这个键, 那么直接给出值

   ​ + 如果对象内没有这个键, 那么给出 undefined(暂时)

   	// 准备一个空对象
       // var obj = {}
       // console.log('原始对象 : ', obj)
   
       // 1. 增加
       // 向 obj 这个对象内增加一个叫做 name 的 key, 值存储的是 'Jack'
       // obj.name = 'Jack'
       // obj.age = 18
       // obj.gender = '男'
       // obj.info = { weight: 180, height: 180 }
       // obj.sayHi = function () { console.log('hello world') }
       // console.log('增加之后 : ', obj)
   
       // 2. 删除
       // 删除 obj 对象内一个叫做 age 的成员
       // delete obj.age
       // console.log('删除之后 : ', obj)
   
       // 3. 修改
       // 设置 obj 内一个叫做 gender 的 key, 值存储为 '女'
       // 因为原先就有 gender 这个 key, 所以就是把原先的修改了
       // obj.gender = '女'
       // console.log('修改之后 : ', obj)
   
       // 4. 查
       // console.log(obj.gender)
   

​ 2. 数组关联语法

  /*
      数组关联语法

      1. 增加
        + 语法: 对象名['键名'] = 值
      2. 删除
        + 语法: delete 对象名['键名']
      3. 修改
        + 语法: 对象名['键名'] = 值
        + 原先有就是修改, 原先没有就是增加
      4. 查询
        + 语法: 对象名['键名']
    */

    // 准备一个空对象
    var obj = {}
    console.log('原始对象 : ', obj)

    // 1. 增加
    obj['name'] = 'Rose'
    obj.age = 20
    obj['gender'] = '女'
    console.log('增加之后 : ', obj)

    // 2. 删除
    delete obj['age']
    console.log('删除之后 : ', obj)

    // 3. 修改
    obj['gender'] = '男'
    console.log('修改之后 : ', obj)

    // 4. 查
    console.log(obj['name'])

两种对象操作语法的区别

​ 1. 操作符合变量命名规则和规范的, 使用两种语法无所谓

​ 2. 操作纯数字的 key 或者操作带有特殊符号的 key, 只能使用数组关联语法

​ 3. 当你的 key 涉及变量的时候, 只能使用数组关联语法

 var obj = {
      name: 'Jack',
      n1: 100,
      abc$222: 'hello',
      1: 100,
      2: true,
      'a-c': '随便来',
      '^_^': 'O(∩_∩)O哈哈~'
    }
    console.log(obj)

    var s = 'name'

    // 单纯的访问 obj 内一个叫做 s 的 key 保存的值, 和 s 变量没有任何关系
    console.log(obj.s)
    // 单纯的访问 obj 内一个叫做 s 的 key 保存的值, 和 s 变量没有任何关系
    console.log(obj['s'])
    // 中括号内没有书写 字符串, 而是书写的一个变量
    // 相当于在 访问 s 变量, 把 s 变量的值拿过来放在 [] 内
    // obj[s] === obj['name'] 访问的就是 obj 内一个叫做 name 的 key 保存的值
    console.log(obj[s])

对象的遍历

​ + 不能使用 for 循环进行遍历

​ + 使用 for in 循环进行遍历

​ + 语法:

​ for (var 变量 in 对象) {

​ 重复执行的代码

​ }

​ => 对象内有多少个成员, 该循环执行多少次

​ => 随着循环, 变量就分别是每一个 key

    var obj = {
      name: 'Jack',
      age: 18,
      gender: '男',
      score: 100
    }

    console.log(obj)

    // 开始遍历
    for (var k in obj) {
      // 随着循环, k 分别是 obj 内的每一个 key
      console.log('我执行了', k)
      // 能拿到 对象名, 能随着循环拿到一个变量 k 表示每一个 key
      // 如何访问对象内的每一个成员
      console.log(obj.k) // 都是在准确的访问对象内一个叫做 k 的成员, 和 k 变量没有任何关系
      console.log(obj[k])
    }