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

数组,对象,传参

  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}=`;

数组,对象,解构

  1. //解构赋值
  2. // 数组解构
  3. // 等号左边是右边的模板,必须长得一样
  4. let [a, b, c] = [1, 2, 3];//完全结构
  5. [a, b] = [1, 2, 3];//不完全结构
  6. [a, b, ...c] = [1, 2, 3, 4, 5, 6, 7, 8, 9];//把后面所有的参数给到C里面
  7. //对象解构
  8. let shangpin = { id: 1, sname: "手机" };
  9. let id, sname;
  10. // ({ id, sname } = { id: 1, sname: "手机" });
  11. ({ id, sname } = shangpin);
  12. console.log(id, sname);
  13. //参数解构
  14. //数组传参
  15. let qiuhe = ([a, b]) => a + b;
  16. // 上面的a,b相对于等号左边的模板,下面的30,50相当于等号右边的插值
  17. console.log(qiuhe([30, 50]));

访问器属性的get,set操作

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. <title>访问器属性的get,set操作</title>
  8. </head>
  9. <body>
  10. <!-- bingd(),call(),apply() -->
  11. <!-- this:执行上下文,程序的运行环境 -->
  12. <script>
  13. let fwqsx = {
  14. data: { name },
  15. get name() {
  16. return this.data.name;
  17. },
  18. set name(v) {
  19. this.data.name = v;
  20. }
  21. };
  22. fwqsx.name = "老师";
  23. console.log(fwqsx.name);
  24. // 访问器属于的优先级高于同名的普通属性
  25. fwqsx.data.name = "老师1";
  26. console.log(fwqsx.data.name);
  27. </script>
  28. </body>
  29. </html>