Массивы в JavaScript

Оцените материал
(0 голосов)

Здравствуйте! Двигаемся дальше по курсу программирования на языке JavaSсript и на очереди у нас массивы. Массивы нужны для хранения большого количества данных в одном месте то есть переменной. Давайте вспомним урок по созданию переменной в JavaScript. Так вот получается что одна переменная может хранить только одно значение, а если понадобится в программе хранить много значений например 10 или 100. Что нужно создавать 100 переменных. Проблемка не так ли, но выход есть. Это воспользоваться массивом. Массив решает эту проблему, то есть вы создаете одну переменную, которая может хранить как 10, так и  100 значений ограничение здесь лишь одно это количество памяти, которое выделяется под один такой массив. Итак давайте разбираться по порядку.

Массивы в JavaScript

 

Как создать массив в JavaScript

Массив - это непрерывный участок памяти доступ к  которому можно получить с помощью индекса. Объявить массив можно 2-мя способами. Первый спсоб  и он используется наиболее часто это через переменную. Вот пример:

  
var mas = [1,2,3,"vasya"];
document.write(mas+"<br>");
 //распечатываем весь массив на экран
  document.write(mas[0]+"<br>"); 
  //выведет 1
  document.write(mas[1]+"<br>"); 
  //выведет 2
  document.write(mas[2]+"<br>"); 
 // выведет 3
  document.write(mas[3]+"<br>"); 
 //выведет vasya

Просмотреть  пример

Здесь в примере создается массив mas и распечатывается сначала весь массив, а потом будут распечатаны элементы массива, причем доступ к каждому элементу осуществляется по индексу, который указывается в квадратных скобках. Начало отсчета индексов начинается с нуля. Поэтому первый элемент имеет индекс - 0, второй - 1 ну и.т.д.

Второй способ создания массива - это через класс Array().

  var mas = new Array(1,2,3,"vasya");
  document.write(mas);

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

Добавить элемент к массиву можно так:

 mas[4] = "petya"; // теперь будет 1,2,3,vasya,petya
 

Узнать сколько элементов находится в массиве можно с помощью свойства length.

document.write(mas.length); //выведет 5

Методы удаления и добавления элементов массива pop/push, shift/unshift.

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

Конец массива

Метод pop.

Метод pop удаляет элемент с конца массива.

 var students = ["Ivan Ivanov", "Petya Petrov", "Vasya Vasin"]; //создали массив
 students.pop(); //удаляем последний элемент
 document.write(students); //выведет Ivan Ivanov, Petya Petrov

Просмотреть  пример

Метод push.

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

var students = ["Ivan Ivanov", "Petya Petrov", "Vasya Vasin"]; //создали массив
 students.push("Jhoe Foo"); //добавляем элемент в конец массива
 document.write(students); //выведет Ivan Ivanov, Petya Petrov, Vasya Vasin, Jhoe Foo

Просмотреть  пример

Начало массива

Метод  shift.

Метод shift удаляет элемент с начала массива.

 var students = ["Ivan Ivanov", "Petya Petrov", "Vasya Vasin"]; //создали массив
 students.shift(); //удаляем последний элемент
 document.write(students); //выведет Petya Petrov, Vasya Vasin

Просмотреть  пример

Метод unshift.

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

var students = ["Ivan Ivanov", "Petya Petrov", "Vasya Vasin"]; //создали массив
 students.unshift("Joe Foo"); //добавим элемент в начало массива
 document.write(students); //выведет Joe Foo, Petya Petrov, Vasya Vasin

Просмотреть  пример

Следует заметить, что методы push и unshift могут добавлять нсколько элементов в массив.

var students = ["Ivan Ivanov", "Petya Petrov", "Vasya Vasin"]; //создали массив
 students.unshift("Joe Foo",3); //добавляем элементы в начало массива
students.push("Linn Flat",5); //добавляем элементы в конец массива document.write(students); //выведет Joe Foo,3, Petya Petrov, Vasya Vasin, Linn Flat, 5

Просмотреть  пример

Вывод массива с пропущенными индексами.

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

var mas = []; //объявляем пустой массив
mas[0] = 1; //первый элемент массива
mas[5] = 6; //шестой элемент массива
document.write(mas);

Просмотреть  пример

Вывод массива в цикле.

Для перебора масивов в цикле можно использовать циклы. С ними мы познакомились на прошлом уроке. Давайте вспомним.

var mas =["Ivan Ivanov","Petya Petrov","Vasya Vasin"];
for(var i = 0; i<mas.length; i++) {
  document.write(mas[i]+"<br>");
}

Просмотреть  пример

Циклы можно использовать и для заполнения массива.

var mas =[];
for(var i = 0; i<mas.length; i++) {
  mas.push(i);
}
document.write(mas);

Просмотреть  пример

Некоторые особенности работы свойства length.

Рассмотрим некоторые интересные особенности, связанные со свойством length. Это свойство возвращает длину массива. Так вот если пропустить индексы то это свойство все равно вернет полное количество элментов в массиве даже несмотря на то, что элементов там нет.

var mas = [];
mas[0] = 1;
mas[100] = true;
document.write(mas.length);// 101

Просмотреть  пример

Также можно уменьшить массив, если вы уменьшите значение length.

var mas = [1, 2, 3, 6, 7];
mas.length = 3; // уменьшаем до 2 элементов
document.write( mas ); // [1, 2,3]
mas.length = 5; // вернем length обратно
document.write( mas[3] ); // undefined: а вот значения не вернулись

Просмотреть  пример

Ну и как нетрудно догадаться самый простой способ для очистки массива- это mas.length = 0. То есть присвоить свойству length ноль.

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

Есть возможность создавать не только одномерные, а  и многомерные массивы. Это такой массив, элементы которого в свою очередь также массивы.

var matrica = [
  [1, 2, 3],
  [4, 5, 6],
  [7, 8, 9]
];

alert( matrica[1][1] ); // центральный элемент

Просмотреть  пример

Итоги.

Итак подведем итоги. Создать массив можно 2-мя способами:

var mas= [1,2,3];
var mas1 = new Array(1,2,3);

Узнать длину массива - свойство length.

Операции удаления/добавления в конец массива.

pop() - удаляет элемент с конца массива.

push("Ivan") - добавляет элемент в конец массива.

Операции удаления/добавления в начало массива.

 shift() - удаляет элемент с начала массива.

unshift("Ivan") - добавляет элемент в начало массива.

В следующей статье я расскажу еще о других не менее интересных методах для работы с массивами.

Задачи

Найдите последний элемент массива

Как получить значение последненго элемента массива, если вам заранее неизвестно сколько в нем элементов, то есть вы не знаете точно индекс последнего элемента массива.

Добавьте элемент в начало массива.

Есть массив students добавьте в начало массива студента "Vasya Pupkin".

Создайте калькулятор.

 

Напишите код, который:

  • Запрашивает у пользователя  значения при помощи  функции prompt и сохраняет их в массив.
  • Ввод заканчивается  как только пользователь ввел пустую строку или нажал «Отмена».
  • При этом 0 не должен заканчивать ввод.
  • Выведите сумму всех элементов массива

 

 Вывести элементы массива

Есть массив sotrudniki = ["Ivan Ivanov, "Vasya Pupkin", "Leilf Santuhova", "Ibrahim Ba", "George Tuh" ]. Используя цикл выведите массив начиная с "Vasya Pupkin" и заканчивая "Ibrahim Ba".

Ну и на десерт посмотрите видео о массивах в JavaScript.

 

Прочитано 399 раз Последнее изменение Воскресенье, 27 августа 2017 17:57
Другие материалы в этой категории:
Понравилась запись? Подпишитесь на обновления по почте:

Нетология

TemplateMonster

Поиск по сайту

Связной трэвел

Google+