Массив JavaScript # Concat

Определение:

Метод Concat() объединяет два массива (например, ArrayA, ArrayB) и возвращает новый массив, содержащий объединенные элементы как ArrayA, так и ArrayB.

Параметры и возвращаемое значение:

Метод concat() вызывается для экземпляра массива, принимающего N значений или массивов в качестве аргументов.

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

Например:

const arrayA = [1,2,3,4,5];
const arrayB = [6,7,8,9,10];
// Merging two arrays
const arrayAB = arrayA.concat(arrayB);
// Merging a single array and value
const arrayAndOne = array.concat(1);
// Merging a single array and multiple values
const arrayAndValues = array.concat(1,2,3);
// Merging a single array and a nested array
const arrayAndNestedArrayB = arrayA.concat([arrayB]);
console.log(arrayAB); // [1,2,3,4,5,6,7,8,9,10]
console.log(arrayAndOne); // [1,2,3,4,5,1]
console.log(arrayAndValues); // [1,2,3,4,5,1,2,3]
console.log(arrayAndNestedArrayB); // [1,2,3,4,5,[6,7,8,9,10]]

Формат распространения ES2015:

ES2015 предлагает новый способ объединения массивов с использованием формата распространения. Как и в наших примерах ES5, возвращаемое значение представляет собой новый массив.

const arrayA = [1,2,3,4,5];
const arrayB = [6,7,8,9,10];
// Merging two arrays
const arrayAB = [...arrayA, ...arrayB];
// Merging a single array and value
const arrayAndOne = [...arrayA, 1];
// Merging a single array and multiple values
const arrayAndValues = [...arrayA, 1, 2, 3];
// Merging a single array and a nested array
const arrayAndNestedArrayB = [...arrayA, [...arrayB]];
console.log(arrayAB); // [1,2,3,4,5,6,7,8,9,10]
console.log(arrayAndOne); // [1,2,3,4,5,1]
console.log(arrayAndValues); // [1,2,3,4,5,1,2,3]
console.log(arrayAndNestedArrayB); // [1,2,3,4,5,[6,7,8,9,10]]

Пример данных:

Здорово. Теперь, когда мы лучше понимаем, что делает метод concat(). Давайте проанализируем, как мы будем использовать его в реальном приложении.

Наши данные представляют собой единый объект состояния с массивом, содержащим несколько объектов сообщений в блоге. Он имеет следующие свойства:

• Заголовок
• Автор
• Комментарий

const state = {
blogPosts: [
{"title": "I Love Programming", "Author": "Jose", "Comment": "Programming isn't easy"},
{"title": "Traveling Abroad", "Author": "Mike", "Comment": "Hire a Pilot"},
{"title": "Going to Space", "Author": "Sandra", "Comment": "Meet Elon Musk"},
{"title": "How to Make Money Online", "Author": "Cheryl", "Comment": "Sell Get Rich Quick Schemes"},
{"title": "How to Get Rich or Die Trying", "Author": "Sandy", "Comment": "Become a Rapper"},
],
}

Вызов:

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

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

1. Создайте функцию addBlogPost, которая принимает объект состояния и объект записи блога. Он должен вернуть новую копию объекта состояния, содержащего объединенный массив сообщений блога.

function updateBlogPosts(state, post) {
  // Here we use the ES2015 spread operator to create a new copy of   the state object. As you can imagine, it works similar to how we use  it on an array.
  
  let newState = {...state};
  // Merge existing blog posts with the new post and assign to the new state object.
  const newState.blogPosts = [...newState.blogPosts, post]
  
  return newState;
}

2. Вызвать функцию addBlogPost с новым сообщением

3. Записать возвращаемое значение в консоль

const newBlogPost = { "Title": "I promise not to mutate your original state", Author: "Immutable", "Comment": "I really promise yo" };
console.log(updateBlogPosts(state, newBlogPost));
> [ { title: 'I Love Programming',
    Author: 'Jose',
    Comment: 'Programming isn\'t easy' },
  { title: 'Traveling Abroad',
    Author: 'Mike',
    Comment: 'Hire a Pilot' },
  { title: 'Going to Space',
    Author: 'Sandra',
    Comment: 'Meet Elon Musk' },
  { title: 'How to Make Money Online',
    Author: 'Cheryl',
    Comment: 'Sell Get Rich Quick Schemes' },
  { title: 'How to Get Rich or Die Trying',
    Author: 'Sandy',
    Comment: 'Become a Rapper' },
  { Title: 'I promise not to mutate your original state',
    Author: 'Immutable',
    Comment: 'I really promise yo' } ]

Вывод:

Я надеюсь, вы лучше поняли, как использовать метод concat() в возможном реальном приложении. Если вам понравился этот урок, пожалуйста, хлопните несколько раз и ознакомьтесь с некоторыми другими моими статьями. До следующего раза, выздоравливайте :).