js对象基础-CSDN博客

本文链接：https://blog.csdn.net/Derlii/article/details/131999862

1. 对象

1.1 对象是什么

定义：在面向对象编程中，万物皆对象！对象是一种具体的事物。如：明星不是对象，但是周星驰是一个对象，对象一定是一个具体的事物！ 在JavaScript中，对象是一组无序的相关属性和方法的集合，所有的事物都是对象，例如：字符串、数值、数组、函数等。

2.2 对象的构成

1. 属性

属性：是指事物的特征，在对象中用属性来表示（常用名词）

2. 方法

方法：是指事物的行为，在对象中用方法来表示（常用动词

<script>
   var iphone = {         //对象
    price:9999,           //price：属性 9999：属性值
   sendTEL : function() {    //方法
        console.log("可以打电话");
    },
   }
   console.log(iphone.price);
   console.log(iphone.sendTEL())
</script>

输出为：

2. 对象的创建及使用

2.1创建对象的三种方式

1..利用字面量创建对象

对象字面量{}（花括号），里面包含了对象的属性和方法

<body>
    <p id="demo"></p>
</body>
    
<script>
    // 创建对象：
    var person = {firstName:"Bill", lastName:"Gates", age:62, eyeColor:"blue"};
    
    // 显示对象中的数据：
    document.getElementById("demo").innerHTML =
    person.firstName + " 已经 " + person.age + " 岁了。"; 
</script>

结果为：

总结：

创建对象

用字面量{ }创建对象，里面的属性或者方法采用的是：键（key）:值（value） (键值对)的方式
多个属性或者方法之间是，(用逗号)隔开
方法冒号后面跟的是一个匿名函数
2、使用对象

（1）调用对象的属性，使用对象名.属性名的方式，可以理解为，对象的属性
（2）调用对象的属性，也可使用对象名[‘属性名’]的方式，注意加引号
调用对象的方法：对象名.方法名() ，千万别忘了加小括号

3、变量、属性、函数、方法的总结
变量：单独声明赋值、单独存在
属性：对象里面的变量称为属性、不需要声明，用来描述该对象的特征
函数：单独存在的、通过函数名() 的方式就可以调用
方法：对象里面的函数称为方法、方法不需要声明、使用对象.方法名() 的方式就可以调用，方法用来描述该对象的行为和功能
变量和函数都需要声明，属性和方法不需要声明就可直接使用

2. 利用new Object创建对象

<body>
    <p id="demo"></p>
</body>
    
<script>
 var person = new Object(); //创建一个空对象
    person.firstName = "Bill";
    person.lastName = "Gates";
    person.age = 50;
    person.eyeColor = "blue"; 
    //显示对象中的数据:
    document.getElementById("demo").innerHTML =
    person.firstName + " is " + person.age + " years old.";
</script>

结果为：

在这里使用new Object() 创建对象，使用的是 =(等号)赋值的方法来添加对象的属性和方法

3.利用构造函数创建对象

创建的对象属性和方法都相同，如果需要创建很多个，一个一个创建效率就会很低。但是，我们可以利用一个函数去重复创建对象，这个函数称为构造函数。构造函数中封装的不是普通代码，而是对象。
构造函数：是一种特殊的函数，主要用来初始化对象，即为对象成员变量赋初始值，它总与new运算符一起使用，我们可以把对象中一些公共的属性和方法抽取出来封装到这个函数里面

<body>
    <p id="demo"></p>
</body>
    
<script>
// Person 对象的构造器函数
function Person(first, last, age, eye) {
  this.firstName = first;
  this.lastName = last;
  this.age = age;
  this.eyeColor = eye;
}
// 创建 Person 对象
var myFriend = new Person("Bill", "Gates", 62, "blue");
// 显示年龄
document.getElementById("demo").innerHTML =
"My friend is " + myFriend.age + "."; 
</script>

结果为：

总结：

构造函数和对象的区别：

构造函数是把对象相同的属性(公共部分)封装在一起，泛指的某一大类，如：明星/汽车图纸
他类似于java里面的类(class)

对象：特指的一个具体事物，如：刘德华/一辆真实的汽车

2、new关键字执行构造函数创建对象的过程

在内存中创建一个新的空对象
让this指向这个新对象
执行构造函数里面的代码，给这个对象添加属性和方法
返回这个新对象（所以构造函数里面不需要return）

3. js如何获取对象的key和value

3,1获取key值

获取对象所有key的方法，需要使用 Object.keys() 方法,Object.keys()方返回一个数组，这个数组包含obj对象中的所有key。

其中obj就是你写的对象，

<script>
var a ={
    A:123,
    B:456,
    C:789
}
console.log(Object.keys(a));
</script>

输出：

3.2 获取value值

获取对象所有value的方法，需要使用 Object.values() 方法,Object.value()方返回一个数组，这个数组包含obj对象中的所有value。

<script>
var a ={
    A:123,
    B:456,
    C:789
}
console.log(Object.values(a));
</script>

输出：

3.3 同时获取key值和value值

for in 循环遍历对象

<script>
var obj = { age:20, name:'rose', gender:'女' }
for ( var key in obj ) {
    console.log ( key, obj[key] )
}
</script>

输出为：