前端 | JS | JS对象最简单入门

目录

一:创建一个对象

二：对象介绍

三：对象属性操作

3.1 获取属性（ .语法和 []语法）面试重点

3.2设置属性

3.3删除属性

对象的基本使用

一：创建一个对象

    var student={ 
        name:"李白" , //student有一个name属性，值为"李白"
        grade:"初一" ,
        //a、student有一个say属性，值为一个函数
        //b、student有一个say方法
        say:function(){
            console.log("你好");
        },
        run:function(speed){
            console.log("正在以"+speed+"米/秒的速度奔跑");
        }
    }

二：对象是键值对的集合：对象是由属性和方法构成的 (ps：也有说法为：对象里面皆属性，认为方法也是一个属性)

• name是属性 grade是属性
• say是方法 run是方法

三：对象属性操作

3.1 获取属性：

3.1.1第一种方式：.语法

• student.name 获取到name属性的值，为："李白"
• student.say 获取到一个函数

3.1.2第二种方式：[]语法

• student["name"] 等价于student.name
• student["say"] 等价于student.say

3.1.3号外：2种方式的差异：

• .语法更方便，但是坑比较多(有局限性)，比如：
  • .后面不能使用js中的关键字、保留字(class、this、function。。。)
  • .后面不能使用数字

    var obj={};
    obj.this=5; //语法错误
    obj.0=10;   //语法错误

• []使用更广泛
  • o1[变量name]
  • ["class"]、["this"]都可以随意使用 obj["this"]=10
  • [0]、[1]、[2]也可以使用
    • obj[3]=50 = obj["3"]=50
    • 思考：为什么obj[3]=obj["3"]
  • 甚至还可以这样用：["[object Array]"]
    • jquery里面就有这样的实现
  • 也可以这样用：["{abc}"]
    • 给对象添加了{abc}属性

3.2设置属性

• student["gender"]="男" 等价于： student.gender="男"
  • 含义：如果student对象中没有gender属性，就添加一个gender属性，值为"男"

  •  如果student对象中有gender属性，就修改gender属性的值为"男"
    

• 案例1：student.isFemale=true
• 案例2：student["children"]=[1,2,5]
• 案例3：

    student.toShanghai=function(){   
        console.log("正在去往上海的路上")   
    }

3.3删除属性

• delete student["gender"]
• delete student.gender