（javascript）（基础知识+实例） 15.JSON，对象克隆，正则表达式

已于 2022-09-10 19:08:03 修改
阅读量355 收藏
点赞数
分类专栏： Javascript 文章标签： javascript json 正则表达式
于 2022-09-05 20:05:14 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/sj1877288470/article/details/126677427
版权

JSON格式

  • 本质上是一个字符串
  • 带有一定格式字符串
  • 作用： 通用的数据类型
  • 在前后端数据交互的过程一种通用的数据格式，这种格式前端可以识别，后端也是可以识别的。
  • JSON的文件格式
    • *.json
  • 格式要求
    1. 对象所有的键名和值都必须要用双引号包裹,除数字,布尔值，null之外
    2. 不能写注释
    3. 最后一个数据不能加,
  • 前端发送json数据给后端
    • var person = {username: ‘jack’, password: 123456}
    • 调用JSON.stringify方法可以将js的数据自动转换成json格式
    • json数据 = JSON.stringify(js数据)
  • 后端返回json数据给前端
    • 调用JSON.parse方法可以将json格式数据解析成js的格式
    • js数据 = JSON.parse(json数据)

对象的深克隆和浅克隆

  • 数据克隆：把一个复杂数据类型的变量赋值另一个变量，希望做到一个变量变化，另一个变量不受影响
  • 浅克隆： 只会克隆第一层
    1. 使用展开运算符
    2. 使用Object.assign()
  • 深克隆： 无视数据的层级
    1. JSON.parse(JSON.stringify(数据))
      • 转换成字符串之后所有引用关系都会被切断 在转换成对象
      • 问题：会导致数据丢失

正则表达式（规则表达式） RegExp

  • 验证字符串是否符合规则的表达式

  • 定义：

    1. 字面量
      • var reg = /表达式/
    2. 内置构造函数
      • var reg = new RegExp(表达式)

  • 使用：

    • reg.test(字符串)
    • 返回是一个布尔值 符合返回true 不符合返回false

  • 元字符：

    • 代表某一类的字符
    • \d 代表数字
    • \D 代表非数字
    • \w 代表数字、字母、下划线
    • \W 代表非数字字母下划线
    • \s 代表空白字符 空格 制表符 换行
    • \S 代表非空白字符
    • . 代表非换行的任意字符
    • \ 代表转义
      • 把无意义 --> 有意义 d --> \d
      • 把有意义 --> 自己 . --> .

  • 限定符

    • 限制字符出现的次数
    • + 至少出现一次 [1, 正无穷]
    • * 至少出现0次 可以有可以没有 [0, 正无穷]
    • ? 可以有可以没有 如果有最多一次 [0, 1]
    • {m,} 至少出现m次
    • {m,n} 至少出现m次 最多出现n次
    • {m} 只能出现m次

  • 边界符

    • ^ 代表以某个字符开头
    • $ 代表以某个字符结尾

  • 特殊符号

    • [] 代表字符集 只要是这里面写的字符都可以
    • - 连接符 代表一个范围 编码表上面连续范围
    • () 代表组
    • | 代表或者
    • [^] 代表反字符集 只要不是里面写的都可以

  • 正则的使用场景

    1. 表单验证

实例

（以下代码均为课程实例）

（1）前端发送JSON数据

   <script>
         var person = {username: 'jack', password: 123456}
         console.log(person)
         // 转换成json之后再发给后端
         // 调用JSON.stringify方法可以将js的数据自动转换成json格式
         var json = JSON.stringify(person)
         console.log(json)

         var arr = ['1', {a:1}]
         var json01 = JSON.stringify(arr)
         console.log(json01)
    </script>

（2）对象的浅克隆

    <script>
        // 基础数据类型之间的赋值 是值传递 把一个变量赋值另一个变量 一个变化另一个不会改变
        var num = 1
        var num2 = num
        num++
        console.log(num)
        console.log(num2)
        // 复杂数据类型之间的赋值 是引用传递  一个变量变化另一个也会随之变化
        var obj = {a:1, b:2, c:true}
        // 1. 利用展开运算符
        var obj2 = {...obj} // 此处写花括号相当于新建了一个对象
        // obj和obj2是两个不同的地址
        obj.a++
        console.log(obj.a) // 2
        console.log(obj2.a) // 1

        // 2. 利用Object.assgin

        var obj3 = {a:1, b:2, c:true}
        var obj4 = Object.assign({}, obj3) // 相当于将obj3和{}合并 返回一个合并后的新对象
        

        var obj5 = {a:{aa:1}, b:2, c:true}
        var obj6 = {...obj5}
        obj5.b ++
        console.log(obj5.b)
        console.log(obj6.b)

        obj5.a.aa++
        // 第二层对象还是同一个引用地址
        console.log(obj5.a.aa) // 2
        console.log(obj6.a.aa) // 1
    </script>

（3）对象的深克隆

    <script>
        var obj = {
            a: {
                aa: {
                    aaa: 1
                },
                bb:22,
                cc: function(){
                    console.log('ccc')
                }
            },
            b: 2,
            c: undefined
        }

        // 巧用JSON转换  先把对象转换成json字符串 切断所有层的数据引用关系   在把这个json转换成js对象
        console.log(obj)
        var obj2 = JSON.parse(JSON.stringify(obj))
        console.log(obj2)
        obj2.b++
        console.log(obj2.b)
        console.log(obj.b)
        obj2.a.bb++
        console.log(obj2.a.bb)
        console.log(obj.a.bb)
        obj2.a.aa.aaa++
        console.log(obj2.a.aa.aaa)
        console.log(obj.a.aa.aaa)
    </script>

（4）使用递归实现对象的深克隆

    <script>
        /* var obj = {a:1, b:2, c:true}
        // 创建一个对象
        var obj2 = {}
        // 遍历obj取出每一项放到obj2
        for(let key in obj){
            obj2[key] = obj[key]
        }
        console.log(obj2)

        obj.a++
        console.log(obj.a)
        console.log(obj2.a) */


        var obj = {
            b:1,
            a: {
                aa:11
            }
        }
        var num = 1
        // 
        // 凡是碰到某一个键对应的value是一个对象的时候 要再创建新对象
        function cloneDeep(data){
            // 会判断这个data是不是一个对象，如果不是一个对象 直接返回这个data
            if(typeof data !== 'object') return data
            // 如果程序运行下面 说明data它是一个对象
            // 是对象 创建一个新对象 遍历对象取出每一项数据 放到这个新对象里面
            var newObj = {}
            for(let key in data){
                // 并不是马上赋值 判断这个value是不是对象
                newObj[key] = cloneDeep(data[key])
            }
            return newObj
        }
        /* key='b'
            newObj['b'] = 1
           key='a'
            newObj['a'] = {aa:11}
            var newObj = {}
                key='aa'
                newObj['aa'] = 11
                return newObj {aa:11}
        */
        var obj2 = cloneDeep(obj)
        console.log(obj2)
        console.log(obj)
        obj2.b++
        console.log(obj2.b)
        console.log(obj.b)
        obj2.a.aa++
        console.log(obj2.a.aa)
        console.log(obj.a.aa)
    </script>

（5）正则表达式

   <script>
        // 创建正则表达式  在定义规则
        var reg = /a/  // 字符串里面至少包含一个a
        var reg2 = new RegExp('a')  // 字符串里面至少包含一个a
        console.log(reg)
        console.log(reg2)
        // 使用规则来校验字符串
        console.log(reg.test('abcd'))
        console.log(reg.test('haha'))
        console.log(reg.test('hello'))
        console.log(reg2.test('abcd'))
        console.log(reg2.test('haha'))
        console.log(reg2.test('hello'))
    </script>

（6）元字符

    <script>
        var reg = /\d/
        // 定义规则：字符串里面必须包含一个数字
        var reg = /0123456789/ // 代表字符串里面必须包含一整串的0123456789
        console.log(reg.test('2dasda'))
        console.log(reg.test('d1dasda'))
        console.log(reg.test('0123456789sadas'))
        
        var reg1 = /\d/ // 代表字符串里面必须包含一个数字
        console.log(reg1.test('2dasda'))
        console.log(reg1.test('d1dasda'))
        console.log(reg1.test('0123456789sadas'))
        console.log(reg1.test('aa'))

        var reg2 = /\D/ // 代表字符串里面必须包含一个非数字
        console.log(reg2.test('2dasda')) 
        console.log(reg2.test('d1dasda'))
        console.log(reg2.test('0123456789sadas'))
        console.log(reg2.test('aa'))
        console.log(reg2.test('123'))

        var reg3 = /\w/ // 代表字符串里面必须包含一个数字或者字母或者下滑线
        console.log(reg3.test('dasdasd'))
        console.log(reg3.test('dasdasd111'))
        console.log(reg3.test('111'))
        console.log(reg3.test('___'))
        console.log(reg3.test('哈哈'))
        console.log(reg3.test('@#$%^'))

        var reg4 = /\W/ // 代表字符串里面必须包含一个非数字或者字母或者下滑线
        console.log(reg4.test('dasdasd')) 
        console.log(reg4.test('dasdasd111'))
        console.log(reg4.test('111'))
        console.log(reg4.test('___'))
        console.log(reg4.test('哈哈'))
        console.log(reg4.test('@#$%^'))

        var reg5 = /\s/ // 代表字符串里面必须包含一个空白字符
        console.log(reg5.test('123'))
        console.log(reg5.test('12 3'))
        console.log(reg5.test('12   3'))
        console.log(reg5.test(`12
        `))
        console.log(reg5.test(''))

        var reg6 = /\S/ // 代表字符串里面必须包含一个非空白字符
        console.log(reg6.test(''))
        console.log(reg6.test('123'))
        console.log(reg6.test('    '))

        var reg7 = /./ // 代表字符串里面必须包含一个非换行的字符
        console.log(reg7.test(''))
        console.log(reg7.test('1'))
        console.log(reg7.test('.'))
        console.log(reg7.test(`
        `))

        var reg8 = /\./ // 代表字符串里面必须包含一个.
        console.log(reg8.test('哈哈'))
        console.log(reg8.test('哈.哈'))
        console.log(reg8.test('...'))
    </script>

（7）限定符

    <script>
        var reg = /\d+/ // 代表至少出现一次
        console.log(reg.test('aaaa'))
        console.log(reg.test('aaa1a'))
        console.log(reg.test('1aaa1a'))
        console.log(reg.test('aaa1111'))

        var reg2 = /\d*/ // 数字可以有可以没有
        console.log(reg2.test('aaaa'))
        console.log(reg2.test('aaa1a'))
        console.log(reg2.test('1aaa1a'))
        console.log(reg2.test('aaa1111'))
        // 单独用限定符 只能实现限制至少的次数 无法限制至多的次数
        var reg2 = /\d?/ // 数字可以有可以没有 如果有最多一次
        console.log(reg2.test('aaaa'))
        console.log(reg2.test('aaa1a'))
        console.log(reg2.test('1aaa1a'))
        console.log(reg2.test('aaa1111'))

        var reg3 = /\d{2,}/ // 至少出现2次
        console.log(reg3.test('aaaa'))
        console.log(reg3.test('aaa1a'))
        console.log(reg3.test('1aaa11a'))
        console.log(reg3.test('aaa1111'))

        var reg4 = /\d{2,4}/ // 至少出现2次 最多出现4次
        console.log(reg4.test('aaaa'))
        console.log(reg4.test('aaa1a'))
        console.log(reg4.test('1aaa11a'))
        console.log(reg4.test('aaa1111'))
        console.log(reg4.test('aaa1111111'))

        var reg5 = /\d{3}/ // 只能出现3次
        console.log(reg5.test('aaaa'))
        console.log(reg5.test('aaa1a'))
        console.log(reg5.test('1aaa111a'))
        console.log(reg5.test('aaa1111'))
        console.log(reg5.test('aaa1111111'))
    </script>

（8）边界符

    <script>
        var reg = /^\d/ // 代表以数字开头
        console.log(reg.test('123aa'))
        console.log(reg.test('aa123aa'))
        console.log(reg.test('aa123'))

        var reg2 = /\d$/ // 代表以数字结束
        console.log(reg2.test('123aa'))
        console.log(reg2.test('aa123aa'))
        console.log(reg2.test('aa123'))


        var reg3 = /^\d$/ // 代表以数字开头 以数字结尾  只有一个数字
        console.log(reg3.test('1'))
        console.log(reg3.test('111'))
        console.log(reg3.test('11111'))

        var reg4 = /\d{10}/ // 只要有10个连续的数字就可以了
        var reg5 = /^\d{10}$/ // 10个数字
        

        // 验证手机号  11位纯数字
        var regPhone = /^\d{11}$/
        console.log(regPhone.test('15656257278'))
        console.log(regPhone.test('156656257278'))
        console.log(regPhone.test('1566562572'))

    </script>

（9）特殊字符

    <script>
        var reg = /[a-zA-Z]/ // 代表只要是中括号里面随意某个字符都可以
        console.log(reg.test('a'))
        console.log(reg.test('abc'))
        console.log(reg.test('123'))
        // 如果只能是汉字
        var regChinese = /[\u4e00-\u9fa5]/
        console.log(regChinese.test('123'))
        console.log(regChinese.test('你好'))

        var regEmail = /^(\w+)@(qq|sina|139)\.(com|cn|net)$/

        // 只要不是中文
        var reg2 = /[^\u4e00-\u9fa5]/
    </script>

（10）常见的正则表达式

    <script>
        // 验证手机号
        // 1 (3|4|5|6|7|8|9) 9位数字
        var regPhone = /^1[3-9]\d{9}$/

        // 验证身份证号码 15位纯数字  18纯数字  17位纯数字+x
        var regCard = /^(\d{15}|\d{18}|\d{17}(x|X))$/

        // 验证密码
        var regPass = /^\w{6,18}$/
        var regPass = /^[a-zA-Z0-9@.]{6,18}$/

        // 验证邮编
        var reg2 = /^[1-9]\d{5}$/
    </script>

（11）表单验证

<body>
    <form action="https://www.baidu.com" class="login-form">
        <input type="text" id="username" placeholder="请输入用户名..." name="username">
        <input type="password" id="password" placeholder="请输入密码..." name="password">
        <button>登陆</button>
    </form>
    <script>
        // 表单验证流程
            /* 
                1. 给form绑定submit事件
                2. 阻止默认的表单提交
                3. 获取内容进行校验
                    - 符合要求 手动提交
                    - 不符合要求 提示
            */
        var loginForm = document.querySelector('.login-form')
        var userInput = document.getElementById('username')
        var passInput = document.getElementById('password')
        loginForm.addEventListener('submit', function(e){
            // 阻止默认事件
            var  evt = event || e
            evt.preventDefault()
            console.log('表单提交事件...')
            let username = userInput.value
            let password = passInput.value
            // 限制用户名是2-20位汉字
            var regName = /^[\u4e00-\u9fa5]{2,20}$/
            // 限制密码是英文数字下划线6-18位
            var regPass = /^\w{6,18}$/
            /* if(regName.test(username)){
                // 代表名称符合要求
                if(regPass.test(password)){
                    // 代表密码符合要求
                    loginForm.submit()
                }else{
                    // 代表密码不符合要求
                    alert('密码必须是英文数字下划线6-18位')
                }
            }else{
                // 代表名称不符合要求
                alert('用户名必须是2-20位中文')
            } */
            /* 验证原则 捕获异常 错误先行 */
            if(!regName.test(username)){
                // 代表用户名不符合要求
                alert('用户名必须是2-20位中文')
                return
                // 用户名一旦出错 写了return后面的代码就不会执行
            }
            // 如果此处代码执行了 代表用户名是正确
            if(!regPass.test(password)){
                alert('密码必须是英文数字下划线6-18位')
                return
            }
            // 如果代码执行到此处 代表用户名和密码都是正确的
            loginForm.submit()
        })
    </script>
</body>

（12）百度登录页面

html部分

<!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>
    <link rel="stylesheet" href="css/作业.css">

</head>

<body>
    <button class="show">
        <img src="img/newloginlogo.png" alt="">
    </button>

    <div class="center">
        <button class="appeal">X</button>
        <div class="mod1">
            <img src="img/newloginlogo.png" alt="" class="img1">
            <img src="img/qrcode.png" alt="" class="img2">
            <img src="img/qrcodeLoginGuide1.png" alt="" class="img3">
            <p>请使用百度APP扫码登录</p>
            <div class="inner"> <img src="img/baidu-download-icon.png" alt="">
                <p>下载百度APP</p>
            </div>
        </div>
        <div class="mod2">
            <button class="bt1">账号登录</button>
            <button class="bt2">短信登录</button>
            <form action="https://www.baidu.com" class="form1">
                <input type="text" name="username" id="in1" class="inp1" placeholder="账号">
                <input type="text" name="password" id="in2" class="inp2" placeholder="密码">
                <div class="div1">
                    <p class="p2" id="sp1"></p>
                    <p class="p3">忘记密码？</p>
                </div>
                <button class="bt3">登录</button>
                <p class="xieyi">阅读并接受<span>百度用户协议</span>和<span>隐私政策</span></p>
            </form>
            <form action="https://www.baidu.com" class="form2">
                <div class="huoqu">获取验证码</div>
                <input type="text" name="phone" id="in3" class="inp1" placeholder="手机号">
                <input type="text" name="yanzheng" id="in4" class="inp2" placeholder="验证码">
                <div class="div1">
                    <p class="p2" id="sp2"></p>
                    <p class="p3"></p>
                </div>
                <button class="bt3">登录</button>
                <p class="xieyi">阅读并接受<span>百度用户协议</span>和<span>隐私政策</span></p>
            </form>

        </div>
        <div class="mod3">
            <img src="img/bd-acc-qzone.png" alt="" class="img" style="margin-left:35px;">
            <img src="img/bd-acc-tsina.png" alt="" class="img">
            <img src="img/bd-acc-weixin.png" alt="" class="img">
            <p>立即注册</p>
        </div>
    </div>




    <script>
        var appeal = document.querySelector('.appeal')
        var show = document.querySelector('.show')
        var center = document.querySelector('.center')
        var bt1 = document.querySelector('.bt1')
        var bt2 = document.querySelector('.bt2')
        var bt3 = document.querySelector('.bt3')
        var form1 = document.querySelector('.form1')
        var form2 = document.querySelector('.form2')


        var userInput = document.querySelector('#in1')
        var passInput = document.querySelector('#in2')
        var sp1 = document.querySelector('#sp1')


        var userInput1 = document.querySelector('#in3')
        var passInput1 = document.querySelector('#in4')
        var sp2 = document.querySelector('#sp2')


        var huoqu = document.querySelector('.huoqu')




        //实现当所填写手机号发生变化时，验证码需要重新获取
        userInput1.onchange = function () {
            passInput1.value = ''
        }

        //实现获取验证码的随机数的生成
        huoqu.onclick = function () {
            let str = ''
            for (i = 1; i <= 6; i++) {
                let random = parseInt(Math.random() * 10)
                str += random
            }
            passInput1.value = str
        }
        show.onclick = function () {
            center.style.display = 'block'
            show.style.display = 'none'
        }
        appeal.onclick = function () {
            center.style.display = 'none'
            show.style.display = 'block'
        }
        center.onclick = function () {
            sp1.innerText = ''
            sp2.innerText = ''
        }

        //实现两个表单的切换以及属性的变化
        bt1.style.borderBottom = '3px solid blue'
        bt1.onclick = function () {
            form1.style.display = 'block'
            form2.style.display = 'none'
            bt1.style.borderBottom = '3px solid blue'
            bt1.style.color = 'black'
            bt1.style.fontWeight = 600
            bt2.style.color = 'gray'
            bt2.style.fontWeight = 400
            bt2.style.borderBottom = ''
        }
        bt2.onclick = function () {
            form1.style.display = 'none'
            form2.style.display = 'block'
            bt2.style.borderBottom = '3px solid blue'
            bt2.style.color = 'black'
            bt2.style.fontWeight = 600
            bt1.style.color = 'gray'
            bt1.style.fontWeight = 400
            bt1.style.borderBottom = ''

        }



        //表单验证
        form1.onsubmit = function (e) {
            var evt = event || e
            evt.preventDefault()
            let username = userInput.value
            let password = passInput.value
            var regName = /^[\u4e00-\u9fa5]{2,20}$/
            var regPass = /^\w{6,18}$/
            if (!regName.test(username) && !regPass.test(password)) {
                sp1.style.display = 'block'
                sp1.innerText = '请输入您的正确用户名和密码'
                return
            }
            if (!regName.test(username)) {
                sp1.style.display = 'block'
                sp1.innerText = '请输入您的正确用户名'
                return
            }
            if (!regPass.test(password)) {
                sp1.style.display = 'block'
                sp1.innerText = '请输入您的正确密码'
                return


                form1.submit()

                
            }





        }
        form2.onsubmit = function (e) {
            var evt = event || e
            evt.preventDefault()
            let username1 = userInput1.value
            let password1 = passInput1.value
            var regPhone = /^1[3-9]\d{9}$/
            var reg2 = /^\d{6}$/
            if (!regPhone.test(username1) && !reg2.test(password1)) {
                sp2.style.display = 'block'
                sp2.innerText = '请输入您的正确手机号和验证码'
                return
            }
            if (!regPhone.test(username1)) {
                sp2.style.display = 'block'
                sp2.innerText = '请输入您的正确手机号'

                return
            }
            if (!reg2.test(password1)) {
                sp2.style.display = 'block'
                sp2.innerText = '请输入您的正确验证码'
                return
            }
            // if(regPhone.test(username1)){
            //     huoqu.style.display = 'block'
            //     return
            // }
            form2.submit()
        }
    </script>
</body>

</html>

css部分

* {
    margin: 0;
    padding: 0;
}

img {
    display: block;
}

.show {
    /* position: absolute;
    top: 200px;
    left: 800px; */
    height: 100px;
    width: 200px;
    font-size: 50px;
    border-radius: 20px;
    background-color: #ffffff;
    border: 1px solid #ffffff;
    margin: 200px auto;

}
.appeal{
    position: absolute;
    top: 30px;
    left: 750px;
    height: 20px;
    width: 20px;
    border: none;
    background-color: #ffffff;
    border-radius: 5px;
    font-size: 20px;
}

body {
    background-color: #7f7f7f;
}

.center {
    width: 800px;
    height: 405px;
    background-color: #ffffff;
    margin: 120px auto;
    border-radius: 15px;
    position: relative;
}

.mod1 {
    width: 398px;
    height: 345px;
    float: left;
    border-right: 2px solid #eeeeee;
    position: relative;

}

.mod2 {
    width: 398px;
    height: 345px;
    float: left;


}

.mod3 {
    width: 800px;
    height: 60px;
    float: left;
    border-top: 2px solid #eeeeee;
    display: flex;

    padding-top: 15px;
}

.img1 {
    margin-top: 20px;
    margin-left: 30px;
    height: 30px;
    width: 95px;

}

.img2 {

    margin-left: 42px;
    margin-top: 56px;
    width: 140px;
    height: 140px;

}

.img3 {
    width: 135px;
    height: 160px;
    position: absolute;
    left: 225px;
    top: 95px;

}

.mod1>p {
    font-size: 18px;
    margin-top: 20px;
    padding-left: 100px;
}

.inner {
    width: 145px;
    height: 32px;
    margin-top: 15px;
    margin-left: 125px;
    background-color: #f5f5f6;
    border-radius: 10px;
    display: flex;
}

.inner>img {
    width: 22px;
    height: 22px;
    padding-top: 5px;
    margin-left: 20px;
}

.inner>p {
    font-size: 14px;
    margin-top: 5px;
    color: #4e6ef2;
}

.mod3>img {
    width: 30px;
    height: 30px;
    margin-right: 13px;
}

.mod3>p {
    margin-left: 555px;
    font-size: 14px;
    color: #4e6ef2;
}

.bt1 {
    width: 75px;
    height: 28px;
    background-color: #fff;
    border: none;
    color: gray;
    margin-top: 34px;
    margin-left: 33px;
    font-size: 18px;
    font-weight: 600;

}

.bt2 {
    width: 75px;
    height: 28px;
    background-color: #fff;
    border: none;
    color: gray;
    margin-top: 34px;
    margin-left: 37px;
    font-size: 18px;

}

.form1>.inp1 {
    width: 320px;
    height: 45px;
    border: 1px solid gray;
    border-radius: 5px;
    margin-top: 40px;
    margin-left: 34px;
    padding-left: 20px;
}

.form1>.inp2 {
    width: 320px;
    height: 45px;
    border: 1px solid gray;
    border-radius: 8px;
    margin-top: 16px;
    margin-left: 34px;
    padding-left: 20px;
}

.mod2>.form1>.div1 {
    height: 40px;
    width: 340px;
    margin-left: 34px;
    /* display: flex;
    justify-content: space-around; */

}

.mod2>.form1>.div1>.p3 {

    font-size: 14px;
    color: #4e6ef2;
    margin-top: 10px;
    float: right;
}

.mod2>.form1>.div1>.p2 {

    font-size: 14px;
    color: #4e6ef2;
    margin-top: 10px;
    margin-left: 0px;
    float: left;
    color: red;
}

.form1>.bt3 {
    width: 338px;
    height: 50px;
    border-radius: 10px;
    background-color: #4e6ef2;
    font-size: 19px;
    font-weight: 600;
    color: #ffffff;
    text-align: center;
    border: none;
    margin-left: 34px;

}

.form1>.xieyi {
    font-size: 14px;
    color: gray;
    margin-left: 80px;
    margin-top: 8px;
}

.form1>.xieyi>span {

    color: #4e6ef2;

}

.form2>.inp1 {
    width: 320px;
    height: 45px;
    border: 1px solid gray;
    border-radius: 5px;
    margin-top: 40px;
    margin-left: 34px;
    padding-left: 20px;
}

.form2>.inp2 {
    width: 320px;
    height: 45px;
    border: 1px solid gray;
    border-radius: 8px;
    margin-top: 16px;
    margin-left: 34px;
    padding-left: 20px;
}

.mod2>.form2>.div1 {
    height: 40px;
    width: 340px;
    margin-left: 34px;
    /* padding-top: 10px; */
    overflow: hidden;

}

.mod2>.form2>.div1>.p2 {

    font-size: 14px;
    color: #4e6ef2;
    margin-top: 10px;
    margin-left: 0px;
    float: left;
    color: red;
    display: none;
}

.mod2>.form2>.div1>.p3 {

    font-size: 14px;
    color: #4e6ef2;
    margin-top: 10px;
    margin-left: 270px;
}

.form2>.bt3 {
    width: 338px;
    height: 50px;
    border-radius: 10px;
    background-color: #4e6ef2;
    font-size: 19px;
    font-weight: 600;
    color: #ffffff;
    text-align: center;
    border: none;
    margin-left: 34px;

}

.form2>.xieyi {
    font-size: 14px;
    color: gray;
    margin-left: 80px;
    margin-top: 8px;
}

.form2>.xieyi>span {

    color: #4e6ef2;

}
.huoqu{
    width: 100px;
    height: 45px;
    background-color: #4e6ef2;
    border-radius: 5px;
    position: absolute;
    left: 675px;
    top: 168px;
    font-size: 14px;
    color: #eeeeee;
    line-height: 45px;
    text-align: center;
    border: none;
}



.center {
    display: none;
}

.form1 {
    display: block;
}

.form2 {
    display: none;
}

.show {
    display: block;
}
#sp1{
    display: none;
}
.huoqu{
    display: block;
}

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

JavaScript克隆 JSON方法
王小五的博客
09-29 1824
JavaScript克隆 JSON方法 JSON JSON对象包含两个方法: 用于解析JSON格式字符串将其转换成对象的 parse() 方法，以及将对象/值转换为 JSON字符串的 stringify() 方法 深度克隆 遍历对象法 遍历对象 for(var prop in obj) 判断是不是原始值 typeof() object 判断是数组还是对象 instanceof toString constructor 建立相应的数组或对象 递归 //深度克隆 function deepClone(ori
JS对象的深浅复制和正则表达式
最新发布
FudGolang的博客
09-16 77
本文详细介绍了JS对象的深复制和浅复制的概念，并提供了相应的示例代码进行演示。深复制创建了一个全新的对象，而浅复制只复制了对象的引用。在需要保持对象独立性的情况下，应使用深复制。此外，我们还展示了如何使用正则表达式进行字符串匹配和替换的操作。当需要对对象进行复制时，我们需要了解深复制和浅复制的概念。本文将详细介绍JS对象的深复制和浅复制，并结合实例展示如何使用正则表达式。希望本文对你理解JS对象的深复制和浅复制以及正则表达式的使用有所帮助！这样就实现了一个深复制，修改复制后的对象不会影响原始对象。
clone-json:深度复制json
05-18
克隆json 安装 # Install with npm $ npm install clone-json --save # Install with yarn $ yarn add clone-json 用法 两个数组相等 let cloneJson = require ( 'clone-json' ) let json = { a : 123 , b : 'str' , c : true , d : [ 1 , '2' , false , { e : 3 } ] , f : { g : 789 , h : 'str' , i : true , j : [ 2 ] } } let newJson = cloneJson ( json ) newJson . a = 456 newJson . b = 'string'
JS中json对象克隆
weixin_30707875的博客
10-20 459
b = JSON.parse( JSON.stringify(a) )局限性： 无法复制函数 原型链没了，对象就是object，所属的类没了。 ----------------------来自知乎某大神 转载于:https://www.cnblogs.com/hcy1994/p/7699606.html...
JSON 对象的克隆（JSON.stringify、解构）
黄彪博客
10-19 1729
文章目录文章参考带有function的JSON序列化JSON.stringify 介绍将JSON字符串反序列化（包含function的字符串）JSON.parse 介绍综合整理 —— 克隆方法 文章参考 带有function的JSON对象的序列化与还原 带有function的JSON序列化 JSON.stringify() MDN JSON.stringify 介绍 JSON.stringify(value[, replacer [, space]]) value 将要序列化成 一个 JSON 字符串
js 实现一个函数对javascript中json 对象进行克隆
ZQQD_优快云的博客
11-16 412
var oldObject ="sdf"; var newObject = JSON.parse(JSON.stringify(oldObject)); console.log(newObject);
JavaEye论坛2009年10月热点：Spring技术解析与JavaScript正则表达式
2. **JavaScript正则表达式**：正则表达式是JavaScript中用于字符串处理的重要工具，文章详细讲解了如何精通JavaScript中的正则表达式，包括元字符的使用和模式匹配。 3. **持续集成工具**：讨论了持续集成在敏捷...
JS对象深度克隆实例分析
10-20
需要注意的是，深度克隆并不是JavaScript的标准功能，而是通过各种技术手段实现的，因此在处理复杂数据结构时可能会遇到问题，如循环引用、函数、日期、正则表达式等非标准JSON格式的对象。此外，性能也是一个考虑...
deep-copy-js:javascript的递归深拷贝、克隆和浅拷贝函数
06-30
本项目“deep-copy-js”提供了一种实现JavaScript对象深拷贝、克隆和浅拷贝的解决方案，尤其对于处理复杂的数据结构时，这类功能显得尤为重要。 深拷贝（Deep Copy）与浅拷贝（Shallow Copy）是两种不同的拷贝方式...
【前端】【JavaScript】基础知识
我的的博客哦
02-05 5414
二. JavaScript 输入输出语句 方法 说明 alert(msg) 浏览器弹出警示框 console.log(msg) 浏览器控制台打印输出信息 prompt(into) 浏览器弹出输入框，用户可以输入 三. 变量 (一) 变量的使用 (二) 变量语法扩展 (三) 变量命名规范 四. 数据类型 (一) 简单数据类型 简单数据类型 说明 默认值 Number 数字型，包含整型，浮点型值，如21，0.21 0 Boolean
JavaScript 深度克隆JSON 对象【转帖】
javalfans的专栏
10-23 134
转自  http://blog.zdnet.com.cn/html/22/422222-2881839.html   function clone(jsonObj) { var buf; if (jsonObj instanceof Array) { buf = []; var i = jsonObj.length; w...
JavaScript 深度克隆 JSON 对象
javasalatu
07-23 142
function clone(jsonObj) { var buf; if (jsonObj instanceof Array) { buf = []; var i = jsonObj.length; while (i--) { buf[i] = clone(jsonObj[i]); ...
js 的复制 json对象
qq_22656655的博客
05-25 2635
1.for循环 复制 2.clone 方法复制 3.对于json 复制, 要进行深复制,避免假复制（就是只是将地址指向同一对对象） 最好使用 JSON.parse(JSON.stringify(cloneData)) 4.lodash官网 npmi--savelodash main.js import_from"lodash"; 使用： letdata= _.cloneDeep(this.userInfoData) 推荐 第四种。 对简单的json 对象 第三种就够用...
使用json克隆javascript对象字符串化深浅复制
weixin_26736149的博客
08-20 217
TechnoFunnel presents another article on Object Deep Cloning with JSON.stringify in details. We will also discuss about advantages and disadvantages of cloning using JSON.stringify approach. Lets look...
js简易深拷贝json
chenzhuozhu的博客
06-14 2521
var tuta=[{ "name":"linming", "age":"34", "height":"160cm", "friends":[{ "name":"xiaohong", "age":"12", &q
json对象转化成json的字符串、克隆对象
zhouyong0的专栏
06-14 1867
// 克隆对象Object.prototype.deep_clone = function(){    // 不同于这个代码var tmp = this.toJSON();这段代码是将一个字符串赋值给变量   //  等同于这个代码       var  tmp  =  {...};    eval("var tmp = " + this.toJSON());     return
clone对象（key/in和JSON两种方法）
花花的博客
06-11 1526
对象、数组都是用堆存储，存储数据在一个堆内存地址中。如果用var person2=person1； 当改变person1或person2下的属性、方法等值时，会改变地址中的值，所以原对象的值也会改变。所以如果有一个对象1，想复制一个对象2和对象1一样，要采用clone方法。1、JSON   使用JSON下的两个方法var str=JSON.stringify(per);/*对象转字符串*/ var...
js对象的几种克隆方式
wangzhi0918的博客
07-29 416
在js中对象克隆就是把对象值重新赋给一个新对象。克隆也存在深克隆于浅克隆的区别。引用类型的值都会被保存在堆内存中，在栈内存中会存在一个指针指向堆内存中的值。这时，如果只复制了指针，则可以说这个克隆为浅克隆，如果时根据指针找到具体的值，复制值，就可以称之为深克隆。 1、JSON JSON多用于前后台的数据交互，后台传递字符串类型的JSON数据，前端通过JSON.parse() ,可以转化为一个json对象。 现有一个对象，可以通过JSON.stringify() 转为json字符串。字符串类型的值保存在栈内存
如何正确克隆 JavaScript 对象？
HuntsBot的博客
12-19 706
我有一个对象 x。我想将它复制为对象 y，这样对 y 的更改就不会修改 x。我意识到复制从内置 JavaScript 对象派生的对象会导致额外的、不需要的属性。这不是问题，因为我正在复制我自己的文字构造对象之一。如何正确克隆 JavaScript 对象？
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

不二哈

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值