博主信息
博文 41
粉丝 2
评论 0
访问量 37585
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
js之数组对象与访问器
月光下,遗忘黑暗
原创
716人浏览过

1.数组对象

  • 代码块
    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4. <meta charset="UTF-8">
    5. <title>Title</title>
    6. </head>
    7. <body>
    8. <script>
    9. let object = {
    10. name : '123',
    11. sex : '男'
    12. }
    13. let arr = [1,2,3];
    14. object.name = 321;
    15. console.table([object]);
    16. console.table(arr);
    17. </script>
    18. </body>
    19. </html>
  • 效果图

2.传参解构

  • 数组解构

    代码块

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4. <meta charset="UTF-8">
    5. <title>Title</title>
    6. </head>
    7. <body>
    8. <script>
    9. let arr = [1,2,3,4,5];
    10. let [,,a,b,c,,] = arr;
    11. let fun = (a,b,c) => {
    12. console.table([a,b,c]);
    13. }
    14. fun(a,b,c);
    15. [a,c] = [c,a];
    16. console.table([a,c]);
    17. </script>
    18. </body>
    19. </html>

    效果图

  • 对象解构

    代码块

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>对象解构</title>
  6. </head>
  7. <body>
  8. <script>
  9. let obj = {id : 10, name : '手机'};
  10. ({id,name} = obj);
  11. console.log(id,name);
  12. let getUser = ({id,name}) => [name,id];
  13. console.log(getUser({id,name}));
  14. </script>
  15. </body>
  16. </html>

效果图

3.访问器属性的set和get

代码块

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>访问器属性</title>
  6. </head>
  7. <body>
  8. <script>
  9. const product = {
  10. data:[
  11. {id:1,name:'电脑',price:5000,num:5}
  12. ],
  13. get total(){
  14. return this.data.reduce((t,c) => (t += c.price * c.num),0);
  15. }
  16. }
  17. console.log(product.total);
  18. let user = {
  19. data : {name},
  20. // 读
  21. get name() {
  22. return this.data.name;
  23. },
  24. // 写
  25. set name(v) {
  26. this.data.name = v;
  27. },
  28. }
  29. user.name = '手机';
  30. console.log(user.name)
  31. </script>
  32. </body>
  33. </html>

效果图

批改老师:天蓬老师天蓬老师

批改状态:合格

老师批语:
本博文版权归博主所有,转载请注明地址!如有侵权、违法,请联系admin@php.cn举报处理!
全部评论 文明上网理性发言,请遵守新闻评论服务协议
0条评论
作者最新博文
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • 登录PHP中文网,和优秀的人一起学习!
    全站2000+教程免费学