Подробнее о массивах, свойствах и связанных методах javascript
Массив используется для хранения однородных элементов в непрерывных ячейках памяти. Время доступа к любому элементу массива постоянно. Но, к сожалению, структура данных массива в javascript немного другая. На самом деле javascript предоставляет объекты, которые имеют характеристики, подобные массиву, которые выглядят и ведут себя как массивы, но по сути все они являются объектами.
Есть два способа объявить массив в javascript:
- Использование литералов массива - это просто пара квадратных скобок, за которыми следуют ноль или более элементов значений, разделенных запятыми, например -
var foo = []; var days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
- Использование конструктора массива - он просто создает массив с использованием нового ключевого слова, например -
var foo = new Array();
var days = new Array('Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday');
Как мы знаем, массив - это просто реализация объектов в javascript. Массивы в javascript наследуют Array.prototype, тогда как объекты наследуют Object.prototype. С Array.prototype массивы наследуют несколько свойств и множество полезных методов, которые делают более удобным использование объектов в javascript.
Свойства -
length - свойство length массива представляет собой наибольший положительный целочисленный ключ плюс один. Если мы используем отрицательное (-ive) целое число, число с плавающей запятой или строку в качестве индекса, мы увидим их в массиве, но длина массива будет только наивысшим положительным целым числом плюс один. И еще одна важная вещь - это то, что только положительные элементы индекса массива доступны в цикле for. Давайте приведем несколько примеров -
var foo = []; console.log(foo); //0 var days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']; console.log(days) //7 var foobar = ['zero', 'one', 'Two']; foobar[10] = 'Ten'; foobar[-5] = 'minus Five'; foobar['stringKey'] = 'string Key'; console.log(foobar.length); //11 console.log(foobar); //["zero", "one", "Two", undefined × 7, "Ten",-5: "minus Five", stringKey: "string Key"]
Методы -
Есть много методов, связанных с массивами в javascript, некоторые методы изменяют существующий массив (методы мутатора), некоторые используются для доступа к значениям или возврата некоторого требуемого представления и не изменяют существующий массив (методы доступа), некоторые для перебора элементов массива (Методы итератора) и так далее. Давайте рассмотрим некоторые из наиболее часто используемых этих методов и категорий на основе их природы.
Методы мутатора -
Array.prototype.push()- push добавляет один или несколько элементов в конец массива и возвращает обновленную длину массива.
var days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'];
days.push('Saturday'); //7
console.log(days); //["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"]
Array.prototype.pop()— метод pop удаляет последний элемент из массива и возвращает этот удаленный элемент.
var days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday']; days.pop(); //Friday console.log(days); //["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday"]
Array.prototype.shift()— аналогично методу pop, shift удаляет первый элемент из массива и возвращает этот элемент.
var days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'];
days.shift(); //Sunday
console.log(days); //[ "Monday", "Tuesday", "Wednesday", "Thursday", "Friday"]
Array.prototype.unshift()- аналогично методу push, метод unshift добавляет один или несколько элементов в начало массива и возвращает обновленную длину массива.
var days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'];
days.unshift('Saturday'); //7
console.log(days); //[ "Saturday", "Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday"]
Array.prototype.sort()- этот метод сортирует элементы массива и возвращает новый отсортированный массив.
var numbers = [3,45,5,7,32,56,87,11]; numbers.sort(); //[11, 3, 32, 45, 5, 56, 7, 87] console.log(numbers); //[11, 3, 32, 45, 5, 56, 7, 87]
Array.prototype.reverse()- этот метод меняет порядок элементов существующего массива, т.е. первый элемент массива становится последним, а последний элемент становится первым элементом.
var numbers = [3,45,5,7,32,56,87,11]; numbers.reverse(); //[11, 87, 56, 32, 7, 5, 45, 3]
Array.prototype.splice()- этот метод изменяет существующий массив, добавляя новые элементы или удаляя элементы из массива. Метод соединения может принимать любое количество аргументов, первый - это начальный индекс, и он является обязательным, второй - это счетчик удалений, то есть количество удаляемых элементов из начального индекса, если задано 0, то ничего не будет удаляться, это необязательно и остальные аргументы - это элементы, которые нужно добавить по данному индексу.
Syntax - array.splice(start, deleteCount, item1, item2, ...) var days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday']; days.splice(2,1); //["Tuesday"] console.log(days); //["Sunday", "Monday", "Wednesday", "Thursday", "Friday"] days.splice(2,0,'Tuesday'); console.log(days) //["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday"]
Методы доступа -
Array.prototype.slice()- метод slice может принимать два аргумента, первый - это начальный индекс, а второй - конечный индекс, и возвращает массив, содержащий только элементы между этими двумя индексами. Начальный индекс является обязательным, конечный индекс необязательным, если конечный индекс не указан, извлеките до конца массива.
var days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday']; days.slice(2,4); //["Tuesday", "Wednesday"] days.slice(3); //["Wednesday", "Thursday", "Friday"]
Array.prototype.concat()- этот метод используется для объединения или склеивания массивов вместе и возвращает новый объединенный массив массивов.
var week_days = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday']; var weekend_days = ['Saturday', 'Sunday']; week_days.concat(weekend_days); //["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"]
Array.prototype.join()- этот метод сглаживает все элементы массива в одну строку. Аргумент, переданный вjoin, приклеивается между элементами массива при присоединении к строке.
var days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'];
days.join('-'); //Sunday-Monday-Tuesday-Wednesday-Thursday-Friday
Array.prototype.includes()- возвращаетtrueилиfalse, содержит ли массив определенный элемент, который передается в качестве аргумента в функции include.
var days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'];
days.includes('Sunday'); //true
days.includes('sunday'); //false
Array.prototype.indexOf()— Возвращает индекс первого (наименьшего) вхождения элемента в заданном массиве, или -1, если ничего не найдено. Он также принимает второй аргумент, который является необязательным, и указывает, с чего начать.
var days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'];
days.indexOf('Tuesday'); //2
days.indexOf('Tuesday', 4); //-1
days.indexOf('March'); //-1
Array.prototype.lastIndexOf()— Возвращает индекс последнего (наибольшего) вхождения элемента в заданном массиве, или -1, если ничего не найдено. Он также принимает второй аргумент, который является необязательным, и указывает, с чего начать.
var days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday']; days.lastIndexOf('Tuesday'); //2 days.lastIndexOf('Tuesday', 4); //2 days.lastIndexOf('March'); //-1
Методы итерации -
Array.prototype.filter()— Он перебирает каждый элемент данного массива и возвращает новый массив, содержащий только те элементы, которые предоставленная функция фильтрации возвращает истину.
var random_numbers = [2,4,5,6,7,9,34,26,45,39];
random_numbers.filter(function(element){
return element % 2;
});
//[5, 7, 9, 45, 39]
Array.prototype.find()— аналогично методу filter, он также перебирает массив и возвращает только первый элемент массива, который возвращает true с предоставленными условиями или функциональностью.
var random_numbers = [2,4,5,6,7,9,34,26,45,39];
random_numbers.find(function(element){
return element > 20;
});
//34
Array.prototype.forEach()—Он выполняет итерацию и вызывает функцию для каждого элемента в массиве. Эту функцию обратного вызова можно вызвать с тремя параметрами: первый - это элемент массива, второй - это индекс этого элемента, а третий - проходимый массив. .
var random_numbers = [1,2,4,5,6,7];function logArrayElements(element, index, array) { console.log('a[' + index + '] = ' + element); }random_numbers.forEach(logArrayElements);//a[0] = 11 //a[1] = 21 //a[2] = 41 //a[3] = 51 //a[4] = 61 //a[5] = 71
Array.prototype.map()- Создает новый массив с результатами вызова предоставленной функции для каждого элемента в этом массиве.
var random_numbers = [1,2,4,5,6,7];
var doubledArray = random_numbers.map(function(element){
return element * 2;
});
console.log(doubledArray); //[2, 4, 8, 10, 12, 14]
Array.prototype.reduce()— Обходит массив (слева направо) и вызывает функцию обратного вызова для каждого элемента. Возвращаемое значение постепенно передается от обратного вызова к обратному вызову, а в концеreduce()возвращает совокупное значение.
Syntax -
array.reduce(function(total, currentValue, currentIndex, arr), initialValue);
var rockets = [
{country:'Russia', launches:32 },
{ country:'US', launches:23 },
{ country:'China', launches:16 },
{ country:'Europe(ESA)', launches:7 },
{ country:'India', launches:4 },
{ country:'Japan', launches:3 } ];
var sum = rockets.reduce(function(total, elem) {
return total + elem.launches; }, 0);
sum // 85
map(), reduce() и filter() как мощные альтернативы при просмотре элементов, нахождении совокупных значений или управлении подмножествами при определенных условиях. Эти вспомогательные методы снижают сложность, работают без побочных эффектов и делают код более читабельным и поддерживаемым.
Это почти все, что касается массивов в javascript.
«У каждого конца есть начало».
- Либба Брей, Великая и ужасная красавица
