javascript - 对象

120 阅读4分钟

对象


  • 什么是对象

    - 对象是JS中的一种数据格式, 数据类型为: 引用数据类型 或者叫 (复杂数据类型)

  • 如何向变量中 存储一个 叫做 对象的数据呢?

    • 语法1: var 变量名 = { 键值对 } (字面量形式创建对象)
      • 键值对 -> key: value 如果对象内部有多个 键值对, 那么需要使用 逗号 间隔
    • 语法2: var 变量名 = new Object ({a: 10}) (内置构造函数方式创建对象)
      • 这里注意 O是大写的,小括号里面套花括号
var obj = {
    a: 100,
    b: 200,
    c: 300
}
console.log(obj)

    //举例:在这个对象中, a 为 key, 100 为对应 value
    //另外一种叫法: a 为 键, 100 为 对应的 值
    //还有一种叫法: a 为 属性名, 100 为 对应的 属性值

创建对象

  • 字面量的形式 (使用频率比较高)

    • 语法: var obj = {键值对}
  • 内置构造函数的创建

    • 语法1: var obj1 = new Object() // 创建空对象
    • 语法2: var obj1 = new Object({a: 1, b: 2}) // 创建一个具有属性或者说具有键值对的 对象
    • 注意: new Object 的 O 是大写的, 不是小写

JS 中创建对象的方式有哪些?

  • 目前暂时是 两种

      1. 字面量的方式
      1. 内置构造函数的方式
  // 1. 字面量的方式
        var obj = {
            b: 1,
            e: true,
            d: 'abc',
            q: undefined,
            w: null,
            r: function () {
                console.log('我是 obj 对象 内 r 这个属性 的 属性值, 我是一个函数')
            }
        }
         console.log(obj)

        // 2. 内置构造函数的方式
        var obj1 = new Object({
            a: 666,
            q: 'qwer',
            w: ture,
            e: undefined
        })
        console.log(obj1)

对象的操作(增删改查)

换句话说, 就是对内部的属性的操作

  • 分为两种方式

      1. 点语法
      1. 中括号语法(数组语法)
    • 一般来说, 大部分场景使用点语法更简单, 但是有一些特殊场景只能使用 中括号语法
var obj = {
    a: 100,
    b: 'qwer',
    c: 666
}
console.log(obj)  //这里输出的是这个对象
// 1: 点语法的查询: 
    console.log(obj.a);  //这里拿到了属性a对应的属性值100
// 2:点语法的新增: 
    obj.d = 888
    console.log(obj)  //这里输出的obj就为新增后的对象
// 3:点语法的删除:
    delete obj.a  //这里要借助一个关键词 delete
    console.log(obj)  //这里输出的obj就为删除后的对象
// 4:点语法的修改:  
    obj.b = 'wy'
    console.log(obj)  //这里输出的obj就为修改后的对象
    
----------------------------------------------------------
// 1: 中括号的查询:
    console.log(obj['a'])
// 2:中括号的新增:
    obj['w'] = 'asd'
    console.log(obj)
// 3: 中括号的删除:
    delete.obj['a']
    console.log(obj)
// 4: 中括号的修改: 
    obj['a'] = 666
    console.log(obj)

一般大部分情况下, 点语法与中括号语法, 作用相同, 怎么选择都可以

  • 特殊情况下我们需要使用中括号语法

      1. 对象的属性名, 有纯数字或者特殊符号, 这个时候, 就只能使用中括号语法
      1. 如果涉及变量相关的时候, 也需要使用中括号
//特殊情况1:对象的属性名, 有纯数字或者特殊符号
var obj = {
     100: '我是数字100的属性值',
     '!': '我是特殊符号!的属性值',
     '@': '我是特殊符号@的属性值'
}
    console.log(obj['!']);
    
//这种情况下不能使用点语法,可以使用中括号语法进行操作
console.log['100'];
console.log['!'];
console.log['@']


//特殊情况2:变量有关
var obj = {
    a: 10,
    b: 20,
    c: 30
}
var num = 'c'
console.log(obj.num)  //输出错误
//因为对象的点语法,会将点后面的字符当成一个字符串去使用,不会当作变量
//上边这个会把num当成一个字符串去对象中查找,看有没有一个叫做num的属性名,发现没有,打印undefined

console.log(obj.[num]) //正确
//中括号语法,内部书写的字符如果不加引号,会当成变量使用,所以找到实际的值之后,num这个变量对应的值为'c'
//所以书写obj[num]相当于书写obj['c'],所以会去对象中找一个叫做c 的属性名,找到对应的属性值打印
//这里注意: 如果加了引号,会当作字符串
  • 对象关于 key 的要求 或者说 对于属性名的要求 或者说 对于 键值对的键 的要求

    • 推荐使用符合变量命名规则与规范的名字
    • 对象的 key 也可以使用 纯数字 来当作键名(属性名/key)
    • 可以使用任何特殊符号 (但是需要使用引号包裹)

for...in 循环遍历对象

  • for...in: 一个循环语句

    • 对象: 一种数据格式
    • 遍历: 一般我们会说 '遍历对象' / '遍历数组'
    • '遍历对象' 想办法拿到对象内部所有的 属性名与属性值
    • 语法: for (var i in 要遍历的对象) { 循环要执行的代码 }
var obj = {
      a: 100,
      w: 'wy',
      u: undefined,
      b: true,
      n: null
}
for(var k in obj){
    console.log(k);  //这里的k是   key/键/属性名
    console.log(obj.k);  //这里因为对象里面找不到k,所以会打印undefined,
    console.log(obj[k]);  //因为这里的 k 是一个变量,所以只能使用中括号语法,变量不加引号