8つのセットとマップ
1>セット
ES6 は新しいデータ構造 Set を提供します。配列に似ていますが、メンバーの値はすべて一意であり、重複する値はありません。
Set 自体は、Set データ構造を生成するために使用されるコンストラクターです。
const set = new Set();
// 向set中添加数据
set.add(10);
set.add(10);
set.add(20);
console.log("set:", set); // set: Set(2) {10, 20}
const arr = Array.of(10, 10, 20);
console.log("arr:", arr); // arr: (3) [10, 10, 20]
// 利用set可以对数组进行去重,将一个数组转换成set
const set2 = new Set(arr);
console.log("set2:", set2); // set2: Set(2) {10, 20}
// set集合在遍历时,使用for--of
for (let i of set2) {
console.log(i); // 10 20
}
// 字符串本身也是数组
const set3 = new Set("ababcdesa");
console.log(set3); // Set(6) {'a', 'b', 'c', 'd', 'e', …}
// 将set变成数组
const arr1 = [...set3];
console.log("arr1:", arr1); // arr1: (6) ['a', 'b', 'c', 'd', 'e', 's']
// 使用数组的join方法,进行拼接
console.log(arr1.join('')); // abcdes
2>地図
JavaScript オブジェクト (Object) は本質的にキーと値のペア (ハッシュ構造) のコレクションですが、従来は文字列のみをキーとして使用できました。この問題を解決するために、ES6 は Map データ構造を提供します。オブジェクトと似ており、キーと値のペアの集合でもありますが、「キー」の範囲は文字列に限定されず、さまざまな種類の値(オブジェクトを含む)をキーとして使用できます。
const map = new Map();
// 向map种添加数据
map.set('name', '旺财');
map.set('age', 5);
// 不允许存在重复的key
map.set("name", "旺财2");
console.log("map:", map); // Map(2) {'name' => '旺财2', 'age' => 5}
// 通过key获取值
const value = map.get("name");
console.log(value); // 旺财2
// clear():清除map中的所有元素
//map.clear();
// 获取map中元素的个数 size
console.log(map.size); // 2
// has方法:判断map中是否存在指定的key
console.log(map.has('age1')); // false
マップを移動します。
// 1. forEach遍历 map,获取到的是遍历的值
map.forEach(item => {
console.log(`item:${
item}`); // item:旺财2 item: 5
});
// 2. 获取map中所有的key: map.keys()
for (let key of map.keys()) {
console.log(`${
key}1--->${
map.get(key)}`); // name1--->旺财2 age1--->5
}
// 3. 获取map中所有的entries: map.entries()
for (let [key, value] of map.entries()) {
console.log(`${
key}2--->${
value}`); // name2--->旺财2 age2--->5
}
// map的键可以是任意类型
map.set(false, "小明");
console.log(map); // Map(3) {'name' => '旺财2', 'age' => 5, false => '小明'}
シンボル: ES6 では、一意の値を表す新しいプリミティブ データ型シンボルが導入されています。
const a = Symbol();
const b = Symbol();
console.log(a === b); // false
map.set(Symbol(), "abc");
map.set(Symbol(), "def");
console.log("map:", map);
// Symbol作为键是否可以遍历出来?是。
for (let item of map) {
console.log("item", item);
}
// 让创建的symbol为同一个值
const d = Symbol.for('a');
const e = Symbol.for('a');
console.log(d === e); // true
9種類の文法
// 类就是自定义构造函数
// function Dog(name, type) {
// this.name = name;
// this.type = type;
// }
// // 方法:定义在所属构造函数的原型上
// Dog.prototype.show = function () {
// console.log(this.name + "----" + this.type);
// }
// 使用es6提供的类语法 ,使用class关键字。抽象的概念
class Dog {
// 构造函数,创建对象
constructor(name, type) {
this.name = name;
this.type = type;
}
// 方法,定义在原型上的
show() {
console.log(this.name + "----" + this.type);
}
say() {
console.log("Hello World1");
}
// 静态方法: 该方法不属于具体实例,而是归类所有,通过类名去调用.在方法之前加上static,(就表示该方法不会被实例继承,而是直接通过类来调用)
static say2() {
console.log("我是一个静态方法");
}
}
// 静态属性:该属性不属于具体实例,而是归类所有,通过类名去调用.
Dog.color = "red";
const dog = new Dog("旺财", "泰迪");
dog.show();
const dog2 = new Dog("小虎", "藏獒");
dog2.show();
console.log(dog.show === dog2.show);
console.log(typeof Dog); // function
console.log(Dog.prototype); // object
console.log(dog.__proto__ === Dog.prototype) // true
// 调用静态方法
Dog.say2(); // 我是一个静态方法
// 调用静态属性
console.log(Dog.color); // red
10の約束
Promise は、コールバック関数やイベントといった従来のソリューションよりも論理的で強力な非同期プログラミングのソリューションです。
多層コールバック関数が相互に入れ子になると、コールバック地獄が形成されます。多数のコードが入れ子になっていて読みにくく、結合が強すぎて維持が難しいため、地域コールバックの問題を解決するために Promise が提案されています。
Promise の非同期操作の結果は、resolveおよび拒否コールバック関数を呼び出すことで処理できます。
solve は成功したコールバックの結果を表し、reject は失敗したコールバックの結果を表します。
- Promise はコンストラクターです
- Promise のインスタンスを作成できます
const p = new Promise()
- 非同期操作を表す new からの Promise インスタンス オブジェクト
- Promise のインスタンスを作成できます
- Promise.prototype には .then() メソッドが含まれています
- 新しい Promise() コンストラクターごとに取得されたインスタンス オブジェクトは、プロトタイプ チェーンを通じて .then() メソッドにアクセスできます。例: p.then()
- .then() メソッドは、成功および失敗のコールバック関数を事前に指定するために使用されます。
- p.then(成功の場合はコールバック関数、失敗の場合はコールバック関数)
- .then() メソッドを呼び出す場合、成功時のコールバック関数は必須であり、失敗時のコールバック関数はオプションです。
Promise チェーン操作でエラーが発生した場合は、Promise.prototype.catchメソッドを使用してそれをキャプチャして処理できます。前のエラーによって後続の .then が正常に実行されなくなることを望まない場合は、次のように呼び出すことができます。 .catch を事前に取得してください。