Массивы в JavaScript. Копирование массива

21.06.2017 at 12:17

Для вычисления на javascript размера массива объектов используется свойство массива length.

Var arr = ["first", "second"]; console.log(arr.length); // 2

Массивы в javascript могут иметь пропуски в индексах. Например

Var arr = ; arr = "first"; arr = "second";

Свойство length возвращает максимальный индекс массива + 1. Т.е. в приведенном примере length = 5.

Вычисление на javascript количества элементов в массиве

Array.prototype.count = function(){ var result = 0; for(var i = 0; i < this.length; i++) if (this[i] != undefined) result++; return result; }

Пример использования

Var arr = ; arr = "first"; arr = "second"; console.log(arr.count()); //2

Так же в свойство length можно присваивать значение. Это позволяет уменьшить длину существующего массива.

Var arr = ["first", "second", "third"]; arr.length = 2; console.log(arr); // ["first", "second"]

Вычисление на javascript размера массива в байтах

Массивы являются обычными объектами, так что вычисление размера массива в байтах ничем не отличается от вычисления размера любого другого объекта. К сожалению, javascript не предоставляет API для вычисления размера, так что придется считать самостоятельно. Делается это следующим образом: обходим все свойства объекта, если свойство примитивного типа — добавляем к общему результату размер экземпляра этого типа, если в свойстве лежит объект — рекурсивно считаем его размер.

Function sizeOf(obj) { var bytes = 0; if(obj !== null && obj !== undefined) { switch(typeof obj) { case "number": bytes += 8; break; case "string": bytes += obj.length * 2; break; case "boolean": bytes += 4; break; case "object": for(var key in obj) { bytes += sizeOf(obj); } break; } } return bytes; };

Метод не точный и имеющий множество проблем — например есть вероятность уйти в бесконечный цикл.

Последнее обновление: 26.03.2018

Объект Array представляет массив и предоставляет ряд свойств и методов, с помощью которых мы можем управлять массивом.

Инициализация массива

Можно создать пустой массив, используя квадратные скобки или конструктор Array:

Var users = new Array(); var people = ; console.log(users); // Array console.log(people); // Array

Можно сразу же инициализировать массив некоторым количеством элементов:

Var users = new Array("Tom", "Bill", "Alice"); var people = ["Sam", "John", "Kate"]; console.log(users); // ["Tom", "Bill", "Alice"] console.log(people); // ["Sam", "John", "Kate"]

Можно определить массив и по ходу определять в него новые элементы:

Var users = new Array(); users = "Tom"; users = "Kate"; console.log(users); // "Tom" console.log(users); // undefined

При этом не важно, что по умолчанию массив создается с нулевой длиной. С помощью индексов мы можем подставить на конкретный индекс в массиве тот или иной элемент.

length

Чтобы узнать длину массива, используется свойство length :

Var fruit = new Array(); fruit = "яблоки"; fruit = "груши"; fruit = "сливы"; document.write("В массиве fruit " + fruit.length + " элемента:
"); for(var i=0; i < fruit.length; i++) document.write(fruit[i] + "
");

По факту длиной массива будет индекс последнего элемента с добавлением единицы. Например:

Var users = new Array(); // в массиве 0 элементов users = "Tom"; users = "Kate"; users = "Sam"; for(var i=0; i

Вывод браузера:

Tom Kate undefined undefined Sam

Несмотря на то, что для индексов 2 и 3 мы не добавляли элементов, но длиной массива в данном случае будет число 5. Просто элементы с индексами 2 и 3 будут иметь значение undefined .

Копирование массива. slice()

Копирование массива может быть поверхностным или неглубоким (shallow copy) и глубоким (deep copy).

При неглубоком копировании достаточно присвоить переменной значение другой переменной, которая хранит массив:

Var users = ["Tom", "Sam", "Bill"]; console.log(users); // ["Tom", "Sam", "Bill"] var people = users; // неглубокое копирование people = "Mike"; // изменяем второй элемент console.log(users); // ["Tom", "Mike", "Bill"]

В данном случае переменная people после копирования будет указывать на тот же массив, что и переменная users. Поэтому при изменении элементов в people, изменятся элементы и в users, так как фактически это один и тот же массив.

Такое поведение не всегда является желательным. Например, мы хотим, чтобы после копирования переменные указывали на отдельные массивы. И в этом случае можно использовать глубокое копирование с помощью метода slice() :

Var users = ["Tom", "Sam", "Bill"]; console.log(users); // ["Tom", "Sam", "Bill"] var people = users.slice(); // глубокое копирование people = "Mike"; // изменяем второй элемент console.log(users); // ["Tom", "Sam", "Bill"] console.log(people); // ["Tom", "Mike", "Bill"]

В данном случае после копирования переменные будут указывать на разные массивы, и мы сможем изменять их отдельно друг от друга.

Также метод slice() позволяет скопировать часть массива:

Var users = ["Tom", "Sam", "Bill", "Alice", "Kate"]; var people = users.slice(1, 4); console.log(people); // ["Sam", "Bill", "Alice"]

В метод slice() передается начальный и конечный индексы, которые используются для выборки значений из массива. То есть в данном случае выборка в новый массив идет начиная с 1 индекса по индекс 4 не включая. И поскольку индексация массивов начинается с нуля, то в новом массиве окажутся второй, третий и четвертый элемент.

push()

Метод push() добавляет элемент в конец массива:

Var fruit = ; fruit.push("яблоки"); fruit.push("груши"); fruit.push("сливы"); fruit.push("вишня","абрикос
"); document.write(fruit); // яблоки,груши,сливы,вишня,абрикос

pop()

Метод pop() удаляет последний элемент из массива:

Var fruit = ["яблоки", "груши", "сливы"]; var lastFruit = fruit.pop(); // извлекаем из массива последний элемент document.write(lastFruit + "
"); document.write("В массиве fruit " + fruit.length + " элемента:
"); for(var i=0; i ");

Вывод браузера:

Сливы В массиве fruit 2 элемента: яблоки груши

shift()

Метод shift() извлекает и удаляет первый элемент из массива:

Var fruit = ["яблоки", "груши", "сливы"]; var firstFruit = fruit.shift(); document.write(firstFruit + "
"); document.write("В массиве fruit " + fruit.length + " элемента:
"); for(var i=0; i ");

Вывод браузера:

Яблоки В массиве fruit 2 элемента: груши сливы

unshift()

Метод unshift() добавляет новый элемент в начало массива:

Var fruit = ["яблоки", "груши", "сливы"]; fruit.unshift("абрикосы"); document.write(fruit);

Вывод браузера:

Абрикосы,яблоки,груши,сливы

Удаление элемента по индексу. splice()

Метод splice() удаляет элементы с определенного индекса. Например, удаление элементов с третьего индекса:

Var users = ["Tom", "Sam", "Bill", "Alice", "Kate"]; var deleted = users.splice(3); console.log(deleted); // [ "Alice", "Kate" ] console.log(users); // [ "Tom", "Sam", "Bill" ]

Метод slice возвращает удаленные элементы.

В данном случае удаление идет с начала массива. Если передать отрицательный индекс, то удаление будет производиться с конца массива. Например, удалим последний элемент:

Var users = ["Tom", "Sam", "Bill", "Alice", "Kate"]; var deleted = users.splice(-1); console.log(deleted); // [ "Kate" ] console.log(users); // [ "Tom", "Sam", "Bill", "Alice" ]

Дополнительная версия метода позволяет задать конечный индекс для удаления. Например, удалим с первого по третий индекс:

Var users = ["Tom", "Sam", "Bill", "Alice", "Kate"]; var deleted = users.splice(1,3); console.log(deleted); // [ "Sam", "Bill", "Alice" ] console.log(users); // [ "Tom", "Kate" ]

Еще одна версия метода splice позволяет вставить вместо удаляемых элементов новые элементы:

Var users = ["Tom", "Sam", "Bill", "Alice", "Kate"]; var deleted = users.splice(1,3, "Ann", "Bob"); console.log(deleted); // [ "Sam", "Bill", "Alice" ] console.log(users); // [ "Tom", "Ann", "Bob", "Kate" ]

В данном случае удаляем три элемента с 1-й по 3-й индексы и вместо них вставляем два элемента.

concat()

Метод concat() служит для объединения массивов:

Var fruit = ["яблоки", "груши", "сливы"]; var vegetables = ["помидоры", "огурцы", "картофель"]; var products = fruit.concat(vegetables); for(var i=0; i < products.length; i++) document.write(products[i] + "
");

При этом необязательно объединять только однотипные массивы. Можно и разнотипные:

Var fruit = ["яблоки", "груши", "сливы"]; var prices = ; var products = fruit.concat(prices);

join()

Метод join() объединяет все элементы массива в одну строку:

Var fruit = ["яблоки", "груши", "сливы", "абрикосы", "персики"]; var fruitString = fruit.join(", "); document.write(fruitString);

В метод join() передается разделитель между элементами массива. В данном случае в качестве разделителя будет использоваться запятая и пробел (", ").

sort()

Метод sort() сортирует массив по возрастанию:

Var fruit = ["яблоки", "груши", "сливы", "абрикосы", "персики"]; fruit.sort(); for(var i=0; i < fruit.length; i++) document.write(fruit[i] + "
");

Вывод в браузере:

Абрикосы груши персики сливы яблоки

reverse()

Метод reverse() переворачивает массив задом наперед:

Var fruit = ["яблоки", "груши", "сливы", "абрикосы", "персики"]; fruit.reverse(); for(var i=0; i < fruit.length; i++) document.write(fruit[i] + "
");

Вывод в браузере:

Персики абрикосы сливы груши яблоки

В сочетании с методом sort() можно отсортировать массив по убыванию:

Var fruit = ["яблоки", "груши", "сливы", "абрикосы", "персики"]; fruit.sort().reverse(); for(var i=0; i < fruit.length; i++) document.write(fruit[i] + "
");

Вывод в браузере:

Яблоки сливы персики груши абрикосы

Поиск индекса элемента

Методы indexOf() и lastIndexOf() возвращают индекс первого и последнего включения элемента в массиве. Например:

Var fruit = ["яблоки", "груши", "сливы", "яблоки", "груши"]; var firstIndex = fruit.indexOf("яблоки"); var lastIndex = fruit.lastIndexOf("яблоки"); var otherIndex = fruit.indexOf("вишни"); document.write(firstIndex); // 0 document.write(lastIndex); // 3 document.write(otherIndex); // -1

firstIndex имеет значение 0, так как первое включение стоки "яблоки" в массиве приходится на индекс 0, а последнее на индекс 3.

Если же элемент отсутствует в массиве, то в этом случае методы indexOf() и lastIndexOf() возвращают значение -1.

every()

Метод every() проверяет, все ли элементы соответствуют определенному условию:

Var numbers = [ 1, -12, 8, -4, 25, 42 ]; function condition(value, index, array) { var result = false; if (value > 0) { result = true; } return result; }; var passed = numbers.every(condition); document.write(passed); // false

В метод every() в качестве параметра передается функция, представляющая условие. Эта функция принимает три параметра:

Function condition(value, index, array) { }

Параметр value представляет текущий перебираемый элемент массива, параметр index представляет индекс этого элемента, а параметр array передает ссылку на массив.

В этой функции мы можем проверить переданное значение элемента на соответствие какому-нибудь условию. Например, в данном примере мы проверяем каждый элемент массива, больше ли он нуля. Если больше, то возвращаем значение true , то есть элемент соответствует условию. Если меньше, то возвращаем false - элемент не соответствует условию.

В итоге, когда происходит вызов метода numbers.every(condition) он перебирает все элементы массива numbers и по очереди передает их в функцию condition . Если эта функция возвращает значение true для всех элементов, то и метод every() возвращает true . Если хотя бы один элемент не соответствует условию, то метод every() возвращает значение false .

some()

Метод some() похож на метод every() , только он проверяет, соответствует ли хотя бы один элемент условию. И в этом случае метод some() возвращает true . Если элементов, соответствующих условию, в массиве нет, то возвращается значение false:

Var numbers = [ 1, -12, 8, -4, 25, 42 ]; function condition(value, index, array) { var result = false; if (value === 8) { result = true; } return result; }; var passed = numbers.some(condition); // true

filter()

Метод filter() , как some() и every() , принимает функцию условия. Но при этом возвращает массив тех элементов, которые соответствуют этому условию:

Var numbers = [ 1, -12, 8, -4, 25, 42 ]; function condition(value, index, array) { var result = false; if (value > 0) { result = true; } return result; }; var filteredNumbers = numbers.filter(condition); for(var i=0; i < filteredNumbers.length; i++) document.write(filteredNumbers[i] + "
");

Вывод в браузере:

1 8 25 42

forEach() и map()

Методы forEach() и map() осуществляют перебор элементов и выполняют с ними определенный операции. Например, для вычисления квадратов чисел в массиве можно использовать следующий код:

Var numbers = [ 1, 2, 3, 4, 5, 6]; for(var i = 0; i"); }

Но с помощью метода forEach() можно упростить эту конструкцию:

Var numbers = [ 1, 2, 3, 4, 5, 6]; function square(value, index, array) { var result = value * value; document.write("Квадрат числа " + value + " равен " + result + "
"); }; numbers.forEach(square);

Метод forEach() в качестве параметра принимает все ту же функцию, в которую при переборе элементов передается текущий перебираемый элемент и над ним выполняются операции.

Метод map() похож на метод forEach , он также в качестве параметра принимает функцию, с помощью которой выполняются операции над перебираемыми элементами массива, но при этом метод map() возвращает новый массив с результатами операций над элементами массива.

Например, применим метод map к вычислению квадратов чисел массива:

Var numbers = [ 1, 2, 3, 4, 5, 6]; function square(value, index, array) { return result = value * value; }; var squareArray = numbers.map(square); document.write(squareArray);

Функция, которая передается в метод map() получает текущий перебираемый элемент, выполняет над ним операции и возвращает некоторое значение. Это значение затем попадает в результирующий массив squareArray

На этом уроке мы познакомимся с массивами, научимся их создавать, выполнять операции над их элементами, а также рассмотрим основные методы и свойства, доступные при работе с ними.

Что такое массив в JavaScript?

Массив – это упорядоченная коллекция значений . Значения в этой коллекции называются элементами . Каждый элемент в массиве имеет свой порядковый номер (число), который называется индексом . Индексы нумеруются с 0.

На следующем рисунке приведён числовой массив, состоящий из 5 элементов. Элементы данного массива содержат следующие данные: 123 (индекс 0), 7 (индекс 1), 50 (индекс 2), -9 (индекс 3), 24 (индекс 4).

Создание (объявление) массива

Создание массивов в JavaScript обычно осуществляется с помощью литерала массива .

Литерал массива представляет собой квадратные скобки, внутрь которых помещается список элементов, разделённых между собой с помощью запятой.

Например:

Var empty = ; // пустой массив var numbers = ; // числовой массив var arr = ; // массив, содержащий различные типы данных

Значения в массиве JavaScript не обязательно должны иметь одинаковый тип. Т.е. в одном массиве могут находиться значения различных типов данных.

Обращение к определённому элементу массива выполняется по его индексу. Данная операция ещё называется операцией индексации.

Например:

// создадим массив, состоящий из 3 элементов var smartphoneColors = ["Black", "White", "Grey"]; // выведем в консоль браузера значения элементов массива smartphoneColors с индексами 0 и 2 console.log("Значение элемента массива smartphoneColors с индексом 0: " + smartphoneColors); // "Значение элемента массива smartphoneColors с индексом 0: Black" console.log("Значение элемента массива smartphoneColors с индексом 2: " + smartphoneColors); // "Значение элемента массива smartphoneColors с индексом 0: Grey" // изменим значение элемента массива smartphoneColors с индексом 1 на "Red" smartphoneColors = "Red"; // ["Black", "Red", "Grey"] // установим элементу массива smartphoneColors с индексом 3 значение "Blue" smartphoneColors = "Blue"; // ["Black", "Red", "Grey", "Blue"]

В качестве значений элементов массива можно использовать не только статические значения, но и выражения:

Var lengthA = 7, widthA = 5; var point = ;

В качестве значений элементов массива могут использоваться объекты.

Var points = [ {x1: 5, y1: 3}, {x1: 7, y1: 10}, {x1: 12; y1: 0} ]; // массив, состоящий из 3 объектов

Другой способ создания массива состоит в вызове функции-конструктора Array .

Вызов функции-конструктора без аргументов используется для создания пустого массива.

Var empty = new Array(); // пустой массив

Данный способ создания массива, эквивалентен литералу .

Если функции-конструктору в качестве аргумента указать число, то она создаст массив, который будет состоять из указанного числа элементов. Причем все эти элементы будут иметь в качестве значения undefined.

Var arr = new Array(5); // массив, состоящий из 5 элементов (значения элементов равны undefined)

Если функции-конструктору в скобках передать несколько значений или одно не числовое значение, то она создаст массив из переданных ей аргументов.

В отличие от многих других языков программирования массивы в JavaScript автоматически меняют свой размер, т.е. они изначально являются динамическими. Таким массивам не надо задавать какие-либо размеры. Ещё одной отличительной чертой массивов JavaScript является то, что в разных элементах одного и того же массива могут содержаться различные типы данных.

Свойство length (длина массива)

Определение длины массива (количества элементов) осуществляется с помощью свойства length .

//создадим массив путём перечисления значений элементов в функции Array var volumeHDDs = new Array("500Gb","1Tb","2Tb"); //переменной lengthArray присвоим длину массива volumeHDDs var lengthArray = volumeHDDs.length;

Как получить первый элемент массива

Получение значения первого элемента массива осуществляется с помощью указания в квадратных скобках этого массива числа 0:

//создание массива, состоящего из 3 элементов var volumeHDDs = new Array("500Gb","1Tb","2Tb"); //получение значения первого элемента массива var firstValue = volumeHDDs;

Как получить последний элемент массива

Получение значения последнего элемента массива осуществляется с помощью указания в квадратных скобках этого массива выражения имя_массива.length-1:

//создание массива, состоящего из 3 элементов var volumeHDDs = new Array("500Gb","1Tb","2Tb"); //получение значения последнего элемента массива var lastValue = volumeHDDs;

Перебор массива

Перебор элементов массива осуществляется с помощью цикла for .

Например, переберём все элементы массива и выведем их значения в консоль браузера (F12):

//создание массива nameStudents, состоящего из 4 элементов var nameStudents = new Array("Петя","Вася","Коля","Максим"); //перебор элементов массива от 0 до длины массива-1 for (var i=0; i <= nameStudents.length-1; i++) { console.log(i+1 + " элемент массива = " + nameStudents[i]); }

Для чего предназначен оператор delete

Оператор delete используется не для удаления элемента из массива, а для присваиванию данному элементу массива значение undefined .

Var namePlanets = new Array ("Венера","Меркурий","Земля","Марс"); delete namePlanets; for (var i=0; i <= namePlanets.length-1; i++) { console.log(i + " элемент массива = " + namePlanets[i]); }

Функции для работы с массивами (методы объекта Array)

Объект Array содержит следующие методы (функции) для работы с массивами:

• shift
• unshift
• slice
• splice
• split
• reverse

Метод push (добавление элемента в конец массива)

Метод push предназначен для добавления элемента в конец массива. Значение этого элемента указывается в качестве параметра данного метода. В качестве результата метод push возвращает количество элементов в массиве с учётом добавленного.

Var namePlanets = ["Венера", "Меркурий", "Земля", "Марс"]; namePlanets.push("Юпитер"); // 5 console.log(namePlanets); // ["Венера", "Меркурий", "Земля", "Марс", "Юпитер"]

Метод pop (удаление последнего элемента из массива)

Метод pop предназначен для удаления последнего элемента из массива. У данного метода нет параметров. В качестве результата он возвращает значение последнего (удалённого) элемента массива.

Var namePlanets = ["Венера", "Меркурий", "Земля", "Марс"]; namePlanets.pop(); // "Марс" console.log(namePlanets); // ["Венера", "Меркурий", "Земля"]

Метод shift (удаление первого элемента из массива)

Метод shift предназначен для удаления первого элемента из массива, т.е. элемента, имеющего индекс 0. Все остальные элементы массива смещаются к началу, т.е. у каждого из них индекс уменьшается на 1. Данный метод в качестве результата возвращает значение удалённого элемента.

Var namePlanets = ["Венера", "Меркурий", "Земля", "Марс"]; namePlanets.shift(); // "Венера" console.log(namePlanets); // ["Меркурий", "Земля", "Марс"]

Метод unshift (добавление элемента в начало массива)

Метод unshift предназначен для добавления элемента в начало массива (перед другими элементами). Значение этого элемента указывается в качестве параметра данного метода. В качестве результата данный метод возвращает количество элементов в массиве с учётом добавленного.

Var namePlanets = ["Меркурий", "Земля", "Марс", "Юпитер"]; namePlanets.unshift("Венера"); // 5 console.log(namePlanets); // ["Венера", "Меркурий", "Земля", "Марс", "Юпитер"]

Метод slice (копирование участка массива)

Метод slice предназначен для копирования участка массива. При этом он не изменяет исходный массив, а возвращает в качестве результата новый массив, состоящий из выбранных элементов.

Метод slice имеет 2 параметра:

• 1 параметр (обязательный) - предназначен для указания индекса элемента, с которого необходимо начать копировать элементы;
• 2 параметр (необязательный) - предназначен для указания индекса элемента, до которого необходимо копировать (при этом он не включается в новый массив). Если его не указать, то будут скопированы элементы до конца указанного массива.

Метод splice (изменение содержимого массива)

Метод splice предназначен для изменения содержимого массива. Он может использваться как для добавления элементов в массив, так и для их удаления.

Синтаксис метода splice :

Array.splice(startIndex, deleteCount [, element1[, element2[, ...]]]); /* startIndex (обязательный) - стартовый индекс элемента, с которого нужно начать изменение массива. Если в качестве startIndex указать число, большее длины массива, то стартовый индекс будет установлен на конец массива. Если в качестве startIndex указать отрицательное число, то отсчет стартового элемента будет вестись с конца. deleteCount (обязательный) - число, показывающее какое количество элементов необходимо удалить из массива. Если элементы не нужно удалять из массива, то deleteCount необходимо установить 0. После этого нужно указать как минимум один новый элемент, который нужно добавить в массив. Если в качестве deleteCount указать число, которое будет превышать количество оставшихся элементов в массиве, начиная с startIndex, то в этом случае они всё равно будут удалены (т.е. все элементы до конца массива, начиная со стартового индекса) element1, element2, ... (необязательные) - элементы которые нужно добавить в массив. */

Примеры использования метода splice.

Применения метода splice для удаления части элементов из массива.

Var namePlanets = ["Венера", "Меркурий", "Земля", "Марс"]; namePlanets.splice(2, 2); //["Земля", "Марс"] console.log(namePlanets); // ["Венера", "Меркурий"]

Применение метода splice для удаления элемента из массива и добавления в него новых.

Var namePlanets = ["Венера", "Меркурий", "Земля", "Марс"]; namePlanets.splice(1, 1, "Уран", "Нептун", "Сатурн"); // ["Меркурий"] console.log(namePlanets); // ["Венера", "Уран", "Нептун", "Сатурн", "Земля", "Марс"]

Применение метода splice только для добавления новых элементов в массив.

Var namePlanets = ["Юпитер", "Сатурн", "Уран"]; namePlanets.splice(0, 0, "Венера", "Меркурий", "Земля", "Марс"); // console.log(namePlanets); // ["Венера", "Меркурий", "Земля", "Марс", "Юпитер", "Сатурн", "Уран"]

Метод join (преобразование массива в строку)

Метод join предназначен для соединения всех элементов массива в строку.

Синтаксис метода join :

Array.join(); /* separator (необязательный) - разделитель, который используется в качестве соединительной строки между каждым элементом массива. Если данный параметр не указать, то в качестве соединительной строки будет использоваться ",". Если в качестве параметра указать пустую строку, то элементы массивы в возвращаемой строке между собой ничем разделены не будут */

Var berries = ["Виноград", "Виноград", "Смородина", "Шиповник"]; var berriesStr1 = berries.join(); // "Виноград,Виноград,Смородина,Шиповник" var berriesStr2 = berries.join(""); // "ВиноградВиноградСмородинаШиповник" var berriesStr3 = berries.join(", "); // "Виноград, Виноград, Смородина, Шиповник" var berriesStr4 = berries.join(" + "); // "Виноград + Виноград + Смородина + Шиповник"

Если в качестве separator использовать не строку, то он будет преобразован к строке.

Var berries = ["Виноград", "Виноград", "Смородина", "Шиповник"]; var berriesStr1 = berries.join(false); // "ВиноградfalseВиноградfalseСмородинаfalseШиповник" var berriesStr2 = berries.join(4/2); // "Виноград2Виноград2Смородина2Шиповник" Элементы массива, которые имеют в качестве значения null или undefined, будут приведены к пустой строке. var arr = ; var arrStr = arr.join(", "); // "0, 5, -4"

Преобразование строки в массив - split

Метод split предназначен для преобразования строки в массив. Данный метод имеет один параметр, в качестве которого вы можете указать строку, на основании которой данная строчка будет разбита на массив строк.

Var strElementComputers = "Системный блок, Монитор, Клавиатура, Мышь, Колонки, Принтер"; var elementComputers = strElementComputers.split(", "); console.log("Количество элементов в массиве: " + elementComputers.length); for (var i=0; i <= elementComputers.length-1; i++) { console.log(i + " элемент массива = " + elementComputers[i]); }

Переупорядочивание элементов массива в обратном порядке - reverse

Метод reverse предназначен для переупорядочивания элементов массива в обратном порядке.

Var namePlanets = new Array ("Венера","Меркурий","Земля","Марс"); namePlanets.reverse(); console.log("Количество элементов в массиве: " + namePlanets.length); for (var i=0; i <= namePlanets.length-1; i++) { console.log(i + " элемент массива = " + namePlanets[i]); }

Сортировка элементов массива - sort

Метод sort предназначен для сортировки элементов массива. По умолчанию данный метод сортирует массив как строки.

Var namePlanets = new Array ("Венера","Меркурий","Земля","Марс"); namePlanets.sort(); console.log("Количество элементов в массиве: " + namePlanets.length); for (var i=0; i <= namePlanets.length-1; i++) { console.log(i + " элемент массива = " + namePlanets[i]); }

Доброго времени суток всем, кто решил изучить все о массивах в языке JavaScript. В нескольких предыдущих публикациях я уже затрагивал некоторые моменты . Сегодняшняя же статья является полным руководством.

Я расскажу о некоторых вариантах создания массивов и как «вытаскивается» в JavaScript длина массива, поведаю об их особенностях, перечислю основные свойства и методы для работы с ними и конечно же приведу контрольные примеры. Давайте приступим!

Поговорим о главной задаче массивов

Первое, что нужно усвоить, это то, что массивы являются разновидностью , которые хранят в себе структурированные данные в определенных ячейка памяти, каждая из которых имеет свой идентификатор (номер).

Они создаются при помощи квадратных скобок, обладают рядом возможностей и методов, а также могут быть многомерными. Главное их преимущество – все элементы пронумерованы, поэтому к ним можно обратиться через идентификатор.

Однако существует еще один вид массивов. На самом деле в статье, посвященной объектам, я рассказывал, что последние также являются массивами. И действительно, они представляют собой ассоциативные массивы, которые являются структурой данных с системой хранения информации в виде «ключ => значение». Такую структуру часто называют хэшем, реже словарем.

Разберем подробнее каждый вид.

При работе с ассоциативными массивами очень легко как добавлять элементы, так и удалять. Так как данный скриптовый язык не типизирован и в нем нет множества строгих правил, создавать элементы объекта можно несколькими способами: перечислить их сразу, проинициализировать после создания объекта, а также создавать по ходу кода.

Сейчас я хочу показать примеры реализации таких механизмов. В первой программе я создал объект patient , а после перечислил его элементы. Как видите, для patient. param я сделал вложенный объект, который обладает своими собственными значениями.

var patient = new Object(); patient.firstName ="Инна" patient.age =34, patient.param ={ height:169 , weight: 55, disease: "no" } alert(patient.firstName) // выведет "Инна" alert(patient.param.disease) // выведет no

Если появится необходимость добавить еще один параметр к уже существующим, например, фамилию, то это делается следующим образом. К презентованному выше коду допишите строки:

patient.surname = «Луценко»

alert (patient.surname)

Вот так легко коллекция пополняется новыми свойствами. При желании изменить какое-либо значение, его нужно просто присвоить выбранному ключу:

patient.firstName ="Катя"

Для объектов также предусмотрена операция удаления ненужных свойств при помощи команды delete:

delete patient.surname

«Настоящие» массивы

На них еще иногда говорят «массивы с числовыми индексами». Если сравнивать их с предыдущим вариантом, то здесь ключи представлены в виде чисел, а вот значения могут быть абсолютно любыми. Занесение коллекции в такой объект может быть осуществлено не по порядку.

Так, один элемент можно вписать в ячейку с индексом «0», а следующий – с индексом «4». Промежуточные ячейки памяти будут пустовать и выдавать «undefined», если к ним обратиться.

В качестве примера я написал небольшое приложение, в котором создан массив товаров.

var goods = ["Говядина","Макароны","Твердый сыр","Специи"]; alert(goods); alert(goods); goods = "Томаты" alert(goods);

Я специально показал вам, как вывести весь список покупок и как выбрать один элемент. К тому же я затронул свойство length , о котором конкретно расскажу позже. А пока дам небольшое пояснение.

goods = «Томаты»

Методы, позволяющие работать с началом и концом массива

В предусмотрено 4 команды, которые позволяют добавлять и удалять элементы из начала и конца структурированных объектов.

Для начала расскажу вам о методах, работающих с началом массива. К ним относятся shift и unshift . Первая команда удаляет одно значение, а вторая добавляет.

В качестве примера я взял код предыдущей программы и видоизменил его.

var goods = ["Говядина","Макароны","Твердый сыр","Специи"]; document.writeln(goods); //Говядина,Макароны,Твердый сыр,Специи document.writeln(goods); //Твердый сыр goods.unshift("Томаты"); goods.unshift("Буженина"); document.writeln(goods); //Буженина,Томаты,Говядина,Макароны,Твердый сыр,Специи goods.shift() document.writeln(goods); //Томаты,Говядина,Макароны,Твердый сыр,Специи

В комментариях к выполненным действиям я вписал полученные результаты.

Теперь перейдем к методам, которые добавляют и удаляют элементы в конец списка. Так, pop отвечает за удаление значений, а push – за добавления.

К прошлой программной реализации допишем названные команды.

goods.push («Итальянские травы»);

document.writeln (goods);

В результате на экран последней строкой будет выведено:

«Томаты,Говядина,Макароны,Твердый сыр,Итальянские травы».

А теперь пересчитаем элементы

Для того чтобы узнать количество записанных в массив элементов нужно воспользоваться свойством объекта – length . Выше я уже использовал эту команду.

На тот момент длина коллекции равнялась 4, а мне нужно было дописать еще один продукт. Так как нумерация элементов массива начинается с нуля, то первая свободная ячейка в том примере находилась под индексом «4». Заметьте, что length определяет не количество занесенных товаров в коллекцию, а длину самого массива. Таким образом, если б среди того списка средние 2 элемента были пустыми

(var goods = ["Говядина","Макароны","Твердый сыр","Специи"];)

то свойство в результате выдало б число 6.

Зная данную команду, можно заняться разбором циклов. Они нужны для перебора элементов коллекции. Это очень удобный механизм, без которого сложно обойтись. В циклах можно указывать в каком направлении, с какого и по какой элемент, а также с каким шагом стоит перебирать значения.

Наиболее популярным и быстро работающим считается цикл, созданный с помощью ключевого слова for.

var goods = ["Говядина","Макароны","Твердый сыр","Специи"]; for (var i = goods.length-1; i >=0; i=i-2) { document.writeln((i+1)+"."+ goods[i]); }

Те, кто решил, что в ответе будет строка: «4.Специи 2.Макароны», были правы. Молодцы!

Несколько полезных заметок

Создатели языка js предусмотрели множество методов и функций, которые сильно упрощают работу с массивами. Среди них есть инструменты для копирования коллекций, смены порядка элементов, их сортировки, преобразования массива в строки и обратно, а также еще много всего другого.