使用ES6的解构赋值与展开运算符更新对象,-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_52291147/article/details/129937028

应用ES6解构赋值和展开运算符

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>修改</h1>
    <input type="text" id="myusername"/>
    <input type="number" id="myage"/>
    <button id="btn">修改</button>
    <div id="box"></div>

    <script>
        var obj = {
            name:"xxx",
            age:100,
            location:"hunan",
            id:"123456"
        }
        // 解构赋值
        function render({name,age,location}){
            // console.log(obj)
            // var {name,age,location} = obj  //解构赋值
            box.innerHTML = `name:${name}
                             age:${age}
                             location:${location}`
        }
        render(obj)

        btn.onclick = function(){
            // console.log(myusername.value)
            // console.log(myage.value)
            var name = myusername.value || obj.name
            var age = myage.value || obj.age

            // 展开运算符组装新的对象
            var newobj = {
                ...obj,
                name,
                age
            }
            console.log(newobj)

            //给后端传数据....


            // 重新渲染页面
            render(newobj)
        }
    </script>
</body>
</html>

效果显示：

修改信息案例