Learn ECMAScript 6 in Arabic #31 - Custom Iterable Object

Custom Iterable Object

=============================

Support Me on Patreon to Help me Create More Videos

I will be Very Happy if you Support my Channel.

Join Our Facebook Group:

Follow My Facebook Profile:

Like Facebook Page:

Follow Me On Twitter:

[alitarek]

= function(){
let step = 0;
let properties = Object.keys(this);
return{
next(){
return{
value:properties[step],
done:step++ === properties.length
}
}
}
}

[youseffathi]

استاذ اسامة ما كنت ممكن نستعمل for in
بتشتغل مع ال objects
و اقدر اطلع الkey and value
ولا دا تطبيق علي ال iterator
علشان نستخدمها عموما مش في الحتة دي بس ؟

[خديجهعبدالله-مذ]

بارك الله فيك يابشمهندس
بس محتاجين تطبيقات عمليه كتير على الكورس دا او ترشحلى كتب ومواقع نتدرب منها عملى

[cdedne]

in order to make your iterator more stable and clean a little change:
at line 18: done: step++ >= properties.length
so whenever you pass more next() in console it will return true;
& keep going;

[MohammedAli-ped]

الي مش عارف فائدة الموضوع
الموضوع فائدته انه احيانا بنعمل داتا استركتشر وبنحتاج لها iterator او loop
فبنعمل custom iterator لان ال loop الي بنعرفه ما يشتغل على كل هياكل البيانات (data structures)

[eddawry]

next() {
let theVal = myObject[properties[step]];
return {
value: "Key : " + properties[step] + "\nValue : " + theVal,
done: step++ === properties.length
}
}
من اجل طباعة الالكايز والفاليو

[nadael-shater]

لوسمحت استاذ اسامه هو ال front-end developer(wed design) بيستعمل معاه برامج الفوتوشوب بجانب الثلاث لغات الاساسيه html css JavaScript؟؟

[abdelwahhabramadan]

Creating Custom Iterable Object By Applying ES6 Iterable And Iterator Protocols:


- To create custom iterable Object, we need to implement iterable protocol and iterator protocol On The Object.
- A protocol means a set of rules which we need to follow.

[1] The iterable Protocol:
- In order to be iterable, an object must implement the iterator method.
-- This can be done by creating a member function named as Symbol.iterator
-- This function must be a zero arguments function that returns an object, conforming to the iterator protocol
- An iterable looks like this:
let obj = {
// applying iterable protocol by defining iterator method
[Symbol.iterator]() {

}
};
-- In [Symbol.iterator], the square bracket encloses computed function name


[2] The iterator Protocol:
- An iterator method implements next() method which returns an object having two properties:
-- Value: returns the loop's current value until done = true
-- Done: its value should be 'false' if there are still items to be iterated, otherwise it should be 'true'
- next() method implementation looks like this:
let next = function () {
return {
value: val,
done: true/false
};
};
- An object enclosing this function, must be returned from iterable's iterator method (iterable protocol)


=> Combining the two protocols:
let obj = {
// applying iterable protocol by defining iterator method
[Symbol.iterator]() {
return {
// Applying Iterator Protocol By Defining next() Method Which Returns An Object Having Two Properties: [value, done]
next() {
return {
value: val,
done: true/false
};
}
};
}
};

[Mohamed-nmvv]

for(let prps of Object.keys(myObject) )
{
console.log(myObject[prps])
};

[dhiaben]

هناك شيء لم افهمه وانت لم تشرحه
ليه عملت step وpropeties كمتغيرين في الفنكشن ولم تعملهم ك بروبرتيز في الاوبجكت التي يرجعها Symbol.iterator
هذي هي ال closure صح ؟؟؟ ممكن تعمل عليها درس مع امثلة كتير ، لانها تسببت لي باحباط فعلا

[baraayehia]

فين باقي الاكواد بتاعت الدروس اللي بعد ده يا هندسه

[leadergames]

السلام عليكم أخى أريد فيديو لسكربتات بلوجر كاملة مثل data و section و widget

[goodee]

طريقتي صح؟
for (prop in myObject ){
console.log(myObject[prop])
}

[ss_space]

بص انا منفق انك خليت حاجة زي Object بقي فيها iterator وده كويس لكن انا ممكن بدل اللفه دي ما استخدم for in وهعمل loop أو ممكن برضخ اشتغل Object.keys أو Object.values وهي array واستخدم معاها for of لكن الكود بايخ ومعقد ...ولو علي فكرة iterator بالشكل ده مالوش لازمه كان الأفضل تحط حاجة اقوي علشان نفهم المغزي م الكود ده كله ...ده لا يمنع انك تعبت ونقولك جزاك لله خيراً

[eslammahmd]

Let x = {name:"eslam", Age:22 }
for (let i in x) {
console.log(i + " " + x[i])
}

Output:
name eslam
Age 22

لو استخدمنا دي هتدي نفس النتيجة
بس البشمهندس بيكلم بشكل عامل تقدر تعمل iteration علي اي object

[hazemmohamed]

ما حد يفهمنا يا جدعان هو عاوز ايه من الدرس ده ... عاوزين عنوان ليه بيعمل ايه يعني ؟!!

[ahmedshehata]

حبيت افكر بره الصندوق شوية و طلعت بده

كدا بطلع ال values

let objectTest = {
name: 'Ahmed', Age:23, country:'EGY',favSkill:"JS",

[Symbol.iterator](){
let i = 0;

return {
next(){
return {

value : Object.values(objectTest)[i],
done : i++ ===
}
}
}
}
}

for(let prop of objectTest){
console.log(prop);
}


و كدا تقدر تطلع الkeys : -

let objectTest = {

name: 'Ahmed', Age:23, country:'EGY',favSkill:"JS",

[Symbol.iterator](){
let i = 0;
return {
next(){
return {

value : Object.values(objectTest)[i],
done : i++ ===
}
}
}
}
}

for(let prop of objectTest){
console.log(prop);
}