Это будет просто чистая информация и примеры множества действительно полезных функций с некоторыми начальными данными для предоставления примеров их выходных данных. Пристегните ремни!
Что мы будем освещать:
- Толкать
- Unshift
- Поп
- Сдвиг
- Операторы спреда
- Кусочек
- Сращивание
- Для цикла
- Пока цикл
- Для… цикла
- Для… в цикле
- Для каждого
- Фильтр
- карта
- Уменьшать
- Выключатель
- Сортировать
SEED DATA — этот постоянный объект будет использоваться во всех примерах. это массив объектов, содержащий имена и возраст 7 разных людей.
const obj = [
{name: “Matt”, age: 26,},
{name: “Tom”, age: 45,},
{name: “Gary”, age: 34,},
{name: “Lola”, age: 23,},
{name: “Gertrude”, age: 56,},
{name: “Barry”, age: 78,},
{name: “David”, age: 43}
];
- Толкать
Функция .push работает только с массивами, но вы можете вставлять объекты в массив.
добавляет отправленный элемент в конец массива. ЭТО РАЗРУШИТЕЛЬНО.
function push(name, age){
obj.push({name: `${name}`, age: `${age}`})
}
push("Mary", 96)
console.log(obj)
2. Не переключать
Функция .unshift добавляет элементы в начало массива. ЭТО РАЗРУШИТЕЛЬНО
function unshift(name, age){
obj.unshift({name: `${name}`, age: `${age}`})
}
unshift("Kyle", 12)
console.log(obj)
3. Поп
Функция .pop удаляет последнюю функцию в массиве. Не требует аргументов. ЭТО РАЗРУШИТЕЛЬНО
function pop(obj){
obj.pop()
console.log(obj)
4. Сдвиг
Функция .shift удаляет первую функцию в массиве. Не требует аргументов. ЭТО РАЗРУШИТЕЛЬНО
function shift(obj){
obj.shift()
console.log(obj)
}
5. Операторы спреда
Оператор Spread позволяет вам вставить содержимое ранее определенного массива в ваш текущий массив. Примечание. Когда вы создаете новую константу внутри функции, она недоступна вне функции. Это называется размахом. ЭТО НЕРАЗРУШИТЕЛЬНО
function spreadOperator(name, age){
const objNew = [{name: `${name}`, age: `${age}`}, ...obj]
console.log(objNew)
}
6. Нарезка
.slice неразрушающим образом создаст копию исходного массива и, в зависимости от переданных аргументов, создаст копию определенных частей массива.
.slice без аргументов вернет полный массив:
const slice1 = obj.slice()
.slice с одним аргументом вернет массив от указанного в аргументе индекса до конца массива:
const slice2 = obj.slice(3)
.slice с двумя аргументами вернет массив из индекса, указанного в первом аргументе, в индекс массива, указанный во втором аргументе:
const slice3 = obj.slice(2,5)
7. Сращивание
.splice изменит исходный массив — ЭТО РАЗРУШИТЕЛЬНО. однако его можно использовать для добавления или данных из массива.
Если есть только один аргумент, splice деструктивно удалит элементы, проиндексированные после указанного целого числа (вы также можете использовать отрицательные целые числа для удаления с конца)
function splice1(){
obj.splice(2)
}
С двумя аргументами первое целое число — это начало соединения, а второе
— это количество элементов, которые нужно удалить из этого индекса. в этом случае начните с индекса 2 и удалите следующие 3 элемента.
function splice2(obj){
obj.splice(2,3)
}
3-й, 4-й, 5-й и т. д. аргументы — это объекты, которые будут вставлены между удаленными объектами из операции вставки. в этом случае имя: «Джон», возраст: 64 заменит 3 удаленных элемента из операции сращивания:
function splice3(obj){
obj.splice(2,3, {name: "John", age: 64})
8. Для циклов
Для цикла требуется 3 входа — начальный счетчик, условие остановки и метод итерации. В этом случае мы устанавливаем i в качестве счетчика равным 0, условием остановки является достижение I длины массива, а итерация I увеличивается на 1 каждый раз при запуске цикла.
function forLoop(obj){
for (let i=0; i < obj.length; i++){
console.log(`Good For Looping ${obj[i].name}`)
}
return obj;
}
9. Пока Цикл
Цикл while требует передачи условия (в данном случае i > 0) и будет продолжать выполнять цикл, пока это условие возвращает значение true.
function whileLoop (obj){
let i = obj.length
while (i > 0) {
--i
console.log(`Good While Looping ${obj[i].name}`)
}
return obj;
}
10. Для… цикла
Цикл for…of будет перебирать каждый элемент в массиве и выполнять функцию, указанную для каждого. Цикл for..of работает с каждым ЭЛЕМЕНТОМ массива.
function forOf(obj){
for (const element of obj){
console.log(`Good For...Of Looping ${element.name}`)
}
}
11. Для... в цикле
Цикл for…in будет перебирать каждый индекс в массиве и выполнять функцию, указанную для каждого. Цикл for..in работает с каждым индексом массива.
function forIn(obj){
for (const key in obj) {
console.log(key);
}
}
12 . для каждого
Цикл forEach() работает с массивом и выполняет заданную функцию
с каждым элементом массива.
function forEach (obj) {
obj.forEach( element => {
console.log(`Good forEach Looping ${element.name}`)
})
}
13. Фильтр()
Фильтр работает с массивом и возвращает все экземпляры массива, соответствующие функции, указанной в фильтре. В этом случае он возвращает все экземпляры массива объектов, возраст которых больше 50.
function filter(obj){
return obj.filter(element => element.age > 50)
}
14. Карта()
Map будет перебирать каждый элемент в массиве и выполнять функцию, указанную для этого элемента. Возвращаемое значение будет выводом функции. Map всегда будет возвращать массив той же длины, что и оригинал.
function map(obj){
return obj.map(element => element.age + 30)
}
15. Уменьшить
Уменьшение будет перебирать элементы в массиве и добавлять их вместе. В этом случае мы повторяем возраст каждого пользователя и суммируем возрасты.
function reduce(obj){
return obj.reduce((a, b) => ({age: a.age + b.age}));
}
16. Переключатель
Функция switch позволяет вам писать операторы case. Когда случай соответствует запрошенному оператору, он запустит код, следующий за этим оператором. Важно делать перерыв после каждого оператора, иначе всегда будет выполняться только оператор по умолчанию.
function switch1(obj){
const statement = obj[0].name;
switch (statement) {
case "John":
console.log("Hi John")
break;
case "Matt":
console.log("Hi Matt")
break;
case "David":
console.log("Hi David")
break;
default:
console.log("Hi person who I don't know!")
};
}
17. Сортировать
Функция сортировки упорядочит ваш массив, используя указанную вами функцию. Его можно использовать как для чисел, так и для строк.
function sortNumber(obj){
result = obj.sort(
(a, b) => {
return a.age - b.age
}
);
return result
}
При сортировке строк вам нужно будет использовать функцию localeCompare.
function sortString(obj){
result = obj.sort(
(a, b) => {
return a["name"].localeCompare(b["name"])
}
);
return result
}
Фу!
