Объект дээрх шинж чанаруудыг давтах. JavaScript дахь массиваар дамжуулан давталт хийх бүх аргууд Ажиллах үеийн объектуудын тухай тэмдэглэл

The тус бүр()арга нь массивын элемент бүрт өгөгдсөн функцийг нэг удаа гүйцэтгэдэг.

Энэхүү интерактив жишээний эх сурвалж нь GitHub репозиторид хадгалагддаг. Хэрэв та интерактив жишээнүүдийн төсөлд хувь нэмрээ оруулахыг хүсвэл https://github.com/mdn/interactive-examples хуудсыг хуулж аваад бидэнд татах хүсэлт илгээнэ үү.

Синтакс

arr .forEach(буцаан дуудах(одоогийнҮнэ [, индекс [, массив]]) [, thisArg ]);

Параметрүүд

буцаан дуудах Элемент тус бүр дээр гурван аргумент авч гүйцэтгэх функц: currentValue Массив дотор боловсруулж байгаа одоогийн элемент. index Нэмэлт Массив дотор боловсруулж байгаа одоогийн элементийн индекс. массив Нэмэлт ForEach() массивыг дуудсан. thisArg Нэмэлт утгыг буцааж дуудлагыг гүйцэтгэх үед ашиглах боломжтой.

Буцах утга

Тодорхойлолт

forEach() нь өгөгдсөн буцаан дуудлагын функцийг массив дахь элемент бүрийг өсөх дарааллаар нэг удаа дууддаг. Устгасан эсвэл эхлээгүй байгаа (жишээ нь сийрэг массивууд дээр) индексийн шинж чанаруудын хувьд энэ нь дуудагддаггүй.

Буцах дуудлагыг гурван аргументаар дууддаг:

  1. элементийн утга
  2. элементийн индекс
  3. дамжуулж буй массив объект

Хэрэв thisArg параметрийг forEach() -д өгсөн бол энэ утгыг буцаан дуудлагын утга болгон ашиглах болно. Энэ утгыг буцааж дуудах замаар ажиглах боломжтой бөгөөд үүнийг функцээр хардаг ердийн дүрмийн дагуу тодорхойлно.

forEach()-ийн боловсруулсан элементүүдийн мужийг буцаан дуудлагын эхний дуудлагын өмнө тохируулна. forEach() руу залгаж эхэлсний дараа массивт хавсаргасан элементүүдэд буцаж залгахад зочлохгүй. Хэрэв массивын одоо байгаа элементүүдийг өөрчилсөн эсвэл устгасан бол буцаан залгахад дамжуулсан утга нь forEach() тэдгээрт зочлох үеийн утга байх болно; зочлохоос өмнө устгасан элементүүдэд зочлохгүй. Хэрэв давталтын явцад аль хэдийн зочилсон элементүүдийг устгавал (жишээ нь shift() ашиглан) дараа дараагийн элементүүд алгасах болно - доорх жишээг үзнэ үү.

forEach() нь массивын элемент бүрт нэг удаа буцаан дуудах функцийг гүйцэтгэдэг; map() эсвэл reduce()-ээс ялгаатай нь энэ нь үргэлж тодорхойгүй утгыг буцаадаг бөгөөд гинжлэх боломжгүй. Ердийн хэрэглээний тохиолдол бол гинжин хэлхээний төгсгөлд гаж нөлөө үзүүлэх явдал юм.

forEach() нь дуудагдсан массиваа мутаци хийхгүй (хэдийгээр дуудагдсан тохиолдолд буцаан дуудлагыг хийж болно).

ForEach() давталтыг зогсоох буюу таслах нь онцгой тохиолдол гаргахаас өөр арга байхгүй. Хэрэв танд ийм үйлдэл хэрэгтэй бол forEach() арга нь буруу хэрэгсэл юм.

Эрт цуцлалтыг дараахь байдлаар хийж болно.

Массивын аргууд: every() , some() , find() болон findIndex() нь массивын элементүүдийг үнэн утгыг буцаадаг предикатаар шалгадаг бөгөөд цаашид давталт шаардлагатай эсэхийг тодорхойлох.

Жишээ

Эхлээгүй утгуудын хувьд үйлдэл байхгүй (сийрэг массив)

const arraySparse =; numCallbackRuns = 0 гэж үзье; arraySparse.forEach(функц(элемент)( console.log(element); numCallbackRuns++; )); console.log("numCallbackRuns: ", numCallbackRuns); // 1 // 3 // 7 // numCallbackRuns: 3 // тайлбар: Таны харж байгаагаар 3-аас 7-н хоорондох дутуу утга нь буцаан дуудах функцийг үүсгээгүй.

For давталтыг forEach болгон хөрвүүлж байна

const items = ["зүйл1", "зүйл2", "зүйл3"]; const copy =; // өмнө нь (i=0; i Массивын агуулгыг хэвлэх

Жич:Массивын агуулгыг консол дээр харуулахын тулд та массивын форматтай хувилбарыг хэвлэх console.table()-г ашиглаж болно. Дараах жишээ нь үүнийг хийх өөр аргыг forEach() ашиглан харуулж байна.

Дараах код нь массив дахь элемент бүрийн мөрийг бүртгэдэг:

Функц logArrayElements(element, index, array) ( console.log("a[" + index + "] = " + element); ) // //-д тухайн байрлалд зүйл байхгүй тул 2-р индексийг алгассан болохыг анхаарна уу. массив. .forEach(logArrayElements); // лог: // a = 2 // a = 5 // a = 9

thisArg-г ашиглаж байна

Дараах (хиймэл) жишээ нь массив дахь оруулга бүрээс объектын шинж чанарыг шинэчилдэг:

Функц Counter() ( this.sum = 0; this.count = 0; ) Counter.prototype.add = function(array) ( array.forEach(function(entry)) ( this.sum += entry; ++ this.count) ; ), энэ // ^---- Тэмдэглэл); const obj = шинэ Тоолуур(); obj.add(); obj.count; // 3 obj.sum; // 16

thisArg параметр (энэ) нь forEach() -д өгөгдсөн тул түүнийг дуудах бүртээ буцааж залгахад дамжуулж, энэ утга болгон ашиглах болно.

Объект хуулах функц

Дараах код нь өгөгдсөн объектын хуулбарыг үүсгэдэг. Объектийн хуулбарыг үүсгэх янз бүрийн арга байдаг; Дараах нь зөвхөн нэг арга бөгөөд ECMAScript 5 Object.* мета өмчийн функцийг ашиглан Array.prototype.forEach() хэрхэн ажилладгийг тайлбарлахын тулд толилуулж байна.

Function copy(obj) ( const copy = Object.create(Object.getPrototypeOf(obj)); const propNames = Object.getOwnPropertyNames(obj); propNames.forEach(function(name) (const desc = Object.getOwnPropertyDescriptor(obj, нэр) ); Object.defineProperty(хуулбар, нэр, тайлбар )); const obj2 = copy(obj1); // obj2 одоо obj1 шиг харагдаж байна

Хэрэв давталтын явцад массив өөрчлөгдсөн бол бусад элементүүдийг алгасаж болно.

Дараах жишээнд "нэг", "хоёр", "дөрөв" гэсэн бүртгэлүүд байна. "хоёр" is reached, the first entry of the whole array is shifted off, which results 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() does not make a copy of the array before iterating.!}

Var үгс = ["нэг", "хоёр", "гурав", "дөрөв"]; үг.forEach(функц(үг) ( консол.лог(үг); хэрэв (үг === "хоёр") (word.shift(); ) )); // нэг // хоёр // дөрөв

Массивыг тэгшлэх

Дараах жишээ нь зөвхөн суралцах зорилгоор энд байна. Хэрэв та суулгасан аргуудыг ашиглан массивыг тэгшлэхийг хүсвэл Array.prototype.flat()-г ашиглаж болно (ES2019-ийн нэг хэсэг байх бөгөөд зарим хөтөч дээр аль хэдийн хэрэгжсэн).

/** * Нэг хэмжээст массив дахь дамжуулсан массивыг тэгшлэнэ * * @params (массив) arr * @returns (массив) */ функц flatten(arr) ( const result = arr.forEach((i) => ( if (Массив. isArray(i)) ( result.push(...flatten(i)) ) else ( result.push(i) )) буцаах үр дүн ) // Хэрэглээний const асуудал = , 8, 9]] flatten(problem) / /

Үзүүлэлтүүд

Тодорхойлолт Статус Сэтгэгдэл
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ДуурьСафариAndroid вэб үзэхAndroid-д зориулсан ChromeAndroid-д зориулсан FirefoxAndroid-д зориулсан OperaiOS дээрх SafariSamsung интернетNode.js
тус бүрChrome бүрэн дэмжлэг ТиймEdge Бүрэн дэмжлэг 12Firefox Бүрэн дэмжлэг 1.5IE Бүрэн дэмжлэг 9Opera Бүрэн дэмжлэг ТиймSafari бүрэн дэмжлэг ТиймWebView Android Бүрэн дэмжлэг ТиймChrome Android Бүрэн дэмжлэг ТиймFirefox Android Бүрэн дэмжлэг 4Opera Android Бүрэн дэмжлэг ТиймSafari iOS Бүрэн дэмжлэг ТиймSamsung Internet Android Бүрэн дэмжлэг Тиймnodejs Бүрэн дэмжлэг Тийм

2016 оны гуравдугаар сарын 12

Орчин үеийн JavaScript-д массиваар давтахад ашигладаг "давталтын аргууд" гэж нэрлэгддэг. Энэ зааварт бид дараах аргуудыг авч үзэх болно.

тус бүр

.forEach() аргыг ашиглана харгис хүчмассив. Энэ нь буцаан дуудах функц гэж нэрлэгддэг функцийг дууддаг бөгөөд үүний тусламжтайгаар i, arr гэсэн гурван параметрийг дамжуулдаг бөгөөд үүнд:

  • item - массив элемент;
  • i бол массивын серийн дугаар;
  • arr нь давтагдах ёстой массив өөрөө юм.

Энэ аргыг хэрхэн ашиглахыг ойлгоход хялбар болгохын тулд жишээг авч үзье.

Var user="admin","pass",31]; user.forEach(функц(зүйл,i,хэрэглэгч)( alert("Зүйлийн дугаар" + i + " : " + зүйл); ));

Энэ аргыг ердийн for давталтын оронд ашиглаж болно.

шүүлтүүр

Шүүлтүүр хийхэд .filter() аргыг ашигладаг бөгөөд энэ нь мөн буцааж дуудах функцийг ашигладаг боловч массив дахь элементүүд үнэн утгатай тохирч байвал шинэ массив үүсгэдэг:

Var arr=; var newArr=arr.filter(функц(тоо)( дугаар буцаана< 0; }); alert(newArr); // выведет -34,-4

Энэ жишээн дээр тоонууд нь сөрөг утгатай эсэхийг шалгасан бөгөөд гаралт нь эдгээр утгууд бүхий шинэ массив юм. Та өөрийн нөхцөлийг гаргаж ирж болно, эдгээр нь заавал тоо байх албагүй.

бүр/зарим

Эдгээр хоёр арга нь хоорондоо төстэй бөгөөд хоёулаа массивыг шалгахад ашиглагддаг, зөвхөн арга .бүр()Хэрэв массив дахь бүх утга нь заасан нөхцөл, аргатай таарч байвал үнэнийг буцаана .зарим()Хэрэв дор хаяж нэг утга нөхцөлтэй тохирч байвал үнэнийг буцаана:

Var arr=; alert(arr.every(функц(тоо))( дугаарыг буцаана< 0; })); // выведет false

Дээрх жишээн дээр бид ашигласан нь тодорхой байна гэж найдаж байна зарим аргатэгвэл бид худал биш үнэн утгыг харуулах байсан.

газрын зураг

.map() арга нь массивыг хувиргаж, түүнээс шинийг авдаг. Буцах функцийг дуудах замаар бүх зүйл хийгддэг:

Var arr=; var newArr=arr.map(функц(тоо)( буцах тоо*2; )); анхааруулга (newArr);

Энэ жишээнд бид хоёр дахин нэмэгдсэн элементийн утгууд бүхий шинэ массив хүлээн авлаа.

багасгах/багаруулах Зөв

Бидний авч үзэх хамгийн сүүлийн аргууд бол багасгах ба багасгах Баруун. Тэдгээрийг массивын элемент бүрийг боловсруулахын зэрэгцээ завсрын үр дүнг хадгалахад ашигладаг. Арга нь элемент бүрийг зүүнээс баруун тийш давтдаг бол reductionRight нь эсрэгээр хийдэг. Бусад аргуудаас ялгаатай нь буцаан дуудах функцээс гадна анхдагч утгыг энд зааж өгсөн болно - "анхны утга". Дээрээс нь буцаан залгах функц нь "завсрын үр дүнг" тодорхойлдог - өмнөх үнэ цэнэТэгээд одоогийн зүйл- массивын одоогийн элемент.

Нэг жишээг харцгаая:

Функц getSums(arr) ( var үр дүн = ; if (!arr.length) үр дүнг буцаана; var totalSum = arr.reduceRight(функц(нийлбэр, зүйл) (үр дүн.түлхэх(нийлбэр); нийлбэр + зүйл; )); үр дүн .push(totalSum) дохиог буцаах(getSums()); // 1,3,6,10,15

Энэ жишээнд юу болсон бэ? Бид өмнөх элементүүдийн нийлбэрээс үүссэн элементүүдтэй шинэ массив авах боломжийг олгодог функцийг бүтээсэн. Түүнээс гадна элементүүдийн тайлан нь төгсгөлөөс ирдэг. Массив дахь элементүүдийн нийлбэрийг тооцоолох функцийг бий болгосон энгийн жишээ энд байна:

GetSum(arr) функц ( var үр дүн = arr.reduce(функц(нийлбэр, одоогийн) ( нийлбэр буцаах + одоогийн )); үр дүнг буцаах; ); анхааруулга(getSum()); Шошго:

Сайн уу? Сүүлийн хичээлээр бид объект гэж юу вэ, яагаад хэрэгтэй вэ гэдгийг авч үзсэн бөгөөд өнөөдөр бид объектын шинж чанаруудтай хэрхэн ажиллах, эдгээр бүх шинж чанаруудыг хэрхэн ангилах талаар авч үзэх болно. Эдгээр зорилгын үүднээс for..in өмчийн давталтыг ашигладаг (та JavaScript дээр давталтын талаар уншиж болно).

...-д давталт хийх

Синтакс:

For (obj-д түлхүүр) ( /* ... obj-тэй үйлдэл ... */ )

For..in давталт нь obj объектын шинж чанаруудыг дараалан давтаж, шинж чанар бүрийн нэрийг түлхүүрт бичнэ.

Хувьсагчийг for циклд зарлах (obj дахь var түлхүүр)

Энэ гогцоонд та гол хувьсагчийг зарлаж болно:

For (цэс1 дэх var товчлуур) ( // ... )

For... in давталт ашиглан объектын шинж чанарыг давтах жишээг харцгаая:

Var цэс = (өргөн: 400, өндөр: 300, гарчиг: "Миний цэс" ); for (цэс дэх var key) ( // энэ код нь тухайн объектын шинж чанар тус бүр дээр ажиллах болно // .. мөн шинж чанарын нэр болон түүний утгыг харуулах болно alert("Түлхүүр: " + түлхүүр + " утга: " + цэс) )

Жишээн дээр бид дөрвөлжин хаалттай цэсийг ашигласанд анхаарлаа хандуулахыг хүсч байна. Учир нь хэрэв бид хувьсагч дотор өмчийн нэрийг хадгалвал бид зөвхөн дөрвөлжин хаалтанд хандах боломжтой, харин цэгээр нэвтрэх боломжгүй.

...-ийн давталт

Мөн объектууд болон массивуудыг дамжих шинэ гогцоо бий. Түүний синтакс нь for...in давталттай маш төстэй боловч ялгаа нь массивын түлхүүр эсвэл индексийг гаргадаггүй, харин утгуудыг гаргадаг. Энд нэг жишээ байна:

Var цэс = (өргөн: 400, өндөр: 300, гарчиг: "Миний цэс" ); for (var key of menu) ( // энэ код нь тухайн объектын шинж чанар бүрт ажиллах болно // ..болон шинж чанарын утгыг харуулдаг alert("value: " + key +","); //400, 300, "Миний цэс")

Объект дахь шинж чанаруудын тоо

Гэхдээ объектын шинж чанаруудын тоог мэдэх шаардлагатай бол яах вэ? Би яаж үүнийг хийх вэ?

Харамсалтай нь энэ асуудлыг шийдэх бэлэн шийдэл байхгүй байна.

Хамгийн хялбар арга бол шинж чанаруудыг давтаж, дараах байдлаар тооцоолох явдал юм.

Var цэс = (өргөн: 400, өндөр: 300, гарчиг: "Миний цэс" ); var count = 0; for (цэс дэх var key) ( count++; ) alert("Нийт шинж чанар: " + count);

Үр дүн

  • Объектын шинж чанарыг давтахын тулд түлхүүрийн гогцоо ашигладаг: for (obj дахь түлхүүр).

Даалгаврууд

Объект хоосон эсэхийг тодорхойлох

Хэрэв объект ямар ч шинж чанаргүй бол үнэн, ядаж нэг шинж чанар байвал худал буцаах isEmptyObject(obj) функцийг үүсгэ.

Энэ нь дараах байдлаар ажиллах ёстой.

Function isEmptyObject(obj) ( /* таны код */ ) var obj = (); анхааруулга(isEmptyObject(obj)); // үнэн obj["8:30"] = "өсөх"; анхааруулга(isEmptyObject(obj)); // худал

Бүх объектын шинж чанарын арифметик дундажийг тооцоол

Цалинтай цалингийн объект байгаа. Бүх цалингийн арифметик дундажийг харуулах код бич.
Хэрэв объект хоосон бол үр дүн нь 0 байх ёстой.
Жишээлбэл.

Энэ нь дараах байдлаар ажилладаг.

// ECMASCRIPT 2015+ ШААРДЛАГАТАЙ var s, myStringArray = ["Сайн уу", "Дэлхийн"]; for (s of myStringArray) ( // ... s-ээр ямар нэг зүйл хийх ... )

ECMAScript 2015 нь let болон const бүхий блок-хүрээтэй хувьсагчдыг өгдөг тул илүү сайн:

// ECMASCRIPT 2015+ ШААРДЛАГА БАЙНА const myStringArray = ["Сайн уу", "Дэлхий"]; for (const s of myStringArray) ( // ... s-ээр ямар нэг зүйл хийх ... ) // s энд тодорхойгүй болсон.

Сийрэг массивуудын тухай тэмдэглэл: JavaScript дахь массив нь үнэндээ түүний уртад заасан олон элементийг хадгалахгүй байж болно; Энэ мэдээлэгдсэн тоо нь тухайн утгыг хадгалсан хамгийн дээд индексээс ердөө нэг их байна. Хэрэв массив нь урт нь заасан хэмжээнээс цөөн элемент агуулж байвал түүнийг сийрэг гэж нэрлэдэг. Жишээлбэл, зөвхөн 3, 12, 247 индекст элементүүдтэй массив байх нь бүрэн хууль ёсны юм; Ийм массивын уртыг 248 гэж тодорхойлсон боловч үнэндээ энэ нь зөвхөн 3 утгыг хадгалдаг. Хэрэв та өөр индексийн элементэд хандахыг оролдвол массив нь тодорхойгүй утгатай болно. Тиймээс та массивыг "давтахыг" хүсэх үед танд хариулах шаардлагатай асуулт гарч ирнэ: та ямар нэг дутуу элементийн хувьд тодорхойлогдоогүй процессын уртаар заасан бүх хүрээг давтахыг хүсэж байна уу, эсвэл зөвхөн элементүүд үнэхээр байгаа юу? Хоёр аргын хувьд олон програмууд байдаг; Энэ нь массивыг юунд ашиглаж байгаагаас л хамаарна.

Хэрэв та for .. of -тэй массив дээр давталт хийвэл давталтын их биеийг уртаар гүйцэтгэх ба массив дотор байхгүй элементүүдийн хувьд давталтын удирдлагын хувьсагчийг тодорхойгүй болгож тохируулна. Таны "ямар нэгэн зүйл хийх" кодын нарийн ширийн зүйлээс хамааран энэ зан үйл нь таны хүссэн зүйл байж болох ч хэрэв энэ нь таны хүссэн зүйл биш бол та өөр арга хэрэглэх хэрэгтэй.

Мэдээжийн хэрэг, зарим хөгжүүлэгчид ямар нэг шалтгааны улмаас JavaScript-ийн ...-ын ...-д хараахан дэмжигдээгүй хувилбарыг онилж байгаа тул өөр арга хэрэглэхээс өөр сонголт байхгүй.

Таны JavaScript-ийн хэрэгжилт ECMAScript-ийн техникийн үзүүлэлтийн өмнөх хувилбартай (жишээ нь, Internet Explorer-ийн 9-өөс өмнөх хувилбаруудыг оруулаагүй) нийцэж байгаа бол та давталтын оронд Array#forEach давталтын аргыг ашиглаж болно. Энэ тохиолдолд та массив дахь элемент бүрт дуудагдах функцийг дамжуулна:

Var myStringArray = [ "Сайн уу", "Дэлхий" ]; myStringArray.forEach(функц(ууд) ( // ... s-ээр ямар нэг зүйл хийх ... ));

.forEach нь ...-аас ялгаатай нь зөвхөн утгыг агуулсан элементүүдийн функцийг дууддаг. Хэрэв бид гурван элементтэй, 248 урттай таамагласан массиваа дамжуулбал энэ нь функцийг 248 удаа биш гуравхан удаа дуудна. Энэ нь мөн дутуу элементүүд болон үнэндээ тодорхойгүй гэж тохируулагдсан элементүүдийг ялгадаг; Сүүлчийн хувьд тодорхойгүй утгыг аргумент болгон дамжуулж функцийг дуудсан хэвээр байх болно. Хэрэв та сийрэг массивуудыг ингэж зохицуулахыг хүсэж байгаа бол таны орчуулагч ...-ын хувьд дэмждэг байсан ч .forEach нь явах арга зам байж болох юм.

JavaScript-ийн бүх хувилбарт ажилладаг эцсийн сонголт бол тодорхой тооны давталт юм. Та зүгээр л уртаас 0-ээс нэг хүртэл тоолж, тоологчийг индекс болгон ашиглана. Үндсэн давталт дараах байдлаар харагдаж байна.

Энэ аргын нэг давуу тал нь та сийрэг массивуудыг хэрхэн зохицуулахаа сонгох боломжтой юм; Дээрх код нь давталтын биеийг бүтэн уртаар ажиллуулна. Хэрэв та зөвхөн .forEach гэх мэт сийрэг массивын бодит элементүүдийг боловсруулахыг хүсвэл индекст энгийн шалгалт нэмж болно:

Var i, s, myStringArray = [ "Сайн уу", "Дэлхийн" ], len = myStringArray.length; хувьд (i=0; i

Локал хувьсагчид уртын утгыг оноох нь (бүтэн myStringArray.length илэрхийлэлийг давталтын нөхцөлд оруулахаас эсрэгээр) шинж чанарын хайлтыг дуустал нь алгасдаг тул гүйцэтгэлд ихээхэн нөлөөлнө; Миний машин дээр Rhino ашиглах үед хурд нь 43% байна.

Урт кэшийг давталтыг эхлүүлэх заалтад дараах байдлаар хийж байгааг харж болно.

Var i, len, myStringArray = [ "Сайн уу", "Дэлхий" ]; for (len = myStringArray.length, i=0; i

Бусдын дурдсан синтакс дахь for ... нь объектын шинж чанарыг давтахад ашиглагддаг; JavaScript дахь массив нь зөвхөн тоон шинж чанарын нэртэй объект (мөн автоматаар шинэчлэгдсэн уртын шинж чанар) тул та онолын хувьд массивыг түүгээр давтаж болно. Гэхдээ асуудал бол энэ нь зөвхөн тоон шинж чанарын утгуудаар хязгаарлагдахгүй (аргууд ч гэсэн жинхэнэ утга нь хаагдах шинж чанарууд гэдгийг санаарай), мөн тоон дарааллаар давтагдах нь баталгаатай биш юм. Иймд синтакс дахь for ...-г массиваар давталт хийхэд ашиглаж болохгүй.

  • I. Бодит массивууд дээр давталт хийх
    1. forEach арга болон холбогдох аргууд
    2. for гогцоо
    3. for...in давталтыг зөв ашиглах
    4. for... of loop (давтагчийг далд ашиглах)
    5. Давталтыг тодорхой ашиглах
  • II. Массивтай төстэй объектуудыг давтах
    1. Бодит массивуудыг давтах аргуудыг ашиглах
    2. Бодит массив руу хөрвүүлэх
    3. Ажиллах үеийн объектуудын тухай тэмдэглэл

I. Бодит массивууд дээр давталт хийх

Одоогийн байдлаар бодит массивын элементүүдийг давтах гурван арга бий:

  1. арга Array.prototype.forEach ;
  2. сонгодог for loop
  3. for... in loop-д "зөв" бүтээгдсэн.

Нэмж дурдахад удалгүй шинэ ECMAScript 6 (ES 6) стандарт гарч ирснээр өөр хоёр аргыг ашиглах төлөвтэй байна.

  1. for... of гогцоо (давтагчийг далд ашиглах);
  2. давталтыг тодорхой ашиглах.

1. forEach арга болон холбогдох аргууд

Хэрэв таны төсөл ECMAScript 5 (ES5) стандартын онцлогуудыг дэмжихээр бүтээгдсэн бол та түүний шинэлэг зүйлүүдийн нэг болох forEach аргыг ашиглаж болно.

Хэрэглээний жишээ:

Var a = ["a", "b", "c"]; a.forEach(функц(оруулга) ( консол.лог(оруулга); ));

Ерөнхийдөө forEach-ийг ашиглах нь энэ аргыг дэмждэггүй хөтчүүдэд es5-shim эмуляцийн санг холбох шаардлагатай. Эдгээрт IE 8 болон түүнээс өмнөх хувилбарууд багтсан бөгөөд тэдгээр нь одоо ч зарим газар ашиглагдаж байна.

ForEach-ийн давуу тал нь тухайн массивын элементийн индекс болон утгыг хадгалахын тулд локал хувьсагчдыг зарлах шаардлагагүй, учир нь тэдгээр нь автоматаар буцаан дуудах функцэд аргумент хэлбэрээр шилждэг.

Хэрэв та элемент бүр дээр дахин дуудлага хийх боломжтой гэж санаа зовж байгаа бол санаа зовох хэрэггүй бөгөөд үүнийг уншина уу.

forEach нь массивын бүх элементүүдийг давтахад зориулагдсан боловч үүнээс гадна ES5 нь бүх эсвэл зарим элементийг давтах хэд хэдэн ашигтай аргуудыг санал болгодог бөгөөд тэдгээр дээр зарим үйлдлийг гүйцэтгэдэг:

  • every - массивын элемент бүрийн хувьд буцаан дуудлагыг үнэн болгож хувиргах утгыг буцаавал үнэнийг буцаана.
  • зарим - массивын ядаж нэг элементийн хувьд буцаан дуудах нь үнэн рүү хөрвүүлэх боломжтой утгыг буцаавал үнэнийг буцаана.
  • filter - буцаан дуудлагыг үнэн гэж буцаадаг анхны массивын элементүүдийг агуулсан шинэ массив үүсгэдэг.
  • газрын зураг - буцааж дуудлагын дагуу буцаасан утгуудаас бүрдэх шинэ массив үүсгэдэг.
  • багасгах - массивыг нэг утга болгон бууруулж, эхнийхээс эхлэн массивын элемент бүрд ээлжлэн дуудлагыг ашиглана (массивын элементүүд болон бусад хураангуй функцуудын нийлбэрийг тооцоолоход хэрэг болно).
  • reduceRight - багасгахтай төстэй ажилладаг боловч урвуу дарааллаар элементүүдээр дамждаг.

2. For гогцоо

Хуучны дүрэм журам:

Var a = ["a", "b", "c"]; var индекс; хувьд (индекс = 0; индекс< a.length; ++index) { console.log(a); }

Хэрэв массивын урт нь давталтын туршид тогтмол бөгөөд гогцоо өөрөө кодын гүйцэтгэлийн чухал хэсэгт хамаарах бол (энэ нь магадлал багатай) бол массивын уртыг хадгалах "илүү оновчтой" хувилбарыг ашиглаж болно. :

Var a = ["a", "b", "c"]; var index, len; for (индекс = 0, len = a.length; индекс< len; ++index) { console.log(a); }

Онолын хувьд энэ код өмнөхөөсөө арай хурдан ажиллах ёстой.

Хэрэв элементүүдийн дараалал чухал биш бол та оновчлолын хувьд цаашаа явж, массивын уртыг хадгалах хувьсагчаас салж, хайлтын дарааллыг урвуу болгон өөрчилж болно.

Var a = ["a", "b", "c"]; var индекс; for (индекс = a.length - 1; index >= 0; --index) ( console.log(a); )

Гэсэн хэдий ч орчин үеийн JavaScript хөдөлгүүрүүдэд ийм оновчлолын тоглоомууд ихэвчлэн юу ч биш юм.

3. for...in давталтыг зөв ашиглах

Хэрэв танд for... in давталтыг ашиглахыг зөвлөж байгаа бол массивыг давтах нь энэ нь зориулагдаагүй гэдгийг санаарай. Түгээмэл буруу ойлголтоос ялгаатай нь for... in давталт нь массивын индексүүдийг давтахгүй, харин объектын тоолж болох шинж чанаруудаар дамждаг.

Гэсэн хэдий ч, сийрэг массивуудыг давтах гэх мэт зарим тохиолдолд for...in нь доорх жишээн дээр харуулсны дагуу урьдчилан сэргийлэх арга хэмжээ авсан тохиолдолд ашигтай байж болно.

// a - сийрэг массив var a = ; a = "a"; a = "b"; a = "c"; for (a-д байгаа var key) ( if (a.hasOwnProperty(key) && /^0$|^d*$/.test(key) && түлхүүр<= 4294967294) { console.log(a); } }

Энэ жишээнд давталтын давталт бүрт хоёр шалгалтыг хийж байна:

  1. массив нь түлхүүр гэж нэрлэгддэг өөрийн өмчтэй (прототипээс нь өвлөгдөөгүй).
  2. тэр түлхүүр нь утга нь 4294967294-ээс бага бүхэл тооны аравтын дүрслэл агуулсан мөр юм. Сүүлийн тоо хаанаас ирсэн бэ? ES5 дахь массивын индексийн тодорхойлолтоос харахад массив дахь элементийн байж болох хамгийн өндөр индекс нь: (2^32 - 2) = 4294967294 .

Мэдээжийн хэрэг, ийм шалгалт нь гогцоог гүйцэтгэхэд шаардлагагүй цаг хугацаа шаардах болно. Харин сийрэг массивын хувьд энэ арга нь for давталтаас илүү үр дүнтэй байдаг, учир нь энэ тохиолдолд зөвхөн массив дотор тодорхой тодорхойлогдсон элементүүдийг давтдаг. Тиймээс, дээрх жишээнд зөвхөн 3 давталт хийгдэх болно (0, 10 ба 10000 индексийн хувьд) - for давталт дахь 10001-тэй харьцуулахад.

Массиваар давтагдах бүрт ийм төвөгтэй шалгах код бичихгүйн тулд та үүнийг тусдаа функц болгон бичиж болно.

Функц arrayHasOwnIndex(массив, түлхүүр) ( буцах array.hasOwnProperty(key) && /^0$|^d*$/.test(түлхүүр) && түлхүүр<= 4294967294; }

Дараа нь жишээн дээрх гогцооны бие мэдэгдэхүйц багасах болно.

For (a-д байгаа түлхүүр) ( if (arrayHasOwnIndex(a, key)) ( console.log(a); ) )

Дээр дурдсан шалгах код нь бүх нийтийнх бөгөөд бүх тохиолдолд тохиромжтой. Харин үүний оронд та богино хувилбарыг ашиглаж болно, гэхдээ албан ёсоор бүрэн зөв биш боловч ихэнх тохиолдолд тохиромжтой:

For (a-д байгаа түлхүүр) ( if (a.hasOwnProperty(key) && String(parseInt(key, 10)) === key) ( console.log(a); ) )

4. For... of loop (даврагчийн далд хэрэглээ)

Ноорог төлөвт байгаа ES6 нь давталтуудыг JavaScript-д нэвтрүүлэх ёстой.

Давтагч Энэ нь утгын дарааллыг (хязгааргүй эсвэл хязгааргүй) олж авах стандарт аргыг тодорхойлсон объектоор хэрэгжүүлсэн протокол юм.
Объект нь хоёр шинж чанартай объектыг буцаадаг next() аргыг, аргументгүй функцийг тодорхойлсон бол давталттай байна:

  1. хийсэн (boolean) - хэрэв давталт нь давтагдах дарааллын төгсгөлд хүрсэн бол үнэн. Үгүй бол утга нь худал байна.
  2. утга - давталтаас буцаасан утгыг тодорхойлно. Хийсэн шинж чанар нь үнэн бол тодорхойгүй (дутуу) байж болно.

Баригдсан олон объект, үүнд. Бодит массивууд нь анхдагчаар давталттай байдаг. Бодит массив дээр давталт ашиглах хамгийн энгийн арга бол new for...of construct-ыг ашиглах явдал юм.

...-ын хувьд ашиглах жишээ:

Варвал; var a = ["a", "b", "c"]; for (val of a) ( console.log(val); )

Дээрх жишээнд for...of давталт нь массивын утга бүрийг авахын тулд Array объектын давтагчийг дууддаг.

5. Давталтыг тодорхой ашиглах

Давталтуудыг мөн тодорхой ашиглаж болно, гэхдээ энэ тохиолдолд код нь for... of давталттай харьцуулахад илүү төвөгтэй болно. Энэ нь иймэрхүү харагдаж байна:

Var a = ["a", "b", "c"]; var entry; байхад (!(оруулга = a.next()).хийсэн) ( console.log(entry.value); )

II. Массивтай төстэй объектуудыг давтах

Бодит массивуудаас гадна JavaScript дээр бас байдаг массивтай төстэй объектууд . Бодит массивтай ижил төстэй зүйл нь массивын элементүүдэд тохирох тоо гэж нэрлэгддэг уртын шинж чанар, шинж чанаруудтай байдаг. Жишээ нь NodeList цуглуулгын DOM болон дурын функц/аргад ашиглах боломжтой псевдо массив аргументууд орно.

1. Бодит массивуудыг давтах аргуудыг ашиглах

Наад зах нь, бүх биш юмаа гэхэд ихэнх массивыг давтах аргыг массивтай төстэй объектуудыг давтахад ашиглаж болно.

For болон for... in бүтээцийг массив маягийн объектуудад бодит массивуудад ашигладагтай яг адилхан хэрэглэж болно.

forEach болон бусад Array.prototype аргууд нь массивтай төстэй объектуудад мөн хамаарна. Үүнийг хийхийн тулд та Function.call эсвэл Function.apply ашиглах хэрэгтэй.

Жишээлбэл, хэрэв та Node объектын childNodes шинж чанарт forEach хэрэглэхийг хүсвэл дараах байдлаар хийнэ:

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 цуглуулгыг бодит массив болгон хөрвүүлэхийг хүсвэл дараах код хэрэгтэй болно.

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

3. Ажиллах үеийн объектуудын тухай тэмдэглэл

Хэрэв та Array.prototype аргуудыг ажиллах үеийн объектуудад (DOM цуглуулгууд гэх мэт) ашигладаг бол эдгээр аргууд нь ажиллах үеийн бүх орчинд (хөтөч гэх мэт) зөв ажиллах баталгаатай биш гэдгийг анхаарах хэрэгтэй. Энэ нь тодорхой гүйцэтгэлийн орчин дахь тодорхой объектын зан төлөвөөс, эсвэл илүү нарийвчлалтай, хийсвэр HasProperty үйлдлийг энэ объектод хэрхэн хэрэгжүүлж байгаагаас хамаарна. Асуудал нь ES5 стандарт нь өөрөө энэ үйлдэлтэй холбоотой объект буруу ажиллах боломжийг олгодог (§8.6.2-ыг үзнэ үү).

Иймд Array.prototype аргуудын ажиллагааг өөрийн программыг ашиглахаар төлөвлөж буй ажиллах орчин (хөтөч) болгонд туршиж үзэх нь чухал юм.