In the previous blog, I have introduced strings and arrays in JavaScript in detail. If you haven’t read it, [ JavaScript Data Types Detailed Explanation (String, Array) ] Oh, now let’s take a look at objects (Object) and ES6 new Added Set and Map
1. Object
The JavaScript object is an unordered collection data type, which consists of several key-value pairs, and the object can contain attributes and various methods
/* 对象的书写格式：
var 对象名 = {
属性名1:属性值1,
属性名2:属性值2,
属性名3:属性值3
方法名1:function(){
方法体
}
方法名2:function(){
方法体
}
} */
var xiaoHong = {
name: "小红",
age: 21,
phoneNumber: 12345678910,
school: "清华大学",
//直接在对象体内部定义函数
getName: function () {
return this.name;
}
};
1.1. Properties
1. Acquiring attributes and assigning values
//获取 xiaoHong 的年龄并修改
console.log("xiaoHong 的年龄是：" + xiaoHong.age);
xiaoHong.age = 22;
console.log("xiaoHong 的年龄是：" + xiaoHong.age);
//当然如果存在方法，我们也可以直接使用，注意方法是带 () 的
console.log("xiaoHong 的中文名字是" + xiaoHong.getName());
Console output:
2. Dynamically add attributes
//JavaScript 的对象是动态类型（不用管是什么），我们可以直接给不存在的属性赋值
console.log("xiaoHong 的爸爸是：" + xiaoHong.father)
//使用动态添加的方式给 xiaoHong 添加了 father 属性
xiaoHong.father = "Mike";
console.log(xiaoHong);
Console output:
3. Dynamically delete attributes
//同样，有动态增添，就有动态删除，格式：delete 对象名.属性名
// 动态删除 xiaoHong 的 school 属性
delete xiaoHong.school;
console.log(xiaoHong);
Console output:
5. Determine whether a property or method is in the object (including inherited properties and methods): in
console.log("name" in xiaoHong); //输出 true（存在属性）
console.log("mother" in xiaoHong); //输出 false（不存在属性）
console.log("toString" in xiaoHong); //输出 true（继承）
6. Determine whether a property or method is in the object (excluding inherited properties and methods): hasOwnProperty()
console.log(xiaoHong.hasOwnProperty("father")); //输出 false（不存在属性）
console.log(xiaoHong.hasOwnProperty("toString")); //输出 false（不存在属性）
1.2. Method
A function written into an object is called a method
var person = {
age: 21,
getAge: function () {
console.log("person 的 age = " + this.age);
}
};
person.getAge(); //输出 person 的 age = 21
Note that the keyword this points to the object where the attribute is located!
Sometimes our custom objects need to use external functions, but the external functions need to use the properties in the object body. What should we do at this time? We can use the apply method!
var person = {
age: 21,
//使用外部的函数，注意不用带括号
personGetAge: getAge
};
//注意这个方法内部使用了 this 关键字，但是方法体内实际上并没有 age，所以我们需要改变 this 的指向，让它与调用的对象绑定
function getAge() {
console.log("person 的 age = " + this.age);
}
//我们使用 apply 将函数中的 this 指向 person
getAge.apply(person, []);
console.log(person.personGetAge);//输出 person 的 age = 21
2. Map and Set
There are not many collection elements in JavaScript, and Map and Set are also collections only available in ES6. As for why Map and Set were introduced, in fact, you have not found that the key of an object in JavaScript can only be a string. For example, name: "Zhang San" is correct, but 1: "Zhang San" is wrong, so in order to make the key can be Using the number type, ES6 introduced Map and Set
2.1、Map
Map is similar to dict (dictionary) in Python, and also similar to hashMap in Java. It uses key-value pairs to store elements. Each element has a unique key, which can quickly find elements
var map = new Map([[1, "Mike"], [2, "Lucy"], [3, "Jock"]]);
console.log(map.get(3)); //获取 map 中键值为 3 的元素值 Jock
console.log(map.get(4)); //获取 map 中键值为 4 的元素值 undifined
map.set(4, "Lily"); //添加键值为 4 的元素
console.log(map);
Console output:
It should be noted that if an element corresponding to the key value already exists when adding an element, the new element will overwrite the old element!
2.2、Set
Set is an unordered list and does not allow duplicate elements, similar to hashSet in Java
var set = new Set([3, 2, 1, 1, 2, 1, 1]);
console.log(set);
//使用 add(元素值) 方法添加不重复的元素
console.log(set.add(3)); //添加失败，因为 set 中已经有 3 这个元素
console.log(set.add(4)); //添加成功
//使用 has(元素值) 方法判断是否在 Set 中存在对应元素，常常用来插入元素之前判断
console.log("判断是否有元素 3：" + set.has(3)); //判断 set 中是否含有 3
console.log("判断是否有元素 5：" + set.has(5)); //判断 set 中是否含有 5
//使用 delete(元素值) 方法删除元素
console.log("删除元素 1：" + set.delete(1)); //删除存在的元素 1，返回 true
console.log("删除元素 5：" + set.delete(5)); //删除不存在的元素 5，返回 false
Console output:
2.3、iterable
When traversing an array (Array), we can use subscripts to traverse sequentially, but for Map and Set, they cannot use subscripts, so the iterable type was introduced in ES6. Note that it is not an iterator, it is an iterator, iterable It is a type , and the collection (Array, Map, Set) with iterable type can use the for of loop to traverse the elements in the group
/* 【for of 语句格式】：
for (variable of iterable) {
//要执行的代码块
} */
//实例
var map = new Map([[1, "Mike"], [2, "Lucy"], [3, "Jock"]]);
//Set 会自动删除重复元素，不要忘了
var set = new Set([3, 2, 1, 1, 2, 1, 1]);
for (let i of map) {
console.log(i);
}
for (let j of set) {
console.log(j);
}
//个人建议能使用 for of 就不要使用 for in！
Console output:
Let’s talk about objects and Set and Map two collection objects. I probably won’t write a blog about other data types in JavaScript.