Bagaimana Anda menambahkan banyak objek dalam javascript?

Question

Ringkasan. dalam tutorial ini, Anda akan mempelajari cara menggabungkan dua atau lebih objek JavaScript dan membuat objek baru yang menggabungkan properti dari semua objek

Table of Contents Show

Menggabungkan objek menggunakan operator sebar ({ firstName: 'John', lastName: 'Doe', age: 25, ssn: '123-456-2356', jobTitle: 'JavaScript Developer', location: 'USA' } Code language: CSS (css)0)
Menggabungkan objek menggunakan metode { firstName: 'John', lastName: 'Doe', age: 25, ssn: '123-456-2356', jobTitle: 'JavaScript Developer', location: 'USA' } Code language: CSS (css)1
Penggabungan Dangkal
Penggabungan Yang Dalam
Bagaimana cara menambahkan beberapa objek ke daftar?
Bagaimana cara mendorong 2 objek ke dalam array JavaScript?
Bagaimana Anda menambahkan tiga objek ke array?
Bagaimana Anda menjumlahkan array objek?

Untuk menggabungkan objek menjadi objek baru yang memiliki semua properti dari objek yang digabungkan, Anda memiliki dua opsi

Gunakan operator sebaran (

{ firstName: 'John', lastName: 'Doe', age: 25, ssn: '123-456-2356', jobTitle: 'JavaScript Developer', location: 'USA' }

Code language: CSS (css)

0)

Gunakan metode

{ firstName: 'John', lastName: 'Doe', age: 25, ssn: '123-456-2356', jobTitle: 'JavaScript Developer', location: 'USA' }

Code language: CSS (css)

_1

Menggabungkan objek menggunakan operator sebar ({ firstName: 'John', lastName: 'Doe', age: 25, ssn: '123-456-2356', jobTitle: 'JavaScript Developer', location: 'USA' } Code language: CSS (css)0)

ES6 memperkenalkan operator penyebaran (

{ firstName: 'John', lastName: 'Doe', age: 25, ssn: '123-456-2356', jobTitle: 'JavaScript Developer', location: 'USA' }

Code language: CSS (css)

_0) yang dapat digunakan untuk menggabungkan dua atau lebih objek dan membuat objek baru yang memiliki properti dari objek yang digabungkan

Contoh berikut menggunakan operator spread (

{ firstName: 'John', lastName: 'Doe', age: 25, ssn: '123-456-2356', jobTitle: 'JavaScript Developer', location: 'USA' }

Code language: CSS (css)

_0) untuk menggabungkan objek

{ firstName: 'John', lastName: 'Doe', age: 25, ssn: '123-456-2356', jobTitle: 'JavaScript Developer', location: 'USA' }

Code language: CSS (css)

5 dan

{ firstName: 'John', lastName: 'Doe', age: 25, ssn: '123-456-2356', jobTitle: 'JavaScript Developer', location: 'USA' }

Code language: CSS (css)

6 ke objek

{ firstName: 'John', lastName: 'Doe', age: 25, ssn: '123-456-2356', jobTitle: 'JavaScript Developer', location: 'USA' }

Code language: CSS (css)

7

let person = {
    firstName: 'John',
    lastName: 'Doe',
    age: 25,
    ssn: '123-456-2356'
};


let job = {
    jobTitle: 'JavaScript Developer',
    location: 'USA'
};

let employee = {
    ...person,
    ...job
};

console.log(employee);
Code language: JavaScript (javascript)

_

Keluaran

{ firstName: 'John', lastName: 'Doe', age: 25, ssn: '123-456-2356', jobTitle: 'JavaScript Developer', location: 'USA' }

Code language: CSS (css)

Jika objek memiliki properti dengan nama yang sama, maka properti objek paling kanan akan menimpa properti sebelumnya. Sebagai contoh

let job = {
    jobTitle: 'JavaScript Developer',
    country: 'USA'
};

let location = {
    city: 'London',
    country: 'England'
};

let remoteJob = {
    ...job,
    ...location
};

console.log(remoteJob);
Code language: JavaScript (javascript)

Keluaran

{
    jobTitle: 'JavaScript Developer',
    country: 'England',
    city: 'London'
}
Code language: CSS (css)

Dalam contoh ini,

{ firstName: 'John', lastName: 'Doe', age: 25, ssn: '123-456-2356', jobTitle: 'JavaScript Developer', location: 'USA' }

Code language: CSS (css)

6 dan

{ firstName: 'John', lastName: 'Doe', age: 25, ssn: '123-456-2356', jobTitle: 'JavaScript Developer', location: 'USA' }

Code language: CSS (css)

9 memiliki properti yang sama

let job = {
    jobTitle: 'JavaScript Developer',
    country: 'USA'
};

let location = {
    city: 'London',
    country: 'England'
};

let remoteJob = {
    ...job,
    ...location
};

console.log(remoteJob);
Code language: JavaScript (javascript)

0. Saat kita menggabungkan objek-objek ini, objek hasil (

let job = {
    jobTitle: 'JavaScript Developer',
    country: 'USA'
};

let location = {
    city: 'London',
    country: 'England'
};

let remoteJob = {
    ...job,
    ...location
};

console.log(remoteJob);
Code language: JavaScript (javascript)

1) memiliki properti

let job = {
    jobTitle: 'JavaScript Developer',
    country: 'USA'
};

let location = {
    city: 'London',
    country: 'England'
};

let remoteJob = {
    ...job,
    ...location
};

console.log(remoteJob);
Code language: JavaScript (javascript)

0 dengan nilai dari objek kedua (

{ firstName: 'John', lastName: 'Doe', age: 25, ssn: '123-456-2356', jobTitle: 'JavaScript Developer', location: 'USA' }

Code language: CSS (css)

9)

Menggabungkan objek menggunakan metode { firstName: 'John', lastName: 'Doe', age: 25, ssn: '123-456-2356', jobTitle: 'JavaScript Developer', location: 'USA' } Code language: CSS (css)1

Metode

{ firstName: 'John', lastName: 'Doe', age: 25, ssn: '123-456-2356', jobTitle: 'JavaScript Developer', location: 'USA' }

Code language: CSS (css)

1 memungkinkan Anda menyalin semua properti enumerable sendiri dari satu atau lebih objek sumber ke objek target, dan mengembalikan objek target

Object.assign(target, sourceObj1, sourceObj2, ...);



Code language: JavaScript (javascript)

Mirip dengan operator sebar (

{ firstName: 'John', lastName: 'Doe', age: 25, ssn: '123-456-2356', jobTitle: 'JavaScript Developer', location: 'USA' }

Code language: CSS (css)

_0), jika objek sumber memiliki nama properti yang sama, objek selanjutnya akan menimpa objek sebelumnya. Lihat contoh berikut

let person = {
    firstName: 'John',
    lastName: 'Doe',
    age: 25,
    ssn: '123-456-2356'
};


let job = {
    jobTitle: 'JavaScript Developer',
    country: 'USA'
};


let employee = Object.assign(person, job);
console.log(employee);
Code language: JavaScript (javascript)

Keluaran

{ firstName: 'John', lastName: 'Doe', age: 25, ssn: '123-456-2356', jobTitle: 'JavaScript Developer', country: 'USA' }

Code language: CSS (css)

Penggabungan Dangkal

Kedua metode spread operator (

{ firstName: 'John', lastName: 'Doe', age: 25, ssn: '123-456-2356', jobTitle: 'JavaScript Developer', location: 'USA' }

Code language: CSS (css)

_0) dan

{ firstName: 'John', lastName: 'Doe', age: 25, ssn: '123-456-2356', jobTitle: 'JavaScript Developer', location: 'USA' }

Code language: CSS (css)

1 melakukan penggabungan dangkal. Ini berarti bahwa jika suatu objek memiliki properti yang merujuk ke objek lain, properti objek asli dan objek target hasil akan merujuk ke objek yang sama. Sebagai contoh

let person = {
    firstName: 'John',
    lastName: 'Doe',
    age: 25,
    ssn: '123-456-2356',
    contact: {
        phone: '408-989-8745',
        email: '[email protected]'
    }
};


let job = {
    jobTitle: 'JavaScript Developer',
    location: 'USA'
};

let employee = { ...person,  ...job };

console.log(employee.contact === person.contact);
Code language: JavaScript (javascript)

Keluaran

true
Code language: JavaScript (javascript)

Dalam contoh ini, objek

{ firstName: 'John', lastName: 'Doe', age: 25, ssn: '123-456-2356', jobTitle: 'JavaScript Developer', location: 'USA' }

Code language: CSS (css)

_5 memiliki properti

{
    jobTitle: 'JavaScript Developer',
    country: 'England',
    city: 'London'
}
Code language: CSS (css)

0 yang merujuk ke objek. Setelah penggabungan, objek

{ firstName: 'John', lastName: 'Doe', age: 25, ssn: '123-456-2356', jobTitle: 'JavaScript Developer', location: 'USA' }

Code language: CSS (css)

5 dan

{ firstName: 'John', lastName: 'Doe', age: 25, ssn: '123-456-2356', jobTitle: 'JavaScript Developer', location: 'USA' }

Code language: CSS (css)

7 memiliki properti

{
    jobTitle: 'JavaScript Developer',
    country: 'England',
    city: 'London'
}
Code language: CSS (css)

0 yang merujuk ke objek yang sama

Penggabungan Yang Dalam

Untuk secara rekursif menggabungkan properti kunci string yang dimiliki dan diwarisi dari objek sumber ke objek target, Anda dapat menggunakan Lodash. metode _merge()

_.merge(object, [sources])
Code language: CSS (css)

Dalam tutorial ini, Anda telah mempelajari cara menggabungkan objek dalam JavaScript menggunakan metode spread operator (

{ firstName: 'John', lastName: 'Doe', age: 25, ssn: '123-456-2356', jobTitle: 'JavaScript Developer', location: 'USA' }

Code language: CSS (css)

0) dan

{ firstName: 'John', lastName: 'Doe', age: 25, ssn: '123-456-2356', jobTitle: 'JavaScript Developer', location: 'USA' }

Code language: CSS (css)

1

Bagaimana cara menambahkan beberapa objek ke daftar?

Tambah Banyak Item ke Java ArrayList .

Menggunakan Daftar. of() atau Array. asList() untuk Menginisialisasi ArrayList Baru

Menggunakan Koleksi. addAll() untuk Menambahkan ke dalam ArrayList yang Ada

Menggunakan Stream API untuk Menambahkan Hanya Item Terpilih ke ArrayList

Bagaimana cara mendorong 2 objek ke dalam array JavaScript?

Gunakan Larik. splice () metode untuk mendorong beberapa nilai ke array , e. g. arr. sambungan (arr. panjang, 0, 'b', 'c', 'd');.

Bagaimana Anda menambahkan tiga objek ke array?

Fungsi push() adalah metode larik bawaan JavaScript. Ini digunakan untuk menambahkan objek atau elemen dalam array. Metode ini menambahkan elemen di akhir array. "Perhatikan bahwa sejumlah elemen dapat ditambahkan menggunakan metode push() dalam sebuah array. "

Bagaimana Anda menjumlahkan array objek?

Metode 2. Menggunakan Metode Reduce() untuk Menemukan Jumlah Array Objek. Untuk tujuan menemukan jumlah dari array objek, metode “reduce()” juga digunakan. Metode ini menggabungkan nilai objek sebelumnya dan saat ini, yang akan direduksi menjadi satu nilai.

kode javascript