值传递与引用传递 代码

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>值传递与引用传递</title>
  7. </head>
  8. <body>
  9.     <script>
  10.         // 1 赋值
  11.         // 1.1 值传递：原始类型,string,number,bool
  12.         let a = 1;
  13.         let b = a;
  14.         console.log("a = %d, b = %d", a, b);
  15.         a = 2;
  16.         //更新a, 不影响b
  17.         console.log("a = %d, b = %d", a, b);
  18.         //1.2 引用传递：引用类型，object,array
  19.         let obj1 = {a:1, b:2};
  20.         console.log(obj1);
  21.         let obj2 = obj1;
  22.         console.log(obj2);
  23.         //更新obj1
  24.         obj1.a = 10;
  25.         console.log(obj1);
  26.         //obj2同步更新
  27.         console.log(obj2);
  29.         // 2.传参
  30.         const f1 = x => (x = 10);
  31.         let m = 5;
  32.         console.log("m = %d", m);
  33.         f1(m);
  34.         // 入参：调用函数是传入的参数，简称：“入参”
  35.         // 函数中对参数的更新，并不会影响到入参
  36.         console.log("m = %d", m);
  38.         const f2 = x => (x.a = 10);
  39.         let o = {a: 1, b: 2};
  40.         console.log(o);
  41.         f2(o);
  42.         //看上去函数对于o.a的更新生效，实际上仍是值传递
  43.         console.log(o);
  45.         // 对与引用类型，只有全新赋值才算是更新，修改属性不算的
  46.         const obj = {x: 1, y: 2};
  47.         obj.x = 20;
  48.         // 赋值一个全新对像，才是更新
  49.         // obj = {}
  51.         const f3 = x => ( x = {} );
  52.         f3(o);
  53.         console.log(o);
  55.         // 深拷贝：值传递
  56.         // 浅拷贝：引用传递
  57.     </script>
  58. </body>
  59. </html>

模板字面量与标签函数 代码

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>模板字面量与标签函数</title>
  7. </head>
  8. <body>
  9.     <script>
  10.         // 1. 模板字面量：将表达式嵌入到字符串
  11.         let a = 1, b = 2;
  12.         let res = a + " + " + b + " = " + (a + b);
  13.         console.log(res);
  14.         // 模板字面量使用反引号：“`”
  15.         res = `${a} + ${b} = ${a + b}`;
  16.         console.log(res);
  17.         // 模板字面量的组成：
  18.         // 1. 字符串字面量: "+, ="
  19.         // 2. 变量或表达式：a, b, (a+b)
  20.         // 模板字面量创建多行字符串可以保留格式
  21.         let menu = ['首页', '视频', '文章'];
  22.         let htmlStr = `<ul>
  23.             <li><a href="">${menu[0]}</a></li>
  24.             <li><a href="">${menu[1]}</a></li>
  25.             <li><a href="">${menu[2]}</a></li>
  26. </ul>`;
  27.         console.log(htmlStr);
  28.         document.body.insertAdjacentHTML("beforeEnd",htmlStr);
  30.         // 2.标签函数: 自定义模板字面量的行为
  31.         let hello = name => alert(name);
  32.         // hello("天蓬老师");
  33.         // hello `天蓬老师`;
  34.         // 使用自定义函数来处理模板字面量，它的参数约定
  35.         // 1. 第一个参数：模板字面量中的字符串字面量组成的数组
  36.         // 2. 从第二个参数开始，将模板字面量中的变量依次传入
  37.         let sum = (strs, a, b) => {
  38.             console.log(strs);
  39.             console.log(a,b);
  40.         }
  42.         sum([' + ', ' = ',''], a, b);
  43.         sum `${a} + ${b} = `;
  45.         //rest
  46.         sum = (strs, ...args) => {
  47.             console.log(strs);
  48.             console.log(args);
  49.         }
  50.         sum `${a} + ${b} = `;
  51.     </script>
  52. </body>
  53. </html>

解构赋值 代码

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>解构赋值</title>
  7. </head>
  8. <body>
  9.     <script>
  10.         //解构赋值: 快速从集合数据（数组／对象）解构出独立变量
  11.         //1.数组
  12.         let [a,b,c] = [1,2,3];
  13.         console.log(a,b,c);
  15.         [a,b] = [1,2,3];
  16.         console.log(a,b);
  18.         [a,b,c,d = "xxxx"] = [1,2,3];
  19.         console.log(a,b,c,d);
  21.         [a,b,...c] = [1,2,3,4,5];
  22.         console.log(a,b,c);
  24.         [,,a,,] = [1,2,3,4,5];
  25.         console.log(a);
  27.         let x = 1,
  28.             y = 2,
  29.             t;
  30.         console.log("x = %d, y = %d", x, y);
  31.         // t = x;
  32.         // x = y;
  33.         // y = t;
  34.         [y,x] = [x,y];
  35.         console.log("x = %d, y = %d", x, y);
  37.         // 2.对象解构
  38.         let {id, name} = {id: 10, name: "手机"}
  39.         console.log(id, name);
  40.         //属性名与变量名必须一一对应，顺序无所谓
  41.         ({name, id} = { id: 10, name: "手机"});
  42.         console.log(id, name);
  44.         let email = "admin@php.cn";
  45.         let { role, email: userEmail } = {role: "user", email: "user@php.cn"};
  46.         console.log(userEmail);
  47.         console.log(email);
  49.         //3. 参数解构
  50.         // 数组传参
  51.         let sum =  ([a,b]) => a + b;
  52.         console.log(sum([10, 20]));
  53.         // 对象传参
  54.         let getUser = ({name,email}) => [name,email];
  55.         console.log(getUser({email:"tp@php.cn", name: "天蓬老师"}));
  57.     </script>
  58. </body>
  59. </html>

对象字面量的简化 代码

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>对象字面量的简化</title>
  7. </head>
  8. <body>
  9.     <script>
  10.         let user = {
  11.             userName: "天蓬老师",
  12.             userEmail: "tp@php.cn",
  13.             getInfo: function (){
  14.                 return `${this.userName} (${this.userEmail})`;
  15.             }
  16.         };
  18.         console.log(user.getInfo());
  20.         let {userName, userEmail} = user;
  21.         console.log(userName, userEmail);
  23.         user = {
  24.             // userName: userName,
  25.             userName,
  26.             // userEmail: userEmail,
  27.             // 当属性与同一作用域中的变量同名时，可以直接使用属性来引用变量值
  28.             userEmail,
  29.             // 方法也能简化：删除冒号和 function 关健字
  30.             getInfo(){
  31.                 return `${this.userName} (${this.userEmail})`;
  32.             },
  33.             // 当前箭头函数中的this指向了全局window
  34.             test: ()=> console.log(this),
  35.         }
  36.         console.log("简化后: ", user.getInfo());
  37.         console.log(user.test());
  39.         // 箭头函数中的this总是指向定义它时的作用域(静态作用域／词法作用域),而并非调用时的作用域
  40.         // user对象不能创建作用域，this 指向了user的作用域/作用域链: window
  41.         // 全局没有userName, userEmail,所以输出 undefined
  42.     </script>
  43. </body>
  44. </html>

bind,call,apply 代码

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>bind,call,apply</title>
  7. </head>
  8. <body>
  9.     <button>Click</button>
  10.     <script>
  11.         function hello(name) {
  12.             this.name = name;
  13.             console.log(this.name);
  14.         }
  15.         const obj = { name: "admin" };
  17.         //经典调用
  18.         console.log(hello("朱老师"));
  19.         //bind()不会立即执行, 只返回一个函数声明
  20.         let f = hello.bind(obj,"天蓬老师");
  21.         console.log(f());
  23.         // call/apply 立即执行
  24.         f = hello.call(obj, "灭绝老师");
  25.         console.log(f);
  26.         f = hello.apply(obj, ["西门老师"]);
  27.         console.log(f);
  29.         // bind()应用案例：动态改变this
  30.         document.querySelector("button").addEventListener(
  31.             "click",
  32.             function(){
  33.                 console.log(this.name);
  34.                 console.log(this);
  35.                 document.body.appendChild(document.createElement("p")).innerHTML = "欢迎：" + this.name;
  36.             }.bind({name:"猫科动物"})
  37.         );
  38.     </script>
  39. </body>
  40. </html>

访问器属性 代码

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>访问器属性</title>
  7. </head>
  8. <body>
  9.     <script>
  10.         const product = {
  11.             data: [
  12.                 { name: "电脑", price: 5000, num: 5 },
  13.                 { name: "手机", price: 4000, num: 10 },
  14.                 { name: "相机", price: 8000, num: 3 },
  15.             ],
  16.             getAmounts() {
  17.                 return this.data.reduce( (t, c) => ( t += c.price * c.num), 0 );
  18.             },
  19.             // 访问器属性
  20.             // 将方法伪造成一个属性
  21.             get total() {
  22.                 return this.data.reduce( (t, c) => ( t += c.price * c.num), 0 );
  23.             },
  24.             set setPrice(price) {
  25.                 this.data[1].price = price;
  26.             },
  27.         }
  28.         console.log("总金额 ：", product.getAmounts());
  29.         console.log("总金额 ：", product.total);
  30.         product.setPrice = 9988;
  31.         console.log(product.data[1].price);
  32.     </script>
  33. </body>
  34. </html>

访问器属性的优先级 代码

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>访问器属性的优先级</title>
  7. </head>
  8. <body>
  9.     <script>
  10.         let user = {
  11.             // name: "朱老师",
  12.             data: { name: "朱老师"},
  13.             get name() {
  14.                 // return "灭绝小师妹";
  15.                 return this.data.name;
  16.             },
  17.             set name(value){
  18.                 // this.name = value;
  19.                 this.data.name = value;
  20.             }
  21.         }
  22.         // 访问器属性优级高于同名的普通属性
  23.         user.name = "天蓬老师";
  24.         console.log(user.name);
  25.     </script>
  26. </body>
  27. </html>

流程控制-分支 代码

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>流程控制-分支</title>
  7. </head>
  8. <body>
  9.     <script>
  10.         let score = 64;
  11.         // // 单分支
  12.         // if (score >= 60) {
  13.         //     console.log('及格');
  14.         // }
  15.         //双分支
  16.         if (score >= 60) {
  17.             console.log('及格');
  18.             //默认分支
  19.         } else {
  20.             console.log('补考');
  21.         }
  23.         //多分支
  24.         score = -1;
  25.         if (score >= 60 && score < 80) {
  26.             console.log('合格');
  27.         } else if (score >= 80 && score <= 100) {
  28.             console.log('学霸');
  29.         }else if(score > 100 || score < 0){
  30.             console.log("非法数据");
  31.         } else {
  32.             console.log('补考');
  33.         }
  34.         //
  35.         switch( true ) {
  36.             case score >= 60 && score < 80 :
  37.                 console.log('合格');
  38.                 break;
  39.             case score >= 80 && score <= 100 :
  40.                 console.log('学霸');
  41.                 break;
  42.             case score > 100 || score < 0 :
  43.                 console.log("非法数据");
  44.                 break;
  45.             default:
  46.                 console.log('补考');
  47.         }
  49.         // switch 用在单值判断
  50.         let response = "Success";
  51.         switch(response.toLowerCase()) {
  52.             case 'fail':
  53.                 console.log("请求失败");
  54.                 break;
  55.             case 'success':
  56.                 console.log("请求成功");
  57.                 break;
  58.             default:
  59.                 console.log("未知错误");
  60.         }
  62.         //三元运算符
  63.         // 条件? true : false
  64.         // //双分支
  65.         // if (score >= 60) {
  66.         //     console.log('及格');
  67.         //     //默认分支
  68.         // } else {
  69.         //     console.log('补考');
  70.         // }
  71.         score = 80;
  72.         console.log( score >= 60 ? "及格" : "补考");
  73.     </script>
  74. </body>
  75. </html>

总结：

值传递与引用传递：

  • 值传递（原始类型）如：深拷贝
  • 引用传递（object,array）如：浅拷贝

模板字面量：

  • 将表达式嵌入到字符串
  • 模板字面量使用反引号：“`”
  • 格式${a} 其中a为变量
  • 使用自定义函数来处理模板字面量，它的参数约定
    1. 第一个参数：模板字面量中的字符串字面量组成的数组
    1. 从第二个参数开始，将模板字面量中的变量依次传入

解构赋值:

  • 快速从集合数据（数组／对象）解构出独立变量
  • 对象解构中：属性名与变量名必须一一对应，顺序无所谓

参数解构：

  • 数组传参 和 对象传参

对象字面量的简化：

  • 当属性与同一作用域中的变量同名时，可以直接使用属性来引用变量值
  • 方法也能简化：删除冒号和 function 关健字
  • 箭头函数中的this总是指向定义它时的作用域(静态作用域／词法作用域),而并非调用时的作用域
  • user对象不能创建作用域，this 指向了user的作用域/作用域链: window
  • 全局没有userName, userEmail,所以输出 undefined

bind,call,apply：

  • bind()不会立即执行, 只返回一个函数声明
  • call/apply 立即执行

访问器属性：

  • get set
  • 访问器属性优级高于同名的普通属性

流程控制-分支

  • 单分支
  • 双分支
  • 多分支
  • switch 用在单值判断
  • 三元运算符 条件? true : false

更多相关文章

  1. 制图利器—MapGIS10.5制图版体验
  2. 先从_proto_下手理解原型--原型学习（一）
  3. 随机生成不重复的数组
  4. PHP:oop->重载之set/get/call/callStatic，oop事件委托，数据库查询
  5. Pandas Series对象有哪些属性?六大类！
  6. 06-Vue_计算属性和侦听器
  7. 1.Numpy 属性
  8. 实战分析：事务的隔离级别和传播属性
  9. 孙卫琴的《精通JPA与Hibernate》的读书笔记:用@ManyToMany注解映

随机推荐

  1. Android - Android Studio 安装 及 设置
  2. Android(安卓)Studio 教程
  3. Android View 属性大全
  4. Android UI组件Spinner下拉列表详解
  5. Qt5.12.1 for Android配置
  6. Android界面布局基本知识简述
  7. 【Android】Android 4.2源码下载（ubuntu 1
  8. android activity的生命周期
  9. Android 4 编程入门经典
  10. Android 3.0 r1 API中文文档(107) ―― A