在上一篇博客中我已经详细介绍了JavaScript 中的字符串和数组,没看过的戳【JavaScript 数据类型详解(字符串、数组)】哦,现在我们来看看对象(Object)和 ES6 新增的 Set 和 Map 吧
1、对象
JavaScript 的对象是一种无序的集合数据类型,它由若干 键值对 组成,对象内部可以包含不同数据类型的 属性 以及各种 方法
/* 对象的书写格式:
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、属性
1、获取属性与赋值
//获取 xiaoHong 的年龄并修改
console.log("xiaoHong 的年龄是:" + xiaoHong.age);
xiaoHong.age = 22;
console.log("xiaoHong 的年龄是:" + xiaoHong.age);
//当然如果存在方法,我们也可以直接使用,注意方法是带 () 的
console.log("xiaoHong 的中文名字是" + xiaoHong.getName());
控制台输出结果:
2、动态增添属性
//JavaScript 的对象是动态类型(不用管是什么),我们可以直接给不存在的属性赋值
console.log("xiaoHong 的爸爸是:" + xiaoHong.father)
//使用动态添加的方式给 xiaoHong 添加了 father 属性
xiaoHong.father = "Mike";
console.log(xiaoHong);
控制台输出结果:
3、 动态删除属性
//同样,有动态增添,就有动态删除,格式:delete 对象名.属性名
// 动态删除 xiaoHong 的 school 属性
delete xiaoHong.school;
console.log(xiaoHong);
控制台输出结果:
5、判断一个属性或方法是否在对象中(包括继承的属性和方法):in
console.log("name" in xiaoHong); //输出 true(存在属性)
console.log("mother" in xiaoHong); //输出 false(不存在属性)
console.log("toString" in xiaoHong); //输出 true(继承)
6、判断一个属性或方法是否在对象中(不包括继承的属性和方法):hasOwnProperty()
console.log(xiaoHong.hasOwnProperty("father")); //输出 false(不存在属性)
console.log(xiaoHong.hasOwnProperty("toString")); //输出 false(不存在属性)
1.2、方法
函数写到对象体内就称为方法
var person = {
age: 21,
getAge: function () {
console.log("person 的 age = " + this.age);
}
};
person.getAge(); //输出 person 的 age = 21
注意关键字 this,指向属性所在的对象!
有时候我们自定义的对象需要使用外部的函数,但是外部函数又需要使用对象体内的属性,这时候该怎么办?我们可以使用 apply 方法!
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 和 Set
在 JavaScript 中集合元素不多,Map 和 Set 也是 ES6 才有的集合。至于为什么引入 Map 和 Set,其实你们发现没有,JavaScript 中对象的健只能是字符串,例如 name: “张三” 是正确的,但是 1: “张三” 就是错误的,所以为了让健可以使用 number 类型,ES6 引入了 Map 和 Set
2.1、Map
Map 类似于 Python 中的 dict(字典),也类似于 Java 中的 hashMap,都是利用键值对来存储元素,每一个元素都有一个唯一的 key,可以快速查找元素
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);
控制台输出:
需要注意,如果添加元素的时候,已经存在对应键值的元素,那么新元素会覆盖旧元素!
2.2、Set
Set 是无序列表,且不允许包含重复的元素,类似以 Java 中的 hashSet
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
控制台输出:
2.3、iterable
我们在遍历数组(Array)的时候,可以采用下标的方式顺序遍历,但是对于 Map 和 Set,它们无法使用下标,所以在 ES6 又引入了 iterable 类型,注意不是 iterator 哈,那是迭代器,iterable 是一种类型,具有 iterable 类型的集合(Array、Map、Set)可以采用 for of 循环遍历组内元素
/* 【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!
控制台输出:
关于对象和 Set、Map 两个集合对象就谈到这吧,关于 JavaScript 其它的数据类型我应该是不会专门写博客了,不会的自己多试试,bug 见多了自然就懂了