Javascript Работа с объектами и массивами

Прежде чем я начну здесь, я работал с объектами и массивами в PHP и других языках. Я использую VueJS в эти дни и всегда путаюсь в том, где использовать массив или объект или преобразовать объект в массив или преобразовать массив в объект. Это всегда дилемма, если вы начинаете работать с javascript.

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

Вот некоторые из них, и я буду продолжать обновлять их в качестве сценариев использования.

Как проверить, является ли ваша переменная объектом?

Чтобы проверить, является ли переменная объектом:

const foo = { test: [{name: ‘foo’}, { name: ‘bar’ }]}
console.log(foo.constructor.name)
//Output:
// "Object"

Вы можете создать метод для быстрой проверки:
он будет возвращать true или false в зависимости от вашего объекта.

function isObject(obj){
    return (obj.constructor.name === 'Object')
}

Как проверить, является ли ваша переменная массивом?

Теперь вы можете обрабатывать массив аналогичным образом:

const foo = [{name: 'foo'}, { name: 'bar' }]
console.log(foo.constructor.name)
console.log(Array.isArray(foo))
//Output:
// "Array"
// true

Чтобы проверить массив, вы можете либо использовать конструктор.имя, либо просто использовать Array.isArray, в зависимости от того, с чем вам удобно работать. Я всегда использую Array.isArray, так как он напрямую возвращает результат в одной строке.

Вы даже можете создать служебный метод, подобный этому:

function isArray(arr){
    return Array.isArray(arr)
}

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

Как преобразовать объект в массив?

Давайте возьмем тот же пример объекта, что и выше, и попробуем преобразовать его в массив:

const foo = { test: [{name: 'foo'}, { name: 'bar' }]}
console.log(Object.entries(foo))
console.log(Object.keys(foo))
console.log(Object.values(foo))
//Output:
// [["test", [{name: "foo"}, {name: "bar"}]]]
// ["test"]
// [[{  name: "foo"}, {name: "bar"}]]

Object.entries(foo):
методы Object.entries() преобразуют объект в массив с однострочным кодом.

Object.keys(foo):
методы Object.keys() преобразуют ключи объекта в массив, если вам нужны только ключи объекта в виде массива.

Object.values(foo):
методы Object.keys() преобразуют значения объекта в массив, если вам нужны только значения объекта в виде массива.

Как преобразовать объект в массив?

Давайте возьмем тот же пример объекта, что и выше, и попробуем преобразовать его в массив:

const foo =  [{name: 'foo'}, { name: 'bar' }]
let obj1 = Object.assign({}, foo)
let obj2 = {...foo}
console.log(obj1)
console.log(obj2)
//Output:
// { 0: { name: "foo" }, 1: { name: "bar" } } 
// { 0: { name: "foo" }, 1: { name: "bar" } }

Object.assign({}, foo):
Object.assign(target, source) помогает преобразовать массив в объект.

{…foo}
{…array} — это оператор расширения, который напрямую преобразует массив в объект.

Вы можете использовать то, что вам удобно.

Как перебрать объект?

Чтобы перебирать объект, вы можете легко использовать цикл for:

const foo = { 'test': [{name: 'foo'}, { name: 'bar' }] }
for (const prop in foo) {
  console.log(prop)
  console.log(foo[prop])
}
//Output:
// "test"
// [{name: "foo"}, {name: "bar"}]

Как перебрать массив?

Чтобы перебрать массив, вы можете легко использовать цикл forEach.

const foo =  [{name: 'foo'}, { name: 'bar' }]
foo.forEach(function(item, index){
 console.log(index);
 console.log(item);
  console.log(item['name']);
})
//Output:
// 0
// {name: "foo"}
// "foo"
// 1
// {name: "bar"}
// "bar"

Я попытался охватить все основы работы с массивами и объектами. Я постараюсь добавить другие методы, такие как map(), reduce(), filter() или советы, если я их найду. Если хотите добавить еще, то пишите в комментариях.