初识js--对象(五)

146 阅读3分钟

对象

  • 对象是一个复杂数据类型, 也叫做引用数据类型

一、什么是对象

var obj = {
    num: 100,
    str: "hello",
    boo: true,
};
  • 这里的 {} 和函数中的 {} 不一样, 函数内部书写代码, 对象里面是书写数据的
  • 对象就是一个键值对的集合
    • 什么是键值对?
    • 对象 obj 中, num 是键, 100 是值
    • 对象 obj 中, str 是键, 'hello' 是值
    • 对象 obj 中, boo 是键, true 是值
    • 冒号左边的统称为: 键/key/属性名
    • 冒号右边统称为: 值/value/属性值

二、创建对象

1. 对象的创建

1)字面量的方式创建

        var obj1 = {} // 字面量的方式创建
        console.log(obj1)

2)内置的构造函数的方式创建

        var obj2 = new Object()// 内置的构造函数的方式创建
        console.log(obj2)

2、对象的操作 (增删改查)

1)点语法

        var obj = {
            name: '张三',
            id: 'QF001'
        }
        console.log('原本的对象: ', obj)

        // 2.1 增       对象名.新的属性名 = 对应的属性值
        obj.age = 18

        // 2.2 删    delete 对象名.要删除的属性名
        delete obj.id

        // 2.3 改   对象名.要修改属性值的属性名 = 新的属性值
        obj.name = '张三丰'
        
        console.log('操作后的对象: ', obj)

        // 2.4 查   对象名.要查询的属性名       会得到对应的属性值
        console.log(obj.name)

2)中括号语法(数组语法)

        var obj = {
            name: '张三',
            id: 'QF001'
        }
        console.log('原对象: ', obj)

        // 增   对象名['要新增的属性名'] = 对应的属性值
        obj['age'] = 18


        // 删   delete 对象名['要删除的属性名']
        delete obj['id']

        // 改   对象名['要修改的属性名'] = 新的属性值
        obj['name'] = '李四'


        console.log('操作后的对象: ', obj)

        // 查   对象名['要查询的属性名']        会得到对应的属性值
        console.log(obj['name'])

3、两种操作语法的区别

1)

  • 只要正常情况, 对象的属性名符合变量的命名规则与规范的情况下, 使用点语法或者中括号语法没有任何区别;但是在遇到一些特殊的属性名的时候 就要更换了, 比如 说属性名为数字;还有一种情况, 属性名想要使用变量的时候, 也需要使用中括号语法。
        var obj = {
            0: '数字0',
            1: '数字1',
            2: '数字2',
            name: '张三'
        }

        console.log(obj)
        // // console.log(obj.0)   // 语法不允许
        console.log(obj[0])


        console.log(obj.name)
        console.log(obj['name'])

        var myName = 'name'

        console.log(myName) // 'name'

        console.log(obj.myName)//undefined

         console.log(obj['myName'])//undefined
        console.log(obj[myName])//张三
  • 在 JS 中,对象的点语法, 会将. 后边的 这个单词/属性 视为一个普通字符串,而不会当成一个变量;所以现在相当于 去 对象 obj 中 查找一个 属性名为 myName 的键值对,但是对象中并没有, 所以得到了一个 undefined.
  • 要是想当一个变量使用, 必须使用中括号语法, 而且不能加引号,如果加了引号, 那么就是当一个字符串去使用, 结果和上述的点语法相同,只有不加引号, 才会是当一个变量去使用.
  • 正常情况下全都使用点语法;涉及到变量的时候 使用中括号语法.

4、遍历对象

  • 拿到对象中的所有数据
     var obj = {
            name: "老大",
            age: 18,
            id: '8888'
        }

        for (let key in obj) {
            console.log(key)//属性名
            console.log(obj[key])//属性值
        }