js 中的变量和对象

2022-07-26  本文已影响0人  5cc9c8608284

变量和对象

原始类型:number,string,boolean,null,undefined,symbol,bigInt
引用类型:object,function对象

在变量中存放对象

1.声明一个对象

var a='test';
//声明一个用户对象
var user={
      name:'zhangsan',
      age:18,
      sex:'male'
}

2.通过变量,读取对象中的某个属性:变量名.属性名
比如我们想要获取user对象的name属性,可以这样写:

var user={
      name:'lisi'
}
console.log(user.name);

当读取的属性不存在时,会返回undefined

var user={
      name:'lisi'
}
console.log(user.name);//lisi
console.log(user.age);//undefined

当读取属性的对象不存在时(即当对象为undefined或者null时),程序会报错
如下所示:

1.png
当赋值的属性不存在时,会添加属性
2.png
3.删除属性
delete 变量名.属性名

案例:

  let user={
              name:'lisi',
              age:18,
              sex:'male',
              girlFrined:{
                  name:'lili',
                  age:18,
                  sex:'female'
              }
          }
          let user1={
                      name:'wangwu',
                      age:18,
                      sex:'male',
                      girlFrined:user.girlFrined
          }
          console.log(user.girlFrined===user1.girlFrined)
          //删除user1的girlFrined属性
          // delete user1.girlFrined
          // console.log(user1) //girlFrined属性直接不会出现在user1对象中
          //或者也可以把girlFrined属性的值设置为undefined
          user1.girlFrined=undefined
          console.log(user1)//此时girlFrined属性依然存在,但值为undefined

4.属性表达式
给属性赋值,或读取属性时,可以使用下面的格式操作

对象变量['属性名']

举个栗子:

    let user={
            name:'lili',
            sex:'female'
        }
        // 用属性表达式读取用户的性别属性
        // console.log(user.sex)
        console.log(user['sex'])
        // 或者将对象的属性名保存到一个变量中来读取对应的值
        let prop='name'
        console.log(user[prop])

程序打印结果如下所示:


3.png
   const 对象={
           name:'lisi',
           爱好:'学习',
           '?':'hahahha',
           0:'abc     //相当于: '0':'abc'
       }
     console.log(对象.爱好)//学习
     console.log(对象['?'])//hahahha
     console.log(对象[0])//abc 这里需要注意,宿主环境会自动将数字转换为字符串

但是不推荐这样做
这里有一道面试题,有兴趣的话可以做一下:

var obj={
    
}
obj[0]='123';
obj['0']=234
console.log(obj[0],obj['0']);

属性的名字只能是字符串,如果你书写的是数字,会自动转换为字符串

全局对象

js大部分的宿主环境,都会提供一个特殊对象,该对象可以直接在js代码中访问,该对象叫做全局对象
在浏览器环境中全局对象为window,表示整个窗口
全局对象中的所有属性,可以直接使用,不需要加上全局对象名,当然你也可以加上
比如我们常用的输出函数;console.log(),他其实也是window对象的一个属性,即window.console.log(),我们可以把window省掉而直接调用console.log()
可以通过打印来查看console的更多信息,如下所示:

console.log(window.console);

打印结果如下:

console.png
开发者定义的所有变量,实际上会成为window对象的属性
var age=18;
console.log(window.age);//18
4.png

如果变量没有被赋值,则该变量不会覆盖window对象的同名属性
来看下面的例子:

        var console='abc';
        // console.log(window);//demo.html:12 Uncaught TypeError: console.log is not a function
        alert(window.console);//abc
5.png
当我们定义了一个变量,但是没有给变量赋值,如果window对象上的某个属性和我们定义的变量名字一样了,相当于没有定义这个变量,直接打印变量,访问的是window对象上的属性
如下代码所示:
        var console;//这里声明了一个变量console,但是没有给它赋值,因此不会覆盖window对象上的console属性
        console.log(window.console);
        console.log(console);//这里访问的还是window对象的console属性

这里有一个特殊的属性:

        var name;
        console.log(name);//name是一个比较特殊的属性,window对象上有一个name的、属性,并且它的值为一个空字符串,所以我们以后定义变量的时候尽量不要用name来命名,防止和window上的name发生冲突

但是一旦给变量赋值了,不管赋的值是啥:

    // var alert;//定义了没有赋值
    // console.log(alert);//ƒ alert() { [native code] }
    
    var alert=undefined;//赋值为undefined,这里只要有赋值,变量就会把window对象的同名属性给覆盖掉
    console.log(alert);//undefined

但是如果给name赋值为undefined,则又会有不一样的效果:

    var name=undefined;
    console.log(name,typeof name);//undefined string,name变成了字符串undefined
    console.log(window);

查看控制台的打印结果name属性变成了字符串'undefined':

name.png
这是因为name属性比较特殊,你赋值的任何内容都会被转换为字符串
来看下面的案例:
name案例1:
    let obj={
        name:'lisi'
    }
    var name=obj;
    console.log(name,typeof name);//undefined string,name变成了字符串undefined
    console.log(window);

name案例2:

  var name=null;
  console.log(window);

这两个案例的打印结果如下:


name1.png

可以看到不管我们给name属性赋什么类型的值,最后都会被转换为字符串类型

上一篇 下一篇

猜你喜欢

热点阅读