JavaScript - Массивы в вопросах и ответах

Статья, в которой рассмотрены различные моменты, связанные с использованием массивов в JavaScript.

JavaScript - Массивы в вопросах и ответах

Удаление элемента (ов) из массива осуществляется одним из следующих методов:

  • .pop() - предназначен для удаления последнего элемента массива.
  • .shift() - предназначен для удаление первого элемента массива.
  • .splice() - может использоваться для удаления одного или нескольких элементов из массива, начиная с указанного.

Например:

var myArray = ["Газета", "Журнал", "Книга"];
myArray.pop(); // ["Газета", "Журнал"]
myArray.shift(); // ["Журнал"]
var display = ["19 inch", "21 inch", "22 inch", "27 inch"];
display.splice(2,1); //удалить один элемент начиная с элемента, имеющего индекс равный 2.  
// -> ["19 inch", "21 inch", "27 inch"]
display.splice(0,2); //удалить два элемента начиная с элемента, имеющего индекс, равный 0.  
// -> ["27 inch"]

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

Например:

var myList = ["Газета", "Журнал", "Книга"];
// присвоим переменной myList значение null
myList = null;

Для добавления элемента в массив можно воспользоваться одним из следующих методов:

  • .push() - предназначен для добавления элемента в конец массива.
  • .unshift() - предназначен для добавления элемента в начало массива.
  • .splice() - может использоваться для добавления одного или нескольких элементов в массив, начиная с указанного.
var display = ["19 inch", "21 inch", "22 inch", "27 inch"];
display.push("30 inch"); // ["19 inch", "21 inch", "22 inch", "27 inch", "30 inch"]
display.unshift("17 inch"); // ["17 inch", "19 inch", "21 inch", "22 inch", "27 inch", "30 inch"]
display.splice(3, 0, "24 inch", "26 inch"); // добавляет элементы "24 inch" и "26 inch" в массив после элемента, имеющего индекс 3.

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

Например, вывести содержимое некоторого массива в элемент с id="array":

<p id="array"></p>
<script>
  var display = ["19 inch", "21 inch", "22 inch", "27 inch"];
  document.getElementById("array").textContent = display.join(", ");
</script>

Создание пустого массива осуществляется следующими конструкциями:

// 1 способ
var имя_массива = new Array();
// 2 способ
var имя_массива = [];

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

var display = ["19 inch", "21 inch"];
// 1 способ
display = [];
// 2 способ
display.length = 0;
// 3 способ
display.splice(0,display.length);
// 4 способ
while(display.length > 0) {
  display.pop();
}

Для того чтобы объединить 2 или больше массивов можно воспользоваться методом concat(). Этот метод не изменяет существующие массивы, он создаёт новый массив, содержащий элементы объединяемых массивов.

var namesRussia = ["Иван", "Сергей"];
var namesEnglish = ["John", "Leo", "Bob"];
var names = namesRussia.concat(namesEnglish);

Для того чтобы узнать какой тип данных содержит переменная можно воспользоваться одной из следующих конструкций:

var namesRussia = ["Иван", "Сергей"];
//1 способ - метод isArray
if (Array.isArray(namesRussia)) {
  console.log("является массивом");
} else {
  console.log("не является массивом");
}
//2 способ
if( Object.prototype.toString.call( namesRussia ) === '[object Array]' ) {
  // является массивом
} else {
  // не является массивом
}

Для того чтобы найти некоторый элемент в массиве можно воспользоваться методом indexOf(). Значение, которое надо найти у элемента указывается в качестве первого параметра (valueElement). Данный параметр является обязательным. Кроме этого при необходимости можно указать индекс элемента (startIndex) в качестве 2 параметра данного метода, чтобы поиск элемента осуществлялся не с начала, а с указанного элемента.

var listOrder = ["Бритва", "Сумка", "Утюг"]
// "Утюг" - valueElement
// 1 - startIndex
listOrder.indexOf("Утюг",1 );
//без указания начального индекса
listOrder.indexOf("Утюг");

В качестве результата метод indexOf() возвращает индекс найденного элемента или значение -1. В том случае если указанное значение имеют несколько элементов, то данный метод возвращает индекс первого найденного элемента.

Примечание: Если вы хотите осуществлять поиск элемента в массиве начиная с конца, то используйте метод lastIndexOf().
var fruits = ["Банан", "Яблоко", "Апельсин", "Манго"];
var apple = fruits.indexOf("Яблоко"); //1

Для того чтобы найти максимальное значение массива можно воспользоваться следующей конструкцией:

//создание числового массива
var numberArray = [32, 1, 4, 17, 50, 9];
//максимальное значение массива
var maxValue = Math.max.apply(null,numberArray);

Для того чтобы найти минимальное значение массива можно воспользоваться следующей конструкцией:

//создание числового массива
var numberArray = [32, 1, 4, 17, 50, 9];
//минимальное значение массива
var minValue = Math.min.apply(null,numberArray);

Метод fill() предназначен для заполнения массива или его части с помощью указанного значения:

//создадим массив, состоящий из 20 элементов
var myArray = new Array(20);
//установим все элементам массива значение 0
myArray.fill(0);
//заполним первые 10 элементов массива случайные числами от 0 до 10
myArray.fill( Math.floor(Math.random() * myArray.length), 0, 9);
//заполним элементы, имеющие индекс от 11 до 15 числом 55
myArray.fill( 55, 11, 15 );
//заполним элементы, имеющие индекс больше 17 числом 3
myArray.fill( 3, 17 );

Для того чтобы перемешать элементы в массиве можно воспользоваться следующей функцией:

function shuffle(myArray) {
  var index, valueIndex; 
  for (var i=0; i<=myArray.length-1; i++) {
    index = Math.floor(Math.random()*i);
    valueIndex = myArray[index];
    myArray[index] = myArray[i];
    myArray[i] = valueIndex;
  }
  return myArray;
}
// массив
var display = ["19 inch", "21 inch", "22 inch", "27 inch"];
// перемешаем элементы в массиве
shuffle(display);
// выведем массив в консоль
console.log(display.join());

Для того чтобы скопировать массив используйте следующий код:

var display = ["19 inch", "21 inch", "22 inch", "27 inch"];
var displayCopy = display.slice();

Для сортировки числового массива по убыванию можно использовать метод sort():

var numberArray = [32, 1, 4, 17, 50, 9];
numberArray.sort(function(a, b){
  return a-b
});
// Результат: 50, 32, 17, 9, 4, 1

Для сортировки числового массива по возрастанию можно использовать метод sort():

var numberArray = [32, 1, 4, 17, 50, 9];
numberArray.sort(function(a, b){
  return b-a;
});
// Результат: 1, 4, 9, 17, 32, 50

Для того чтобы проверить есть ли указанный элемент в массиве или нет можно воспользоваться методом indexOf().

var modelPrinters= ["Xerox", "HP", "Canon", "FX"];
if(modelPrinters.indexOf("Canon")!=-1) {
  //элемент существует в массиве
} else {
  //элемент не существует в массиве
}

Определение суммы элементов числового массива:

var arrayNumbers= [10, 30, 25, 32];
var sumNumbers = 0;
for (var i=0; i<=arrayNumbers.length-1; i++) {
  sumNumbers += arrayNumbers[i];
}
console.log("Сумма элементов массива: " + sumNumbers);

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

Например, создадим массив 5x5:

var myArray = new Array(5);
for (var i=0; i<=myArray.length-1; i++) {
  myArray[i] = new Array(5);
}
myArray[3][2] = 35;

Например, создадим массив 3x2:

var myItems = [[51,22],[42,87],[55,16]];
//выведем в консоль содержимое элемента myItems, имеющего индекс 1, а в нём элемента, имеющего индекс 0.
console.log(myItems[1][0]);

Например, создадим пустой двумерный массив:

var myArray = [[]];

Например, спроектируем функцию arrayTable, предназначенную для создания табличного массива:

function arrayTable( rows, cols, defaultValue){
  // создаём строки
  var newArray = new Array(rows);
  for(var i=0; i < rows; i++) {
    // создаём столбцы
    newArray[i] = new Array(cols);
    //инициализируем ячейки значением
    for(var j=0; j < cols; j++) {
        newArray[i][j] = defaultValue;
      }
  }
  return newArray;
}
// например создадим табличный массив с помощью функции arrayTable
var matrix = arrayTable( 3 , 4, ''); // 3 строки и  4 столбца, заполненные пустыми строками
var numbersArray = arrayTable( 10, 10, 25);// 10 строк и 10 столбцов, заполненные числом 25

Например, создадим трехмерный массив 3×3×3:

var newArray = new Array(3);
  for (var i = 0; i < 3; i++) {
    newArray[i] = new Array(3);
     for (var j = 0; j < 3; j++) {
      newArray[i][j] = new Array(3);
       for(var k=0; k < 3; k++) {
        newArray[i][j][k] = Math.floor(Math.random()*100);
      }
  }
}
//выведем значение элементов массива в консоль браузера:
for(var i=0; i < 3; i++) {
  for(var j=0; j < 3; j++) {
    for(var k=0; k < 3; k++) {
      console.log( "[" + i + "," + j + "," + k + "] = " + newArray[i][j][k] );
    }
  }
}


   JavaScript и jQuery 0    4169 0

Комментарии (3)

  1. Nic # 0
    Уже разобрал
    1. Александр Мальцев # 0
      У Вас не правильно указано имя переменной fist в методе push:
      resultArray.push(first, second);
      resultArray.unshift(senseOfLife);
      
      1. Nic # 0
        Да, спасибо, я уже увидел :)

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