前回のブログでJavaScriptの文字列と配列について詳しく紹介しましたので、まだ読んでいない方は「JavaScriptのデータ型詳細解説(String, Array)」を読んで、オブジェクト(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 は、属性が配置されているオブジェクトを指していることに注意してください。
カスタム オブジェクトで外部関数を使用する必要がある場合がありますが、その外部関数ではオブジェクト本体のプロパティを使用する必要があります。この場合はどうすればよいでしょうか? 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. マップとセット
JavaScript にはコレクション要素があまりなく、Map や Set も ES6 でのみ利用できるコレクションです。Map と Set が導入された理由については、JavaScript ではオブジェクトのキーが文字列のみであることがわかりませんでした。たとえば、名前: "Zhang San" は正しいですが、1: "Zhang San" は正しくありません。間違っているので、キーを数値タイプを使用できるようにするために、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 で反復可能型が導入されました。これは反復子ではなく反復子であることに注意してください。これは type であり、反復可能な型を持つコレクション (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！
コンソール出力:
オブジェクトと、2 つのコレクション オブジェクトの Set および Map について話しましょう。JavaScript の他のデータ型については、おそらくブログは書きません。