Что такое массив и как он выглядит, мы уже знаем из урока Javascript основные элементы, теперь будем с ним работать.
Создаём массив, который будем использовать во всех последующих примерах.
<script>
var a = ['ноль',' один',' два',' три',' четыре',' пять'];
document.write(a);
</script>
Пробел внутри апостроф отображается пробелом на экране. При написании программ пробел не ставится.
В дальнейшем во всех примерах, кроме первого, будут выводиться два значения:
а) то что возвращает оператор;
б) то что принимает изначальный массив.
Для работы с массивами есть несколько методов.
1. Метод length — определяет количество элементов массива.
Массив может быть очень объёмным, и пересчитывать его в ручную — дело очень кропотливое, да и ненужное.
Достаточно вывести на экран имя массива с методом length (длина), и вы узнаете точное количество элементов нём.
Учтите, метод length выведет вам число элементов по счёту, т.е начиная с единицы. Номера элементов начинаются с нуля.
<script>
var a = ['ноль',' один',' два',' три',' четыре',' пять'];
document.write(a.length);
</script>
Этот скрипт выведет цифру 6.
2. Метод push — добавляет элемент в конец массива.
В условии указывается название или число добавляемого элемента.
<script>
var a = ['ноль',' один',' два',' три',' четыре',' пять'];
var b = a.push(' шесть');
document.write(b + '<br>');
document.write(a);
</script>
Возвращает длину нового массива (число).
В конец исходного массива добавляется элемент, т.е. меняет начальные данные.
3. Метод pop — удаляет последний элемент массива.
В условии не указывается ничего. Удаление происходит по умолчанию.
<script>
var a = ['ноль',' один',' два',' три',' четыре',' пять'];
var b = a.pop();
document.write(b + '<br>');
document.write(a);
</script>
Возвращает удалённый элемент.
Исходный массив остаётся без последнего элемента.
4. Метод unshift — добавляет элемент в начало массива.
<script>
var a = [' ноль',' один',' два',' три',' четыре',' пять'];
var b = a.unshift(' минус');
document.write(b + <'br'>);
document.write(a);
</script>
Возвращает длину массива (число).
В исходный массив добавляет элемент в начало, т.е меняет начальные данные.
5. Метод shift — удаляет элемент в начале массива.
<script>
var a = [' ноль',' один',' два',' три',' четыре',' пять'];
var b = a.shift(' минус');
document.write(b + '<br>');
document.write(a);
</script>
Возвращает удалённый элемент.
Исходный массив остаётся без первого элемента.
6. Метод concat — объединяет два массива в один.
<script>
var a = ['ноль',' один',' два'];
var b = [' три',' четыре',' пять'];
var c = a.concat(b);
document.write(a + '<br>');
document.write(b + '<br>');
document.write(c);
</script>
Возвращает объединённый массив не меняя исходные.
7. Метод sort — сортирует массив. Сортировка происходит следующим образом:
a) строка (слова) выстраиваются по первой букве в слове по алфавиту. Английские по латинскому, русские по кириллическому.
в) цифры выстраиваются по по первому знаку например: цифры 1, 13, 176 построятся друг за другом, а цифры 2, 21, 240 после них и т.д.
<script>
var a = ['ноль',' один',' два',' три',' четыре',' пять'];
var b = a.sort();
document.write(a + '<br>');
document.write(b);
</script>
Возвращает отсортированный массив.
Исходный так же становится отсортированным.
<script>
var a = [2,7,17,21,329,1,453,29];
var b = a.sort();
document.write(a + '<br>');
document.write(b);
</script>
8. Метод reverse — меняет порядок элементов на противоположный.
<script>
var a = [' ноль',' один',' два',' три',' четыре',' пять'];
var b = a.reverse();
document.write(a + '<br>');
document.write(b);
</script>
Меняет порядок элементов как в возвращённом, так и в исходном массивах.
9. Метод join — отвечает за знак между элементами массива. Если в массиве между элементами стоит запятая, то join может поменять её на любой другой, который вы укажете в его аргументе.
<script>
var a = [' ноль',' один',' два',' три',' четыре',' пять'];
var b = a.join('&');
document.write(a + '<br>');
document.write(b);
</script>
Возвращает массив с изменённым знаком.
Исходный массив не меняется.
10. Метод slice — вырезает часть массива, при этом исходный массив остаётся целым.
Чтобы вырезать часть массива, в аргументах slice указываются номера элементов, с какого по какой делается выборка.
<script>
var a = [' ноль',' один',' два',' три',' четыре',' пять'];
var b = a.slice(1, 5);
document.write(a + '<br>');
document.write(b);
</script>
Возвращает вырезанную часть, при этом исходник остаётся целым.
11. splice — позволяет добавлять в массив любое количество элементов.
Для этого в параметрах метода в начале указываются два значения: первое — индекс элемента после которого будут добавляться элементы, а второе 0, после чего вносятся те элементы которые будут добавляться.
<script>
var a = [' ноль',' один',' два',' три',' четыре',' пять'];
var b = a.splice(6, 0, ' шесть',' семь',' восемь');
document.write(a + '<br>');
document.write(b);
</script>
Возвращает пустой массив, а все изменения вносятся в исходник.
12. Метод filter — позволяет отобрать элементы похожие по какому либо признаку.
Параметром в этом методе является функция, которая и производит сравнение.
Например отберём все чётные числа.
<script>
var a = [1, 2, 3, 4, 5, 6, 7, 8];
var b = a.filter(function (item) {
return item % 2 == 0;
});
document.write(a + '<br>');
document.write(b);
</script>
Возвращает четные числа.
Исходник без изменений.
12. Метод forEach — параметр функция, которая одинаково воздействует на каждый элемент массива.
Например, расположим каждый элемент с новой строки (столбиком).
<script>
var a = [' ноль',' один',' два',' три',' четыре',' пять'];
a.forEach(function (item) { // item - один пункт
document.write(item + '<br>');
});
</script>
13. Метод map — создаёт массив из изменённых элементов исходного.
В параметр принимается функция изменяющая элементы.
<script>
var a = [' ноль',' один',' два',' три',' четыре',' пять'];
var b = a.map(function (item) {
return item + 'OK';
});
document.write(b + '<br>');
document.write(a);
</script>
Возвращает новый массив.
Исходный массив без изменений.
14. Метод some — проверяет массив на соответствие всех элементов какому либо требованию.
В случае соответствия выдаёт true (верно).
В случае несоответствия выдаёт false (не верно).
Например, проверим все-ли элементы чётные.
<script>
var a = [2, 4, 6, 8, 10];
var b = a.every(function (item) {
return item % 2 == 0;
});
document.write(b);
</script>
Теперь добавим в массив нечетную цифру.
<script>
var a = [2, 4, 5, 6, 8, 10];
var b = a.every(function (item) {
return item % 2 == 0;
});
document.write(b);
</script>
С методами массива пока всё.
Javascript стили < < < В раздел > > > Цикл с массивом