Symbol
ES6 introcues a new type called symbol. The Symbol function returns a value of type symbol.
</>復(fù)制代碼
const symbol1 = Symbol();
const symbol2 = Symbol("hi");
console.log(typeof symbol1); //symbol
console.log(symbol3.toString()); //Symbol(foo)
// each symbol value created by Symbol function is unique
console.log(Symbol("foo") === Symbol("foo")); // false
// Symbol itself is a function
console.log(typeof Symbol); //function
Iterator
An iterator is an object that provides a next method which returns the next item in the sequence. This method returns an object with two properties: done and value. For an object to be iterable, it must have a function property with a Symbol.iterator key, which returns a new iterator for each call.
</>復(fù)制代碼
// Array has build-in iteration support
functioin forOf(arr) {
for(let i of arr) {
console.log(i);
}
}
/**
* for...of loops is based on iterator
* so forOf implementation above is basically:
*/
function iterating(arr) {
let iterator = arr[Symbol.iterator](); //get the iterator for the array
let next = iterator.next();
while(!next.done) {
console.log(next.value);
next = iterator.next();
}
}
Make Object iterable
Object doesn"t have build-in iteration support.
</>復(fù)制代碼
let obj = {a: "b", c: "d"}
for(let i of obj) {
//Uncaught TypeError: obj is not iterable
console.log(i);
}
To make Object iterable, we have to add Symbol.iterator, either to the instance or the prototype.
</>復(fù)制代碼
Object.defineProperty(Object.prototype, Symbol.iterator, {
value: function() {
let keys = Object.keys(this);
let index = 0;
return {
next: () => {
let key = keys[index++];
return {
value: `${key}-${this[key]}`,
done: index > keys.length
}
}
};
},
enumerable: false
});
let obj = {a: "b", c: "d"}
for(let i of obj) {
console.log(i); // a-b c-d
}
Generator
The function declaration defines a generator function, whose return value is generator object. The generator object conforms to the iterator protocol. Note generator function* itself is a function.
</>復(fù)制代碼
//generator function
function* generatorFn() {
yield 1;
return 2;
}
// generator object - iterator
let generatorObj = generatorFn();
let nextItem = generatorObj.next();
console.log(typeof generatorFn); //function
console.log(typeof generatorObj); //object
console.log(typeof generatorObj.next); //function
console.log(nextItem); //{value: 1, done: false}
Therefore, to make Object iterable, we can define its Symbol.iterator with generator function.
</>復(fù)制代碼
Object.defineProperty(Object.prototype, Symbol.iterator, {
value: function*() {
let keys = Object.keys(this);
for(let key of keys) {
yield `${key}-${this[key]}`;
}
},
enumerable: false
});
let obj = {a: "b", c: "d"};
for(let kv of obj) {
console.log(kv); // a-b c-d
}
In practice
With the technique in hand, we can make custom datatypes iterable.
</>復(fù)制代碼
class Group {
constructor() {
this._data = [];
}
add(it) {
this._data.push(it);
}
delete(it) {
let index = this._data.indexOf(it);
if(index >= 0) {
this._data.splice(index, 1);
}
}
has(it) {
return this._data.includes(it);
}
[Symbol.iterator]() {
let index = 0;
return {
next: () => ({
value: this._data[index++],
done: index > this._data.length
})
};
}
static from(iterable) {
let group = new Group();
for(let item of iterable) {
group.add(item);
}
return group;
}
}
let group = Group.from(["a", "b", "c"]);
console.log(group)
for (let value of group) {
console.log(value);
}
console.log([...group]);
Reference
Eloquent JavaScript
NoticeIf you want to follow the latest news/articles for the series of reading notes, Please 「Watch」to Subscribe.
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/93769.html
摘要:中的的引入,極大程度上改變了程序員對迭代器的看法,并為解決提供了新方法。被稱為,也有些人把的返回值稱為一個(gè)。其中屬性包含實(shí)際返回的數(shù)值,屬性為布爾值,標(biāo)記迭代器是否完成迭代。 原文: http://pij.robinqu.me/JavaScript_Core/Functional_JavaScript/JavaScript_Generator.html 源代碼: htt...
摘要:變量聲明與賦值值傳遞淺拷貝與深拷貝詳解歸納于筆者的現(xiàn)代開發(fā)語法基礎(chǔ)與實(shí)踐技巧系列文章。變量聲明在中,基本的變量聲明可以用方式允許省略,直接對未聲明的變量賦值。按值傳遞中函數(shù)的形參是被調(diào)用時(shí)所傳實(shí)參的副本。 ES6 變量聲明與賦值:值傳遞、淺拷貝與深拷貝詳解歸納于筆者的現(xiàn)代 JavaScript 開發(fā):語法基礎(chǔ)與實(shí)踐技巧系列文章。本文首先介紹 ES6 中常用的三種變量聲明方式,然后討論了...
摘要:相反,雙向鏈表具有指向其前后元素的節(jié)點(diǎn)。另外,可以對鏈表進(jìn)行排序。這個(gè)實(shí)用程序方法用于打印鏈表中的節(jié)點(diǎn),僅用于調(diào)試目的。第行將更新為,這是從鏈表中彈出最后一個(gè)元素的行為。如果鏈表為空,則返回。 showImg(https://segmentfault.com/img/bVbsaI7?w=1600&h=228); 什么是鏈表 單鏈表是表示一系列節(jié)點(diǎn)的數(shù)據(jù)結(jié)構(gòu),其中每個(gè)節(jié)點(diǎn)指向鏈表中的下一...
摘要:中的數(shù)組是沒有字符串索引的,形如只是在對象上添加了屬性。本來有幾個(gè)例子,然而搜到了的文檔,所以摘一點(diǎn)下面摘自循環(huán)會(huì)遍歷一個(gè)對象上面的所有屬性。語法是針對集合的,而不是所有的對象。它會(huì)遍歷定義了屬性的集合的所有元素。 TL;DR:js中的數(shù)組是沒有字符串索引的,形如array[b] = someValue只是在array對象上添加了屬性。 本來有幾個(gè)例子,然而搜到了MDN的文檔,所以摘一...
摘要:前言又稱提供一個(gè)全新的迭代器的概念,它允許我們在語言層面上定義一個(gè)有限或無限的序列。后者可以被用來幫助我們理解迭代器。但是當(dāng)我們使用迭代器時(shí),這個(gè)問題就迎刃而解了。是中的新語法,用來配合迭代器。這是因?yàn)閿?shù)組的迭代器只返回其中預(yù)期的元素。 前言 EcmaScript 2015 (又稱ES6)提供一個(gè)全新的迭代器的概念,它允許我們在語言層面上定義一個(gè)(有限或無限的)序列。 暫時(shí)先拋開它...
閱讀 3604·2020-12-03 17:42
閱讀 2770·2019-08-30 15:54
閱讀 2230·2019-08-30 15:44
閱讀 576·2019-08-30 14:08
閱讀 975·2019-08-30 14:00
閱讀 1111·2019-08-30 13:46
閱讀 2794·2019-08-29 18:33
閱讀 2913·2019-08-29 14:11