Объекты и массивы

var shopping = ['beetroot', 'carrots', 'eggs', 'milk']

Массивы

Объявление

var shopping = []

var shopping = ['beetroot', 'carrots', 'eggs', 'milk'];

alert( shopping[0] ); // beetroot
alert( shopping[1] ); // carrots
alert( shopping[2] ); // eggs

Работа с массивами

Элементы нумеруются, начиная с нуля.

var shopping = ['beetroot', 'carrots', 'eggs', 'milk'];

shopping[1] = 'potato';

var shopping = ['beetroot', 'carrots', 'eggs', 'milk'];

alert( shopping ); // 'beetroot', 'carrots', 'eggs', 'milk'

Через alert можно вывести и массив целиком.

var shopping = ['beetroot', 'carrots', 'eggs', 'milk'];

alert( fruits.length ); // 4

Общее число элементов, хранимых в массиве, содержится в его свойстве length:

var a = [];
a[0] = 0;
a[5] = 5;

alert( a ); // 0,,,,,5

Массив с «дырами»

alert(arr.length); // 6

Длина length – не количество элементов массива, а последний индекс + 1.

var arr = [
    'beetroot', 
    { name: 'Alex' },
    2,
    true
]

В массиве может храниться любое число элементов любого типа.

var numbers = [1, 2, 3, 4, 5, 6];

numbers[ numbers.length ] = 7; // [1, 2, 3, 4, 5, 6, 7]

Добавления элементов в массив

var numbers = [1, 2, 3, 4, 5, 6];

numbers.push( 7 ); // в конец
numbers.push( 7, 8, 9 );

numbers.unshift( 0 ); // в начало

Методы push() и unshift()

Удаление элементов из массива

var numbers = [1, 2, 3, 4, 5, 6];

var lastItem = numbers.pop(); // 6
var firstItem = numbers.shift(); // 0

Методы pop() и shift()

Удаляют и возвращают элементы массива 

Перебор элементов из массива

var students = [
  'Alex',
  'Sasha',
  'Ira',
  'Nika'
];

for (var i = 0; i < students.length; i++) {
    console.log(students[i]);
}

Создадим функцию, которая выводит плейлист

var playList = [
  'I Did It My Way',
  'Respect',
  'Imagine',
  'Born to Run',
  'Louie Louie',
  'Maybellene'
];

function print(message) {
  document.write(message);
}

Полезные методы для работы с Массивами

join() - массив в строку

var students = [
  'Alex',
  'Sasha',
  'Ira',
  'Nika'
];

var studentsString = students.join(', ');

console.log(studentsString);

//  Alex, Sasha, Ira, Nika

split() - строка в массив

var studentsString = 'Alex, Sasha, Ira, Nika';

var students = studentsString.split(', ');

console.log(students);

concat() - объединение массивов

var currentStudents = ['Alex', 'Sasha', 'Ira'];
var newStudents = ['Nika', 'Gustav'];

var allStudents = currentStudents.concat( newStudents );

console.log(allStudents);

indexOf() - поиск в массиве

var currentStudents = ['Alex', 'Sasha', 'Ira'];

var position = currentStudents.indexOf( 'Ira' ); // 2

position = currentStudents.indexOf( 'Nika' ); // -1

var students = ['Alex', 'Sasha', 'Ira'];

delete students[1]; // значение с индексом 1 удалено

// теперь students = ['Alex', undefined, 'Ira'];

Удаление из массива

arr.splice(index[, deleteCount, elem1, ..., elemN])

var students = ['Alex', 'Sasha', 'Ira'];

students.splice(1, 1); // начиная с позиции 1, удалить 1 элемент


// удалить 2 первых элемента и добавить другие вместо них
students.splice(0, 2, "Nika", "Olya");

Еще методы

Справка на MDN

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

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

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

var student = {
    name: "Dave",
    grades: [80, 85, 90],
    beetrootStudent: true
};

var person = {};

Объекты

var student = {
    name: "Dave",
    age: 25
};

alert(student['name']);
alert(student.name);

работа с Объектами

student.name = "Alex"; // Изменить

student.grades = [80, 85, 90]; // добавить

var person = {
  name : 'Alex',
  country : 'UA',
  age : 29,
  beetrootTeacher : true,
  skills : ['JavaScript', 'HTML', 'CSS']
};

function print(message) {
  var div = document.getElementById('output');
  div.innerHTML = message;
}

Разберем на примере

var person = {
  name : 'Alex',
  country : 'UA',
  age : 29,
  beetrootTeacher : true,
  skills : ['JavaScript', 'HTML', 'CSS']
};

for ( var key in person ){
    console.log(key); // ключ
    console.log(person[key]); // значение

    console.log(person.key); // не сработает

    // прикольная фича
    console.log(key, ':', person[key]);
}

Перебор свойств

var codes = {
  // телефонные коды в формате "код страны": "название"
  "46": "Швеция",
  "1": "США",
  "38": "Украина"
};

var person = {
  name : 'Alex',
  country : 'UA',
  age : 29,
  beetrootTeacher : true,
  skills : ['JavaScript', 'HTML', 'CSS']
};

for ( var key in codes ){
    console.log(key, ':', codes[key]);
}

В каком порядке перебираются свойства?

// обычные переменные
var message = "Привет";
var phrase = message;

// Объекты 
var person = {
  name : 'Alex',
  country : 'UA',
  age : 29,
  beetrootTeacher : true,
  skills : ['JavaScript', 'HTML', 'CSS']
};

var evilClone = person;

Объекты: передача по ссылке

В переменной, которой присвоен объект, хранится не сам объект, а «адрес его места в памяти», иными словами – «ссылка» на него.

var person = {
  name : 'Alex',
  country : 'UA',
  age : 29,
  beetrootTeacher : true,
  skills : ['JavaScript', 'HTML', 'CSS']
};

var evilClone = {}; // пустой

// скопируем в него все свойства person
for (var key in person) {
  evilClone[key] = person[key];
}

Объекты: клонирование

Итого

Массивы записываются через [], Объекты - {};

Доступ к элементам массива осуществляется через числовой индекс:
var arr = [1, 2, 3]
arr[0] = 10;

Объекты – это ассоциативные массивы с дополнительными возможностями:

• Доступ к элементам осуществляется:
  • Напрямую по ключу obj.prop = 5
  • Через переменную, в которой хранится ключ:
    var key = "prop";
    obj[key] = 5
• Удаление ключей: delete obj.name.
• Существование свойства может проверять оператор in:
  if ("prop" in obj), как правило, работает и просто сравнение
  if (obj.prop !== undefined)