В этой статье мы рассмотрим основные фундаментальные концепции JavaScript, которые необходимо знать для эффективного первого цикла изучения React/React Native.

Оглавление

- карта() и фильтр()

- срез () и сращивание ()

- конкат ()

- найти() и найтиИндекс()

- деструктурирование

- оператор отдыха и спреда

- обещания

карта и фильтр

Оба являются методами массива, и оба возвращают новый массив при применении фильтра. Фильтр дополнительно исключает элементы, которые не совпадают.

карта:

const Data =[
    {id: '1',title: "car"},
    {id: '2',title: "bus"},
    {id: '3',title: "plane"},
    {id: '4',title: "train"},
    {id: '5',title: "ship"},
]

const upperData = Data.map(element => element.title.toUpperCase());
console.log(upperData)
Output:
['CAR', 'BUS', 'PLANE', 'TRAIN', 'SHIP']

const Data =[
    {id: '1',title: "car"},
    {id: '2',title: "bus"},
    {id: '3',title: "plane"},
    {id: '4',title: "train"},
    {id: '5',title: "ship"},
]

const filterData = Data.filter(element => element.id %2 === 0);
console.log(filterData)
Output:
[ { id: '2', title: 'bus' }, { id: '4', title: 'train' } ]

Метод возвращает новый массив с выбранными элементами, а метод splice изменяет содержимое существующего массива.

сращивание:

const Data =[
    'Car',
    'Bus',
    'Helicopter',
    'Train'
]

const CopyArray = [...Data]

CopyArray.splice(0,1)
console.log(CopyArray)
Output:
['Bus', 'Helicopter', 'Train']
const Data =[
    'Car',
    'Bus',
    'Helicopter',
    'Train'
]

const CopyArray = [...Data]

CopyArray.splice(CopyArray.length,1,"Plane")
console.log(CopyArray)
Output:
['Car', 'Bus', 'Helicopter', 'Train', 'Plane']

const Data =[
    'Car',
    'Bus',
    'Helicopter',
    'Train'
]

const CopyArray = [...Data]

const newArray = CopyArray.slice(0,2)
console.log(newArray)
console.log(Data)
Output:
['Car', 'Bus']
['Car', 'Bus', 'Helicopter', 'Train']

Этот метод возвращает новый массив из слияния двух или более массивов.

объединить:

const array1 = [1, 2, 3, 4, 5];
const array2 = [6, 7, 8, 9, 10];
const array3 = [11, 12, 13, 14, 15];

const mergeArray = array1.concat(array2, array3);

console.log(mergeArray);
Output:
[1,  2,  3,  4,  5,  6, 7,  8,  9, 10, 11, 12, 13, 14, 15]

Метод find возвращает первый элемент, удовлетворяющий условию, а findIndex возвращает индекс этого элемента.

индекс поиска:

const data = [
  { id: 1, title: "first" },
  { id: 2, title: "second" },
  { id: 3, title: "third" },
  { id: 4, title: "fourth" },
];

const itemIndex = data.findIndex((element) => element.id === 3);
console.log(itemIndex);
Ouput: 2

const data = [
  { id: 1, title: "first" },
  { id: 2, title: "second" },
  { id: 3, title: "third" },
  { id: 4, title: "fourth" },
];

const item = data.find((element) => element.id === 3);
console.log(item);
Output: { id: 3, title: 'third' }

Деструктурирующее присваивание — это специальный синтаксис, который позволяет распаковывать (присваивать) значения из массивов или свойств объектов непосредственно в переменные.

const name = ["jack", "pritom"];

const [firstName, lastName] = name;

console.log(firstName, lastName);
Output: jack pritom
const data = {
  id: 1,
  name: "jack pritom",
  loveMusic: true,
  species: "human",
};

const { name: dataName, species, ...rest } = data;

console.log(dataName);
console.group(species);
console.group(rest);
Output:
jack pritom
human
{ id: 1, loveMusic: true }

Параметр Rest позволяет нам передать неопределенное количество параметров функции, которая будет помещена в массив, в то время как оператор распространения позволяет нам распространять содержимое итерируемого (то есть массива) на отдельные элементы.

Распространение:

const introduction = ["my", "name", "is", "jack"];

const copyArr = [...introduction];
console.log(copyArr);
console.log(...copyArr);
Output:
[ 'my', 'name', 'is', 'jack' ]
my name is jack

const getSize = (...args) => {
  return args.length;
};

console.log(getSize(1, 2, 3));
console.log(getSize(10, 20, 30, 100));
Output:
3
4

Проще говоря, обещания используются для обработки асинхронных операций. Каждое обещание может закончиться успехом или неудачей, имея 3 возможных статуса: ожидание, выполнено или отклонено. В приведенном ниже примере мы обрабатываем обещания с асинхронным синтаксисом ожидания при получении данных из API.

const fetchData = async () => {
  try {
    const response = await fetch("https://jsonplaceholder.typicode.com/todos/");

    if (!response.ok) throw new Error(response.status);
    const result = await response.json();
    return result;
  } catch (e) {
    console.log(e);
  }
};

Гитхаб:https://github.com/jps27cse

Линкедин:https://www.linkedin.com/in/jps27cse