（day 13）JavaScript学习笔记（对象1）

概述

        这是我的学习笔记，记录了JavaScript的学习过程。在写博客的时候我会尽量详尽的记录每个知识点。如果你完全没接触过JavaScript，那么这一系列的学习笔记可能会对你有所帮助。

        今天学习对象，主要是创建对象、对象属性、省略key、遍历对象属性、删除对象属性、构造函数等。

1.创建对象

        对象是拥有属性和方法的数据集合，它们以“key: value”对的形式出现，表示相关的无序数据。这些属性可以包含基本值、对象或函数，而方法则是对象上执行特定任务的函数。

        在JavaScript中对象的创建方式有多种，最直观的是用字面值来创建，也就是对象的初始化器，它的基本语法结构是：

对象名 = {key1: “value1”，key2: “value2”，……}

        下面是JavaScript用字面值创建对象的代码示例：

var stu = {
  name: "小红",
  age: 18,
  id: 20240001,
  nativePlace: "天津市",
  attendClass: function () {
    console.log(name + "上课");
  }
};

        从上面代码中我们可以看到，对象的键值对的值可以是字符串、数字、还可以是函数。从数据结构上看JavaScript中对象对象与Python中的字典类似，但是也有不同的地方，字典的键值对中的键需要加引号，Python字典中的值可以是函数，但是很少这样用。JavaScript中对象对象与Python中的字典也就看上取差不多，在其他方面都不相同，Python中字典的相关操作可详见本人之前的文章：

Python中字典的相关操作

         在JavaScript中创建对象还可以new object来创建，如下代码：

//用new object
var stu2 = new Object(); //先创建一个空对象
stu2.name = "小蓝";
stu2.age = 17;
stu2.id = 20210002;
stu2.nativePlace = "河北";
stu2.attendClass = function () {
  console.log("小蓝红上课");
};

        还有其他的方式创建对象，后面章节里再介绍。

2.对象属性

        对象里的键值对都是对象的属性，它跟变量一样，可以是任何值，比如数字、数组、字符串、对象、函数等等，如果属性的值是函数，又叫做方法。

        访问对象的属性值有两种方法，一种打点的方式，一种是方括号的形式，如下代码演示：

console.log(stu.name); //输出：小红
console.log(stu["name"]); //注意方括号中是字符串，输出：小红

        用如下代码可以更改属性的值：

//更改对象属性的值
stu.name = "大红"; //更改stu对象中属性name的值
console.log(stu.name); //输出：大红
stu["nativePlace"] = "北京市"; //更改stu对象中属性nativePlace的值
console.log(stu.nativePlace); //输出：北京市

         可以给对象添加新的属性，但是不能访问没有的属性，如下代码示例：

//给对象添加新的属性
stu.scoreChinese = 95; // 给对象stu添加scoreChinese属性并赋值为95
stu["scoreMath"] = 99; // 给对象stu添加scoreMath属性并赋值为99
console.log(stu.scoreChinese, stu.scoreMath); //输出：95 99

console.log(stu2.scoreChinese);//对象stu2中没有scoreChinese属性，输出：undefined

        注意：对象属性的key是不用加引号的，但是如果key中间有横杆，就必须加引号，并且访问的时候也只能用方括号的形式，如下代码示意：

//对象属性的key中有特殊字符，比如中划线时候是必须要加引号的，否则报错
var stu3 = {
  name: "小白",
  "birth-date": "2005-03-01",
};
console.log(stu3["birth-date"]);//访问时只能用方括号

         所以我们平时在写代码的时候尽量避免这种写法，命名的时候用驼峰命名法，如下:

var stu3 = {
  name: "小白",
  birthDate: "2005-03-01",
};
console.log(stu3.birthDate);

3.省略key

        用字面值定义对象的时候，如果对象属性的值是个变量，并且变量名与key相同，那么可以省略key，如下代码演示：

//以下是不省略key的写法
var name = "小黑";
var stu4 = {
  name: name,
};
console.log(stu4.name); //输出：小黑
//以下是省略key的写法
var name = "小黑";
var stu4 = {
  name,
};
console.log(stu4.name); //输出：小黑

        如果对象的属性值是函数，也可以省略key，把key的名字改成函数的名字，如下代码演示：

//属性值是函数，不省略key的写法
var stu7 = {
  attendClass: function () {
    console.log("小红上课");
  },
};
console.log(stu7.attendClass());
//属性值是函数，不省略key的写法
var stu8 = {
  attendClass() {
    console.log("小红上课");
  },
};
console.log(stu8.attendClass());

4.遍历对象属性

        遍历对象属性有两种方法， 第一种是用object.keys方法，如下代码演示：

var stu9 = {
  name: "小红",
  age: 18,
  id: 20240001,
  nativePlace: "天津市",
  attendClass() {
    console.log("小红上课");
  },
};
//用object.keys和object.values
console.log(Object.keys(stu9)); //输出：(5) ['name', 'age', 'id', 'nativePlace', 'attendClass']
console.log(Object.values(stu9));//输出：(5) ['小红', 18, 20240001, '天津市', ƒ]

         第二种方法是用for in 循环获取所有的key和vlue，如下代码演示：

//用for in循环获取所有的key
for (key in stu9) {
  console.log(key);
}

        运行结果如下：

name
age
id
nativePlace
attendClass

//用for in循环获取所有的vlue
for (key in stu9) {
  console.log(stu9[key]);
}

         运行结果如下：

小红
18
20240001
天津市
ƒ attendClass() {
    console.log("小红上课");
  }

 5.删除对象属性

        删除对象属性可以用delete关键字，如下代码演示：

//5.删除对象属性
var stu10 = {
  name: "小红",
  age: 18,
  id: 20240001,
  nativePlace: "天津市",
  attendClass() {
    console.log("小红上课");
  },
};

delete stu10.id;
console.log(stu10);
//运行结果：{name: '小红', age: 18, nativePlace: '天津市', attendClass: ƒ}

6.构造函数

        使用构造函数是另一个创建对象的方式，与上面介绍的两种创建对象的方式不同的是，使用构造函数可以预先定义好对象有哪些默认的属性，可以用new关键字来创建实例。如下代码演示：

//构造函数的名字一般首字母大写
function Student(name, id) {
  this.name = name;
  this.id = id;
}

//创建实例
var stu11 = new Student("小鹏", "202400007");
console.log(stu11); //输出：Student {name: '小鹏', id: '202400007'}

var stu12 = new Student("小白", "202400008");
console.log(stu12); //输出：Student {name: '小白', id: '202400008'}

 以上便是今天的学习内容，如果对你有所帮助，请点个赞再走吧。