1 | # deepmerge
|
---|
2 |
|
---|
3 | Merges the enumerable properties of two or more objects deeply.
|
---|
4 |
|
---|
5 | > UMD bundle is 723B minified+gzipped
|
---|
6 |
|
---|
7 | ## Getting Started
|
---|
8 |
|
---|
9 | ### Example Usage
|
---|
10 | <!--js
|
---|
11 | const merge = require('./')
|
---|
12 | -->
|
---|
13 |
|
---|
14 | ```js
|
---|
15 | const x = {
|
---|
16 | foo: { bar: 3 },
|
---|
17 | array: [{
|
---|
18 | does: 'work',
|
---|
19 | too: [ 1, 2, 3 ]
|
---|
20 | }]
|
---|
21 | }
|
---|
22 |
|
---|
23 | const y = {
|
---|
24 | foo: { baz: 4 },
|
---|
25 | quux: 5,
|
---|
26 | array: [{
|
---|
27 | does: 'work',
|
---|
28 | too: [ 4, 5, 6 ]
|
---|
29 | }, {
|
---|
30 | really: 'yes'
|
---|
31 | }]
|
---|
32 | }
|
---|
33 |
|
---|
34 | const output = {
|
---|
35 | foo: {
|
---|
36 | bar: 3,
|
---|
37 | baz: 4
|
---|
38 | },
|
---|
39 | array: [{
|
---|
40 | does: 'work',
|
---|
41 | too: [ 1, 2, 3 ]
|
---|
42 | }, {
|
---|
43 | does: 'work',
|
---|
44 | too: [ 4, 5, 6 ]
|
---|
45 | }, {
|
---|
46 | really: 'yes'
|
---|
47 | }],
|
---|
48 | quux: 5
|
---|
49 | }
|
---|
50 |
|
---|
51 | merge(x, y) // => output
|
---|
52 | ```
|
---|
53 |
|
---|
54 |
|
---|
55 | ### Installation
|
---|
56 |
|
---|
57 | With [npm](http://npmjs.org) do:
|
---|
58 |
|
---|
59 | ```sh
|
---|
60 | npm install deepmerge
|
---|
61 | ```
|
---|
62 |
|
---|
63 | deepmerge can be used directly in the browser without the use of package managers/bundlers as well: [UMD version from unpkg.com](https://unpkg.com/deepmerge/dist/umd.js).
|
---|
64 |
|
---|
65 |
|
---|
66 | ### Include
|
---|
67 |
|
---|
68 | deepmerge exposes a CommonJS entry point:
|
---|
69 |
|
---|
70 | ```
|
---|
71 | const merge = require('deepmerge')
|
---|
72 | ```
|
---|
73 |
|
---|
74 | The ESM entry point was dropped due to a [Webpack bug](https://github.com/webpack/webpack/issues/6584).
|
---|
75 |
|
---|
76 | # API
|
---|
77 |
|
---|
78 |
|
---|
79 | ## `merge(x, y, [options])`
|
---|
80 |
|
---|
81 | Merge two objects `x` and `y` deeply, returning a new merged object with the
|
---|
82 | elements from both `x` and `y`.
|
---|
83 |
|
---|
84 | If an element at the same key is present for both `x` and `y`, the value from
|
---|
85 | `y` will appear in the result.
|
---|
86 |
|
---|
87 | Merging creates a new object, so that neither `x` or `y` is modified.
|
---|
88 |
|
---|
89 | **Note:** By default, arrays are merged by concatenating them.
|
---|
90 |
|
---|
91 | ## `merge.all(arrayOfObjects, [options])`
|
---|
92 |
|
---|
93 | Merges any number of objects into a single result object.
|
---|
94 |
|
---|
95 | ```js
|
---|
96 | const foobar = { foo: { bar: 3 } }
|
---|
97 | const foobaz = { foo: { baz: 4 } }
|
---|
98 | const bar = { bar: 'yay!' }
|
---|
99 |
|
---|
100 | merge.all([ foobar, foobaz, bar ]) // => { foo: { bar: 3, baz: 4 }, bar: 'yay!' }
|
---|
101 | ```
|
---|
102 |
|
---|
103 |
|
---|
104 | ## Options
|
---|
105 |
|
---|
106 | ### `arrayMerge`
|
---|
107 |
|
---|
108 | There are multiple ways to merge two arrays, below are a few examples but you can also create your own custom function.
|
---|
109 |
|
---|
110 | Your `arrayMerge` function will be called with three arguments: a `target` array, the `source` array, and an `options` object with these properties:
|
---|
111 |
|
---|
112 | - `isMergeableObject(value)`
|
---|
113 | - `cloneUnlessOtherwiseSpecified(value, options)`
|
---|
114 |
|
---|
115 | #### `arrayMerge` example: overwrite target array
|
---|
116 |
|
---|
117 | Overwrites the existing array values completely rather than concatenating them:
|
---|
118 |
|
---|
119 | ```js
|
---|
120 | const overwriteMerge = (destinationArray, sourceArray, options) => sourceArray
|
---|
121 |
|
---|
122 | merge(
|
---|
123 | [1, 2, 3],
|
---|
124 | [3, 2, 1],
|
---|
125 | { arrayMerge: overwriteMerge }
|
---|
126 | ) // => [3, 2, 1]
|
---|
127 | ```
|
---|
128 |
|
---|
129 | #### `arrayMerge` example: combine arrays
|
---|
130 |
|
---|
131 | Combines objects at the same index in the two arrays.
|
---|
132 |
|
---|
133 | This was the default array merging algorithm pre-version-2.0.0.
|
---|
134 |
|
---|
135 | ```js
|
---|
136 | const combineMerge = (target, source, options) => {
|
---|
137 | const destination = target.slice()
|
---|
138 |
|
---|
139 | source.forEach((item, index) => {
|
---|
140 | if (typeof destination[index] === 'undefined') {
|
---|
141 | destination[index] = options.cloneUnlessOtherwiseSpecified(item, options)
|
---|
142 | } else if (options.isMergeableObject(item)) {
|
---|
143 | destination[index] = merge(target[index], item, options)
|
---|
144 | } else if (target.indexOf(item) === -1) {
|
---|
145 | destination.push(item)
|
---|
146 | }
|
---|
147 | })
|
---|
148 | return destination
|
---|
149 | }
|
---|
150 |
|
---|
151 | merge(
|
---|
152 | [{ a: true }],
|
---|
153 | [{ b: true }, 'ah yup'],
|
---|
154 | { arrayMerge: combineMerge }
|
---|
155 | ) // => [{ a: true, b: true }, 'ah yup']
|
---|
156 | ```
|
---|
157 |
|
---|
158 | ### `isMergeableObject`
|
---|
159 |
|
---|
160 | By default, deepmerge clones every property from almost every kind of object.
|
---|
161 |
|
---|
162 | You may not want this, if your objects are of special types, and you want to copy the whole object instead of just copying its properties.
|
---|
163 |
|
---|
164 | You can accomplish this by passing in a function for the `isMergeableObject` option.
|
---|
165 |
|
---|
166 | If you only want to clone properties of plain objects, and ignore all "special" kinds of instantiated objects, you probably want to drop in [`is-plain-object`](https://github.com/jonschlinkert/is-plain-object).
|
---|
167 |
|
---|
168 | ```js
|
---|
169 | const { isPlainObject } = require('is-plain-object')
|
---|
170 |
|
---|
171 | function SuperSpecial() {
|
---|
172 | this.special = 'oh yeah man totally'
|
---|
173 | }
|
---|
174 |
|
---|
175 | const instantiatedSpecialObject = new SuperSpecial()
|
---|
176 |
|
---|
177 | const target = {
|
---|
178 | someProperty: {
|
---|
179 | cool: 'oh for sure'
|
---|
180 | }
|
---|
181 | }
|
---|
182 |
|
---|
183 | const source = {
|
---|
184 | someProperty: instantiatedSpecialObject
|
---|
185 | }
|
---|
186 |
|
---|
187 | const defaultOutput = merge(target, source)
|
---|
188 |
|
---|
189 | defaultOutput.someProperty.cool // => 'oh for sure'
|
---|
190 | defaultOutput.someProperty.special // => 'oh yeah man totally'
|
---|
191 | defaultOutput.someProperty instanceof SuperSpecial // => false
|
---|
192 |
|
---|
193 | const customMergeOutput = merge(target, source, {
|
---|
194 | isMergeableObject: isPlainObject
|
---|
195 | })
|
---|
196 |
|
---|
197 | customMergeOutput.someProperty.cool // => undefined
|
---|
198 | customMergeOutput.someProperty.special // => 'oh yeah man totally'
|
---|
199 | customMergeOutput.someProperty instanceof SuperSpecial // => true
|
---|
200 | ```
|
---|
201 |
|
---|
202 | ### `customMerge`
|
---|
203 |
|
---|
204 | Specifies a function which can be used to override the default merge behavior for a property, based on the property name.
|
---|
205 |
|
---|
206 | The `customMerge` function will be passed the key for each property, and should return the function which should be used to merge the values for that property.
|
---|
207 |
|
---|
208 | It may also return undefined, in which case the default merge behaviour will be used.
|
---|
209 |
|
---|
210 | ```js
|
---|
211 | const alex = {
|
---|
212 | name: {
|
---|
213 | first: 'Alex',
|
---|
214 | last: 'Alexson'
|
---|
215 | },
|
---|
216 | pets: ['Cat', 'Parrot']
|
---|
217 | }
|
---|
218 |
|
---|
219 | const tony = {
|
---|
220 | name: {
|
---|
221 | first: 'Tony',
|
---|
222 | last: 'Tonison'
|
---|
223 | },
|
---|
224 | pets: ['Dog']
|
---|
225 | }
|
---|
226 |
|
---|
227 | const mergeNames = (nameA, nameB) => `${nameA.first} and ${nameB.first}`
|
---|
228 |
|
---|
229 | const options = {
|
---|
230 | customMerge: (key) => {
|
---|
231 | if (key === 'name') {
|
---|
232 | return mergeNames
|
---|
233 | }
|
---|
234 | }
|
---|
235 | }
|
---|
236 |
|
---|
237 | const result = merge(alex, tony, options)
|
---|
238 |
|
---|
239 | result.name // => 'Alex and Tony'
|
---|
240 | result.pets // => ['Cat', 'Parrot', 'Dog']
|
---|
241 | ```
|
---|
242 |
|
---|
243 |
|
---|
244 | ### `clone`
|
---|
245 |
|
---|
246 | *Deprecated.*
|
---|
247 |
|
---|
248 | Defaults to `true`.
|
---|
249 |
|
---|
250 | If `clone` is `false` then child objects will be copied directly instead of being cloned. This was the default behavior before version 2.x.
|
---|
251 |
|
---|
252 |
|
---|
253 | # Testing
|
---|
254 |
|
---|
255 | With [npm](http://npmjs.org) do:
|
---|
256 |
|
---|
257 | ```sh
|
---|
258 | npm test
|
---|
259 | ```
|
---|
260 |
|
---|
261 |
|
---|
262 | # License
|
---|
263 |
|
---|
264 | MIT
|
---|