JavaScript — это мощный язык программирования, который широко используется как для интерфейсной, так и для внутренней разработки. Одной из ключевых особенностей JavaScript является его способность манипулировать данными различными способами. В этом сообщении блога мы рассмотрим некоторые из наиболее распространенных методов манипулирования данными в JavaScript с примерами, которые помогут проиллюстрировать, как работает каждый метод.
1. Манипуляции с массивами
Массивы JavaScript — это мощный инструмент для хранения данных и управления ими. Некоторые из наиболее распространенных методов манипулирования массивами включают в себя:
push(): добавляет элемент в конец массива
Пример:
let fruits = ['apple', 'banana', 'orange'];
// add 'mango' to the end of the array
fruits.push('mango');
console.log(fruits); // ["apple", "banana", "orange", "mango"]
// add 'kiwi' and 'pineapple' to the end of the array
fruits.push('kiwi', 'pineapple');
console.log(fruits); // ["apple", "banana", "orange", "mango", "kiwi", "pineapple"]
Метод push() используется для добавления одного или нескольких элементов в конец массива. Он принимает один или несколько аргументов, которые представляют собой элементы, добавляемые в массив.
Стоит отметить, что push() изменяет исходный массив, а также возвращает новую длину массива после добавления новых элементов.
pop() : удаляет последний элемент массива
Пример:
let fruits = ['apple', 'banana', 'orange']; let lastFruit = fruits.pop(); console.log(fruits); // ["apple", "banana"] console.log(lastFruit); // "orange"
В этом примере метод pop() вызывается для массива фруктов, удаляя последний элемент «оранжевый» из массива и возвращая его. Затем массив фруктов модифицируется и теперь содержит только элементы «яблоко» и «банан».
Вы также можете использовать метод pop() для удаления определенного элемента, используя индекс этого элемента, например
let numbers = [1, 2, 3, 4, 5]; numbers.pop(2); console.log(numbers); // [1, 2, 4, 5]
В приведенном выше примере элемент с индексом 2 (который равен 3) удаляется из массива чисел с помощью метода pop().
Стоит отметить, что метод pop() изменяет исходный массив.
shift() : удаляет первый элемент массива
Пример:
let fruits = ['apple', 'banana', 'orange']; // remove the first element of the array let firstFruit = fruits.shift(); console.log(firstFruit); // "apple" console.log(fruits); // ["banana", "orange"]
Метод shift() удаляет первый элемент массива и возвращает этот элемент. Это также уменьшает длину массива.
Стоит отметить, что shift() изменяет исходный массив, удаляя первый элемент массива. Если вы хотите сохранить исходный массив нетронутым и создать новый со смещенными элементами, вы можете вместо этого использовать метод slice().
Важно отметить, что метод shift() изменяет исходный массив, поэтому, если вы хотите сохранить исходный массив нетронутым и создать новый со смещенными элементами, вместо этого вы можете использовать метод slice().
unshift() : добавляет элемент в начало массива
Пример:
let fruits = ['apple', 'banana', 'orange'];
// add a new element to the beginning of the array
fruits.unshift('lemon');
console.log(fruits); // ["lemon", "apple", "banana", "orange"]
// add multiple elements to the beginning of the array
fruits.unshift('kiwi', 'mango');
console.log(fruits); // ["kiwi", "mango", "lemon", "apple", "banana", "orange"]
Метод unshift() добавляет один или несколько элементов в начало массива и возвращает новую длину массива. Элементы добавляются в том порядке, в котором они появляются в списке аргументов, поэтому первый аргумент станет первым элементом массива, второй аргумент станет вторым элементом и так далее.
Стоит отметить, что метод unshift() модифицирует исходный массив, а не создает новый
splice() : удаляет или добавляет элементы в массив по определенному индексу. Пример:
let fruits = ['apple', 'banana', 'orange', 'mango', 'kiwi']; // remove an element from index 2 fruits.splice(2, 1); console.log(fruits); // ["apple", "banana", "mango", "kiwi"] // remove multiple elements from index 1 fruits.splice(1, 2); console.log(fruits); // ["apple", "kiwi"] // add an element at index 1 fruits.splice(1, 0, 'lemon'); console.log(fruits); // ["apple", "lemon", "kiwi"] // replace an element at index 2 fruits.splice(2, 1, 'pear'); console.log(fruits); // ["apple", "lemon", "pear"]
Метод splice() используется для добавления, удаления или замены элементов в массиве по указанному индексу. Метод принимает три параметра:
- первый параметр — это индекс, с которого начинается изменение массива.
- второй параметр — количество удаляемых элементов.
- третий параметр (необязательный) — это элементы, которые нужно добавить в массив.
Стоит отметить, что метод splice() изменяет исходный массив, а не создает новый.
Это очень мощный метод манипулирования массивами, который широко используется при работе с динамическими данными.
slice() : возвращает новый массив с выбранными элементами из исходного массива
Пример:
let fruits = ['apple', 'banana', 'orange', 'mango', 'pear']; // slice the first three elements let firstThree = fruits.slice(0, 3); console.log(firstThree); // ["apple", "banana", "orange"] // slice the last two elements let lastTwo = fruits.slice(-2); console.log(lastTwo); // ["mango", "pear"] // slice elements from index 1 to 3 let middleElements = fruits.slice(1, 4); console.log(middleElements); // ["banana", "orange", "mango"]
Метод slice() принимает два аргумента: первый — это начальный индекс, а второй — конечный индекс (не включенный) элементов, которые должны быть включены в новый массив. Если начальный индекс отрицательный, он начинает отсчет с конца массива. Если конечный индекс не указан, будут включены все элементы от начального индекса до конца массива. Метод slice() возвращает новый массив, содержащий выбранные элементы исходного массива.
Стоит отметить, что slice() не изменяет исходный массив, а создает новый с выбранными элементами.
forEach() : позволяет перебирать каждый элемент массива и выполнять действие
Пример:
let numbers = [1, 2, 3, 4, 5];
// print each number
numbers.forEach(function(number) {
console.log(number);
});
// Output:
// 1
// 2
// 3
// 4
// 5
Метод forEach() принимает в качестве аргумента функцию обратного вызова, и эта функция выполняется один раз для каждого элемента массива. В функцию обратного вызова передаются три аргумента: текущий элемент, текущий индекс и массив, для которого вызывается метод.
let fruits = ['apple', 'banana', 'orange'];
fruits.forEach(function(fruit, index) {
console.log(index + ': ' + fruit);
});
// Output:
// 0: apple
// 1: banana
// 2: orange
Как видите, метод forEach — это простой способ перебора массива, это отличный метод, когда вы хотите выполнить действие для каждого элемента в массиве, не изменяя исходный массив.
map(): создает новый массив с результатами вызова предоставленной функции для каждого элемента в вызывающем массиве.
Пример:
let numbers = [1, 2, 3, 4, 5];
// square each number
let squares = numbers.map(function(number) {
return number * number;
});
console.log(squares); // [1, 4, 9, 16, 25]
// convert array of numbers to array of strings
let strings = numbers.map(function(number) {
return number.toString();
});
console.log(strings); // ["1", "2", "3", "4", "5"]
Метод map() принимает функцию обратного вызова в качестве аргумента, и эта функция должна возвращать новое значение для элемента. Затем метод map() возвращает новый массив, содержащий результат применения функции обратного вызова к каждому элементу исходного массива.
Функция обратного вызова, переданная методу map(), вызывается для каждого элемента массива и принимает три аргумента: currentValue, index и сам массив. Этот метод полезен для перебора массива, преобразования всех элементов и возврата нового массива, он не изменяет исходный массив.
filter(): создает новый массив со всеми элементами, прошедшими проверку, реализованную предоставленной функцией.
Пример:
let numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
// filter even numbers
let evens = numbers.filter(function(number) {
return number % 2 === 0;
});
console.log(evens); // [2, 4, 6, 8, 10]
// filter numbers greater than 5
let greaterThanFive = numbers.filter(function(number) {
return number > 5;
});
console.log(greaterThanFive); // [6, 7, 8, 9, 10]
Метод filter() принимает функцию обратного вызова в качестве аргумента, и эта функция должна возвращать логическое значение, указывающее, следует ли включать элемент в новый отфильтрованный массив. Затем метод filter() возвращает новый массив, содержащий только те элементы, которые прошли тест, реализованный функцией обратного вызова.
Стоит отметить, что filter() не изменяет исходный массив, а создает новый с отфильтрованными элементами.
2. Манипуляции с объектами
Объекты JavaScript — еще одна важная структура данных для хранения данных и управления ими. Некоторые из наиболее распространенных методов манипулирования объектами включают в себя:
Object.keys() : возвращает массив ключей объекта
Пример:
let person = { name: 'John', age: 30, job: 'developer' };
let keys = Object.keys(person);
console.log(keys); // ["name", "age", "job"]
Метод Object.keys() возвращает массив ключей объекта. В этом примере у нас есть объект «человек» с тремя свойствами (имя, возраст и должность), и мы используем метод Object.keys() для получения массива ключей этого объекта, который представляет собой [«имя», «возраст», «работа». ].
Таким образом, вы можете извлечь ключи объекта и использовать их для доступа к значениям или выполнения над ними любых операций. Это полезно, когда вы хотите выполнить итерацию по объекту и получить доступ к его свойствам или когда вы хотите извлечь ключи объекта, чтобы использовать их в другом контексте.
Object.values() : возвращает массив значений объекта
Пример:
let person = { name: 'John', age: 30, job: 'developer' };
let values = Object.values(person);
console.log(values); // ["John", 30, "developer"]
В этом примере у нас есть объект person с тремя свойствами: name, age и job. Мы используем метод Object.values() для извлечения массива значений объекта, а именно "John", 30 и "developer".
Стоит отметить, что порядок значений в возвращаемом массиве такой же, как порядок свойств в исходном объекте, и его можно использовать с любым объектом, неважно, определен ли он с использованием литеральной записи или записи конструктора. .
Также стоит отметить, что этот метод поддерживается не во всех браузерах, вам может понадобиться включить полифилл для старых браузеров.
Object.entries() : возвращает массив пар ключ-значение объекта
Пример:
let person = { name: 'John', age: 30, job: 'developer' };
let entries = Object.entries(person);
console.log(entries); // [["name", "John"], ["age", 30], ["job", "developer"]]
Как видите, метод Object.entries() принимает объект в качестве аргумента и возвращает массив его пар ключ-значение. Каждый элемент возвращаемого массива сам по себе является массивом из двух элементов: первый элемент является ключом, а второй элемент — значением.
Вы также можете использовать метод Object.entries() в сочетании с методом forEach() для перебора пар ключ-значение объекта:
let person = { name: 'John', age: 30, job: 'developer' };
Object.entries(person).forEach(function([key, value]) {
console.log(key + ': ' + value);
});
// This will output:
name: John
age: 30
job: developer
В качестве альтернативы вы можете использовать цикл for...of для перебора массива, возвращаемого Object.entries(), и иметь доступ к ключу и значению объекта.
let person = { name: 'John', age: 30, job: 'developer' };
for (let [key, value] of Object.entries(person)) {
console.log(key + ': ' + value);
}
Как видите, использование метода Object.entries() может быть полезно, когда вам нужно работать с парами ключ-значение объекта в JavaScript.
Object.assign() : объединяет два или более объектов вместе
Пример:
let obj1 = { name: 'John', age: 30 };
let obj2 = { job: 'developer', city: 'New York' };
let obj3 = Object.assign(obj1, obj2);
console.log(obj3); // { name: 'John', age: 30, job: 'developer', city: 'New York' }
В этом примере метод Object.assign() используется для объединения obj1 и obj2 в новый объект с именем obj3. Свойства obj2 добавляются к obj1, а любые повторяющиеся свойства перезаписываются значениями obj2. Исходные объекты obj1 и obj2 не изменяются.
Вы также можете использовать Object.assign() для создания нового объекта и объединения с ним других объектов:
let obj1 = { name: 'John', age: 30 };
let obj2 = { job: 'developer', city: 'New York' };
let obj3 = Object.assign({}, obj1, obj2);
console.log(obj3); // { name: 'John', age: 30, job: 'developer', city: 'New York' }
Также возможно объединить несколько объектов вместе, используя оператор расширения объекта (…)
let obj1 = { name: 'John', age: 30 };
let obj2 = { job: 'developer', city: 'New York' };
let obj3 = { ...obj1, ...obj2};
console.log(obj3); // { name: 'John', age: 30, job: 'developer', city: 'New York' }
Object.assign() — отличный метод для объединения объектов, он обычно используется в библиотеках и фреймворках для расширения объектов или настройки параметров.
Стоит отметить, что если свойства объекта сами являются объектами, свойства не объединяются, а копируется ссылка, поэтому, если объект внутри свойства будет изменен, он также будет изменен в конечном объекте.
for…in : позволяет перебирать свойства объекта
Пример:
let person = { name: 'John', age: 30, job: 'developer' };
for (let key in person) {
console.log(key + ': ' + person[key]);
}
Цикл for…in позволяет перебирать свойства объекта. В приведенном выше примере переменной «key» присваивается имя каждого свойства в объекте «person», а доступ к значению каждого свойства осуществляется с использованием нотации объекта person[key].
Вывод будет:
name: John age: 30 job: developer
Стоит отметить, что for…in также будет перебирать любые свойства из цепочки прототипов, поэтому он может включать свойства, которых вы не ожидаете. Чтобы избежать этого, вы можете использовать Object.hasOwnProperty(key), чтобы проверить, является ли свойство собственным свойством объекта перед доступом к нему.
for (let key in person) {
if(person.hasOwnProperty(key)){
console.log(key + ': ' + person[key]);
}
}
Кроме того, for…in не гарантирует перебор свойств в определенном порядке, поэтому он не подходит для случаев использования, зависящих от порядка. В этом случае вы можете использовать другие параметры, такие как цикл forEach() или for...of.
delete : удаляет свойство объекта
Пример:
let person = { name: 'John', age: 30, job: 'developer' };
console.log(person); // { name: 'John', age: 30, job: 'developer' }
delete person.age;
console.log(person); // { name: 'John', job: 'developer' }
В этом примере мы сначала определяем объект person с тремя свойствами: name, age и job. Затем мы используем оператор удаления, чтобы удалить свойство age из объекта. После удаления объект person больше не имеет свойства age, и вывод второго оператора console.log показывает это.
Стоит отметить, что оператор удаления влияет только на свойства объекта, а не на переменные или элементы массива. Если вы хотите удалить элемент из массива, вы можете использовать метод splice() для удаления элемента из массива.
Кроме того, оператор delete удаляет только собственные свойства объекта, он не может удалять унаследованные свойства.
Спасибо, что читаете 🙏
