이전 블로그에서 자바스크립트의 문자열과 배열에 대해 자세히 소개했는데 아직 안 읽어보신 분들은 [ 자바스크립트 데이터 타입 상세설명(문자열, 배열) ] 아, 이제 객체(Object)와 ES6에 대해 알아보겠습니다. 새로 추가된 세트 및 맵
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. 객체에 속성 또는 메서드가 있는지 확인합니다(상속된 속성 및 메서드 포함).
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는 속성이 있는 객체를 가리킨다는 점에 유의하십시오!
때때로 우리의 사용자 지정 개체는 외부 함수를 사용해야 하지만 외부 함수는 개체 본문의 속성을 사용해야 합니다. 적용 방법을 사용할 수 있습니다!
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. 맵과 세트
JavaScript에는 컬렉션 요소가 많지 않으며 Map 및 Set도 ES6에서만 사용할 수 있는 컬렉션입니다. Map과 Set이 도입된 이유는 사실 JavaScript에서 개체의 키가 문자열만 될 수 있다는 것을 발견하지 못했습니다.예를 들어 name: "Zhang San"은 맞지만 1: "Zhang San"은 틀려서 key를 만들 수 있도록 number type을 사용하는 ES6에서는 Map과 Set을 도입했습니다.
2.1、지도
Map은 Python의 dict(사전) 및 Java의 hashMap과 유사합니다. 키-값 쌍을 사용하여 요소를 저장합니다. 각 요소에는 고유한 키가 있어 요소를 빠르게 찾을 수 있습니다.
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은 정렬되지 않은 목록이며 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, 반복 가능
배열(Array)을 순회할 때 첨자를 사용하여 순차적으로 순회할 수 있지만 Map과 Set의 경우 첨자를 사용할 수 없으므로 ES6에서 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에서 다른 데이터 유형에 대한 블로그는 작성하지 않을 것입니다.