Javascript循环-对象字面量简化和解构赋值及应用场景

<script>
        // 对象字面量简化
        let grade1 = {
            // 属性
            code1: '48H',
            // 方法
            greet1: function(){
                return `${this.code1}, 开发成功`
            },
        }
        console.log(grade1.greet1())
        // 简化
        code2 = '52H'
        let grade2 = {
            // 属性简化
            code2,
            // 方法简化 去掉：和function
            greet1(){
                return `${this.code2}, 开发成功`
            },
            // 箭头函数，去掉function，只有一行return可以省略return和{}
            greet2:()=>`${grade2.code2}, 牛！`,
        }
        console.log(grade2.greet1())
        console.log(grade2.greet2())
        // 多分支
        // let sex = 'male'
        let sex
        if(sex=='male'){
            console.log('帅哥，里面请！')
        }else if(sex == 'female'){
            console.log('美女，您好！')
        }else{
            console.log('客人，请进！')
        }
        // 二分支语法糖
        const isVip = true
        console.log(isVip ? '欢迎观看':'对不起，请开通Vip')
        // 多分支语法糖
        let date = 6
        switch(date){
            case 7: console.log('今天星期天，睡个懒觉！')
            break;
            case 6: console.log('忙了一周该休息了！')
            break
            default: console.log('赶紧工作！')
        }
        // for循环
        let sum = 0
        arr = [1,2,3,4,5,6,7,8,9]
        for(let i = 0; i < arr.length; i++){
            for(let j = 0; j <= i; j++){
                sum += arr[i] * arr[j]
            }
        }
        console.log(sum)
        // for-of循环遍历数组value
        let N52H = ['nd', 'fe',' b']
        for(let value of N52H){
            console.log(value)
        }
        // 数组不能用遍历key
        // for(let key of N52H){
        //     console.log(value)
        // } 
        // for-in遍历对象key及value
        let N48H = {nd: 31, fe:68, b:1}
        for(let key in N48H){
            console.log(key)
        }
        for(let key in N48H){
            console.log(N48H[key]) // 不能用.语法
        }
        for(let value in N52H){
            console.log(value)
        }
        // forEach遍历数组
        N52H.forEach(item =>console.log(item))
        // map遍历数组，有返回值，而不是执行
        N54H = [4,5,6]
        let res = N54H.map(item =>item * 2)
        console.log(res)
        grade = ['N48H', 'N50H', 'N52H']
        arr = grade.map(item=>`<li><a href="">${item}</a></li>`)
        res = arr.join('')
        res = `<ul>`+res+`</ul>`
        console.log(res)
        // DOM渲染
        document.body.insertAdjacentHTML('afterbegin',res)
        // 参数不足是给默认值
        sum = (a, b=0)=>`${ a + b}`
        sum = (...arr) =>arr
        console.log(sum(1,2,3,4)) //不丢参数
        sum = (a, b,...arr) =>console.log(a,b,arr) //剩余参数压缩在arr
        sum = (a, b,...arr) =>console.log(a,b,...arr) //参数展开
        sum(9,8,7,6,5)
        // 求和
        sum = (...arr)=>{
            let acc = 0
            for(i=0;i<arr.length;i++){
                acc+= arr[i]
            }
            return acc
        }
        console.log(sum(9,8,7,6,5))
        // 返回值为对象是需要加(),不然{}容易混淆
        // 数组解构
        let [name, salary] = ['Tom', 5000]
        console.log(name, salary)
        //更新
        ;[name, salary] = ['Tom', 6000]
        console.log(name, salary)
        ;[name, salary, ...arr] = ['Tom', 6000, 20, 8000]
        console.log(name, salary, ...arr)
        // 对象解构
        let {uname:姓名, salary1} = {uname:'Tom', salary1:9000}//变量名必须与key一致
        console.log(姓名, salary1)
        // 应用场景 克隆
        let N35EH = {code:'52p', dy:2}
        let{...obj}=N35EH //变量obj就是N35EH的克隆
        // 解构传参
        let show = function(N35EH){
            return `${N35EH.code}:${N35EH.dy}%`
        }
        console.log(show({code:'52p', dy:3}))
        // 简化的对象解构传参
        show = function({code, dy}){
            return `${code}:${dy}%`
        }
        console.log(show({code:'52p', dy:4}))
        // 箭头简化
        show = ({code, dy})=> `${code}:${dy}%`
        console.log(show({code:'52p', dy:5}))
    </script>

323.html:20 48H, 开发成功
0323.html:34 52H, 开发成功
0323.html:35 52H, 牛！
0323.html:45 客人，请进！
0323.html:49 欢迎观看
0323.html:55 忙了一周该休息了！
0323.html:68 1155
0323.html:73 nd
0323.html:73 fe
0323.html:73  b
0323.html:83 nd
0323.html:83 fe
0323.html:83 b
0323.html:86 31
0323.html:86 68
0323.html:86 1
0323.html:89 0
0323.html:89 1
0323.html:89 2
0323.html:93 nd
0323.html:93 fe
0323.html:93  b
0323.html:98 (3) [8, 10, 12]
0323.html:104 <ul><li><a href="">N48H</a></li><li><a href="">N50H</a></li><li><a href="">N52H</a></li></ul>
0323.html:111 (4) [1, 2, 3, 4]
0323.html:113 9 8 7 6 5
0323.html:124 35
0323.html:129 Tom 5000
0323.html:132 Tom 6000
0323.html:134 Tom 6000 20 8000
0323.html:138 Tom 9000
0323.html:148 52p:3%
0323.html:153 52p:4%
0323.html:156 52p:5%

总结：

箭头函数挺简洁；for-of不能获取key，而for-in即可以获取key也可以获取value，不确定这个理解对不对。