Основы JavaScript: массивы

День 10, 11 и 12 #100DaysOfCode

Сегодня 12-й день моего #100DaysOfCode путешествия с JavaScript.

Я пишу о своих знаниях в объясненной форме через свои блоги и социальные сети. Если вы хотите присоединиться ко мне в учебном путешествии, обязательно следите за моими блогами и социальными сетями, а также делитесь своими. Давайте учиться вместе!🫱🏼‍🫲🏼

Эта статья является частью серии Основы JavaScript.

Массивы

В JavaScript мы используем массивы для хранения списка элементов. Массив начинается с открытой квадратной скобки [ и заканчивается закрытой квадратной скобкой ]. Элементы внутри массива разделяются запятой ,.

const numbers = [1, 2, 3, 4];
const booleans = [true, false, true];
const strings = ["happy", "laugh"];

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

const nested = [[2, 3, [2, 3]], 3];

Пока мы перебираем массив, мы можем сохранить текущее значение. Мы можем сделать это по разным причинам. Если бы мы хотели определить среднее значение нескольких чисел.👇🏼

const result = average([80,90,98,100]); 
console.log( result ); // 92

Пример. Учитывая массив, найдите сумму всех четных значений внутри массива и верните ее.

function sumEven(array) {
    let sum = 0;
    for(let i = 0; i < array.length; i++){
        if(array[i] % 2 === 0){
            sum = sum + array[i]
}
    }
    return sum;
}

Индексация массива

Массивы имеют индексы, отсчитываемые от нуля, как и строки. Это означает, что первый элемент массива имеет индекс 0, затем 1:

const element = array[0];

Пример. Завершите функцию hasOne, которая принимает массив чисел. Возвратите true, если любое из чисел в array равно 1. Верните false, если нет.

function hasOne(array) {
    for(let i=0; i<array.length; i++){
        if(array[i] === 1){
            return true;
        }
    }
    return false;
}

Вернуть новый массив

При формулировании функции для фильтрации массива мы можем создать новый массив и вставлять туда элементы всякий раз, когда они удовлетворяют нашему условию.

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

function greaterThanFour(array) {
    const newArray = [];
    for(let i = 0; i < array.length; i++) {
        const element = array[i];
        // is this element greater than 4?
        if(element > 4) {
            // yes, push this element on our array
            newArray.push(element);
        }
    }
    return newArray;
}

Здесь мы создаем новый массив и добавляем в него элементы из array, только если они больше 4 в нашем newArray. Затем возвращается новый массив. Метод push добавляет в массив новые элементы.

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

function unique(array) {
    let newArray = [];
    for(let i = 0; i < array.length; i++) {
        const element = array[i];
        if (newArray.indexOf(element) === -1) {
// indexOf method was learned in previous tutorial
            newArray.push(element);
        }
    }
    return newArray;
}

Изменить значения массива

Используя квадратные скобки, такие как array[0], мы научились читать значения из массивов. Точно так же мы можем использовать оператор присваивания =, чтобы присвоить этим местам новые значения.

const array = [1,2,3];
array[0] = 6;
console.log(array); // [6,2,3]

Пример. Выполните функцию addOne, чтобы добавить 1 к каждому элементу массива. Поскольку мы изменяем массив напрямую, не возвращайте его.

function addOne(array) {
    for(let i = 0; i < array.length; i++) {
        array[i]++;
    }
}

Изменить массив

Давайте изменим массив, чтобы отфильтровать его! Метод splice используется для удаления элементов из массива. Давайте используем splice для удаления элементов, которые больше 1:

const array = [1,2,3];
for(let i = 0; i < array.length; i++) {
    if(array[i] > 1) {
        array.splice(i, 1);
    }
}
console.log(array); // [1, 3]

// This is a Bug🐛

Вам должно быть интересно, почему console.log показывает 1 и 3 даже после объединения элементов больше 1. Давайте посмотрим:

Итерация 1: индекс указывает на элемент 1. Мы не соединяем 1, потому что оно не больше 1. Работает отлично! i=0

Итерация 2: мы обнаруживаем, что 2 больше, чем 1, поэтому мы выполняем сращивание по индексу 1. Работает отлично! i=1

Конечная итерация: длина массива 2 и i=2. Условие цикла состоит в том, что i < array.length, поэтому в этой точке дальнейших итераций нет. Мы никогда не удаляли 3!

Исправить🔥

Считая в обратном порядке.

const array = [1,2,3];
for(let i = array.length - 1; i >= 0; i--) {
    if(array[i] > 1) {
        array.splice(i, 1);
    }
}
console.log(array); // [1]

Итерация 1. Начиная с конца, мы удаляем 3, поскольку оно больше, чем 1 . Работает отлично! i=2

Итерация 2: давайте переместим индекс i в 1 . 2 будет удален путем объединения по индексу 1 . Работает отлично! i=1

Конечная итерация: 1 не больше, чем 1, поэтому мы не объединяем его. Как и ожидалось, в нашем массиве осталось [1]!

Заключение

В завершение немного информации о функциях JavaScript…

JavaScript не волнует, изменяем ли мы значение внутри структуры данных, когда слово const используется с объектом или массивом. Массивы — это объекты, поэтому вы также можете включать массивы при обсуждении характеристик объекта.

Сегодня я узнал о массивах в JavaScript.