web学习笔记10 - 对象

对象 学习总结
封面画师：唏嘘的星辰 p站ID：13312138

对象

类：具有相同属性和方法的集合
对象:类的实例化，类的具体化，对象可以把一个整体的属性进行集合保存，

var obj = {} // 空对象

var zhangsan = {
  "name": "张三", //属性 属性值也可以称为键值对(key value)
  age: 10,
  eat: function () {
    console.log(this.name + "吃饭")
  }  //方法
}

访问方式

1. 访问方式 对象.属性进行访问

   console.log(zhangsan.name) //对象.属性进行访问
   zhangsan.eat() //对象方法的调用 如果在方法使用this,this是就是该对象
   
   console.log(this) //在script标签打印this，this是window对象
   function f1() {
     console.log(this) // this是window对象
   }
   window.f1()

2. 访问方式

   console.log(zhangsan['name']) //通过[属性名字符串格式]访问
   var f1 = "name"
   console.log(zhangsan[f1]) //动态访问属性
   console.log(zhangsan.name) // 静态访问属性

对象遍历 for…in

for (const key in zhangsan) {
    // hasOwnProperty() 判断对象里面有没有该属性，
    if (zhangsan.hasOwnProperty(key)) {
        // console.log(key) // 对象里面属性
        console.log(zhangsan[key]) //对象属性值
    }
}

如何给对象添加属性

var lisi = {
    name:"李四",
    stuId:"007",
    study:function(){
        console.log("good good study day day up")
    }
}
lisi.age = 10 // 静态方式添加属性
lisi["sex"] = true // 动态方式添加属性
lisi.name = "四李" //修改name属性值
delete lisi.name  // 删除属性
console.log(lisi)

for in & for of

使用for…of 遍历对象

// for in 专门遍历对象
// for of 专门遍历数组
// .keys(lisi) 对象的所有的属性，数组结构
// .values(lisi) 对象的所有的属性值
console.log(Object.values(lisi),"0000000000")
for (const iterator of Object.keys(lisi)) {
    console.log(iterator) //属性
    console.log(lisi[iterator]) // 属性值
}

for…in 遍历数组

var arr1 = [1,2,3]
for(const a in arr1){
    console.log(a) //a就是索引值，把数组理解为属性为0 1 2的对象
    console.log(arr1[a])
}

// for in 专门遍历对象, 也可以遍历数组
// for of 专门遍历数组, 也可以遍历对象