Javascript របៀបទទួលបានធាតុមេ។ បច្ចេកទេសសម្រាប់ធ្វើការជាមួយ DOM៖ ឪពុកម្តាយ កូន និងធាតុដែលនៅជាប់គ្នា។ ការទប់ស្កាត់សកម្មភាពលំនាំដើម

នេះ។ សម្រាប់គ្នា () method ប្រតិបត្តិមុខងារដែលបានផ្តល់ម្តងសម្រាប់ធាតុអារេនីមួយៗ។

ប្រភពសម្រាប់ឧទាហរណ៍អន្តរកម្មនេះត្រូវបានរក្សាទុកនៅក្នុងឃ្លាំង GitHub ។ ប្រសិនបើអ្នកចង់រួមចំណែកដល់គម្រោងឧទាហរណ៍អន្តរកម្ម សូមក្លូន https://github.com/mdn/interactive-examples ហើយផ្ញើសំណើទាញមកយើង។

វាក្យសម្ពន្ធ

arr .forEach(callback(currentValue [, index [, array]]) [, thisArg])

ប៉ារ៉ាម៉ែត្រ

មុខងារ callback ដើម្បីប្រតិបត្តិលើធាតុនីមួយៗ។ វាទទួលយករវាងអាគុយម៉ង់មួយ និងបី៖ currentValue ធាតុបច្ចុប្បន្នកំពុងដំណើរការក្នុងអារេ។

លិបិក្រមជាជម្រើស សន្ទស្សន៍បច្ចុប្បន្នតម្លៃក្នុងអារេ។

អារេ ស្រេចចិត្ត អារេ forEach() ត្រូវបានហៅមក។

thisArg តម្លៃស្រេចចិត្តដើម្បីប្រើវានៅពេលប្រតិបត្តិការហៅត្រឡប់មកវិញ។

តម្លៃត្រឡប់

  1. ការពិពណ៌នា
  2. forEach() ហៅមុខងារហៅត្រឡប់មកវិញដែលបានផ្តល់ម្តងសម្រាប់ធាតុនីមួយៗក្នុងអារេក្នុងលំដាប់ឡើង។ វា​មិន​ត្រូវ​បាន​ហៅ​សម្រាប់​លក្ខណៈ​សម្បត្តិ​លិបិក្រម​ដែល​ត្រូវ​បាន​លុប ឬ​មិន​ត្រូវ​បាន​បង្កើត​ឡើង​ទេ។ (សម្រាប់ sparse arrays, .)
  3. ការហៅត្រឡប់មកវិញត្រូវបានហៅដោយអាគុយម៉ង់ចំនួនបី៖

តម្លៃនៃធាតុ

សន្ទស្សន៍នៃធាតុ

វត្ថុអារេកំពុងឆ្លងកាត់

ប្រសិនបើប៉ារ៉ាម៉ែត្រនេះ Arg ត្រូវបានផ្តល់ទៅឱ្យ forEach() នោះវានឹងត្រូវបានប្រើជាតម្លៃនេះ callback។ តម្លៃនេះ Arg ចុងក្រោយគឺអាចសង្កេតបានដោយការហៅត្រឡប់មកវិញត្រូវបានកំណត់យោងទៅតាមច្បាប់ធម្មតាសម្រាប់កំណត់តម្លៃនេះឃើញដោយអនុគមន៍។

មិនមានវិធីដើម្បីបញ្ឈប់ ឬបំបែករង្វិលជុំ forEach() ក្រៅពីការបោះករណីលើកលែងនោះទេ។ ប្រសិនបើអ្នកត្រូវការអាកប្បកិរិយាបែបនេះ វិធីសាស្ត្រ forEach() គឺជាឧបករណ៍ខុស។

ការ​បញ្ចប់​មុន​អាច​ត្រូវ​បាន​សម្រេច​ដោយ៖

វិធីសាស្ត្រអារេ៖ every() , some( ) , find( ) , និង findIndex() សាកល្បងធាតុអារេជាមួយ predicate ត្រឡប់តម្លៃពិត ដើម្បីកំណត់ថាតើត្រូវការការធ្វើម្តងទៀតឬអត់។

ឧទាហរណ៍

គ្មាន​ប្រតិបត្តិការ​សម្រាប់​តម្លៃ​ដែល​មិន​បាន​បង្កើត​ឡើង​ទេ (អារេ​តូច)

const arraySparse = អនុញ្ញាតឱ្យ numCallbackRuns = 0 arraySparse.forEach(function(element)( console.log(element) numCallbackRuns++ )) console.log("numCallbackRuns:", numCallbackRuns) // 1 // 3 // 7 // numCalluns: 3R // អត្ថាធិប្បាយ៖ ដូចដែលអ្នកអាចឃើញតម្លៃដែលបាត់រវាងលេខ 3 និង 7 មិនបានហៅមុខងារហៅត្រឡប់មកវិញទេ។

បំប្លែង for loop ទៅជា forEach

const items = ["item1", "item2", "item3"] const copy = // មុនសម្រាប់ (អនុញ្ញាតឱ្យ i = 0; i< items.length; i++) { copy.push(items[i]) } // after items.forEach(function(item){ copy.push(item) })

ការបោះពុម្ពមាតិកានៃអារេមួយ។

ចំណាំ៖ដើម្បីបង្ហាញខ្លឹមសារនៃអារេក្នុងកុងសូល អ្នកអាចប្រើ console.table() ដែលបោះពុម្ពកំណែទម្រង់នៃអារេ។

ឧទាហរណ៍ខាងក្រោមបង្ហាញពីវិធីសាស្រ្តជំនួស ដោយប្រើ forEach() ។

កូដខាងក្រោមកត់ត្រាបន្ទាត់សម្រាប់ធាតុនីមួយៗក្នុងអារេមួយ៖

អនុគមន៍ logArrayElements(ធាតុ លិបិក្រម អារេ) ( console.log("a[" + index + "] = " + ធាតុ) ) // ចំណាំថាលិបិក្រម 2 ត្រូវបានរំលង ដោយសារមិនមានធាតុនៅ // ទីតាំងនោះនៅក្នុង អារេ.... .forEach(logArrayElements) // logs: // a = 2 // a = 5 // a = 9

ការប្រើប្រាស់ Arg នេះ។

ឧទាហរណ៍ខាងក្រោម (បង្កើត) ធ្វើបច្ចុប្បន្នភាពលក្ខណសម្បត្តិរបស់វត្ថុពីធាតុនីមួយៗក្នុងអារេ៖

Function Counter() ( this.sum = 0 this.count = 0 ) Counter.prototype.add = function(array) ( array.forEach(function(entry) ( this.sum += entry ++this.count ) ) នេះ ) // ^---- ចំណាំ ) const obj = new Counter() obj.add() obj.count // 3 obj.sum // 16

ដោយសារប៉ារ៉ាម៉ែត្រ thisArg (នេះ) ត្រូវបានផ្តល់ជូនសម្រាប់Each() វាត្រូវបានបញ្ជូនទៅការហៅត្រឡប់មកវិញរាល់ពេលដែលវាត្រូវបានហៅ។ ការហៅត្រឡប់មកវិញប្រើវាជាតម្លៃរបស់វា។

មុខងារចម្លងវត្ថុ

កូដខាងក្រោមបង្កើតច្បាប់ចម្លងនៃវត្ថុដែលបានផ្តល់ឱ្យ។

មានវិធីផ្សេងគ្នាដើម្បីបង្កើតច្បាប់ចម្លងនៃវត្ថុមួយ។ ខាងក្រោមនេះគ្រាន់តែជាវិធីមួយប៉ុណ្ណោះ ហើយត្រូវបានបង្ហាញដើម្បីពន្យល់ពីរបៀបដែល Array.prototype.forEach() ដំណើរការដោយប្រើមុខងារ ECMAScript 5 Object.* meta property ។

មុខងារចម្លង(obj) ( const copy = Object.create(Object.getPrototypeOf(obj)) const propNames = Object.getOwnPropertyNames(obj) propNames.forEach(function(name) ( const desc = Object.getOwnPropertyDescriptor(obj, name) .defineProperty(copy,name,desc) )) return copy ) const obj1 = ( a: 1, b: 2 ) const obj2 = copy(obj1) // obj2 មើលទៅដូចជា obj1 ឥឡូវនេះ

ប្រសិនបើអារេត្រូវបានកែប្រែកំឡុងពេលធ្វើម្តងទៀត ធាតុផ្សេងទៀតអាចត្រូវបានរំលង។

ឧទាហរណ៍ខាងក្រោមកត់ត្រា "មួយ", "ពីរ", "បួន" ។

នៅពេលធាតុដែលមានតម្លៃ " two" is reached, the first entry of the whole array is shifted off-resulting in all remaining entries moving up one position. Because element "four" is now at an earlier position in the array, "three" will be skipped.!}

forEach() មិនធ្វើច្បាប់ចម្លងនៃអារេមុនពេលធ្វើម្តងទៀតទេ។

សូមឱ្យពាក្យ = ["មួយ", "ពីរ", "បី", "បួន"] words.forEach(function(word)( console.log(word) if(word === "two")( words.shift( ) ))) // មួយ // ពីរ // បួន

បង្រួមអារេមួយ។

ឧទាហរណ៍ខាងក្រោមគឺនៅទីនេះសម្រាប់គោលបំណងសិក្សាតែប៉ុណ្ណោះ។ ប្រសិនបើអ្នកចង់បង្រួមអារេដោយប្រើវិធីសាស្ត្រដែលភ្ជាប់មកជាមួយអ្នកអាចប្រើ Array.prototype.flat() (ដែលរំពឹងថាជាផ្នែកនៃ ES2019 ហើយត្រូវបានអនុវត្តនៅក្នុងកម្មវិធីរុករកមួយចំនួន)។

/** * Flattens ឆ្លងកាត់អារេក្នុងអារេវិមាត្រមួយ * * @params (array) arr * @returns (array) */ function flatten(arr) ( const result = arr.forEach((i) => ( if (Array. isArray(i)) ( result.push(...flatten(i)) ) else ( result.push(i) )) return results ) // Usage const problem = , 8, 9]] flatten(problem) //

ចំណាំលើការប្រើប្រាស់មុខងារ Promises ឬ async

let ratings = let sum = 0 let sumFunction = async function (a, b) ( return a + b ) ratings.forEach( async function(rating) ( sum = await sumFunction(sum, rating) )) console.log(sum) // លទ្ធផលរំពឹងទុក៖ ១៤ // លទ្ធផលជាក់ស្តែង៖ ០

លក្ខណៈបច្ចេកទេស

ការបញ្ជាក់ ស្ថានភាព មតិយោបល់
ECMAScript សេចក្តីព្រាងចុងក្រោយបង្អស់ (ECMA-262)
សេចក្តីព្រាង
ECMAScript 2015 (បោះពុម្ពលើកទី 6, ECMA-262)
និយមន័យនៃ "Array.prototype.forEach" នៅក្នុងការបញ្ជាក់នោះ។
ស្តង់ដារ
ECMAScript 5.1 (ECMA-262)
និយមន័យនៃ "Array.prototype.forEach" នៅក្នុងការបញ្ជាក់នោះ។
ស្តង់ដារ និយមន័យដំបូង។ បានអនុវត្តនៅក្នុង JavaScript 1.6 ។

ភាពឆបគ្នានៃកម្មវិធីរុករក

តារាងភាពត្រូវគ្នានៅក្នុងទំព័រនេះត្រូវបានបង្កើតពីទិន្នន័យដែលមានរចនាសម្ព័ន្ធ។ ប្រសិនបើអ្នកចង់រួមចំណែកក្នុងទិន្នន័យ សូមពិនិត្យមើល https://github.com/mdn/browser-compat-data ហើយផ្ញើសំណើទាញមកយើង។

ធ្វើបច្ចុប្បន្នភាពទិន្នន័យភាពត្រូវគ្នានៅលើ GitHub

ផ្ទៃតុទូរស័ព្ទចល័តម៉ាស៊ីនមេ
ChromeគែមFirefoxInternet Explorerល្ខោនអូប៉េរ៉ាសាហ្វារីការមើលគេហទំព័រ AndroidChrome សម្រាប់ AndroidFirefox សម្រាប់ AndroidOpera សម្រាប់ AndroidSafari នៅលើ iOSក្រុមហ៊ុន Samsung អ៊ីនធឺណិតNode.js
សម្រាប់គ្នា។Chrome គាំទ្រពេញ 1គែមគាំទ្រពេញ 12Firefox គាំទ្រពេញ 1.5IE គាំទ្រពេញ 9Opera គាំទ្រពេញ បាទSafari គាំទ្រពេញ 3WebView Android ការគាំទ្រពេញលេញ ≤37Chrome Android គាំទ្រពេញ 18Firefox Android គាំទ្រពេញ 4Opera Android គាំទ្រពេញ បាទSafari គាំទ្រ iOS ពេញ 1Samsung Internet Android គាំទ្រពេញ 1.0nodejs គាំទ្រពេញ បាទ
  • I. ការធ្វើម្តងទៀតលើអារេពិតប្រាកដ
    1. សម្រាប់វិធីសាស្រ្តនីមួយៗ និងវិធីសាស្ត្រពាក់ព័ន្ធ
    2. សម្រាប់រង្វិលជុំ
    3. ការប្រើប្រាស់ត្រឹមត្រូវនៃ for...in loop
    4. សម្រាប់ ... នៃរង្វិលជុំ (ការប្រើប្រាស់ implicit of iterator)
    5. ការប្រើប្រាស់ឧបករណ៍បំលែងជាក់លាក់
  • II. ការធ្វើឡើងវិញលើវត្ថុដូចអារេ
    1. ការប្រើវិធីសាស្រ្តដើម្បីធ្វើឡើងវិញលើអារេពិតប្រាកដ
    2. បម្លែងទៅជាអារេពិតប្រាកដ
    3. កំណត់ចំណាំលើវត្ថុពេលដំណើរការ

I. ការធ្វើម្តងទៀតលើអារេពិតប្រាកដ

នៅពេលនេះ មានវិធីបីយ៉ាងក្នុងការធ្វើឡើងវិញលើធាតុនៃអារេពិតប្រាកដមួយ៖

  1. វិធីសាស្រ្ត Array.prototype.forEach ;
  2. បុរាណសម្រាប់រង្វិលជុំ
  3. "ត្រឹមត្រូវ" ត្រូវបានសាងសង់សម្រាប់ ... នៅក្នុងរង្វិលជុំ។

លើសពីនេះ ក្នុងពេលឆាប់ៗនេះ ជាមួយនឹងការមកដល់នៃស្តង់ដារ ECMAScript 6 (ES 6) ថ្មី វិធីសាស្រ្តពីរទៀតត្រូវបានរំពឹងទុក៖

  1. សម្រាប់ ... នៃរង្វិលជុំ (ការប្រើប្រាស់ implicit of iterator);
  2. ការប្រើប្រាស់ជាក់លាក់នៃ iterator ។

1. The forEach method and related method

ប្រសិនបើគម្រោងរបស់អ្នកត្រូវបានរចនាឡើងដើម្បីគាំទ្រលក្ខណៈនៃស្តង់ដារ ECMAScript 5 (ES5) នោះ អ្នកអាចប្រើការច្នៃប្រឌិតមួយរបស់វា - វិធីសាស្ត្រ forEach ។

ឧទាហរណ៍នៃការប្រើប្រាស់៖

var a = ["a", "b", "c"]; a.forEach(function(entry)( console.log(entry); ));

ជាទូទៅ ការប្រើប្រាស់ forEach តម្រូវឱ្យភ្ជាប់បណ្ណាល័យត្រាប់តាម es5-shim សម្រាប់កម្មវិធីរុករកដែលមិនគាំទ្រវិធីសាស្ត្រនេះពីដើម។ ទាំងនេះរួមមាន IE 8 និងមុននេះ ដែលនៅតែប្រើនៅកន្លែងខ្លះ។

អត្ថប្រយោជន៍របស់ forEach គឺថា មិនចាំបាច់ប្រកាសអថេរមូលដ្ឋានដើម្បីរក្សាទុកសន្ទស្សន៍ និងតម្លៃនៃធាតុអារេបច្ចុប្បន្នទេ ព្រោះពួកវាត្រូវបានបញ្ជូនដោយស្វ័យប្រវត្តិទៅមុខងារហៅត្រឡប់ជាអាគុយម៉ង់។

ប្រសិនបើអ្នកព្រួយបារម្ភអំពីតម្លៃដែលអាចហៅទៅទូរស័ព្ទត្រឡប់មកវិញនៅលើធាតុនីមួយៗ កុំបារម្ភ ហើយអានរឿងនេះ។

forEach ត្រូវបានរចនាឡើងដើម្បីរំលឹកឡើងវិញតាមរយៈធាតុទាំងអស់នៃអារេមួយ ប៉ុន្តែក្រៅពីវា ES5 ផ្តល់នូវវិធីសាស្រ្តមានប្រយោជន៍ជាច្រើនទៀតសម្រាប់ការធ្វើឡើងវិញតាមរយៈធាតុទាំងអស់ ឬមួយចំនួន បូកនឹងការអនុវត្តសកម្មភាពមួយចំនួនលើពួកវា៖

  • រាល់ - ត្រឡប់ពិត ប្រសិនបើសម្រាប់ធាតុនីមួយៗនៃអារេ ការហៅត្រឡប់ត្រឡប់តម្លៃដែលអាចបំប្លែងទៅជាពិត។
  • មួយចំនួន - ត្រឡប់ពិត ប្រសិនបើយ៉ាងហោចណាស់ធាតុមួយនៃអារេ ការហៅត្រឡប់ត្រឡប់តម្លៃដែលអាចបំប្លែងទៅជាពិត។
  • តម្រង - បង្កើតអារេថ្មីមួយដែលរួមបញ្ចូលធាតុទាំងនោះនៃអារេដើមដែលការហៅត្រឡប់មកវិញត្រឡប់ពិត។
  • map - បង្កើត​អារេ​ថ្មី​ដែល​មាន​តម្លៃ​ត្រឡប់​ដោយ​ការ​ហៅ​ត្រឡប់​វិញ។
  • កាត់បន្ថយ - កាត់បន្ថយអារេទៅតម្លៃតែមួយ អនុវត្តការហៅត្រឡប់ទៅធាតុអារេនីមួយៗជាវេន ដោយចាប់ផ្តើមពីដំបូង (អាចមានប្រយោជន៍សម្រាប់ការគណនាផលបូកនៃធាតុអារេ និងមុខងារសង្ខេបផ្សេងទៀត)។
  • កាត់បន្ថយស្តាំ - ដំណើរការស្រដៀងនឹងការកាត់បន្ថយ ប៉ុន្តែធ្វើម្តងទៀតតាមរយៈធាតុក្នុងលំដាប់បញ្ច្រាស។

2. សម្រាប់រង្វិលជុំ

ល្អសម្រាប់ច្បាប់:

var a = ["a", "b", "c"]; សន្ទស្សន៍ var; សម្រាប់ (សន្ទស្សន៍ = 0; សន្ទស្សន៍< a.length; ++index) { console.log(a); }

ប្រសិនបើប្រវែងនៃអារេគឺថេរពេញមួយរង្វិលជុំ ហើយរង្វិលជុំខ្លួនវាជាកម្មសិទ្ធិរបស់ផ្នែកសំខាន់នៃដំណើរការនៃកូដ (ដែលមិនទំនង) នោះអ្នកអាចប្រើកំណែ "ល្អបំផុត" សម្រាប់ការរក្សាទុកប្រវែងនៃ អារេ៖

var a = ["a", "b", "c"]; var index, len; សម្រាប់ (សន្ទស្សន៍ = 0, len = a.length; លិបិក្រម< len; ++index) { console.log(a); }

តាមទ្រឹស្តី កូដនេះគួរតែដំណើរការលឿនជាងលេខមុនបន្តិច។

ប្រសិនបើលំដាប់នៃធាតុមិនសំខាន់ នោះអ្នកអាចទៅបន្ថែមទៀតនៅក្នុងលក្ខខណ្ឌនៃការបង្កើនប្រសិទ្ធភាព និងកម្ចាត់អថេរសម្រាប់រក្សាទុកប្រវែងនៃអារេ ដោយផ្លាស់ប្តូរលំដាប់នៃការស្វែងរកទៅជាបញ្ច្រាស៖

var a = ["a", "b", "c"]; សន្ទស្សន៍ var; សម្រាប់ (សន្ទស្សន៍ = a.length - 1; index >= 0; --index) ( console.log(a); )

ទោះជាយ៉ាងណាក៏ដោយនៅក្នុងម៉ាស៊ីន JavaScript ទំនើប ហ្គេមបង្កើនប្រសិទ្ធភាពបែបនេះជាធម្មតាគ្មានន័យអ្វីទាំងអស់។

3. ការប្រើប្រាស់ត្រឹមត្រូវនៃ for...in loop

ប្រសិនបើអ្នកត្រូវបានណែនាំឱ្យប្រើ for...in loop សូមចាំថាការធ្វើម្តងទៀតលើអារេ មិនមែនជាអ្វីដែលវាត្រូវបានបម្រុងទុកសម្រាប់នោះទេ។ ផ្ទុយទៅនឹងការយល់ខុសទូទៅមួយ for...in loop មិនធ្វើម្តងទៀតលើ array indices ទេ ប៉ុន្តែជាតាមរយៈ properties ជាច្រើននៃ object មួយ។

ទោះយ៉ាងណាក៏ដោយ ក្នុងករណីខ្លះ ដូចជាការធ្វើម្តងទៀតលើ sparse arrays សម្រាប់...in អាចមានប្រយោជន៍ ដរាបណាអ្នកមានការប្រុងប្រយ័ត្ន ដូចដែលបានបង្ហាញក្នុងឧទាហរណ៍ខាងក្រោម៖

// a - អារេ sparse var a = ; a = "a"; a = "b"; a = "c"; សម្រាប់ (var key in a) (ប្រសិនបើ (a.hasOwnProperty(key) &&/^0$|^d*$/.test(key) && key<= 4294967294) { console.log(a); } }

ក្នុងឧទាហរណ៍នេះ ការត្រួតពិនិត្យចំនួនពីរត្រូវបានអនុវត្តនៅការបង្វិលរង្វិលជុំនីមួយៗ៖

  1. ថាអារេមានទ្រព្យសម្បត្តិផ្ទាល់ខ្លួនហៅថាកូនសោ (មិនត្រូវបានទទួលមរតកពីគំរូរបស់វាទេ)។
  2. សោនោះគឺជាខ្សែអក្សរដែលមានតំណាងទសភាគនៃចំនួនគត់ដែលតម្លៃរបស់វាតិចជាង 4294967294 ។ តើលេខចុងក្រោយមកពីណា? ពីនិយមន័យនៃសន្ទស្សន៍អារេនៅក្នុង ES5 ដែលបង្ហាញថាសន្ទស្សន៍ខ្ពស់បំផុតដែលធាតុនៅក្នុងអារេអាចមានគឺ: (2^32 - 2) = 4294967294 ។

ជាការពិតណាស់ការត្រួតពិនិត្យបែបនេះនឹងចំណាយពេលមិនចាំបាច់នៅពេលដំណើរការរង្វិលជុំ។ ប៉ុន្តែនៅក្នុងករណីនៃ sparse array វិធីសាស្ត្រនេះមានប្រសិទ្ធភាពជាង a for loop ព្រោះក្នុងករណីនេះមានតែធាតុទាំងនោះដែលត្រូវបានកំណត់យ៉ាងច្បាស់នៅក្នុង array ប៉ុណ្ណោះដែលត្រូវបានធ្វើម្តងទៀត។ ដូច្នេះ ក្នុងឧទាហរណ៍ខាងលើ មានតែ 3 ដដែលៗនឹងត្រូវបានអនុវត្ត (សម្រាប់សន្ទស្សន៍ 0, 10 និង 10000) - ធៀបនឹង 10001 នៅក្នុងរង្វិលជុំសម្រាប់។

ដើម្បីកុំឱ្យសរសេរកូដត្រួតពិនិត្យដ៏ស្មុគស្មាញបែបនេះ រាល់ពេលដែលអ្នកត្រូវការធ្វើម្តងទៀតតាមរយៈអារេ អ្នកអាចសរសេរវាជាមុខងារដាច់ដោយឡែកមួយ៖

អនុគមន៍ arrayHasOwnIndex(array, key) (return array.hasOwnProperty(key) &&/^0$|^d*$/.test(key) && key<= 4294967294; }

បន្ទាប់មកតួនៃរង្វិលជុំពីឧទាហរណ៍នឹងត្រូវបានកាត់បន្ថយយ៉ាងខ្លាំង:

សម្រាប់ (គន្លឹះក្នុង a) (ប្រសិនបើ (arrayHasOwnIndex(a, key)) ( console.log(a); ) )

លេខកូដពិនិត្យដែលបានពិភាក្សាខាងលើមានលក្ខណៈជាសកល សមរម្យសម្រាប់គ្រប់ករណីទាំងអស់។ ប៉ុន្តែជំនួសមកវិញ អ្នកអាចប្រើកំណែខ្លីជាងនេះ ទោះបីជាជាផ្លូវការមិនត្រឹមត្រូវទាំងស្រុងក៏ដោយ ប៉ុន្តែទោះជាយ៉ាងណាក៏សមរម្យសម្រាប់ករណីភាគច្រើន៖

សម្រាប់ (គន្លឹះក្នុង a) (ប្រសិនបើ (a.hasOwnProperty(key) && String(parseInt(key, 10)) === key) ( console.log(a); ))

4. សម្រាប់ ... នៃរង្វិលជុំ (ការប្រើប្រាស់ implicit of iterator)

ES6 ដែលនៅតែស្ថិតក្នុងស្ថានភាពព្រាង គួរតែណែនាំអ្នកសរសេរឡើងវិញទៅ JavaScript។

Iterator គឺ​ជា​ពិធីការ​ដែល​អនុវត្ត​ដោយ​វត្ថុ​ដែល​កំណត់​វិធី​ស្ដង់ដារ​មួយ​ដើម្បី​ទទួល​បាន​លំដាប់​នៃ​តម្លៃ (កំណត់​ឬ​គ្មាន​កំណត់)។
វត្ថុមួយមាន iterator ប្រសិនបើវាកំណត់វិធីសាស្ត្របន្ទាប់ () ដែលជាអនុគមន៍គ្មានអាគុយម៉ង់ដែលត្រឡប់វត្ថុដែលមានលក្ខណៈសម្បត្តិពីរ៖

  1. រួចរាល់ (ប៊ូលីន) - ពិតប្រសិនបើអ្នកសរសេរឡើងវិញបានឈានដល់ចុងបញ្ចប់នៃលំដាប់ដែលអាចធ្វើម្តងទៀតបាន។ បើមិនដូច្នោះទេតម្លៃគឺមិនពិត។
  2. តម្លៃ - កំណត់តម្លៃដែលត្រឡប់ដោយអ្នកសរសេរឡើងវិញ។ អាចនឹងមិនត្រូវបានកំណត់ (បាត់) ប្រសិនបើទ្រព្យសម្បត្តិដែលបានធ្វើគឺពិត។

វត្ថុដែលមានស្រាប់ជាច្រើន រួមទាំង អារេពិតប្រាកដមាន iterators តាមលំនាំដើម។ មធ្យោបាយដ៏សាមញ្ញបំផុតក្នុងការប្រើកម្មវិធី iterator លើអារេពិតប្រាកដគឺត្រូវប្រើថ្មីសម្រាប់... of construct ។

ឧទាហរណ៍នៃការប្រើប្រាស់សម្រាប់ ... នៃ៖

វ៉ាល់វ៉ាល់; var a = ["a", "b", "c"]; សម្រាប់ (val of a) ( console.log(val); )

ក្នុង​ឧទាហរណ៍​ខាង​លើ for... of loop ហៅ​ជា​ន័យ​ត្រង់​ថា Array object's iterator ដើម្បី​ទទួល​បាន​តម្លៃ​នីមួយៗ​នៃ array ។

5. ការ​ប្រើ​ប្រាស់ iterator ច្បាស់លាស់

Iterators ក៏អាចត្រូវបានប្រើយ៉ាងច្បាស់លាស់ផងដែរ ទោះជាយ៉ាងណាក៏ដោយ ក្នុងករណីនេះកូដកាន់តែស្មុគស្មាញបើប្រៀបធៀបទៅនឹង for... of loop ។ វាមើលទៅដូចនេះ៖

var a = ["a", "b", "c"]; var ធាតុ; while (!(entry = a.next()).done) ( console.log(entry.value); )

II. ការធ្វើឡើងវិញលើវត្ថុដូចអារេ

បន្ថែមពីលើអារេពិតប្រាកដនៅក្នុង JavaScript ក៏មានផងដែរ។ វត្ថុដូចអារេ . អ្វី​ដែល​ពួក​គេ​មាន​ដូច​គ្នា​នឹង​អារេ​ពិត​គឺ​ថា​ពួក​គេ​មាន​លក្ខណៈ​សម្បត្តិ​ប្រវែង និង​លក្ខណសម្បត្តិ​ដែល​មាន​ឈ្មោះ​ជា​លេខ​ដែល​ត្រូវ​នឹង​ធាតុ​នៃ​អារេ។ ឧទាហរណ៍រួមមាន DOM នៃការប្រមូល NodeList និង អាគុយម៉ង់ pseudo-array ដែលមាននៅក្នុងមុខងារ/វិធីសាស្រ្តណាមួយ។

1. ការប្រើវិធីសាស្រ្តដើម្បីធ្វើឡើងវិញលើអារេពិតប្រាកដ

យ៉ាងហោចណាស់ ភាគច្រើន ប្រសិនបើមិនមែនទាំងអស់ទេ វិធីសាស្ត្រនៃការធ្វើម្តងទៀតលើអារេពិតប្រាកដ អាចត្រូវបានប្រើដើម្បីធ្វើម្តងទៀតលើវត្ថុដូចអារេ។

for និង for... in constructs អាច​ត្រូវ​បាន​អនុវត្ត​ទៅ​វត្ថុ​ដូច​អារេ​ក្នុង​វិធី​ដូចគ្នា​នឹង​វា​ត្រូវ​បាន​អនុវត្ត​ទៅ​អារេ​ពិត។

forEach និងវិធីសាស្រ្ត Array.prototype ផ្សេងទៀតក៏អនុវត្តចំពោះវត្ថុដូចអារេផងដែរ។ ដើម្បីធ្វើដូច្នេះអ្នកត្រូវប្រើ Function.call ឬ Function.apply ។

ឧទាហរណ៍ ប្រសិនបើអ្នកចង់អនុវត្តសម្រាប់Each ទៅកាន់លក្ខណៈសម្បត្តិ childNodes នៃវត្ថុ Node នោះ អ្នកនឹងធ្វើវាដូចនេះ៖

Array.prototype.forEach.call(node.childNodes, function(child) ( // ធ្វើអ្វីមួយជាមួយវត្ថុកុមារ));

ដើម្បីធ្វើឱ្យល្បិចនេះងាយស្រួលប្រើឡើងវិញ អ្នកអាចប្រកាសសេចក្តីយោងទៅវិធីសាស្ត្រ Array.prototype.forEach ក្នុងអថេរដាច់ដោយឡែកមួយ ហើយប្រើវាជាផ្លូវកាត់៖

// (សន្មត់ថាកូដទាំងអស់ខាងក្រោមស្ថិតនៅក្នុងវិសាលភាពដូចគ្នា) var forEach = Array.prototype.forEach; // ... forEach.call(node.childNodes, function(child) ( // ធ្វើអ្វីមួយជាមួយវត្ថុកុមារ));

ប្រសិនបើវត្ថុដូចអារេមួយមានអ្នកសរសេរឡើងវិញ វាអាចត្រូវបានប្រើដោយជាក់លាក់ ឬដោយប្រយោលក្នុងការធ្វើម្តងទៀតលើវត្ថុក្នុងវិធីដូចគ្នានឹងអារេពិតប្រាកដ។

2. បំប្លែងទៅជាអារេពិតប្រាកដ

វាក៏មានវិធីសាមញ្ញបំផុតមួយទៀតផងដែរក្នុងការធ្វើឡើងវិញលើវត្ថុដូចអារេមួយ៖ បំប្លែងវាទៅជាអារេពិតប្រាកដ ហើយប្រើវិធីណាមួយដែលបានពិភាក្សាខាងលើសម្រាប់ធ្វើម្តងទៀតលើអារេពិតប្រាកដ។ សម្រាប់ការបំប្លែង អ្នកអាចប្រើវិធីសាស្ត្រ Array.prototype.slice ទូទៅ ដែលអាចត្រូវបានអនុវត្តចំពោះវត្ថុដែលស្រដៀងនឹងអារេណាមួយ។ នេះត្រូវបានធ្វើយ៉ាងសាមញ្ញ ដូចដែលបានបង្ហាញក្នុងឧទាហរណ៍ខាងក្រោម៖

Var trueArray = Array.prototype.slice.call(arrayLikeObject, 0);

ឧទាហរណ៍ ប្រសិនបើអ្នកចង់បំប្លែង NodeList collection ទៅជាអារេពិតប្រាកដ អ្នកត្រូវការកូដអ្វីមួយដូចនេះ៖

Var divs = Array.prototype.slice.call(document.querySelectorAll("div"), 0);

3. កំណត់ចំណាំលើវត្ថុពេលដំណើរការ

ប្រសិនបើអ្នកអនុវត្តវិធីសាស្រ្ត Array.prototype ទៅនឹងវត្ថុដែលកំពុងដំណើរការ (ដូចជាការប្រមូល DOM) នោះអ្នកគួរតែដឹងថាវិធីសាស្ត្រទាំងនេះមិនត្រូវបានធានាដើម្បីដំណើរការបានត្រឹមត្រូវនៅក្នុងបរិស្ថានពេលដំណើរការទាំងអស់ (រួមទាំងកម្មវិធីរុករក)។ វាអាស្រ័យលើឥរិយាបថរបស់វត្ថុជាក់លាក់មួយនៅក្នុងបរិយាកាសប្រតិបត្តិជាក់លាក់មួយ ឬច្បាស់ជាងនេះទៅទៀត អំពីរបៀបដែលប្រតិបត្តិការអរូបី HasProperty ត្រូវបានអនុវត្តនៅក្នុងវត្ថុនេះ។ បញ្ហាគឺថាស្តង់ដារ ES5 ខ្លួនវាអនុញ្ញាតឱ្យមានលទ្ធភាពនៃវត្ថុដែលប្រព្រឹត្តមិនត្រឹមត្រូវទាក់ទងនឹងប្រតិបត្តិការនេះ (សូមមើល§8.6.2) ។

ដូច្នេះ វាមានសារៈសំខាន់ណាស់ក្នុងការធ្វើតេស្តប្រតិបត្តិការនៃវិធីសាស្ត្រ Array.prototype នៅក្នុងបរិយាកាសដំណើរការនីមួយៗ (កម្មវិធីរុករកតាមអ៊ីនធឺណិត) ដែលអ្នកមានគម្រោងប្រើកម្មវិធីរបស់អ្នក។