06简单了解JS对象

113 阅读4分钟

1.什么是对象?

对象是JS中的一种数据格式,对象在JS中的数据类型为:引用数据类型

如何向变量中 存储一个叫做对象的数据呢?
  • 语法:(如果对象内部有多个键值对,那么需要使用 逗号 间隔)
var obj = {key1:value1,key2:value2,...}
var obj = {
   a:100,
   b:200,
   c:300,
   q:666
 }
    console.log(obj)
什么是键值对?

在上面这个对象中,a为 key,100为对应的 value

另一种叫法:a为 键,100为对应的 值

另外一种叫法:a为 属性名,100为对应的 属性值

2.创建对象的方式有哪些?

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

语法: var obj = {键值对}

var obj = {
      a:1,
      b:2,
      c:0,
      q:'abc',
      e:true,
      w:null,
      r:undefined,
      h:function(){
        console.log('我是属性值,我是一个函数')
      }
  }
  console.log(obj)
2.2内置构造函数的创建

语法1:var obj1 = new Object()

语法2:var obj1 = new Object({a:1,b:2}) //创建一个具有属性或者说具有键值对的对象

注意:new Object 的O是大写的,不是小写

var obj1 = new Object({
      a:1,
      e:2
})
console.log(obj1)

3.对象的增删改查

换句话说,就是对内部的属性的操作;分为两种方式:

1:点语法

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

注意:一般情况下点语法与中括号语法,作用相同,怎么选择都可以;特殊情况下我们需要使用中括号语法:

  (1)对象的属性名,有纯数字或者特殊符号,这个时候,就只能使用中括号语法
  
var obj = {
      100:'我的属性名是 纯数字100',
      '!':'我的属性名是 特殊符号!',
      '@':'我的属性名是 特殊符号@'

}
console.log(obj['100'])
console.log(obj[100])
console.log(obj['!'])
console.log(obj['@'])
  (2)如果涉及变量相关的时候,也需要使用中括号
  
var obj = {
      a:1,
      b:2,
      name:'gg'
}
var myName = 'name'
console.log(obj.myName)
/**
     * obj.myName    我们猜想他这个myName是一个变量,所以实际的应该是obj.'name', 所以应该打印obj的name属性
     *              但实际的输出结果是undefined
     * 
     *     原因:
     *         因为对象的点语法,会将点后边的字符当成一个字符串去使用,而不会当成变量
     * 
     *             拿obj.myName举例
     *                   他会将myNmae当成一个字符串去对象中查找,有没有一个叫做myName的属性名
     *                   找完之后 发现对象中没有这个属性名,所以打印的值为undefined
    */
    
console.log(obj[myNmae])  //'gg'
/**
     * 中括号语法,内部书写的字符,如果不加引号,会把它当成变量去使用,所以找到实际的值之后,myName 这个变量对应的值为'name'
     *     所以obj[myName]  相当于写了obj['name']
     *     所以会去对象obj中找一个叫做name的属性名,找到之后打印在页面
    */

3.1:点语法---查询 获取到对象内部某一个属性对应的属性值

var obj = {
      a:1,
      b:'qwer',
      c:true
}
console.log('原始对象:',obj)
console.log(obj.a) // 1
console.log(obj.b) //qwer

3.2:点语法---新增 向对象内部新增一个属性

    obj.q = 'gg001'
    obj.w = '23'
    console.log('最新的对象:',obj) //输出的值为[a:1, b:'qwer', c:true,q:'gg001',w:'23']

3.3点语法---修改 修改对象内部某一个属性对应的属性值

obj.c = false
console.log('修改属性后的对象:',obj)//[a:1, b:'qwer', c:false]

3.4点语法---删除 删除对象内部的某一个属性

delete obj.a
console.log('删除属性后的对象:',obj)//[b:'qwer', c:true]

3.5.中括号语法---查询

console.log(obj['a']) //1
console.log(obj['c']) //true

3.6中括号语法---新增

obj['w'] = 111
console.log('新增后的obj:',obj)//[a:1, b:'qwer', c:true,w:111]

3.7中括号语法---修改

obj['a'] = 111
console.log('修改后的obj:',obj)//[a:111, b:'qwer', c:true]

3.8中括号语法---删除

delete obj['a']
console.log('删除属性后的obj:',obj)//[b:'qwer', c:true]

4. for ...in循环遍历对象

语法:for(var i in 要遍历的对象){循环要执行的代码}

for(var i in obj){
      //需求:打印对象的所有属性值
      // console.log(obj)  //此时打印的是完整的对象,所以不合适
      // console.log(obj.i) //undefined  点语法会将后边的字符当成字符串来使用,而不是当成变量,如果想当变量使用,那么使用中括号语法
      console.log(obj[i]) //该对象的所有属性值
}