Lodash Merge实例使用记录

2025-01-04

Lodash merge是一个合并多个对象的函数，同级相同键名时，后者会覆盖前者。

关键点：

  1. merge的第一个参数与返回值是同一个。
  2. 原对象保持不变，即第二个参数对象及以后的对象。

这里记录一个实例，以便测试。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Lodash Merge Example</title>
    <script src="https://cdn.jsdelivr.net/npm/lodash@latest/lodash.min.js"></script>
</head>
<body>
    <h1>Lodash Merge Example</h1>
    <pre id="result"></pre>

    <script>
        // 定义两个要合并的对象
        const a = {
            m: 123456,
            group: {
                opacity: 1
            }
        }

        const obj1 = {
            name: 'John',
            age: 25,
            address: {
                city: 'New York',
                zip: '10001'
            },
            hobbies: ['reading', 'swimming'],
            group: {
                itemStyle: {
                    lineWidth: 134
                }
            }
        };

        const obj2 = {
            age: 30,
            gender: 'male',
            address: {
                street: '5th Avenue',
                apt: '12B'
            },
            hobbies: ['traveling'] // 注意：这里会覆盖obj1中的hobbies数组
        };

        // 使用Lodash的merge方法合并对象
        const mergedObj = _.merge(a, obj1, obj2); // 传入一个空对象作为目标对象

        // 将合并后的对象显示在网页上
        document.getElementById('result').textContent = JSON.stringify(a, null, 2);
       // document.getElementById('result').textContent = JSON.stringify(mergedObj, null, 2);
    </script>
</body>
</html>

（版权归cpury.com所有，转载请注明出处。）

WEB开发