როგორ შევქმნათ ასოციაციური მასივი JavaScript- ში. JQuery - განმეორება მასივის, ობიექტისა და ელემენტების განსაზღვრისა და გამოყენების საშუალებით

• I. რეალური მასივების გადამეტება
  1. თითოეული და მასთან დაკავშირებული მეთოდები
  2. მარყუჟისთვის
  3. მარყუჟის სწორი გამოყენება
  4. მარყუჟისთვის (იტერატორის ნაგულისხმევი გამოყენება)
  5. იტერატორის აშკარა გამოყენება
• 1. რეალურ მასივებზე განმეორების მეთოდების გამოყენება
  2. მიმდინარეობს რეალურ მასივად გადაქცევა
  3. შენიშვნა საექსპლოატაციო ობიექტებზე

I. რეალური მასივების გადამეტება

ამ დროისთვის რეალური მასივის ელემენტების განმეორების სამი გზა არსებობს:

1. array.prototype.for თითოეული მეთოდისთვის;
2. მარყუჟის კლასიკური;
3. კარგად ჩამოყალიბებული ... მარყუჟში.

გარდა ამისა, მალე, ECMAScript 6 (ES 6) ახალი სტანდარტის გაჩენისთანავე, კიდევ ორი \u200b\u200bგზაა მოსალოდნელი:

1. მარყუჟისთვის ... (იტერატორის ნაგულისხმევი გამოყენება);
2. იტერატორის აშკარა გამოყენება.

1. თითოეული მეთოდი და მასთან დაკავშირებული მეთოდები

თუ თქვენი პროექტი შექმნილია ECMAScript 5 (ES5) სტანდარტის შესაძლებლობების მხარდასაჭერად, შეგიძლიათ გამოიყენოთ მისი ერთ-ერთი ინოვაცია - forEach მეთოდი.

გამოყენების მაგალითი:
var a \u003d ["ა", "ბ", "გ"]; a. თითოეული (ფუნქცია (ჩანაწერი) (console.log (შესვლა);));
ზოგადად, forEach– ის გამოყენება მოითხოვს es5-shim ემულაციის ბიბლიოთეკის დამაკავშირებლად იმ ბრაუზერებისთვის, რომლებსაც ამ მეთოდისთვის მხარდაჭერა არ აქვთ. ეს მოიცავს IE 8 და უფრო ადრე, რომლებიც დღესაც გამოიყენება.

ForEach– ის უპირატესობა არის ის, რომ არ არის საჭირო ადგილობრივი ცვლადების დეკლარირება მიმდინარე მასივის ელემენტის ინდექსისა და მნიშვნელობის შესანახად, რადგან ისინი ავტომატურად გადადიან ზარის დაბრუნების ფუნქციას, როგორც არგუმენტები.

თუ გაწუხებთ თითოეული ნივთის გამოძახების პოტენციური ღირებულება, არ ინერვიულოთ და წაიკითხეთ ეს.

ForEach შექმნილია მასივის ყველა ელემენტის განმეორებით, მაგრამ მის გარდა ES5 გთავაზობთ კიდევ რამდენიმე სასარგებლო მეთოდს მთლიანი ან ზოგიერთი ელემენტის განმეორებისათვის, მათთან ერთად გარკვეული მოქმედებების შესასრულებლად:

• every - აბრუნებს სიმართლეს, თუ მასივის თითოეული ელემენტისთვის გამოძახება დაუბრუნებს მნიშვნელობას, რომელიც გადადის ჭეშმარიტი.
• ზოგი - აბრუნებს სიმართლეს, თუ მასივის მინიმუმ ერთი ელემენტისთვის გამოძახება დაუბრუნებს მნიშვნელობას, რომელიც გადადის ჭეშმარიტი.
• filter - ქმნის ახალ მასივს, რომელიც შეიცავს ორიგინალი მასივის იმ ელემენტებს, რომელთათვისაც ზარის დაბრუნება ხდება ჭეშმარიტი.
• რუკა - ქმნის ახალ მასივს, რომელიც შეიცავს ზარის დაბრუნებით დაბრუნებულ მნიშვნელობებს.
• შემცირება - მასივი ერთ მნიშვნელობამდე შემცირდება, მასივის თითოეულ ელემენტზე თავის მხრივ ზარის გამოყენება, პირველიდან დაწყებული (შეიძლება სასარგებლო იყოს მასივის ელემენტების ჯამის გამოსათვლელად და სხვა საბოლოო ფუნქციებისათვის).
• შემცირება მარჯვნივ - მუშაობს მსგავსი შემცირებისა, მაგრამ განმეორდება ელემენტებზე საპირისპირო თანმიმდევრობით.

2. მარყუჟისთვის

კარგი ძველი წესებისთვის:

Var a \u003d ["ა", "ბ", "გ"]; var ინდექსი; for (ინდექსი \u003d 0; ინდექსი< a.length; ++index) { console.log(a); }
თუ მასივის სიგრძე არ შეიცვლება მთელ მარყუჟში და ეს მარყუჟი მიეკუთვნება კოდის შესრულების კრიტიკულ ნაწილს (რაც ნაკლებად სავარაუდოა), მასივის სიგრძის შენახვისას შეგიძლიათ გამოიყენოთ "უფრო ოპტიმალური" ვერსია:

Var a \u003d ["ა", "ბ", "გ"]; var ინდექსი, len; for (ინდექსი \u003d 0, len \u003d a.length; ინდექსი< len; ++index) { console.log(a); }
თეორიულად, ეს კოდი უნდა მუშაობდეს ოდნავ უფრო სწრაფად, ვიდრე წინა.

თუ ელემენტებზე განმეორების რიგი არ არის მნიშვნელოვანი, მაშინ ოპტიმიზაციის თვალსაზრისით კიდევ უფრო შორს შეგიძლიათ წასვლა და მასივის სიგრძის შენახვის ცვლადი მოაცილოთ განმეორების რიგის საპირისპიროდ შეცვლით:

Var a \u003d ["ა", "ბ", "გ"]; var ინდექსი; for (index \u003d a.length - 1; index\u003e \u003d 0; --index) (console.log (a);)
ამასთან, თანამედროვე JavaScript ძრავებში ეს ოპტიმიზირებული თამაშები ჩვეულებრივ არაფერს ნიშნავს.

3. მარყუჟის for ... სწორად გამოყენება

თუ გირჩევთ გამოიყენოთ მარყუჟის for ... გახსოვდეთ, რომ მასივების გამეორება არ არის ის, რისთვისაც არის გათვლილი. საყოველთაო არასწორი წარმოდგენის საწინააღმდეგოდ, for ... in მარყუჟი მიუთითებს არა მასივის ინდექსებზე, არამედ ობიექტის ჩამოთვლილ თვისებებზე.

ამასთან, ზოგიერთ შემთხვევაში, მაგალითად, იშვიათი მასივების გამეორება, for ... შეიძლება სასარგებლო იყოს, თუ გარკვეული ზომების მიღებას აპირებთ, როგორც ეს მოცემულია ქვემოთ მოცემულ მაგალითში:

// a არის იშვიათი მასივი var a \u003d; a \u003d "ა"; a \u003d "ბ"; a \u003d "გ"; for (var კლავიში a) (if (a.hasOwnProperty (გასაღები) && /^0 $<= 4294967294) { console.log(a); } }
ამ მაგალითში, მარყუჟის თითოეულ გამეორებაზე, ტარდება ორი შემოწმება:

1. რომ მასივს აქვს საკუთარი თვისება, სახელწოდებით გასაღები (არ არის მემკვიდრეობით მიღებული მისი პროტოტიპიდან).
2. ეს გასაღები არის სტრიქონი, რომელიც შეიცავს მთელი რიცხვის ათობითი აღნიშვნას, რომლის მნიშვნელობა ნაკლებია 4294967294. საიდან მოდის ბოლო რიცხვი? ES5- ში მასივის ინდექსის განსაზღვრებიდან, რომლიდანაც გამომდინარეობს, რომ მასივის ელემენტს ყველაზე დიდი ინდექსი შეიძლება ჰქონდეს არის (2 ^ 32 - 2) \u003d 4294967294.

რა თქმა უნდა, მარყუჟის შესრულებისას ასეთი შემოწმებები დამატებით დროს მიიღებს. იშვიათი მასივის შემთხვევაში, ეს მეთოდი უფრო ეფექტურია, ვიდრე for მარყუჟი, რადგან ამ შემთხვევაში მხოლოდ ის ელემენტებია, რომლებიც მასივში მკაფიოდ არის განსაზღვრული, განმეორდება. ამრიგად, ზემოთ მოყვანილ მაგალითში შესრულდება მხოლოდ 3 განმეორება (0, 10 და 10000 ინდექსებისთვის) - for მარყუჟის 10001-ის წინააღმდეგ.

იმისათვის, რომ არ დაწეროთ შემოწმების ასეთი რთული კოდი ყოველ ჯერზე, როდესაც მასივის გადამეტება გჭირდებათ, შეგიძლიათ შექმნათ იგი, როგორც ცალკეული ფუნქცია:

ფუნქციათა მასივი<= 4294967294; }
შემდეგ მაგალითიდან მარყუჟის სხეული მნიშვნელოვნად შემცირდება:

For (გასაღები a- ში) (if (arrayHasOwnIndex (a, key)) (console.log (a);))
ზემოთ შემოწმების კოდი უნივერსალურია, შესაფერისია ყველა შემთხვევაში. ამის ნაცვლად, შეგიძლიათ გამოიყენოთ უფრო მოკლე ვერსია, თუმცა ფორმალურად არ არის მთლად სწორი, მაგრამ უმეტეს შემთხვევაში შესაფერისია:

For (გასაღები ა-ში) (if (a.hasOwnProperty (გასაღები) && String (parseInt (გასაღები, 10)) \u003d\u003d\u003d გასაღები) (console.log (a);))

4. მარყუჟის for ... (იტერატორის ნაგულისხმევი გამოყენება)

ES6, ჯერ კიდევ სტატუსის სტატუსშია, უნდა შევიდეს iterators in JavaScript.

იტერატორი არის ობიექტის მიერ განხორციელებული პროტოკოლი, რომელიც განსაზღვრავს მნიშვნელობების (სასრული ან უსასრულო) თანმიმდევრობის მიღების სტანდარტულ გზას.
Iterator არის ობიექტი, რომელშიც განისაზღვრება შემდეგი () მეთოდი - ფუნქცია არგუმენტების გარეშე, რომელიც უბრუნებს ობიექტს ორი თვისებით:

1. დასრულებულია (ლოგიკური) - მართალია, თუკი iterator მიაღწია განმეორებადი მიმდევრობის ბოლოს. წინააღმდეგ შემთხვევაში, ყალბი.
2. მნიშვნელობა - განსაზღვრავს იტერატორის მიერ დაბრუნებულ მნიშვნელობას. შეიძლება გაკეთდეს განუსაზღვრელი (არ არსებობს), თუ შესრულებული ქონება მართალია.

ბევრი ჩამონტაჟებული ობიექტი, მათ შორის. რეალურ მასივებს აქვთ ნაგულისხმევი განმეორება. რეალურ მასივებზე იტერატორის გამოყენების უმარტივესი გზაა ახალი ... კონსტრუქციის გამოყენება.

მაგალითად გამოყენების ... for:

ვარ ვალ; var a \u003d ["ა", "ბ", "გ"]; for (val a) (console.log (val);)
ზემოთ მოყვანილ მაგალითში, for ... მარყუჟი გულისხმობს Array ობიექტის iterator- ს მასივის თითოეული მნიშვნელობის მისაღებად.

5. იტერატორის აშკარა გამოყენება

განმეორებით შეიძლება ასევე გამოყენებულ იქნას მკაფიოდ, თუმცა ამ შემთხვევაში კოდი ბევრად რთულდება, ვიდრე მარყუჟის for ... ასე გამოიყურება:

Var a \u003d ["ა", "ბ", "გ"]; var it \u003d a.entries (); var შესვლა; while (! (ჩანაწერი \u003d ეს. შემდეგი ()). შესრულებულია) (console.log (ჩანაწერი. მნიშვნელობა);)
ამ მაგალითში, Array.prototype.entries მეთოდი აბრუნებს iterator- ს, რომელიც გამოიყენება მასივის მნიშვნელობების საჩვენებლად. თითოეულ გამეორებაზე, enter.value შეიცავს მასივს, როგორიცაა [გასაღები, მნიშვნელობა].

II მარყუჟის მსგავსი მასივების ობიექტები

რეალური მასივების გარდა, JavaScript ასევე შეიცავს მასივის მსგავსი ობიექტები ... მათ საერთო აქვთ ნამდვილ მასივებთან, რომ მათ აქვთ სიგრძის თვისება და თვისებები სახელების სახით, მასივის ელემენტების შესაბამისი რიცხვების სახით. მაგალითებში შედის NodeList კოლექციის DOM და ნებისმიერი ფუნქციის / მეთოდის შიგნით არსებული ფსევდო-მასივის არგუმენტები.

1. რეალურ მასივებზე განმეორების მეთოდების გამოყენება

მინიმუმ, უმეტესობა, თუ არა ყველა, რეალური მასივების განმეორების მეთოდების გამოყენება შესაძლებელია მასივის ობიექტებზე განმეორების მიზნით.

For და for ... კონსტრუქციებში შეიძლება გამოყენებულ იქნას მასივის მსგავსი ობიექტები ზუსტად ისე, როგორც რეალურ მასივებზე.

ForEach და სხვა Array.prototype მეთოდები ასევე ვრცელდება მასივის მსგავსი ობიექტებზე. ამისათვის თქვენ უნდა გამოიყენოთ ზარი Function.call ან Function.apply.

მაგალითად, თუ გსურთ მიმართოთ კვანძის ობიექტის თითოეულ childNodes თვისებას, ამის გაკეთება შეგიძლიათ შემდეგნაირად:

Array.prototype.forEach.call (node.childNodes, ფუნქცია (ბავშვი) (// გააკეთეთ რამე ბავშვის ობიექტთან));
ამ ტექნიკის განმეორებით გამოყენებისთვის შეგიძლიათ გამოაცხადოთ Array.prototype.forE თითოეული მეთოდის მითითება ცალკეულ ცვლადში და გამოიყენოთ იგი სტენოგრამის სახით:

// (ეს მიიჩნევს, რომ ყველა ქვემოთ მოცემული კოდი იმავე სფეროშია) var forEach \u003d Array.prototype.forEach; // ... forEach.call (node.childNodes, ფუნქცია (ბავშვი) (// გააკეთეთ რამე ბავშვის ობიექტთან));
თუ მასივის მსგავს ობიექტს აქვს იტერატორი, მაშინ ის შეიძლება გამოყენებულ იქნეს აშკარად ან ნაგულისხმევად ობიექტზე განმეორებით ისე, როგორც რეალური მასივებისთვის.

2. გადაიქეცით რეალურ მასივად

ასევე არსებობს კიდევ ერთი, ძალიან მარტივი გზა, მასივის ობიექტზე განმეორება: გადაიყვანეთ იგი ნამდვილ მასივში და გამოიყენეთ ზემოთ ჩამოთვლილი მეთოდებიდან რეალური მასივების გადასალახად. გარდასახვისთვის შეგიძლიათ გამოიყენოთ ზოგადი Array.prototype.slice მეთოდი, რომელიც შეიძლება გამოყენებულ იქნას ნებისმიერი მასივის მსგავსი ობიექტისთვის. ეს კეთდება ძალიან მარტივად, როგორც ნაჩვენებია ქვემოთ მოცემულ მაგალითში:

Var trueArray \u003d Array.prototype.slice.call (arrayLikeObject, 0);
მაგალითად, თუ გსურთ NodeList კოლექციის რეალურ მასივად გადაკეთება, ასეთი კოდი გჭირდებათ:

Var divs \u003d Array.prototype.slice.call (document.querySelectorAll ("div"), 0);
განახლება: როგორც აღნიშნულია როკისა და ტორბასოვის კომენტარებში, ES6- ში შეგიძლიათ გამოიყენოთ უფრო აღწერითი მეთოდი Array.from Array.prototype.slice- ის ნაცვლად.

3. შენიშვნა შესრულების ობიექტების შესახებ

თუ თქვენ გამოიყენებთ Array.prototype მეთოდებს runtime ობიექტებზე (მაგალითად, DOM კოლექციები), უნდა გახსოვდეთ, რომ ამ მეთოდების გარანტია არ იმუშავებს სწორად მუშაობის დროს ყველა runtime გარემოში (ბრაუზერების ჩათვლით). ეს დამოკიდებულია კონკრეტული ობიექტის ქცევაზე კონკრეტულ დროს, უფრო ზუსტად, იმაზე, თუ როგორ ხორციელდება HasProperty აბსტრაქტული ოპერაცია ამ ობიექტში. პრობლემა ისაა, რომ ES5 სტანდარტი თავისთავად იძლევა ობიექტის არასათანადო ქცევის შესაძლებლობას ამ ოპერაციასთან მიმართებაში (იხ. §8.6.2).

ამიტომ მნიშვნელოვანია Array.prototype მეთოდების შემოწმება ყველა იმ დროის განმავლობაში (ბრაუზერში), რომელშიც თქვენ აპირებთ გამოიყენოთ თქვენი პროგრამა.

• I. მარკირება რეალურ მასივებში
  1. თითოეული და მასთან დაკავშირებული მეთოდები
  2. მარყუჟისთვის
  3. მარყუჟის სწორი გამოყენება
  4. მარყუჟისთვის (იტერატორის ნაგულისხმევი გამოყენება)
  5. იტერატორის აშკარა გამოყენება
• II მარყუჟის მსგავსი მასივების ობიექტები
  1. რეალურ მასივებზე განმეორების მეთოდების გამოყენება
  2. მიმდინარეობს რეალურ მასივად გადაქცევა
  3. შენიშვნა საექსპლოატაციო ობიექტებზე

I. რეალური მასივების გადამეტება

ამ დროისთვის რეალური მასივის ელემენტების განმეორების სამი გზა არსებობს:

1. array.prototype.for თითოეული მეთოდისთვის;
2. მარყუჟის კლასიკური;
3. კარგად ჩამოყალიბებული ... მარყუჟში.

გარდა ამისა, მალე, ECMAScript 6 (ES 6) ახალი სტანდარტის გაჩენისთანავე, კიდევ ორი \u200b\u200bგზაა მოსალოდნელი:

1. მარყუჟისთვის ... (იტერატორის ნაგულისხმევი გამოყენება);
2. იტერატორის აშკარა გამოყენება.

1. თითოეული მეთოდი და მასთან დაკავშირებული მეთოდები

თუ თქვენი პროექტი შექმნილია ECMAScript 5 (ES5) სტანდარტის შესაძლებლობების მხარდასაჭერად, შეგიძლიათ გამოიყენოთ მისი ერთ-ერთი ინოვაცია - forEach მეთოდი.

გამოყენების მაგალითი:

Var a \u003d ["ა", "ბ", "გ"]; a.for (ფუნქცია (შესვლა) (console.log (შესვლა);));

ზოგადად, forEach– ის გამოყენება მოითხოვს es5-shim ემულაციის ბიბლიოთეკას იმ ბრაუზერებისათვის, რომლებსაც არ აქვთ ამ მეთოდის საწყისი მხარდაჭერა. ეს მოიცავს IE 8 და უფრო ადრე, რომლებიც დღესაც გამოიყენება.

ForEach– ის უპირატესობა არის ის, რომ არ არის საჭირო ადგილობრივი ცვლადების დეკლარირება მიმდინარე მასივის ელემენტის ინდექსისა და მნიშვნელობის შესანახად, რადგან ისინი ავტომატურად გადადიან ზარის დაბრუნების ფუნქციას, როგორც არგუმენტები.

თუ გაწუხებთ თითოეული ნივთის გამოძახების პოტენციური ღირებულება, არ ინერვიულოთ და წაიკითხეთ ეს.

forEach შექმნილია მასივის ყველა ელემენტის განმეორებით, მაგრამ ამის გარდა ES5 გთავაზობთ კიდევ რამდენიმე სასარგებლო მეთოდს მთლიანი ან ზოგიერთი ელემენტის განმეორებისათვის, მათთან ერთად გარკვეული მოქმედებების შესასრულებლად:

• every - აბრუნებს სიმართლეს, თუ მასივის თითოეული ელემენტისთვის გამოძახება დაუბრუნებს მნიშვნელობას, რომელიც გადადის ჭეშმარიტი.
• ზოგი - აბრუნებს სიმართლეს, თუ მასივის მინიმუმ ერთი ელემენტისთვის გამოძახება დაუბრუნებს მნიშვნელობას, რომელიც გადადის ჭეშმარიტი.
• filter - ქმნის ახალ მასივს, რომელიც შეიცავს ორიგინალი მასივის იმ ელემენტებს, რომელთათვისაც ზარის დაბრუნება ხდება ჭეშმარიტი.
• რუკა - ქმნის ახალ მასივს, რომელიც შეიცავს ზარის დაბრუნებით დაბრუნებულ მნიშვნელობებს.
• შემცირება - მასივი ერთ მნიშვნელობამდე შემცირდება, მასივის თითოეულ ელემენტზე თავის მხრივ ზარის გამოყენება, პირველიდან დაწყებული (შეიძლება სასარგებლო იყოს მასივის ელემენტების ჯამის გამოსათვლელად და სხვა საბოლოო ფუნქციებისათვის).
• შემცირება მარჯვნივ - მუშაობს მსგავსი შემცირებისა, მაგრამ განმეორდება ელემენტებზე საპირისპირო თანმიმდევრობით.

2. მარყუჟისთვის

კარგი ძველი წესებისთვის:

Var a \u003d ["ა", "ბ", "გ"]; var ინდექსი; for (ინდექსი \u003d 0; ინდექსი< a.length; ++index) { console.log(a); }

თუ მასივის სიგრძე არ შეიცვლება მთელ მარყუჟში და ეს მარყუჟი მიეკუთვნება კოდის ეფექტურობას (რაც ნაკლებად სავარაუდოა), მასივის სიგრძის შენახვისას შეგიძლიათ გამოიყენოთ "უფრო ოპტიმალური" ვერსია:

Var a \u003d ["ა", "ბ", "გ"]; var ინდექსი, len; for (ინდექსი \u003d 0, len \u003d a.length; ინდექსი< len; ++index) { console.log(a); }

თეორიულად, ეს კოდი უნდა მუშაობდეს ოდნავ უფრო სწრაფად, ვიდრე წინა.

თუ ელემენტებზე განმეორების რიგი არ არის მნიშვნელოვანი, მაშინ ოპტიმიზაციის თვალსაზრისით კიდევ უფრო შორს შეგიძლიათ წასვლა და მასივის სიგრძის შენახვის ცვლადი მოაცილოთ განმეორების რიგის საპირისპიროდ შეცვლით:

Var a \u003d ["ა", "ბ", "გ"]; var ინდექსი; for (index \u003d a.length - 1; index\u003e \u003d 0; --index) (console.log (a);)

ამასთან, თანამედროვე JavaScript ძრავებში ეს ოპტიმიზირებული თამაშები ჩვეულებრივ არაფერს ნიშნავს.

3. მარყუჟის for ... სწორად გამოყენება

თუ გირჩევთ გამოიყენოთ მარყუჟის for ... გახსოვდეთ, რომ მასივების გამეორება არ არის ის, რისთვისაც ის არის გათვლილი. საყოველთაო არასწორი წარმოდგენის საწინააღმდეგოდ, for ... in მარყუჟი მიუთითებს არა მასივის ინდექსებზე, არამედ ობიექტის ჩამოთვლილ თვისებებზე.

ამასთან, ზოგიერთ შემთხვევაში, მაგალითად, იშვიათი მასივების გამეორება, for ... შეიძლება სასარგებლო იყოს, თუ გარკვეული ზომების მიღებას აპირებთ, როგორც ეს მოცემულია ქვემოთ მოცემულ მაგალითში:

// a არის იშვიათი მასივი var a \u003d; a \u003d "ა"; a \u003d "ბ"; a \u003d "გ"; for (var გასაღები აში) (if (a.hasOwnProperty (გასაღები) && /^0$|^d*$/.test(key) && გასაღები<= 4294967294) { console.log(a); } }

ამ მაგალითში, მარყუჟის თითოეულ გამეორებაზე, ტარდება ორი შემოწმება:

1. რომ მასივს აქვს საკუთარი თვისება, სახელწოდებით გასაღები (არ არის მემკვიდრეობით მიღებული მისი პროტოტიპიდან).
2. ეს გასაღები არის სტრიქონი, რომელიც შეიცავს მთელი რიცხვის ათობითი აღნიშვნას, რომლის მნიშვნელობა ნაკლებია 4294967294. საიდან მოდის ბოლო რიცხვი? ES5- ში მასივის ინდექსის განსაზღვრებიდან, რომლიდანაც გამომდინარეობს, რომ მასივის ელემენტს ყველაზე დიდი ინდექსი შეიძლება ჰქონდეს არის (2 ^ 32 - 2) \u003d 4294967294.

რა თქმა უნდა, მარყუჟის შესრულებისას ასეთი შემოწმებები დამატებით დროს მიიღებს. იშვიათი მასივის შემთხვევაში, ეს მეთოდი უფრო ეფექტურია, ვიდრე for მარყუჟი, რადგან ამ შემთხვევაში მხოლოდ ის ელემენტებია, რომლებიც მასივში მკაფიოდ არის განსაზღვრული, განმეორდება. ასე რომ, ზემოთ მოყვანილ მაგალითში შესრულდება მხოლოდ 3 გამეორება (0, 10 და 10000 ინდექსებისთვის) - for მარყუჟის 10001-ის წინააღმდეგ.

იმისათვის, რომ არ დაწეროთ შემოწმების ასეთი რთული კოდი ყოველ ჯერზე, როდესაც მასივის გადამეტება გჭირდებათ, შეგიძლიათ შექმნათ იგი, როგორც ცალკეული ფუნქცია:

ფუნქციის მასივი HasOwnIndex (მასივი, გასაღები) (დაბრუნების მასივი. აქვს საკუთარი საკუთრება (გასაღები) && /^0 $<= 4294967294; }

შემდეგ მაგალითიდან მარყუჟის სხეული მნიშვნელოვნად შემცირდება:

For (გასაღები a- ში) (if (arrayHasOwnIndex (a, key)) (console.log (a);))

ზემოთ შემოწმების კოდი უნივერსალურია, შესაფერისია ყველა შემთხვევაში. ამის ნაცვლად, შეგიძლიათ გამოიყენოთ უფრო მოკლე ვერსია, თუმცა ფორმალურად არ არის მთლად სწორი, მაგრამ მაინც შესაფერისია უმეტეს შემთხვევაში:

For (გასაღები ა)-ში (if (a.hasOwnProperty (გასაღები) && String (parseInt (გასაღები, 10)) \u003d\u003d\u003d გასაღები) (console.log (a);))

4. მარყუჟის for ... (იტერატორის ნაგულისხმევი გამოყენება)

ES6, ჯერ კიდევ სტატუსის სტატუსშია, უნდა შევიდეს iterators in JavaScript.

იტერატორი არის ობიექტის მიერ განხორციელებული პროტოკოლი, რომელიც განსაზღვრავს მნიშვნელობების (სასრული ან უსასრულო) თანმიმდევრობის მიღების სტანდარტულ გზას.
ობიექტს აქვს iterator, თუ მასში განისაზღვრება შემდეგი () მეთოდი - არგუმენტების გარეშე ფუნქცია, რომელიც აბრუნებს ობიექტს ორი თვისებით:

1. დასრულებულია (ლოგიკური) - მართალია, თუკი iterator მიაღწია განმეორებადი მიმდევრობის ბოლოს. წინააღმდეგ შემთხვევაში, ყალბი.
2. მნიშვნელობა - განსაზღვრავს იტერატორის მიერ დაბრუნებულ მნიშვნელობას. შეიძლება გაკეთდეს განუსაზღვრელი (არ არსებობს), თუ შესრულებული ქონება მართალია.

ბევრი ჩამონტაჟებული ობიექტი, მათ შორის. რეალურ მასივებს აქვთ ნაგულისხმევი განმეორება. რეალურ მასივებზე იტერატორის გამოყენების უმარტივესი გზაა კონსტრუქციის ახალი ...

მაგალითად გამოყენების ... for:

ვარ ვალ; var a \u003d ["ა", "ბ", "გ"]; for (val a) (console.log (val);)

ზემოთ მოყვანილ მაგალითში, for ... მარყუჟი გულისხმობს Array ობიექტის iterator- ს მასივის თითოეული მნიშვნელობის მისაღებად.

5. იტერატორის აშკარა გამოყენება

განმეორებით შეიძლება ასევე გამოყენებულ იქნას მკაფიოდ, თუმცა ამ შემთხვევაში კოდი ბევრად რთულდება, ვიდრე მარყუჟის for ... ასე გამოიყურება:

Var a \u003d ["ა", "ბ", "გ"]; var შესვლა; while (! (ჩანაწერი \u003d a.next ()). შესრულებულია) (console.log (entry.value);)

II მარყუჟის მსგავსი მასივების ობიექტები

რეალური მასივების გარდა, JavaScript ასევე შეიცავს მასივის მსგავსი ობიექტები ... მათ საერთო აქვთ ნამდვილ მასივებთან, რომ მათ აქვთ სიგრძის თვისება და თვისებები სახელების სახით, მასივის ელემენტების შესაბამისი რიცხვების სახით. მაგალითებში შედის NodeList კოლექციის DOM და ნებისმიერი ფუნქციის / მეთოდის შიგნით არსებული ფსევდო-მასივის არგუმენტები.

1. რეალურ მასივებზე განმეორების მეთოდების გამოყენება

მინიმუმ, უმეტესობა, თუ არა ყველა, რეალური მასივების განმეორების მეთოდების გამოყენება შესაძლებელია მასივის ობიექტებზე განმეორების მიზნით.

For და for ... კონსტრუქციებში შეიძლება გამოყენებულ იქნას მასივის მსგავსი ობიექტები ზუსტად ისე, როგორც რეალურ მასივებზე.

forEach და Array.protype– ის სხვა მეთოდები ასევე ვრცელდება მასივის მსგავს ობიექტებზე. ამისათვის გამოიყენეთ ზარი Function.call ან Function.apply.

მაგალითად, თუ გსურთ მიმართოთ კვანძის ობიექტის თითოეულ childNodes თვისებას, ამის გაკეთება შეგიძლიათ შემდეგნაირად:

Array.prototype.forEach.call (node.childNodes, ფუნქცია (ბავშვი) (// გააკეთეთ რამე ბავშვის ობიექტთან));

ამ ტექნიკის ხელახალი გამოყენებისთვის, შეგიძლიათ გამოაცხადოთ Array.prototype.forE თითოეული მეთოდის მითითება ცალკეულ ცვლადში და გამოიყენოთ იგი სტენოგრამის სახით:

// (ეს მიიჩნევს, რომ ყველა ქვემოთ მოცემული კოდი ერთნაირია) var forEach \u003d Array.prototype.forEach; // ... forEach.call (node.childNodes, ფუნქცია (ბავშვი) (// გააკეთეთ რამე ბავშვის ობიექტთან));

თუ მასივის მსგავს ობიექტს აქვს გამეორება, მაშინ ის შეიძლება გამოყენებულ იქნეს აშკარად ან იმპლიციტურად ობიექტზე განმეორებით, ისევე, როგორც რეალური მასივებისთვის.

2. გადაიქეცით რეალურ მასივად

ასევე არსებობს მასივის მსგავსი ობიექტის განმეორების კიდევ ერთი, ძალიან მარტივი გზა: გადაიყვანეთ იგი რეალურ მასივში და გამოიყენეთ ზემოთ ჩამოთვლილი მეთოდებიდან რეალური მასივების გადასალახად. გარდასახვისთვის შეგიძლიათ გამოიყენოთ ზოგადი Array.prototype.slice მეთოდი, რომელიც შეიძლება გამოყენებულ იქნას ნებისმიერი მასივის მსგავსი ობიექტისთვის. ეს კეთდება ძალიან მარტივად, როგორც ნაჩვენებია ქვემოთ მოცემულ მაგალითში:

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

მაგალითად, თუ გსურთ NodeList კოლექციის რეალურ მასივად გადაკეთება, ასეთი კოდი გჭირდებათ:

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

3. შენიშვნა შესრულების ობიექტების შესახებ

თუ Array.prototype მეთოდებს იყენებთ გატარების დროში მყოფ ობიექტებზე (მაგალითად, DOM კოლექციები), უნდა გახსოვდეთ, რომ ამ მეთოდების გარანტია არ იმუშავებს სწორად მუშაობის დროს ყველა გატარების გარემოში (მათ შორის, ბრაუზერებში). ეს დამოკიდებულია კონკრეტული ობიექტის კონკრეტულ დროში ქცევაზე, უფრო ზუსტად იმაზე, თუ როგორ ხორციელდება HasProperty აბსტრაქტული ოპერაცია ამ ობიექტში. პრობლემა ისაა, რომ ES5 სტანდარტი საშუალებას იძლევა ობიექტის არასათანადო მოპყრობის შესაძლებლობას ამ ოპერაციასთან მიმართებაში (იხ. §8.6.2).

ამიტომ მნიშვნელოვანია Array.prototype მეთოდების შემოწმება ყველა იმ დროის განმავლობაში (ბრაუზერში), რომელშიც თქვენ აპირებთ გამოიყენოთ თქვენი პროგრამა.

forEach () მეთოდი ახორციელებს მოწოდებულ ფუნქციას ერთხელ მასივის თითოეული ელემენტისთვის.

ამ ინტერაქტიული მაგალითის წყარო ინახება GitHub საცავში. თუ გსურთ წვლილი შეიტანოთ ინტერაქტიული მაგალითების პროექტში, გთხოვთ, გააკეთოთ კლონირება https://github.com/mdn/interactive-examples და გამოგვიგზავნეთ მოთხოვნის მოთხოვნა.

Სინტაქსი

arr. თითოეული (გამოძახება (მიმდინარე ღირებულება [, ინდექსი [, მასივი]])] [, thisArg])

Პარამეტრები

ზარის უკუკავშირის ფუნქცია, რომელიც უნდა შესრულდეს თითოეულ ელემენტზე. იგი იღებს ერთსა და სამ არგუმენტს შორის: currentValue მასივში მუშავდება მიმდინარე ელემენტი. ინდექსი სურვილისამებრ ინდექსის მიმდინარე ღირებულება მასივში. მასივი სურვილისამებრ მასივი forEach () გამოიძახეს. thisArg არასავალდებულო მნიშვნელობა გამოსაყენებლად, როგორც ზარის უკუკავშირის შესრულებისას.

დაბრუნების მნიშვნელობა

აღწერა

forEach () მოუწოდებს მოწოდებულ უკუკავშირის ფუნქციას ერთხელ მასივის თითოეული ელემენტისთვის ზრდადი თანმიმდევრობით. იგი არ არის გამოყენებული ინდექსის თვისებებისთვის, რომლებიც წაიშალა ან არაინციალიზებულია. (იშვიათი მასივებისთვის.)

გამოძახება ხდება სამი არგუმენტით:

1. ელემენტის მნიშვნელობა
2. ელემენტის ინდექსი
3. მასივის ობიექტი განიხილება

თუ forAach () –ს მიეწოდება thisArg პარამეტრი, ის გამოყენებული იქნება როგორც ზარის უკუკავშირი ამ მნიშვნელობად. ამArg– ის მნიშვნელობა, რომელიც საბოლოოდ აკვირდება უკუკავშირით, განისაზღვრება ჩვეულებრივი წესების შესაბამისად, რაც განსაზღვრავს ფუნქციას.

ForEach () - ის მიერ დამუშავებული ელემენტების დიაპაზონი განისაზღვრება უკუკავშირის პირველი გამოძახებამდე. ელემენტები, რომლებიც მასას ემატება forEach () –ზე ზარის დაწყების შემდეგ, აღარ მოინახულებს უკუკავშირით. თუ მასივის არსებული ელემენტები შეიცვალა ან წაიშალა, გამოძახებაზე გადასული მათი მნიშვნელობა იქნება თითოეული () მონახულების დროს. ელემენტები, რომლებიც წაიშალა მონახულებამდე, არ ეწვივნენ. თუ განმეორებისას უკვე მოინახულეს ელემენტები (მაგ. Shift ()) გამოიყენეთ, მოგვიანებით ელემენტები გამოტოვებენ. (იხილეთ ეს მაგალითი, ქვემოთ)

forEach () ასრულებს ზარის დაბრუნების ფუნქციას ერთხელ თითოეული მასივის ელემენტისთვის; განსხვავებით რუკაზე () ან შემცირება (), ის ყოველთვის უბრუნებს მნიშვნელობას განუსაზღვრელი და არ არის აპარატული. ტიპიური გამოყენების შემთხვევაა ჯაჭვის ბოლოს გვერდითი მოვლენების შესრულება.

forEach () არ შეცვლის მასივს, რომელზეც ის იწოდება. (ამასთან, დარეკვით შეიძლება გაკეთდეს)

ForEach () მარყუჟის შეჩერების ან გაწყვეტის სხვა გზა არ არსებობს, გარდა გამონაკლისის გადაყრისა. თუ ასეთი ქცევა გჭირდებათ, forEach () მეთოდი არასწორი ინსტრუმენტია.

ადრეული შეწყვეტა შეიძლება განხორციელდეს შემდეგით:

მასივის მეთოდები: ყველა (), ზოგი (), find () და findIndex () ატესტავს მასივის ელემენტებს პრედიკატით დაუბრუნებს truthy მნიშვნელობას, რათა დადგინდეს საჭიროა თუ არა შემდგომი განმეორება.

მაგალითები

არაინციალიზებული მნიშვნელობების ოპერაცია (იშვიათი მასივები)

const arraySparse \u003d ნება numCallbackRuns \u003d 0 arraySparse.forEach (ფუნქცია (ელემენტი) (console.log (ელემენტი) numCallbackRuns ++)) console.log ("numCallbackRuns:", numCallbackRuns) // 1 // 3 // 7 // numCallbackRuns: 3 // კომენტარი: როგორც ხედავთ დაკარგულ მნიშვნელობას 3 – დან 7 – მდე არ არის გამოძახების ზარის ფუნქცია.

For მარყუჟის კონვერტაცია for for each

const items \u003d ["item1", "item2", "item3"] const ასლი \u003d // for for (მოდით i \u003d 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 + "] \u003d" + ელემენტი)) // გაითვალისწინეთ, რომ ინდექსი 2 გამოტოვებულია, ვინაიდან // მასივი .... თითოეული (logArrayElement) // ჟურნალები: // a \u003d 2 // a \u003d 5 // a \u003d 9

იყენებს ამ Arg

შემდეგი (გამოგონილი) მაგალითი მასივის ყოველი ჩანაწერიდან განაახლებს ობიექტის თვისებებს:

ფუნქციის მრიცხველი () (this.sum \u003d 0 this.count \u003d 0) Counter.prototype.add \u003d ფუნქცია (მასივი) (array.forEach (ფუნქცია (ჩანაწერი) (this.sum + \u003d ჩანაწერი ++ this.count), ეს ) // ^ ---- შენიშვნა) const obj \u003d new Counter () obj.add () obj.count // 3 obj.sum // 16

მას შემდეგ, რაც thisArg პარამეტრი (ეს) მოცემულია forEach- სთვის (), იგი გაიცემა ზარის უკუგდებაზე მისი ყოველი გამოძახებისთანავე. უკუკავშირი იყენებს მას ამ მნიშვნელობად.

ობიექტის კოპირების ფუნქცია

შემდეგი კოდი ქმნის მოცემული ობიექტის ასლს.

ობიექტის ასლის შექმნის სხვადასხვა გზა არსებობს. ქვემოთ მოცემულია მხოლოდ ერთი გზა და წარმოდგენილია იმის ახსნა, თუ როგორ მუშაობს Array.prototype.forEach () ECMAScript 5 ობიექტის გამოყენებით. * Meta ქონების ფუნქციები.

ფუნქციის ასლი (ობიექტი) (კონსტური ასლი \u003d ობიექტის შექმნა. ობიექტის შექმნა. ობიექტი .defineProperty (ასლი, სახელი, დახასიათება))) ასლის დაბრუნება) const obj1 \u003d (a: 1, b: 2) const obj2 \u003d ასლი (obj1) // obj2 ახლა გამოიყურება obj1

თუ მასივი შეიცვალა გამეორების დროს, შეიძლება სხვა ელემენტები გამოტოვონ.

შემდეგი მაგალითი არის ჟურნალები "ერთი", "ორი", "ოთხი".

როდესაც ჩანაწერი შეიცავს მნიშვნელობას "(! LANG: ორი" 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 () არ ქმნის მასივის ასლს გამეორებამდე.

მოდით სიტყვები \u003d ["ერთი", "ორი", "სამი", "ოთხი"] სიტყვა. თითოეული (ფუნქცია (სიტყვა) (კონსოლი. ბლოგი (სიტყვა) თუ (სიტყვა \u003d\u003d\u003d "ორი") (სიტყვა. შეცვლა ( )))) // ერთი // ორი // ოთხი

გაასწორეთ მასივი

შემდეგი მაგალითი მხოლოდ სასწავლო მიზნისთვის არის. თუ გსურთ მასივის გათანაბრება ჩაშენებული მეთოდების გამოყენებით შეგიძლიათ გამოიყენოთ Array.prototype.flat () (რომელიც სავარაუდოდ შედის ES2019– ის ნაწილში, და ის უკვე განხორციელებულია ზოგიერთ ბრაუზერში).

/ ** * სიბრტყეებმა მასივი გაავრცელეს ერთ განზომილებიან მასივში * * @params (მასივი) arr * @returns (მასივი) * / ფუნქცია flatten (arr) (const result \u003d arr.forEach ((i) \u003d\u003e (if (Array) isArray (i)) (result.push (... flatten (i))) else (result.push (i)))) დაბრუნების შედეგი) // გამოყენების const problem \u003d, 8, 9]] flatten (problem) / /

შენიშვნა დაპირებების ან ასინქის ფუნქციების გამოყენების შესახებ

მოდით შეფასებები \u003d მოდით sum \u003d 0 მოდით sumFunction \u003d async ფუნქცია (a, b) (დავაბრუნოთ a + b) რეიტინგები. თითოეული (async ფუნქცია (ნიშანი) (sum \u003d დაველოდოთ sumFunction (თანხა, ნიშანი))) console.log (sum) // მოსალოდნელი გამომავალი: 14 // რეალური შედეგი: 0

სპეციფიკაციები

სპეციფიკაცია	სტატუსი	კომენტარი
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- ზე

	სამუშაო მაგიდა						მობილური						სერვერი
	ქრომი	პირას	Firefox	Internet Explorer	ოპერა	Safari	Android ვებგვერდი	Chrome for Android	Firefox Android- ისთვის	ოპერა Android- ისთვის	Safari iOS- ზე	სამსუნგის ინტერნეტი	კვანძი. Js
თითოეული	Chrome სრული მხარდაჭერა 1	Edge სრული მხარდაჭერა 12	Firefox სრული მხარდაჭერა 1.5	IE სრული მხარდაჭერა 9	ოპერა სრული მხარდაჭერა დიახ	Safari სრული მხარდაჭერა 3	WebView Android სრული მხარდაჭერა ≤37	Chrome Android სრული მხარდაჭერა 18	Firefox Android სრული მხარდაჭერა 4	Opera Android სრული მხარდაჭერა დიახ	Safari iOS სრული მხარდაჭერა 1	Samsung ინტერნეტ Android სრული მხარდაჭერა 1.0	nodejs სრული მხარდაჭერა დიახ

სტატია, რომელშიც გადავხედავთ jQuery თითოეული ფუნქციისა და მეთოდის გამოყენების მაგალითებს.

JQuery ბიბლიოთეკას აქვს 2 სხვადასხვა ობიექტი, სახელად თითოეული.

პირველი (jQuery.each) არის ზოგადი jQuery ფუნქცია, რომლის საშუალებითაც შესაძლებელია მასივის ან ობიექტის ელემენტების განმეორება.

მეორე (თითოეული) არის მეთოდი, რომელიც გამოიყენება ერთეულების ნაკრებზე, რათა მოხდეს მათი გადაფურცვლა.

თითოეული მარყუჟი (jQuery.each). გამოყენების მაგალითები

სინტაქსი თითოეული ფუნქციისთვის არის:

// მასივი ან ობიექტი - მასივი ან ობიექტი, რომლის ელემენტები ან თვისებები უნდა განმეორდეს // დარეკვა - ფუნქცია, რომელიც შესრულდება მასივის ან ობიექტის ქონების თითოეული ელემენტისთვის $ .each (მასივი ან ობიექტი, გამოძახება);

მოდით ვნახოთ მაგალითები თითოეულ ფუნქციაზე მუშაობისთვის.

მაგალითი # 1. მასში განმეორდება მასივის ყველა ელემენტი.

// 3 ხაზის მასივი var arr \u003d ["მანქანა", "სატვირთო", "ავტობუსი"]; // განმეორება მასივზე arr $. თითოეული (arr, ფუნქცია (ინდექსი, მნიშვნელობა) (// მოქმედებები, რომლებიც შესრულდება მასივის თითოეული ელემენტისთვის // ინდექსი არის მასივის ელემენტის მიმდინარე ინდექსი (რიცხვი) // მნიშვნელობა არის მიმდინარე მასივის ელემენტის მნიშვნელობა // მასივის ინდექსისა და მნიშვნელობის დაბეჭდვა console console.log ("ინდექსი:" + ინდექსი + "; მნიშვნელობა:" + მნიშვნელობა);)); / * შედეგი (კონსოლში): ინდექსი: 0; მნიშვნელობა: მანქანის ინდექსი: 1; მნიშვნელობა: სატვირთო ავტომობილის ინდექსი: 2; მნიშვნელობა: ავტობუსი * /

ზემოთ მოცემულ კოდში თითოეული ფუნქცია გამოიყენება მასივის განმეორების მიზნით. ფუნქციას აქვს 2 საჭირო პარამეტრი... პირველი პარამეტრი არის ერთეული (მასივი ან ობიექტი), რომლის ელემენტები (თვისებები) უნდა განმეორდეს. ამ შემთხვევაში, ეს არის arr მასივი. მეორე პარამეტრი არის ზარის დაბრუნების ფუნქცია, რომელიც შესრულდება მასივის თითოეული ელემენტისთვის (ამ შემთხვევაში). მას აქვს 2 პარამეტრი, რომლებიც მის შიგნით არის ხელმისაწვდომი შესაბამისი ცვლადების საშუალებით. პირველი პარამეტრი არის ელემენტის რიგითი ნომერი (დათვლა ხორციელდება 0-დან). მეორე პარამეტრი არის მიმდინარე მასივის ელემენტის მნიშვნელობა.

მაგალითი # 2. ამ მაგალითში განმეორდება ობიექტის ყველა თვისება.

// სმარტფონის ობიექტი 5 თვისებით var smartphone \u003d ("სახელი": "LG G5 se", "წელი": "2016", "ეკრანის ზომა": "5.3", "ეკრანის გარჩევადობა": "2560 x 1440 "," os ":" Android 6.0 (Marshmallow) "); // მარყუჟი სმარტფონის ობიექტზე $. თითოეული (სმარტფონი, ფუნქცია (გასაღები, მნიშვნელობა)) და მისი მნიშვნელობა console console.log ("თვისება:" + გასაღები + "; მნიშვნელობა:" + მნიშვნელობა);)); / * შედეგი (კონსოლში): თვისება: სახელი; ღირებულება: LG G5 se ქონება: წელი; მნიშვნელობა: 2016 წლის თვისება: ეკრანის ზომა; მნიშვნელობა: 5.3 თვისება: ეკრანის გარჩევადობა; მნიშვნელობა: 2560 x 1440 თვისება: os; მნიშვნელობა: Android 6.0 (Marshmallow) * /

თითოეული ფუნქციის გამოყენება შესაძლებელია JavaScript ობიექტებზე განმეორების მიზნით. მისი გამოყენების განსხვავება მხოლოდ იმაშია, რომ ზარის უკუკავშირის ფუნქციის პარამეტრებს აქვთ სხვადასხვა მნიშვნელობები. პირველი პარამეტრი ინახავს ობიექტის თვისების სახელს, ხოლო მეორე ინახავს ამ თვისების მნიშვნელობას.

მაგალითი No3. მასში ვიმეორებთ უფრო რთულ სტრუქტურას (ვნახოთ, როგორ გამოვიყენოთ თითოეული ჩასმული).

// ობიექტი, რომელიც შედგება 2 თვისებისაგან. ამ ობიექტის თითოეულ თვისებას აქვს მასივი, როგორც მნიშვნელობა, რომლის ელემენტებია აგრეთვე ობიექტები var სტატიები \u003d ("Bootstrap": [("id": "1", "title": "შესავალი"), ("id": "2") , "სათაური": "როგორ დავაყენოთ"), ("id": "3", "სათაური": "Grid")], "JavaScript": [("id": "4", "title": "საფუძვლები "), (" id ":" 5 "," title ":" ელემენტების შერჩევა ")]); $ .each (სტატიები, ფუნქცია (გასაღები, მონაცემები) (console.log ("განყოფილება:" + გასაღები); $ .each (მონაცემები, ფუნქცია (ინდექსი, მნიშვნელობა)) (console.log ("სტატია: id \u003d" + მნიშვნელობა ["id"] + "; სათაური \u003d" + მნიშვნელობა ["სათაური"]);));)); / * შედეგი: განყოფილება: ჩატვირთვის სტატია: id \u003d 1; სათაური \u003d შესავალი სტატია: id \u003d 2; სათაური \u003d როგორ დავაყენოთ სტატია: id \u003d 3; სათაური \u003d ქსელის განყოფილება: JavaScript სტატია: id \u003d 4; სათაური \u003d საფუძვლები სტატია: id \u003d 5; სახელი \u003d ელემენტების შერჩევა * /

როგორ შევაჩერო თითოეული (გამოვა მარყუჟიდან)?

თითოეული ციკლი წყდება დაბრუნების დებულებით, რომელიც უნდა დაბრუნდეს false.

მაგალითად, მოდით შევაჩეროთ თითოეული მარყუჟის შესრულება მას შემდეგ, რაც მასივის მასივში ვიპოვით რიცხვს 7:

// 5 რიცხვის მასივი var arr \u003d; // რიცხვი, რომ იპოვოთ var find \u003d 7; // გამეორება მასივის მასივზე $ .each (arr, ფუნქცია (ინდექსი, მნიშვნელობა) (// თუ საჭირო რიცხვია ნაპოვნი, მაშინ .. თუ (მნიშვნელობა \u003d\u003d\u003d იპოვნეთ)) ნაპოვნია რიცხვი "+ პოვნა +"! ამ ნომერს აქვს ინდექსი: "+ ინდექსი); // შეაჩერე ციკლის შესრულების შეცდომა;) სხვაგან (// სხვაგვარად, ამობეჭდე მიმდინარე ნომერი კონსოლის კონსოლზე. Log (" მიმდინარე ნომერი: "+ მნიშვნელობა); ))); / * შედეგი (კონსოლში): ამჟამინდელი ნომერი: 5 მიმდინარე ნომერი: 4 ურა! ნომერი 7 ნაპოვნია! ამ რიცხვს აქვს ინდექსი: 2 * /

როგორ გადავიდე შემდეგ გამეორებაზე (თითოეული გაგრძელება)?

თითოეულში მიმდინარე იტერაციის შესრულება წყდება და შემდეგზე გადასვლა ხორციელდება დაბრუნების დებულების გამოყენებით, რომელსაც ყალბი გარდა სხვა მნიშვნელობა უნდა ჰქონდეს.

// რიცხვების მასივი var arr \u003d; // მასივი, რომელიც უნდა შეიცავდეს მასივის მასივის ყველა ელემენტს, გარდა ლუწი რიცხვებისა var newarr \u003d; // განმეორება arr მასივზე $ .each (arr, ფუნქცია (ინდექსი, მნიშვნელობა) (// თუ ელემენტი თანაბარია, გამოტოვეთ it if (მნიშვნელობა% 2 \u003d\u003d\u003d 0) (// შეაწყვეტინეთ მიმდინარე გამეორება და გადადით შემდეგზე დაბრუნებაზე); ) // მასივს დაამატეთ მნიშვნელობა newarr newarr.push (მნიშვნელობა);)); console.log ("ორიგინალი მასივი (arr):" + arr. Join ()); console.log ("შედეგების მასივი (newarr):" + newarr. Join ()); / * შედეგი (კონსოლში): ორიგინალი მასივი (arr): 3,5,4,9,17,19,30,35,40 შედეგების მასივი (newarr): 3,5,9,17,19,35 * /

მიმდინარე ნივთების განმეორება (. თითოეული)

სინტაქსი თითოეული მეთოდისთვის (ვრცელდება მხოლოდ შერჩეულ ელემენტებზე):

. თითოეული (ფუნქცია); // ფუნქცია - ფუნქცია, რომელიც შესრულდება მიმდინარე ობიექტის თითოეული ელემენტისთვის

მოდით ვნახოთ, როგორ მუშაობს თითოეული მეთოდი შემდეგ მაგალითზე (გამრავლება div ელემენტებზე):

ზემოთ მოყვანილ მაგალითში თითოეული მეთოდი იყენებს მიმდინარე კომპლექტს ($ ("div") ამორჩევით არჩეული ელემენტები). თითოეული მეთოდის დამმუშავებელი ყოველთვის არის ფუნქცია, რომელიც შესრულდება მიმდინარე სიმრავლის თითოეული ელემენტისთვის (ამ შემთხვევაში, თითოეული div ელემენტისთვის). ამ ფუნქციას აქვს 2 არასავალდებულო პარამეტრი. ერთი მათგანი (ინდექსი) არის ამჟამინდელი გამეორების მიმდევრობის ნომერი, ხოლო მეორე (ელემენტი) არის DOM მითითება მიმდინარე ელემენტზე. გარდა ამისა, ეს საკვანძო სიტყვა ხელმისაწვდომია ფუნქციის შიგნით, რომელიც, ისევე როგორც მეორე პარამეტრი, შეიცავს DOM მითითებას მიმდინარე ელემენტზე.

მაგალითად, მოდით ამობეჭდოთ კონსოლზე href ატრიბუტის მნიშვნელობა გვერდზე არსებული ყველა ელემენტისთვის:

$ ("ა"). თითოეული (ფუნქცია () (console.log ($ (ეს) .attr ("href"));));

$ ("a"). თითოეული (ფუნქცია () (var link \u003d $ (this) .attr ("href"); if ((link.indexOf ("http: //") \u003d\u003d 0) || (ბმული .indexOf ("https: //") \u003d\u003d 0)) (console.log ("ბმული href \u003d" + ბმული);))); // თუ გვერდი შეიცავს შემდეგ ბმულებს: // Yandex // როგორ მუშაობს JavaScript? // Bootstrap // შემდეგ კონსოლში ვნახავთ შემდეგ შედეგს: // https://www.yandex.ru/ // http://getbootstrap.com/

მაგალითად, მოდით გავეცნოთ, თუ როგორ უნდა მოვიძიოთ თითოეული DOM ელემენტი, რომელსაც აქვს კლასის სახელი (მოდით განვიხილოთ იმავე კლასის ყველა ელემენტი)

მაგალითად, მოდით გაერკვნენ, თუ როგორ უნდა განმეორდეს გვერდზე არსებული ყველა ელემენტი.

მაგალითად, მოდით დავბეჭდოთ ყველა შეყვანის ელემენტის მნიშვნელობა გვერდზე.

$ ("შეყვანა"). თითოეული (ფუნქცია () (console.log ($ (ეს) .val ());));

მაგალითად, მოდით განმეორდეს ყველა ბავშვზე, რომლებიც მდებარეობს ul- ში, id \u003d "myList" - ით (თითოეული ბავშვი).

• Html
• JavaScript

მოდით განვიხილოთ გზა, რომლითაც შეგიძლიათ განსაზღვროთ ბოლო ინდექსი (ელემენტი) jQuery თითოეულ მეთოდში.

// აირჩიეთ ელემენტები var myList \u003d $ ("ულ ლი"); // ელემენტების რაოდენობის განსაზღვრა var total \u003d myList.length; // გამეორება არჩეულ ელემენტებზე myList.each (ფუნქცია (ინდექსი) (თუ (ინდექსი \u003d\u003d\u003d ჯამური - 1) (// ეს არის ბოლო ელემენტი შერჩევაში));

არც ისე დიდი ხნის წინ, წამიყვანა JavaScript ქმნის ასოციაციურ მასივს... საოცარია, მანამდე ის არასდროს მჭირდებოდა. JavaScript... დავიწყე ინტერნეტის ძებნა, თუ როგორ უნდა გავაკეთო ეს. და მე ძალიან გამიკვირდა, რომ ხალხის უზარმაზარი რაოდენობა წერს, რომ ეს შეუძლებელია JavaScript ეს არ არის. საბედნიეროდ, ჩემმა მრავალწლიანმა გამოცდილებამ მითხრა, რომ ისინი სისულელეა. ბოლოს ბოლოს გავარკვიე როგორ შევქმნათ ასოციაციური მასივი JavaScript- ში, რაზეც ამ სტატიაში მოგითხრობთ.

ქვემოთ მოცემულია კოდი, რომელშიც იქმნება ასოციაციური მასივი, შემდეგ დაემატება კიდევ ერთი ელემენტი და, ბოლოს, მასივი განმეორდება მარყუჟის მეშვეობით:

ამ სტატიაში ჩვენ განვიხილეთ ასოციაციური მასივების შექმნა, მათი ცვლილება, ისევე როგორც სრული ჩამოთვლა ციკლის განმავლობაში ამისთვის... მე პირადად გამოვიყენე ასოციაციური მასივები JavaScript- ში მხოლოდ ერთხელ, მაგრამ თქვენ უნდა იცოდეთ ასეთი შესაძლებლობა.