[JavaScript ES 6+]ES 6での巡回およびアプレットプロトコル
17951 ワード
1.従来とは異なるES 6でリストを巡る
ES 5ではこのように巡回している.const list = [1, 2, 3];
for (var i = 0; i < list.length; i++) {
// log(list[i]);
}
const str = 'abc';
for (var i = 0; i < str.length; i++) {
// log(str[i]);
}
ES 6はこのように宣言的な変更を行った.for (const a of list) {
// log(a);
}
for (const a of str) {
// log(a);
}
2.Array、Set、Mapのアプレットプロトコル // Array를 통해 알아보기
<script>
log('Arr -----------');
const arr = [1, 2, 3];
let iter1 = arr[Symbol.iterator]();
for (const a of iter1) log(a);
</script>
// Set을 통해 알아보기
<script>
log('Set -----------');
const set = new Set([1, 2, 3]);
for (const a of set) log(a);
</script>
// Map을 통해 알아보기
<script>
log('Map -----------');
const map = new Map([['a', 1], ['b', 2], ['c', 3]]);
for (const a of map.keys()) log(a);
for (const a of map.values()) log(a);
for (const a of map.entries()) log(a);
//console.clear();
</script>
アプレット/アプレットプロトコル
const list = [1, 2, 3];
for (var i = 0; i < list.length; i++) {
// log(list[i]);
}
const str = 'abc';
for (var i = 0; i < str.length; i++) {
// log(str[i]);
}
for (const a of list) {
// log(a);
}
for (const a of str) {
// log(a);
}
// Array를 통해 알아보기
<script>
log('Arr -----------');
const arr = [1, 2, 3];
let iter1 = arr[Symbol.iterator]();
for (const a of iter1) log(a);
</script>
// Set을 통해 알아보기
<script>
log('Set -----------');
const set = new Set([1, 2, 3]);
for (const a of set) log(a);
</script>
// Map을 통해 알아보기
<script>
log('Map -----------');
const map = new Map([['a', 1], ['b', 2], ['c', 3]]);
for (const a of map.keys()) log(a);
for (const a of map.values()) log(a);
for (const a of map.entries()) log(a);
//console.clear();
</script>
アプレット/アプレットプロトコル
イテレーション:イテレーションを返す値は
[Symbol.iterator]()
です.イテレーション:オブジェクト{value,don}の値
next()
を返します.イテレーション/イテレーションプロトコル:イテレーション...展開演算子などと一緒に作業する規則
3.カスタムイテレーション、イテレーション/イテレーションプロトコルの定義 // 사용자 정의 이터러블을 통해 알아보기
<script>
const iterable = {
[Symbol.iterator]() {
let i = 3;
return {
next() {
return i == 0 ? {done: true} : {value: i--, done: false};
// value : 점점 줄임 3->2->1
},
[Symbol.iterator]() {
// 자기자신또한 이터러블이면서, 계속 리턴하면서
// 어디서든 next() 할 수 있도록 하는게 well-formed iterator이다.
return this;
}
}
}
};
let iterator = iterable[Symbol.iterator]();
iterator.next();
iterator.next();
// log(iterator.next());
// log(iterator.next());
// log(iterator.next());
for (const a of iterator) log(a);
// const arr2 = [1, 2, 3];
// let iter2 = arr2[Symbol.iterator]();
// iter2.next();
// log(iter2[Symbol.iterator]() == iter2);
// for (const a of iter2) log(a);
for (const a of document.querySelectorAll('*')) log(a);
const all = document.querySelectorAll('*');
let iter3 = all[Symbol.iterator]();
log(iter3.next());
log(iter3.next());
log(iter3.next());
</script>
4.展開演算子 <script>
const a = [1, 2];
// a[Symbol.iterator] = null;
log([...a, ...arr, ...set, ...map.keys()]);
</script>
Reference
この問題について([JavaScript ES 6+]ES 6での巡回およびアプレットプロトコル), 我々は、より多くの情報をここで見つけました
https://velog.io/@imyourgenie/JavaScript-ES6-ES6에서의-순회와-이터러블-이터레이터-프로토콜
テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol
// 사용자 정의 이터러블을 통해 알아보기
<script>
const iterable = {
[Symbol.iterator]() {
let i = 3;
return {
next() {
return i == 0 ? {done: true} : {value: i--, done: false};
// value : 점점 줄임 3->2->1
},
[Symbol.iterator]() {
// 자기자신또한 이터러블이면서, 계속 리턴하면서
// 어디서든 next() 할 수 있도록 하는게 well-formed iterator이다.
return this;
}
}
}
};
let iterator = iterable[Symbol.iterator]();
iterator.next();
iterator.next();
// log(iterator.next());
// log(iterator.next());
// log(iterator.next());
for (const a of iterator) log(a);
// const arr2 = [1, 2, 3];
// let iter2 = arr2[Symbol.iterator]();
// iter2.next();
// log(iter2[Symbol.iterator]() == iter2);
// for (const a of iter2) log(a);
for (const a of document.querySelectorAll('*')) log(a);
const all = document.querySelectorAll('*');
let iter3 = all[Symbol.iterator]();
log(iter3.next());
log(iter3.next());
log(iter3.next());
</script>
<script>
const a = [1, 2];
// a[Symbol.iterator] = null;
log([...a, ...arr, ...set, ...map.keys()]);
</script>
Reference
この問題について([JavaScript ES 6+]ES 6での巡回およびアプレットプロトコル), 我々は、より多くの情報をここで見つけました https://velog.io/@imyourgenie/JavaScript-ES6-ES6에서의-순회와-이터러블-이터레이터-프로토콜テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol