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

编辑: admin 分类: 电脑知识 发布时间: 2023-06-14 来源:互联网 
  1. <script>
  2.         // 对象字面量简化
  3.         let grade1 = {
  4.             // 属性
  5.             code1: '48H',
  6.             // 方法
  7.             greet1: function(){
  8.                 return `${this.code1}, 开发成功`
  9.             },
  10.         }
  11.         console.log(grade1.greet1())
  13.         // 简化
  14.         code2 = '52H'
  15.         let grade2 = {
  16.             // 属性简化
  17.             code2,
  18.             // 方法简化 去掉：和function
  19.             greet1(){
  20.                 return `${this.code2}, 开发成功`
  21.             },
  22.             // 箭头函数，去掉function，只有一行return可以省略return和{}
  23.             greet2:()=>`${grade2.code2}, 牛！`,
  24.         }
  25.         console.log(grade2.greet1())
  26.         console.log(grade2.greet2())
  28.         // 多分支
  29.         // let sex = 'male'
  30.         let sex
  31.         if(sex=='male'){
  32.             console.log('帅哥，里面请！')
  33.         }else if(sex == 'female'){
  34.             console.log('美女，您好！')
  35.         }else{
  36.             console.log('客人，请进！')
  37.         }
  38.         // 二分支语法糖
  39.         const isVip = true
  40.         console.log(isVip ? '欢迎观看':'对不起，请开通Vip')
  41.         // 多分支语法糖
  42.         let date = 6
  43.         switch(date){
  44.             case 7: console.log('今天星期天，睡个懒觉！')
  45.             break;
  46.             case 6: console.log('忙了一周该休息了！')
  47.             break
  48.             default: console.log('赶紧工作！')
  49.         }
  51.         // for循环
  52.         let sum = 0
  53.         arr = [1,2,3,4,5,6,7,8,9]
  54.         for(let i = 0; i < arr.length; i++){
  55.             for(let j = 0; j <= i; j++){
  56.                 sum += arr[i] * arr[j]
  57.             }
  58.         }
  59.         console.log(sum)
  61.         // for-of循环遍历数组value
  62.         let N52H = ['nd', 'fe',' b']
  63.         for(let value of N52H){
  64.             console.log(value)
  65.         }
  66.         // 数组不能用遍历key
  67.         // for(let key of N52H){
  68.         //     console.log(value)
  69.         // } 
  71.         // for-in遍历对象key及value
  72.         let N48H = {nd: 31, fe:68, b:1}
  73.         for(let key in N48H){
  74.             console.log(key)
  75.         }
  76.         for(let key in N48H){
  77.             console.log(N48H[key]) // 不能用.语法
  78.         }
  79.         for(let value in N52H){
  80.             console.log(value)
  81.         }
  83.         // forEach遍历数组
  84.         N52H.forEach(item =>console.log(item))
  86.         // map遍历数组，有返回值，而不是执行
  87.         N54H = [4,5,6]
  88.         let res = N54H.map(item =>item * 2)
  89.         console.log(res)
  91.         grade = ['N48H', 'N50H', 'N52H']
  92.         arr = grade.map(item=>`<li><a href="">${item}</a></li>`)
  93.         res = arr.join('')
  94.         res = `<ul>`+res+`</ul>`
  95.         console.log(res)
  96.         // DOM渲染
  97.         document.body.insertAdjacentHTML('afterbegin',res)
  99.         // 参数不足是给默认值
  100.         sum = (a, b=0)=>`${ a + b}`
  101.         sum = (...arr) =>arr
  102.         console.log(sum(1,2,3,4)) //不丢参数
  103.         sum = (a, b,...arr) =>console.log(a,b,arr) //剩余参数压缩在arr
  104.         sum = (a, b,...arr) =>console.log(a,b,...arr) //参数展开
  105.         sum(9,8,7,6,5)
  107.         // 求和
  108.         sum = (...arr)=>{
  109.             let acc = 0
  110.             for(i=0;i<arr.length;i++){
  111.                 acc+= arr[i]
  112.             }
  113.             return acc
  114.         }
  115.         console.log(sum(9,8,7,6,5))
  116.         // 返回值为对象是需要加(),不然{}容易混淆
  118.         // 数组解构
  119.         let [name, salary] = ['Tom', 5000]
  120.         console.log(name, salary)
  121.         //更新
  122.         ;[name, salary] = ['Tom', 6000]
  123.         console.log(name, salary)
  124.         ;[name, salary, ...arr] = ['Tom', 6000, 20, 8000]
  125.         console.log(name, salary, ...arr)
  127.         // 对象解构
  128.         let {uname:姓名, salary1} = {uname:'Tom', salary1:9000}//变量名必须与key一致
  129.         console.log(姓名, salary1)
  131.         // 应用场景 克隆
  132.         let N35EH = {code:'52p', dy:2}
  133.         let{...obj}=N35EH //变量obj就是N35EH的克隆
  135.         // 解构传参
  136.         let show = function(N35EH){
  137.             return `${N35EH.code}:${N35EH.dy}%`
  138.         }
  139.         console.log(show({code:'52p', dy:3}))
  140.         // 简化的对象解构传参
  141.         show = function({code, dy}){
  142.             return `${code}:${dy}%`
  143.         }
  144.         console.log(show({code:'52p', dy:4}))
  145.         // 箭头简化
  146.         show = ({code, dy})=> `${code}:${dy}%`
  147.         console.log(show({code:'52p', dy:5}))
  148.     </script>
  1. 323.html:20 48H, 开发成功
  2. 0323.html:34 52H, 开发成功
  3. 0323.html:35 52H, 牛！
  4. 0323.html:45 客人，请进！
  5. 0323.html:49 欢迎观看
  6. 0323.html:55 忙了一周该休息了！
  7. 0323.html:68 1155
  8. 0323.html:73 nd
  9. 0323.html:73 fe
  10. 0323.html:73  b
  11. 0323.html:83 nd
  12. 0323.html:83 fe
  13. 0323.html:83 b
  14. 0323.html:86 31
  15. 0323.html:86 68
  16. 0323.html:86 1
  17. 0323.html:89 0
  18. 0323.html:89 1
  19. 0323.html:89 2
  20. 0323.html:93 nd
  21. 0323.html:93 fe
  22. 0323.html:93  b
  23. 0323.html:98 (3) [8, 10, 12]
  24. 0323.html:104 <ul><li><a href="">N48H</a></li><li><a href="">N50H</a></li><li><a href="">N52H</a></li></ul>
  25. 0323.html:111 (4) [1, 2, 3, 4]
  26. 0323.html:113 9 8 7 6 5
  27. 0323.html:124 35
  28. 0323.html:129 Tom 5000
  29. 0323.html:132 Tom 6000
  30. 0323.html:134 Tom 6000 20 8000
  31. 0323.html:138 Tom 9000
  32. 0323.html:148 52p:3%
  33. 0323.html:153 52p:4%
  34. 0323.html:156 52p:5%
总结：

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

【文章出处:响水网站开发公司 http://www.1234xp.com/xiangshui.html 欢迎留下您的宝贵建议】
更多阅读