Статья, в которой рассмотрены различные моменты, связанные с использованием массивов в 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
Метод 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 нет. Их создание осуществляется посредством того, что каждый элемент первоначального массива в свою очередь тоже должен является массивом.
Например, создадим массив 5×5:
var myArray = new Array(5);
for (var i=0; i<=myArray.length-1; i++) {
myArray[i] = new Array(5);
}
myArray[3][2] = 35;Например, создадим массив 3×2:
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] );
}
}
}Помимо стандартных возможностей JS, узнать индекс элемента массива можно с помощью метода из библиотеки Lodash _.findIndex():
Метод возвращает индекс первого элемента в массиве, который удовлетворяет условию.
Если ни один из элементов не удовлетворяет условию поиска, возвращается -1. Этот метод отлично ладит с массивами, элементами которых являются объекты. Обратимся к примеру ниже:
const users = [
{ 'user': 'kris', 'active': false },
{ 'user': 'john', 'active': false },
{ 'user': 'luk', 'active': true }
];
const findUserItem = _.findIndex(users, { 'user': 'john', 'active': false });
console.log(findUserItem); // => 1 - индекс искомого элемента
В примере выше всё понятно, давайте посмотрим возможности этого метода в следующем примере.
const findUserItem = _.findIndex(users, ['active', false]);
console.log(findUserItem); // => 0
В примере выше нам не важно имя пользователя, нам просто нужно найти пользователя, у которого был бы неактивный статус. И данный метод нам в этом отлично поможет.
Документация:
_.findIndex()
Here is an another way find value index in complex array in javascript. Hope help somebody indeed.
Let us assume we have a JavaScript array as following,
var studentsArray =
[
{
"rollnumber": 1,
"name": "dj",
"subject": "physics"
},
{
"rollnumber": 2,
"name": "tanmay",
"subject": "biology"
},
{
"rollnumber": 3,
"name": "amit",
"subject": "chemistry"
},
];
Now if we have a requirement to select a particular object in the array. Let us assume that we want to find index of student with name Tanmay.
We can do that by iterating through the array and comparing value at the given key.
function functiontofindIndexByKeyValue(arraytosearch, key, valuetosearch) {
for (var i = 0; i < arraytosearch.length; i++) {
if (arraytosearch[i][key] == valuetosearch) {
return i;
}
}
return null;
}
You can use the function to find index of a particular element as below,
var index = functiontofindIndexByKeyValue(studentsArray, "name", "tanmay");
alert(index);
Summary: in this tutorial, we will show you how to use the JavaScript array indexOf() and lastIndexOf() methods to find the position of an element in an array.
Introduction to the JavaScript array indexOf() method
To find the position of an element in an array, you use the indexOf() method. This method returns the index of the first occurrence the element that you want to find, or -1 if the element is not found.
The following illustrates the syntax of the indexOf() method.
Array.indexOf(searchElement, fromIndex)
Code language: JavaScript (javascript)As shown above, the indexOf() method accepts two named arguments.
- The
searchElementargument is the element that you want to find in the array. - The
fromIndexis an array index at which the function starts the search.
The fromIndex argument can be a positive or negative integer. If the fromIndex argument is negative, the indexOf() method starts searching at array’s length plus fromIndex.
In case you omit the fromIndex argument, the indexOf() method starts searching from the begining of the string.
Notice that the indexOf() method uses the strict equality comparison algorithm that is similar to the triple-equals operator (===) when comparing the searchElement with the elements in the array.
The JavaScript array indexOf() method examples
Suppose, you have an array scores that consists of six numbers as follows:
var scores = [10, 20, 30, 10, 40, 20];Code language: JavaScript (javascript)The following example uses the indexOf() method to find the elements in the scores array:
console.log(scores.indexOf(10)); // 0
console.log(scores.indexOf(30)); // 2
console.log(scores.indexOf(50)); // -1
console.log(scores.indexOf(20)); // 1Code language: JavaScript (javascript)
And the following example uses the fromIndex() with the negative values:
console.log(scores.indexOf(20,-1)); // 5 (fromIndex = 6+ (-1) = 5)
console.log(scores.indexOf(20,-5)); // 1 (fromIndex = 6+ (-5) = 1)Code language: JavaScript (javascript)Assuming that you have the following array of objects, where each object has two properties: name and age.
var guests = [
{name: 'John Doe', age: 30},
{name: 'Lily Bush', age: 20},
{name: 'William Gate', age: 25}
];Code language: JavaScript (javascript)The following statement returns -1 even though the first element of the guests array and the searchElement have the same values in the name and ages properties. This is because they are two different objects.
console.log(guests.indexOf({
name: 'John Doe',
age: 30
})); // -1Code language: JavaScript (javascript)Sometimes, you want to find the indices of all occurrences of an element in an array. The following find() function uses the indexOf() method to do so.
function find(needle, haystack) {
var results = [];
var idx = haystack.indexOf(needle);
while (idx != -1) {
results.push(idx);
idx = haystack.indexOf(needle, idx + 1);
}
return results;
}Code language: JavaScript (javascript)The following example uses the find() function above to return an array of positions of the number 10 in the scores array.
console.log(find(10,scores)); // [0, 3]Code language: JavaScript (javascript)The Array type has another method called lastIndexOf() that provides the similar functionality to the indexOf() method.
The following illustrates the syntax of the lastIndexOf() method:
Array.lastIndexOf(searchElement[, fromIndex = Array.length - 1])Code language: JavaScript (javascript)The lastIndexOf() method returns the index of the last occurrence of the searchElement in the array. It returns -1 if it cannot find the element.
Different from the indexOf() method, the lastIndexOf() method searches for the element backward, starting at fromIndex.
The following statements return the last indices of the number 10 and 20 in the scores array.
console.log(scores.lastIndexOf(10));// 3
console.log(scores.lastIndexOf(20));// 5
Code language: JavaScript (javascript)
Because the number 50 is not in the scores array, the following statement returns -1.
console.log(scores.lastIndexOf(50));// -1Code language: JavaScript (javascript)In this tutorial, you have learned how to use the JavaScript array indexOf() and lastIndexOf() methods to locate an element in the array.
Was this tutorial helpful ?
В этом посте мы обсудим, как найти индекс первого вхождения заданного значения в массив в JavaScript.
1. Использование Array.prototype.indexOf() функция
The indexOf() метод возвращает индекс первого вхождения данного элемента в массив и возвращает -1 когда он не находит соответствия. Он использует алгоритм строгого равенства (=== оператор) для сравнения элементов.
|
const arr = [3, 5, 4, 2, 7]; const item = 4; const index = arr.indexOf(item); if (index !== –1) { console.log(`Element ${item} is found at index ${index} in the array`); } else { console.log(`Element ${item} not found in the array.`); } /* результат: Element 4 is found at index 2 in the array */ |
Скачать Выполнить код
2. Использование Array.prototype.findIndex() функция
The findIndex() метод возвращает индекс первого вхождения элемента в массиве, который удовлетворяет заданному предикату. Он возвращается -1 когда ни один элемент не соответствует. Вот как будет выглядеть код:
|
const arr = [3, 5, 4, 2, 7]; const item = 4; const index = arr.findIndex(x => x === item); if (index !== –1) { console.log(`Element ${item} is found at index ${index} in the array`); } else { console.log(`Element ${item} not found in the array.`); } /* результат: Element 4 is found at index 2 in the array */ |
Скачать Выполнить код
3. Использование библиотеки Underscore/Lodash
Библиотеки Underscore и Lodash предлагают _.indexOf метод, аналогичный собственному JavaScript .indexOf() метод. В следующем примере кода показано использование _.indexOf метод.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
const _ = require(‘underscore’); const arr = [3, 5, 4, 2, 7]; const item = 4; const index = _.indexOf(arr, item); if (index !== –1) { console.log(`Element ${item} is found at index ${index} in the array`); } else { console.log(`Element ${item} not found in the array.`); } /* результат: Element 4 is found at index 2 in the array */ |
Скачать код
4. Использование jQuery
Кроме того, с помощью jQuery вы можете использовать $.inArray метод, который работает аналогично собственному JavaScript indexOf() метод. $.inArray() метод является неправильным, поскольку он не возвращает логическое значение, а возвращает первый индекс элемента массива. Его использование показано ниже:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
const { JSDOM } = require(“jsdom”); const { window } = new JSDOM(); const $ = require(“jquery”)(window); const arr = [3, 5, 4, 2, 7]; const item = 4; const index = $.inArray(item, arr); if (index !== –1) { console.log(`Element ${item} is found at index ${index} in the array`); } else { console.log(`Element ${item} not found in the array.`); } /* результат: Element 4 is found at index 2 in the array */ |
Скачать код
Это все, что касается поиска индекса элемента в массиве в JavaScript.
Спасибо за чтение.
Пожалуйста, используйте наш онлайн-компилятор размещать код в комментариях, используя C, C++, Java, Python, JavaScript, C#, PHP и многие другие популярные языки программирования.
Как мы? Порекомендуйте нас своим друзьям и помогите нам расти. Удачного кодирования 🙂
