Массив методдору

Массив методдору

 

Массивдер көптөгөн ыкмаларды камсыз кылат. Аны жеңилдетүү үчүн алар бул бөлүмдө топтоштурулган.

Элементтерди кошуу/алып салуу

Элементтерди башынан же аягынан алып салуу ыкмаларын билебиз:

  • arr.push(...items)- аягына элементтерди кошот,
  • arr.pop()- элементти аягынан чыгарат,
  • arr.shift()- элементти башынан чыгарат,
  • arr.unshift(...items)- башына элементтерди кошот.

Башкалар бар.

кошуу

Массивден элементти кантип алып салуу керек?

Массивдер объект болгондуктан, сиз аракет кыла аласыз delete:

@A@let arr = ["I", "go", "home"];

delete arr[1]; // удалить "go"

alert( arr[1] ); // undefined

// теперь arr = ["I",  , "home"];
alert( arr.length ); // 3@A@

Элемент алынып салынды, бирок массивде дагы эле үч элемент бар, биз муну көрө алабыз arr.length == 3.

Бул табигый нерсе, анткени delete obj.keyал маанини ачкыч менен алып салат key. Мунун баары ал жасайт. Объекттерге жакшы. Бирок массивдер үчүн биз адатта калган элементтердин жылып, орун ээлешин каалайбыз. Биз массив кыскарат деп күтөбүз.

Ошондуктан, атайын ыкмаларды колдонуу керек.

arr.splice(str) ыкмасы массивдер менен иштөө үчүн универсалдуу "Швейцариялык бычак" болуп саналат. Баарын кыла алат: элементтерди кошуу, алып салуу жана алмаштыруу.

Синтаксис:

@A@arr.splice(start[, deleteCount, elem1, ..., elemN])@A@

arrАл индекстен баштап өзгөртөт start: deleteCountэлементтерди алып салат, анан elem1, ..., elemNаларды өз ордуна киргизет. Өчүрүлгөн элементтердин массивин кайтарат.

Бул ыкманы мисалдарды карап түшүнүү оңой.

алып салуу менен баштайлы:

@A@let arr = ["Я", "изучаю", "JavaScript"];

arr.splice(1, 1); // начиная с индекса 1, удалить 1 элемент

alert( arr ); // осталось ["Я", "JavaScript"]@A@

Оңой, туурабы? индекстен баштап , элементти 1алып салды .1

Төмөнкү мисалда биз 3 элементти алып салып, аларды башка 2 элементке алмаштырабыз.

 
 
@A@let arr = ["Я", "изучаю", "JavaScript", "прямо", "сейчас"];

// удалить 3 первых элемента и заменить их другими
arr.splice(0, 3, "Давай", "танцевать");

alert( arr ) // теперь ["Давай", "танцевать", "прямо", "сейчас"]@A@

spliceБул жерде сиз ал алынып салынган элементтердин массивдерин кайтарып берерин көрө аласыз :

 
 
@A@let arr = ["Я", "изучаю", "JavaScript", "прямо", "сейчас"];

// удалить 2 первых элемента
let removed = arr.splice(0, 2);

alert( removed ); // "Я", "изучаю" <-- массив из удалённых элементов@A@

Метод spliceошондой эле элементтерди жок кылбастан киргизе алат, жөн гана deleteCountтөмөнкүгө орнотулган 0:

 
 
@A@let arr = ["Я", "изучаю", "JavaScript"];

// с индекса 2
// удалить 0 элементов
// вставить "сложный", "язык"
arr.splice(2, 0, "сложный", "язык");

alert( arr ); // "Я", "изучаю", "сложный", "язык", "JavaScript"@A@
Терс көрсөткүчтөргө жол берилет

Бул жана башка массив ыкмаларында терс индекстерге жол берилет. Алар позицияны массивдин аягынан төмөнкүдөй аныкташат:

 
 
@A@let arr = [1, 2, 5];

// начиная с индекса -1 (перед последним элементом)
// удалить 0 элементов,
// затем вставить числа 3 и 4
arr.splice(-1, 0, 3, 4);

alert( arr ); // 1,2,3,4,5@A@

кесим

arr.slice ыкмасы окшошуна караганда алда канча жөнөкөй arr.splice.

Синтаксис:

@A@arr.slice([start], [end])@A@

startАл индекстен баштап end(кошпогондо ) чейинки бардык элементтерди көчүрүүчү жаңы массивди кайтарат end. startжана endтерс болушу мүмкүн, бул учурда позиция массивдин аягынан баштап эсептелет.

Бул сап ыкмасына окшош str.slice, бирок ички саптардын ордуна кошумча массивдерди кайтарат.

Мисалы:

@A@let arr = ["t", "e", "s", "t"];

alert( arr.slice(1, 3) ); // e,s (копирует с 1 до 3)

alert( arr.slice(-2) ); // s,t (копирует с -2 до конца)@A@

sliceАргументсиз чакырса болот : arr.slice()көчүрмөсүн түзөт arr. Бул көп учурда баштапкы массивди өзгөртпөшү керек болгон кийинки трансформациялар үчүн массивдин көчүрмөсүн түзүү үчүн колдонулат.

concat

arr.concat ыкмасы башка массивдерден жана кошумча маанилерден маалыматтарды көчүрүүчү жаңы массивди түзөт.

Синтаксис:

@A@arr.concat(arg1, arg2...)@A@

Ал аргументтердин ар кандай санын талап кылат, алар массивдер же жөнөкөй маанилер болушу мүмкүн.

Натыйжада arr, андан кийин arg1жана arg2башка элементтерди камтыган жаңы массив пайда болот.

Эгерде аргумент argNмассив болсо, анда анын бардык элементтери көчүрүлөт. Болбосо, аргументтин өзү көчүрүлөт.

Мисалы

@A@let arr = [1, 2];

// создать массив из: arr и [3,4]
alert( arr.concat([3, 4]) ); // 1,2,3,4

// создать массив из: arr и [3,4] и [5,6]
alert( arr.concat([3, 4], [5, 6]) ); // 1,2,3,4,5,6

// создать массив из: arr и [3,4], потом добавить значения 5 и 6
alert( arr.concat([3, 4], 5, 6) ); // 1,2,3,4,5,6@A@

Ал, адатта, массивдерден элементтерди гана көчүрөт. Башка объекттер, алар массивдерге окшош болсо да, төмөнкүдөй кошулат:

@A@let arr = [1, 2];

let arrayLike = {
  0: "что-то",
  length: 1
};

alert( arr.concat(arrayLike) ); // 1,2,[object Object]@A@

...Бирок массив сыяктуу объект өзгөчө касиетке ээ болсо Symbol.isConcatSpreadable, анда ал массив катары каралат, анын concatордуна анын элементтерине : кошулат:

@A@let arr = [1, 2];

let arrayLike = {
  0: "что-то",
  1: "ещё",
  [Symbol.isConcatSpreadable]: true,
  length: 2
};

alert( arr.concat(arrayLike) ); // 1,2,что-то,ещё@A@

Кайталоо: forEach

arr.forEach методу массивдеги ар бир элемент үчүн функцияны иштетүүгө мүмкүндүк берет.

Синтаксис:

@A@arr.forEach(function(item, index, array) {
  // ... делать что-то с item
});@A@

Мисалы, бул код массивдин ар бир элементин көрсөтөт:

@A@// Вызов alert для каждого элемента
["Бильбо", "Гэндальф", "Назгул"].forEach(alert);@A@

Бул дагы максаттуу массивдеги элементтин орду жөнүндө айтып берет

@A@["Бильбо", "Гэндальф", "Назгул"].forEach((item, index, array) => {
  alert(`У ${item} индекс ${index} в ${array}`);
});@A@

Функциянын натыйжасы (эгерде ал бир нерсени кайтарса) жокко чыгарылат жана этибарга алынбайт.

Массив издөө

Эми массивди издөө ыкмаларын карап көрөлү.

indexOf/lastIndexOf и камтыйт

arr.indexOf жана arr.includes методдору бирдей синтаксиске ээ жана алардын саптык кесиптештери менен бирдей эле нерсени аткарышат, бирок символдордун ордуна элементтерде иштешет:

  • arr.indexOf(item, from)itemиндекстен баштап издейт fromжана элемент табылган индекстин номерин кайтарат, болбосо -1.
  • arr.includes(item, from)itemиндекстен баштап издейт fromжана trueиздөө ийгиликтүү болсо кайтарат.

Адатта, бул ыкмалар бир гана аргумент менен колдонулат: издөө item. Демейки боюнча, издөө башынан жүзөгө ашырылат.

Мисалы:

@A@let arr = [1, 0, false];

alert( arr.indexOf(0) ); // 1
alert( arr.indexOf(false) ); // 2
alert( arr.indexOf(null) ); // -1

alert( arr.includes(1) ); // true@A@

Сураныч, ыкмалар катуу салыштырууну колдонорун эске алыңыз ===. Ошентип, издесек , нөл эмес, falseтак табат .false

Эгерде биз массивде элемент бар же жок экенин текшергибиз келсе жана анын индексин билүүнүн кереги жок болсо, аны колдонуу артык arr.includes.

arr.lastIndexOf окшош, бирок оңдон солго карай издейт .indexOf

@A@let fruits = ['Яблоко', 'Апельсин', 'Яблоко']

alert( fruits.indexOf('Яблоко') ); // 0 (первый 'Яблоко')
alert( fruits.lastIndexOf('Яблоко') ); // 2 (последний 'Яблоко')@A@
Метод includesтуура иштететNaN

Кичинекей, бирок көңүл бура турган өзгөчөлүк includes- бул туура иштетилет NaN, айырмаланып indexOf:

@A@const arr = [NaN];
alert( arr.indexOf(NaN) ); // -1 (неверно, должен быть 0)
alert( arr.includes(NaN) );// true (верно)@A@

Себеби, ал includesJavaScriptке кийинчерээк кошулган жана заманбап салыштыруу алгоритмин колдонот.

табуу и findIndex/findLastIndex

Элестеткиле, бизде бир катар объекттер бар. Белгилүү бир шарты бар объектти кантип таба алабыз?

Бул жерде arr.find ыкмасы жардам берет .

Синтаксис:

@A@let result = arr.find(function(item, index, array) {
  // если true - возвращается текущий элемент и перебор прерывается
  // если все итерации оказались ложными, возвращается undefined
});@A@

Функция массивдин ар бир элементи үчүн кезек менен чакырылат:

  • itemбашка элементи болуп саналат.
  • indexанын индекси болуп саналат.
  • array- массивдин өзү.

Функция кайтарылса true, издөө токтотулат жана кайтарылат item. Эч нерсе табылбаса, кайтарат undefined.

Мисалы, бизде ар биринде талаалар idжана name. Келгиле, колдонуучуну табалы id == 1:

@A@let users = [
  {id: 1, name: "Вася"},
  {id: 2, name: "Петя"},
  {id: 3, name: "Маша"}
];

let user = users.find(item => item.id == 1);

alert(user.name); // Вася@A@

Чыныгы жашоодо объекттердин массивдери кеңири таралгандыктан, метод findабдан пайдалуу.

Белгилей кетсек, бул мисалда биз бир аргумент менен findфункцияны өткөрүп жатабыз. item => item.id == 1Бул типтүү, бул функциянын башка аргументтери сейрек колдонулат.

arr.findIndex методу бирдей синтаксиске ээ , бирок ал элементтин өзүн эмес, элемент табылган индексти кайтарат. -1Эч нерсе табылбаса, маани кайтарылат.

arr.findLastIndex ыкмасы окшош, findIndexбирок оңдон солго издейт, мисалы lastIndexOf.

Мисалы:

@A@let users = [
  {id: 1, name: "Вася"},
  {id: 2, name: "Петя"},
  {id: 3, name: "Маша"},
  {id: 4, name: "Вася"}
];

// Найти индекс первого Васи
alert(users.findIndex(user => user.name == 'Вася')); // 0

// Найти индекс последнего Васи
alert(users.findLastIndex(user => user.name == 'Вася')); // 3@A@

чыпкалоо

Метод findфункцияны кайтарууга алып келе турган бир (биринчи) элементти издейт true.

Эгерде көптөгөн элементтер табылса, arr.filter(fn) колдонсо болот .

Синтаксис ге окшош find, бирок filterбардык дал келген элементтердин массивин кайтарат:

@A@let results = arr.filter(function(item, index, array) {
  // если `true` -- элемент добавляется к results и перебор продолжается
  // возвращается пустой массив в случае, если ничего не найдено
});@A@

Мисалы:

@A@let users = [
  {id: 1, name: "Вася"},
  {id: 2, name: "Петя"},
  {id: 3, name: "Маша"}
];

// возвращает массив, состоящий из двух первых пользователей
let someUsers = users.filter(item => item.id < 3);

alert(someUsers.length); // 2@A@

Массивди конверсиялоо

Массивди трансформациялоо жана иреттөө ыкмаларына өтөбүз.

карта

arr.map ыкмасы эң пайдалуу жана көп колдонулгандардын бири.

Ал массивдеги ар бир элемент үчүн функцияны чакырат жана ал функциянын натыйжаларынын массивин кайтарат.

Синтаксис:

@A@let result = arr.map(function(item, index, array) {
  // возвращается новое значение вместо элемента
});@A@

Мисалы, бул жерде биз ар бир элементти анын узундугуна айландырабыз:

let lengths = ["Бильбо", "Гэндальф", "Назгул"].map(item => item.length);
alert(lengths); // 6,8,6

sort(fn)

arr.sort () чалуу массивди ордунда сорттоп , андагы элементтердин тартибин өзгөртөт.

Ал ошондой эле иреттелген массивди кайтарат, бирок, адатта, кайтаруу мааниси arr.

Мисалы:

@A@let arr = [ 1, 2, 15 ];
// метод сортирует содержимое arr
arr.sort();
alert( arr );  // 1, 15, @A@

Сиз бул мисалдан таң калыштуу нерсени байкадыңызбы?

Тартип болуп калды 1, 15, 2. Бул туура эмес. Бирок эмне үчүн?

Демейки боюнча, элементтер саптар катары иреттелет.

Сөзмө-сөз, салыштырганда элементтер саптарга айландырылат. Саптар үчүн лексикографиялык тартип колдонулат жана чындыгында эле "2" > "15".

Өзүбүздүн сорттоо тартибин колдонуу үчүн, функцияны аргумент катары беришибиз керек arr.sort().

Функция бир жуп мааниге кайтып келиши керек:

@A@function compare(a, b) {
  if (a > b) return 1; // если первое значение больше второго
  if (a == b) return 0; // если равны
  if (a < b) return -1; // если первое значение меньше второго
}@A@

Мисалы, сандарды иреттөө үчүн:

@A@function compareNumeric(a, b) {
  if (a > b) return 1;
  if (a == b) return 0;
  if (a < b) return -1;
}
let arr = [ 1, 2, 15 ];

arr.sort(compareNumeric);

alert(arr);  // 1, 2, 15@A@

Азыр баары каалагандай иштеп жатат.

Келгиле, артка кадам таштап, эмне болуп жатканын ойлонолу. arrкандайдыр бир массив болушу мүмкүн, туурабы? Ал сандарды, саптарды, объекттерди же башка нерсени камтышы мүмкүн. Бизде кээ бир элементтердин жыйындысы бар . Аны сорттоо үчүн бизге анын элементтерин салыштырууну билген иреттөө функциясы керек. Демейки боюнча, элементтер саптар катары иреттелет.

Метод arr.sort(fn)жалпы сорттоо алгоритмин ишке ашырат. Биз анын ички кантип иштээрин кызыктыруунун кереги жок (көпчүлүк учурларда бул оптималдаштырылган Quicksort же Timsort ). Ал массивди кайталайт, берилген функциянын жардамы менен анын элементтерин салыштырат жана аларды кайра иреттейт. Бизге керек болгон нерсе - fnсалыштырууну камсыз кылуу.

Айтмакчы, эгер биз кайсы элементтер салыштырылып жатканын билгибиз келсе, аларды экранда көрсөтүүгө эч нерсе тоскоол болбойт:

@A@[1, -2, 15, 2, 0, 8].sort(function(a, b) {
  alert( a + " <> " + b );
  return a - b;
});@A@

Иштөө учурунда алгоритм бир элементти башка көптөгөн элементтер менен салыштыра алат, бирок мүмкүн болушунча азыраак салыштырууга аракет кылат.

Салыштыруу функциясы каалаган санды кайтара алат

Салыштыруу функциясынан талап кылынган нерсе - бул "чоң" деп айтуу үчүн кандайдыр бир оң сан жана "кем" деп айтуу үчүн терс сан.

Бул кыскараак функцияларды жазууга мүмкүндүк берет:

@A@let arr = [ 1, 2, 15 ];

arr.sort(function(a, b) { return a - b; });

alert(arr);  // 1, 2, 15@A@
Жебе функцияларын колдонуу жакшыраак

Жебе функциялары эсиңиздеби ? Сорттоо тыкан көрүнүш үчүн аларды бул жерден колдонсоңуз болот:

@A@arr.sort( (a, b) => a - b );@A@

Жогорудагы узун версиядагыдай эле иштейт.

localeCompareСаптар үчүн колдонуңуз

Сапты салыштыруу алгоритми эсиңиздеби ? Демейки боюнча, ал тамгаларды коддору боюнча салыштырат.

str.localeCompareКөптөгөн алфавиттер үчүн, мисалы, тамгаларды туура иреттөө ыкмасын колдонуу жакшы Ö.

Мисалы, немис тилиндеги бир нече өлкөлөрдү иреттейли:

@A@let countries = ['Österreich', 'Andorra', 'Vietnam'];

alert( countries.sort( (a, b) => a > b ? 1 : -1) ); // Andorra, Vietnam, Österreich (неправильно)

alert( countries.sort( (a, b) => a.localeCompare(b) ) ); // Andorra,Österreich,Vietnam (правильно!)@A@

тескери

arr.reverse ыкмасы элементтердин тартибин тескери кылат arr.

Мисалы:

@A@let arr = [1, 2, 3, 4, 5];
arr.reverse();

alert( arr ); // 5,4,3,2,1@A@

arrАл ошондой эле элементтери кайра иреттелген массивди кайтарат .

бөлүү жана кошулуу

Чыныгы турмуштук кырдаал. Биз билдирүү жөнөтүү тиркемесин жазып жатабыз, ал эми келүүчү аны жөнөтө тургандардын атын үтүр менен бөлүп киргизет: Вася, Петя, Маша. Бирок биз үчүн бир сапка караганда бир катар аталыштар менен иштөө алда канча ыңгайлуу. Кантип алса болот?

str.split(delim) ыкмасы дал ушундай кылат. Ал берилген бөлгүчтө сапты массивге бөлөт delim.

Төмөндөгү мисалда бул бөлгүч үтүрлөрдүн жана боштуктардын саптары.

@A@let names = 'Вася, Петя, Маша';

let arr = names.split(', ');

for (let name of arr) {
  alert( `Сообщение получат: ${name}.` ); // Сообщение получат: Вася (и другие имена)
}@A@

Метод splitкошумча экинчи сандык аргументке ээ - массивдеги элементтердин санына чектөө. Көрсөтүлгөндөн көп болсо, массивдин калган бөлүгү жок кылынат. Иш жүзүндө, бул сейрек колдонулат:

@A@let arr = 'Вася, Петя, Маша, Саша'.split(', ', 2);

alert(arr); // Вася, Петя@A@
Орфография

split(s)Бош аргумент менен чакыруу sсапты тамгалар массивине бузуп салат:

@A@let str = "тест";

alert( str.split('') ); // т,е,с,т@A@

arr.join(клей) чакырылышы так карама-каршы келет split. Ал элементтердин саптарын алардын арасына arrкиргизүү менен түзөт.glue

Мисалы:

@A@let arr = ['Вася', 'Петя', 'Маша'];

let str = arr.join(';'); // объединить массив в строку через ;

alert( str ); // Вася;Петя;Маша@A@

азайтуу/кичирейтүүОң

Массив боюнча кайталоо керек болгондо, forEachже forколдонсок болот for..of.

Массивди айланып өтүү жана ар бир элемент үчүн маалыматтарды кайтаруу керек болгондо, биз колдоно алабыз map.

arr.reduce жана arr.reduceRight ыкмалары жогорудагы ыкмаларга окшош, бирок алар бир аз татаалыраак. Алар бүт массивдин негизинде бир маанини эсептөө үчүн колдонулат.

Синтаксис:

@A@let value = arr.reduce(function(accumulator, item, index, array) {
  // ...
}, [initial]);@A@

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

Аргументтер:

  • accumulator– бул функцияга мурунку чалуунун натыйжасы initialбиринчи чакырууга барабар (эгер өтүп кетсе initial),
  • item- массивдин кийинки элементи,
  • index- анын позициясы
  • array- массивдин өзү.

Функция чакырылганда, анын мурунку чалуусунун натыйжасы биринчи аргумент катары кийинки чакырууга берилет.

Ошентип, биринчи аргумент түпкүлүгүндө бардык мурунку функциялык чалуулардын биргелешкен натыйжасын сактаган аккумулятор болуп саналат. Бүткөндөн кийин, натыйжа болуп калат reduce.

кыйын угулат?

Бул ыкманы мисал менен түшүнүү оңой.

Бул жерде массивдин бардык элементтеринин суммасын бир сапта алабыз:

@A@let arr = [1, 2, 3, 4, 5];

let result = arr.reduce((sum, current) => sum + current, 0);

alert(result); // 15@A@

Өткөрүлгөн функция reduceэки гана аргументти алат, бул адатта жетиштүү.

Анын кантип иштээрин майда-чүйдөсүнө чейин талдап көрөлү.

  1. Биринчи иштетүүдө, sumбарабар initial(акыркы аргумент reduce), башкача айтканда 0, , жана currentге барабар массивдин биринчи элементи 1. Ошентип, функциянын натыйжасы болуп саналат 1.
  2. Экинчи иштетүүдө sum = 1массивдин экинчи элементин ( ) кошуп 2, аны кайтарабыз.
  3. Үчүнчү чуркоодо sum = 3, ага биз кийинки элементти кошобуз жана башкалар...

Эсептөөлөрдүн агымы төмөнкүдөй:

Же ар бир сап массивдин кийинки элементине функция чакырыгын көрсөткөн таблица түрүндө:

  sum current result
биринчи чалуу 0 1 1
экинчи чалуу 1 2 3
үчүнчү чалуу 3 3 6
төртүнчү чакырык 6 4 10
бешинчи чалуу 10 5 15

Бул жерде сиз мурунку чалуунун натыйжасы кийинкисинин биринчи аргументине кантип өткөнүн ачык көрө аласыз.

Биз ошондой эле баштапкы маанини калтыра алабыз:

 
 
@A@let arr = [1, 2, 3, 4, 5];

// убрано начальное значение (нет 0 в конце)
let result = arr.reduce((sum, current) => sum + current);

alert( result ); // 15@A@

Натыйжа так ушундай! Себеби initial, биринчи маани жок болгон учурда массивдин биринчи элементи алынат да, санап чыгуу экинчиден башталат.

Эсептөө таблицасы биринчи сапты алып салганда бирдей болот.

Бирок мындай колдонуу өтө этияттыкты талап кылат. Эгерде массив бош болсо, анда reduceбаштапкы мааниси жок чалуу ката кетирет.

Бул жерде бир мисал:

@A@let arr = [];

// Error: Reduce of empty array with no initial value
// если бы существовало начальное значение, reduce вернул бы его для пустого массива.
arr.reduce((sum, current) => sum + current);@A@

Ошондуктан, ар дайым баштапкы маанини көрсөтүү сунушталат.

arr.reduceRight ыкмасы да ушундай эле иштейт, бирок массивди оңдон солго карай кайталайт.

Array.isArray

Массивдер тилдин өзүнчө түрүн түзбөйт. Алар объектиге негизделген.

Ошондуктан, typeofал жөнөкөй объектти массивден айырмалай албайт:

@A@alert(typeof {}); // object
alert(typeof []); // тоже object@A@

…Бирок массивдер ушунчалык көп колдонулгандыктан, алар бул үчүн атайын ыкманы ойлоп табышты: Array.isArray(value) . Ал массив trueболсо кайтарат, эгер жок болсо.valuefalse

@A@alert(Array.isArray({})); // false

alert(Array.isArray([])); // true@A@

Көпчүлүк ыкмалар "thisArg" ды колдойт

, , сыяктуу функцияларды чакырган дээрлик бардык массив методдору find, filter, map, дан башкасы sort, кошумча параметрди кабыл алышат thisArg.

Бул параметр жогоруда түшүндүрүлгөн эмес, анткени ал өтө сейрек колдонулат, бирок теманы толук түшүнүү үчүн биз аны карап чыгышыбыз керек.

Бул ыкмалардын толук синтаксиси:

@A@arr.find(func, thisArg);
arr.filter(func, thisArg);
arr.map(func, thisArg);
// ...
// thisArg -- необязательный последний аргумент@A@

параметр мааниси болуп thisArgкалат .thisfunc

Мисалы, бул жерде биз armyчыпка катары объект ыкмасын колдонобуз жана thisArgага контекстти өткөрүп беребиз:

@A@let army = {
  minAge: 18,
  maxAge: 27,
  canJoin(user) {
    return user.age >= this.minAge && user.age < this.maxAge;
  }
};

let users = [
  {age: 16},
  {age: 20},
  {age: 23},
  {age: 30}
];

// найти пользователей, для которых army.canJoin возвращает true
let soldiers = users.filter(army.canJoin, army);

alert(soldiers.length); // 2
alert(soldiers[0].age); // 20
alert(soldiers[1].age); // 23@A@

Эгерде биз жөн эле жогорудагы мисалда колдонсок users.filter(army.canJoin), анда чакыруу army.canJoinөзүнчө функциянын режиминде болмок, менен this=undefined. Бул дароо катага алып келет.

Чалуу users.filter(army.canJoin, army)менен алмаштырса болот users.filter(user => army.canJoin(user)), ал да ушундай кылат. Акыркы белги ого бетер көп колдонулат, анткени жебе функциясы көбүрөөк сүрөттөмө болуп саналат.

Бардыгы

Массив ыкмаларын алдамчылык баракчасы:

  • Элементтерди кошуу/алып салуу үчүн:

    • push (...items)- аягына элементтерди кошот,
    • pop()- элементти аягынан чыгарат,
    • shift()- элементти башынан чыгарат,
    • unshift(...items)- башына элементтерди кошот.
    • splice(pos, deleteCount, ...items)– индекстен баштап элементтерди posалып салат deleteCountжана киргизет items.
    • slice(start, end)start– элементтерди индекстен end(кошпогондо ) ага көчүрүү менен жаңы массивди түзөт end.
    • concat(...items)– жаңы массивди кайтарат: учурдагы массивдин бардык мүчөлөрүн көчүрөт жана кошот items. Эгерде бирөө itemsмассив болсо, анда анын элементтери алынат.

  • Элементтер арасында издөө үчүн:

    • indexOf/lastIndexOf(item, pos)item– позициясынан баштап издейт posжана анын индексин кайтарат, же -1эч ким табылбаса.
    • includes(value)– trueмассивде элемент бар болсо кайтарат value, болбосо false.
    • find/filter(func)- функция аркылуу элементтерди чыпкалайт жана биринчи/бардык маанилерди кайтарып берет, функциядан өтүп, returns true.
    • findIndexокшош, findбирок маанинин ордуна индексти кайтарат.

  • Элементтерди кайталоо үчүн:

    • forEach(func)– funcар бир элементти чакырат. Эч нерсе кайтарбайт.

  • Массивди айландыруу үчүн:

    • map(func)- ар бир элемент үчүн чалуу натыйжаларынан жаңы массивди түзөт func.
    • sort(func)- массивди "жеринде" иреттейт, анан аны кайтарат.
    • reverse()– “ордунда” элементтердин тартибин өзгөртүп, өзгөртүлгөн массивди кайтарат.
    • split/join- сапты массивге жана тескерисинче айлантат.
    • reduce/reduceRight(func, initial)- бүт массивдин негизинде бир маанини эсептеп, funcар бир элементти чакырып, чалуулардын ортосунда аралык натыйжаны өткөрөт.

  • Кошумча:

    • Array.isArray(arr)arrмассив экендигин текшерет .

sort, reverseжана ыкмалары spliceбаштапкы массивди өзгөртөөрүн эске алыңыз .

Бул ыкмалар эң көп колдонулат, алар 99% учурда жетиштүү. Бирок башкалар бар:

  • arr.some(fn) / arr.every(fn) массивди текшерет.

    Функция fnмассивдин ар бир элементи үчүн ушундай эле жол менен чакырылат map. Эгерде кандайдыр бир/бардык чалуу натыйжалары болсо true, анда ыкма кайтарып берет true, болбосо false.

    ||Бул ыкмалар жана операторлоруна окшоп иштешет &&: эгер fnал чындыкка кайтарылса, arr.some()ал дароо кайтып келет trueжана калган элементтер боюнча итерациялоону токтотот; эгерде fnал "false" деп кайтарса, arr.every()дароо кайтып келет falseжана ошондой эле калган элементтерди кайталоону токтотот.

    everyМассивдерди салыштыруу үчүн биз колдоно алабыз :

    @A@function arraysEqual(arr1, arr2) {
  return arr1.length === arr2.length && arr1.every((value, index) => value === arr2[index]);
}

alert( arraysEqual([1, 2], [1, 2])); // true@A@

  • arr.fill(маани, башталыш, аяктоо)value - индекстен баштап startмассивди кайталоо менен толтурат end.

  • arr.copyWithin(максат, баштоо, аяктоо) – анын элементтерин позициядан башталып start, аягы end, өзүнө , позициясына көчүрөт target(бар болгондордун үстүнө жазуу).

  • arr.flat(depth) / arr.flatMap(fn) көп өлчөмдүү массивден жаңы жалпак массивди түзөт.

Толук тизме үчүн MDN шилтемесин караңыз .

Бир караганда, эстеп калуу абдан кыйын болгон ар кандай ыкмалар көп окшойт. Бирок бул көрүнгөндөн алда канча жеңил.

Жогоруда келтирилген чат баракчасын кылдаттык менен изилдеп, андан кийин бул бөлүмдө сунушталган маселелерди чечиңиз. Бул сизге массив ыкмаларын туура колдонуу боюнча керектүү тажрыйбаны берет.

Массив менен бир нерсе жасоо керек болгондо жана аны кантип жасоону билбей жатсаңыз, бул жерге келип, үстөлдү карап, туура ыкманы издеңиз. Мисалдар сизге туура түшүнүүгө жардам берет жана көп убакыт өтпөй эле ыкмаларды көп күч жумшабастан тез жаттап каласыз.

Tasks

Чек-сол-туурасы сыяктуу текстти borderLeftWidthке которуңуз

маанилүүлүгү: 5

camelize(str)"my-short-string" сыяктуу саптарды "myShortString"ге айландырган функцияны жазыңыз .

Башкача айтканда, дефис алынып салынып, алардан кийинки бардык сөздөр баш тамга менен жазылат.

Мисалдар:

camelize("background-color") == 'backgroundColor';
camelize("list-style-image") == 'listStyleImage';
camelize("-webkit-transition") == 'WebkitTransition';

splitPS Кеңеш: сапты символдордун массивине бөлүү үчүн колдонуңуз , андан кийин баарын керек болсо кайра жасап, joinыкманы кайра туташтырыңыз.

Тапшырма үчүн тесттер менен кумкоргонду ачыңыз.

чечим

Диапазон чыпкалоо

маанилүүлүгү: 4

filterRange(arr, a, b)Массивди алган функцияны жазыңыз , маанилери андан чоң же барабар жана андан кичине же барабар arrэлементтерди издеңиз жана натыйжаны массив катары кайтарыңыз.ab

Функция жаңы массивди кайтарып, түпнускасын өзгөртпөшү керек.

Мисалы:

@A@let arr = [5, 3, 8, 1];

let filtered = filterRange(arr, 1, 4);

alert( filtered ); // 3,1 (совпадающие значения)

alert( arr ); // 5,3,8,1 (без изменений)@A@

Тапшырма үчүн тесттер менен кумкоргонду ачыңыз.

чечим

Орнундагы диапазон боюнча чыпкалоо

маанилүүлүгү: 4

filterRangeInPlace(arr, a, b)Массивди алган arrжана андан aжана ортосундагылардан башка бардык маанилерди алып салган функцияны жазыңыз b. Башкача айтканда, чек окшойт a ≤ arr[i] ≤ b.

Функция алынган массивди өзгөртүп, эч нерсе кайтарбашы керек.

Мисалы:

@A@let arr = [5, 3, 8, 1];

filterRangeInPlace(arr, 1, 4); // удалены числа вне диапазона 1..4

alert( arr ); // [3, 1]@A@

Тапшырма үчүн тесттер менен кумкоргонду ачыңыз.

чечим

Кемүү тартибинде иреттөө

маанилүүлүгү: 4
@A@let arr = [5, 2, 1, -10, 8];@A@

// ... ваш код для сортировки по убыванию

@A@alert( arr ); // 8, 5, 2, 1, -10@A@
чечим

Массивди көчүрүү жана сорттоо

маанилүүлүгү: 5

Бизде бир катар саптар бар arr. Сиз сорттолгон көчүрмөсүн алышыңыз керек, бирок аны arrөзгөртүүсүз калтырыңыз.

copySorted(arr)Мындай көчүрмөнү кайтара турган функцияны түзүңүз .

@A@let arr = ["HTML", "JavaScript", "CSS"];

let sorted = copySorted(arr);

alert( sorted ); // CSS, HTML, JavaScript
alert( arr ); // HTML, JavaScript, CSS (без изменений)@A@
чечим

Кеңейтүүчү эсептегичти түзүңүз

маанилүүлүгү: 5

Calculator"кеңейтүүчү" эсептегич объекттерин түзүүчү конструктор функциясын түзүңүз .

Тапшырма эки бөлүктөн турат.

  1. calculate(str)Биринчиден, NUM операторунун NUMBER түрүндөгү сапты "1 + 2"(боштуктар менен бөлүнгөн) алып, натыйжаны кайтарган ыкманы ишке ашырыңыз . Метод плюс +жана минустарды түшүнүшү керек -.

    Колдонуу мисалы:

    let calc = new Calculator;

alert( calc.calculate("3 + 7") ); // 10

  2. addMethod(name, func)Андан кийин калькуляторго жаңы операцияларды кошкон ыкманы кошуңуз . Ал операторду жана аны сүрөттөгөн nameэки аргументтүү функцияны алат.func(a,b)

    *Мисалы, көбөйтүүнү , бөлүүнү /жана экспонентацияны кошолу **:

    @A@let powerCalc = new Calculator;
powerCalc.addMethod("*", (a, b) => a * b);
powerCalc.addMethod("/", (a, b) => a / b);
powerCalc.addMethod("**", (a, b) => a ** b);

let result = powerCalc.calculate("2 ** 3");
alert( result ); // 8@A@
  • Бул тапшырма кашааларды же татаал туюнтмаларды талап кылбайт.
  • Сандар жана оператор так бир боштук менен бөлүнгөн.
  • Ката менен иштөөнү кошуу ашыкча болбойт.

Тапшырма үчүн тесттер менен кумкоргонду ачыңыз.

чечим

Аттардын массивине айландыруу

маанилүүлүгү: 5

Сизде объекттердин массивдери бар userжана алардын ар биринде бар user.name. Аларды аттардын массивине айландыруучу кодду жазыңыз.

Мисалы:

@A@let vasya = { name: "Вася", age: 25 };
let petya = { name: "Петя", age: 30 };
let masha = { name: "Маша", age: 28 };

let users = [ vasya, petya, masha ];

let names = /* ... ваш код */

alert( names ); // Вася, Петя, Маша@A@
чечим

Объекттерге айландыруу

маанилүүлүгү: 5

Сизде объекттердин массивдери бар userжана объекттердин ар биринде name, surnameжана бар id.

idПараметрлери бар объекттердин дагы бир массивин түзө турган кодду жазыңыз fullName, мында - жана дан fullNameтурат .namesurname

Мисалы:

@A@let vasya = { name: "Вася", surname: "Пупкин", id: 1 };
let petya = { name: "Петя", surname: "Иванов", id: 2 };
let masha = { name: "Маша", surname: "Петрова", id: 3 };

let users = [ vasya, petya, masha ];

let usersMapped = /* ... ваш код ... */

/*
usersMapped = [
  { fullName: "Вася Пупкин", id: 1 },
  { fullName: "Петя Иванов", id: 2 },
  { fullName: "Маша Петрова", id: 3 }
]
*/

alert( usersMapped[0].id ) // 1
alert( usersMapped[0].fullName ) // Вася Пупкин@A@

Демек, сиз чындыгында эмне кылышыңыз керек, объекттердин бир массивин башкасына айлантуу. Колдонууга аракет кыл =>. Бул бир аз куулук.

чечим

Колдонуучуларды жашы боюнча сорттоо

маанилүүлүгү: 5

sortByAge(users)касиети бар объекттердин массивдерин алып age, аларды ал боюнча сорттоочу функцияны жазыңыз .

Мисалы:

@A@let vasya = { name: "Вася", age: 25 };
let petya = { name: "Петя", age: 30 };
let masha = { name: "Маша", age: 28 };

let arr = [ vasya, petya, masha ];

sortByAge(arr);

// теперь: [vasya, masha, petya]
alert(arr[0].name); // Вася
alert(arr[1].name); // Маша
alert(arr[2].name); // Петя@A@
чечим

Аралаш массив

маанилүүлүгү: 3

shuffle(array)Массивдин элементтерин аралаштырган (кокусунан иретке келтирүүчү) функцияны жазыңыз .

Бир нече жолу өтүү shuffleар кандай элементтердин ырааттуулугуна алып келиши мүмкүн. Мисалы:

@A@let arr = [1, 2, 3];

shuffle(arr);
// arr = [3, 2, 1]

shuffle(arr);
// arr = [2, 1, 3]

shuffle(arr);
// arr = [3, 1, 2]
// ...@A@

Элементтердин бардык ырааттуулугу бирдей ыктымалдуулукка ээ болушу керек. Мисалы, ар бир көрүнүштүн бирдей ыктымалдуулугу менен же , же ж.б. [1,2,3]катары кайра иреттелиши мүмкүн .[1,2,3][1,3,2][3,1,2]

чечим

Орто жашты алыңыз

маанилүүлүгү: 4

getAverageAge(users)касиети бар объекттердин массивдерин алып age, орточо жашты кайтаруучу функцияны жазыңыз .

Орточо арифметикалык чоңдукту эсептөө формуласы: (age1 + age2 + ... + ageN) / N.

Мисалы:

@A@let vasya = { name: "Вася", age: 25 };
let petya = { name: "Петя", age: 30 };
let masha = { name: "Маша", age: 29 };

let arr = [ vasya, petya, masha ];

alert( getAverageAge(arr) ); // (25 + 30 + 29) / 3 = 28@A@
чечим

Массивдин уникалдуу элементтерин сактаңыз

маанилүүлүгү: 4

arrсаптардын массиви болсун .

unique(arr)Уникалдуу элементтерди гана камтыган массивди кайтаруучу функцияны жазыңыз arr.

Мисалы:

@A@function unique(arr) {
  /* ваш код */
}

let strings = ["кришна", "кришна", "харе", "харе",
  "харе", "харе", "кришна", "кришна", ":-O"
];

alert( unique(strings) ); // кришна, харе, :-O@A@

Тапшырма үчүн тесттер менен кумкоргонду ачыңыз.

чечим

Массивдин ачкычтары менен объект түзүңүз

маанилүүлүгү: 4

Формада колдонуучулардын массивине ээ болдук дейли {id:..., name:..., age:... }.

groupById(arr)Андан idачкыч жана массив элементтери баалуулуктар катары объект түзө турган функцияны түзүңүз .

Мисалы:

@A@let users = [
  {id: 'john', name: "John Smith", age: 20},
  {id: 'ann', name: "Ann Smith", age: 24},
  {id: 'pete', name: "Pete Peterson", age: 31},
];

let usersById = groupById(users);

/*
// после вызова у нас должно получиться:

usersById = {
  john: {id: 'john', name: "John Smith", age: 20},
  ann: {id: 'ann', name: "Ann Smith", age: 24},
  pete: {id: 'pete', name: "Pete Peterson", age: 31},
}
*/@A@

Бул функция серверден келген маалыматтар менен иштөөдө абдан ыңгайлуу.

Бул маселеде биз idуникалдуу деп ойлойбуз. Бир эле массивдин эки элементи болушу мүмкүн эмес id.

.reduceЧечимдеги ыкманы колдонуңуз .