博客列表 >数组,对象,传参解构; 访问器属性的get,set操作

数组,对象,传参解构; 访问器属性的get,set操作

小丑0o鱼
小丑0o鱼原创
2021年07月20日 17:38:49625浏览
  1. <!-- 函数传参:永远都是值传递 -->
  2. <script>
  3. const f1 = (x) => (x = 10);
  4. let m = 5;
  5. // m:入参,当前传入的是一个基本类型,原始类型,整数
  6. f1(m);
  7. console.log("m = %d", m);
  8. const f2 = (x) => (x.a = 10);
  9. let o = {
  10. a: 5,
  11. b: 6
  12. }
  13. f2(o);
  14. console.log('o.a = ', o.a);
  15. // 这里虽然o.a的属性被修改了,但不是更新,
  16. // 模板字面量和标签函数
  17. let name = "朱老师";
  18. let str = "hello" + name;
  19. let str = `Hello ${name}`; //这行代码等价于上面的代码
  20. // 字面量:Hello
  21. // 插值:${name}
  22. console.log(str);
  23. // 1.模板字面量:将表达式/插值嵌入到字符串中
  24. //模板字面量内部有2部分组成:字符串字面量,变量插值
  25. let menus = ['首页', '视频', '文章'];
  26. let htmlStr = `
  27. <nav>
  28. <a herf="">${menus[0]}
  29. <a herf="">${menus[1]}
  30. <a herf="">${menus[2]}
  31. </nav>
  32. `;
  33. console.log(htmlStr);
  34. // 2.标签函数,(模板函数),自定义模板字面量的一些行为
  35. const hello = (name) => (alert(name));
  36. hello("谢谢哦哦");
  37. //参数约定:
  38. // 1.第一个参数:所有字符串字面量组成的数组
  39. // 2.第二个参数:变量插值组成的数组
  40. let sum = (strs, a, b) => {
  41. console.log(strs);
  42. console.log(a, b);
  43. }
  44. let a = 5, b = 6;
  45. sum`${a}+${b}=`;
  46. // // rest: 归并参数
  47. sum = (strs, ...args) => {
  48. console.log(strs);
  49. console.log(args);
  50. }
  51. let c = 7;
  52. sum`${a}+${b}+${c}=`;
  53. 数组,对象,解构
  54. //解构赋值
  55. // 数组解构
  56. // 等号左边是右边的模板,必须长得一样
  57. let [a, b, c] = [1, 2, 3];//完全结构
  58. [a, b] = [1, 2, 3];//不完全结构
  59. [a, b, ...c] = [1, 2, 3, 4, 5, 6, 7, 8, 9];//把后面所有的参数给到C里面
  60. //对象解构
  61. let shangpin = { id: 1, sname: "手机" };
  62. let id, sname;
  63. // ({ id, sname } = { id: 1, sname: "手机" });
  64. ({ id, sname } = shangpin);
  65. console.log(id, sname);
  66. //参数解构
  67. //数组传参
  68. let qiuhe = ([a, b]) => a + b;
  69. // 上面的a,b相对于等号左边的模板,下面的30,50相当于等号右边的插值
  70. console.log(qiuhe([30, 50]));
  71. 访问器属性的get,set操作
  72. <!DOCTYPE html>
  73. <html lang="en">
  74. <head>
  75. <meta charset="UTF-8">
  76. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  77. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  78. <title>访问器属性的get,set操作</title>
  79. </head>
  80. <body>
  81. <!-- bingd(),call(),apply() -->
  82. <!-- this:执行上下文,程序的运行环境 -->
  83. <script>
  84. let fwqsx = {
  85. data: { name },
  86. get name() {
  87. return this.data.name;
  88. },
  89. set name(v) {
  90. this.data.name = v;
  91. }
  92. };
  93. fwqsx.name = "老师";
  94. console.log(fwqsx.name);
  95. // 访问器属于的优先级高于同名的普通属性
  96. fwqsx.data.name = "老师1";
  97. console.log(fwqsx.data.name);
  98. </script>
  99. </body>
  100. </html>
声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议