search

博客列表 >《JS入门：变量和函数》

《JS入门：变量和函数》

杨凡的博客
杨凡的博客原创
2021年01月13日 14:35:24612浏览

JS引入方式

  1. 内联脚本：事件属性
  2. 内部脚本：script标签中
  3. 外部脚本：script：src属性中

变量与常量的区别

变量

  1. 声明时初始化（第一次赋值）
  2. 第二次及以上赋值（更新）

常量

声明时必须初始化 不能进行更新）

标识符

  1. 字母、数字、下划线、$；但是不能数字开头
  2. 严格区分大小写
  3. 不能使用关键字或保留字

命名方式

  1. 驼峰式：userName
  2. 帕斯卡：UserName，大驼峰
  3. 匈牙利：oBtn，_sec,_salary
  1. <!DOCTYPE html>
  2. <html lang="en">
  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 username;
  12.         console.log(username);
  13.         // 声明时初始化（第一次赋值）
  14.         let note = "百万弟弟";
  15.         console.log(note);
  16.         // 第二次及以上赋值（更新）
  17.         username = "百万弟弟"
  18.         console.log(username);
  19.         // 2.常量 声明时必须初始化 不能进行更新
  20.         const unitPrice = 100;
  21.         console.log(unitPrice);
  22.         // 3.标识符 字母、数字、下划线、$；但是不能数字开头
  23.         // 严格区分大小写
  24.         // 不能使用关键字或保留字
  26.         // 4.命名方式
  27.         // 驼峰式：userName
  28.         // 帕斯卡：UserName，大驼峰
  29.         // 匈牙利：oBtn，_sec,_salary
  30.     </script>
  31. </body>
  32. </html>

总结

  1. 变量可以先声明后赋值，常量必须在声明时赋值
  2. 变量值可以进行更新，常量声明赋值后不能进行更新修改

变量类型及转换

原始类型（字符串，数值，布尔，undefined，null）

  1. <!DOCTYPE html>
  2. <html lang="en">
  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.原始类型：字符串，数值，布尔，undefined，null
  11.         let email = "admin@qq.com";
  12.         console.log(email,typeof email);
  13.         let price = 100;
  14.         console.log(price,typeof price);
  15.         let isEmpty = false;
  16.         console.log(isEmpty,typeof isEmpty);
  17.         let num;
  18.         console.log(num,typeof num);
  19.         let a=null;
  20.         console.log(a,typeof a);
  21.         if(a === null){
  22.             console.log("null");
  23.         } 
  24.     </script>
  25. </body>
  26. </html>

引用类型（数组，对象，函数）

  1. <!DOCTYPE html>
  2. <html lang="en">
  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.         // 2.引用类型 数组，对象，函数
  11.         let arr = [100,"苹果",5];
  12.         console.log(arr);
  13.         // console.log(arr instanceof Array);
  14.         // console.log(arr instanceof Object);
  15.         console.log(Array.isArray(arr));
  17.         let item = {
  18.             id:100,
  19.             name:"苹果",
  20.             price:5,
  21.         };
  22.         console.log(item);
  23.         console.table(item);
  25.         function show(){}
  26.         console.table(typeof show);
  27.     </script>
  28. </body>
  29. </html>

函数与匿名函数的区别

  1. 函数在声明后会自动提升至最顶部
  2. 同名函数可进行覆盖重写
  3. 将函数名去掉名字并且赋值给变量，此函数就是匿名函数，此时函数的提升失效
  4. 如果想解决函数被重写的问题，可以将匿名函数赋值给常量即可

函数参数与返回值

  1. <!DOCTYPE html>
  2. <html lang="en">
  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.         let sum = function(a,b){
  12.             return a+b;
  13.         };
  14.         console.log(sum(1,8))
  15.         // 默认参数
  16.         sum = function(a,b=2){
  17.             return a+b;
  18.         };
  19.         console.log(sum(1))
  20.         // 归内参数，简化函数的参数声明
  21.         sum = function(...arr){
  22.             return arr.reduce(function(p,c){
  23.                 return p+c;
  24.             });;
  25.         };
  26.         console.log(sum(1,2,3,4))
  27.         //...扩展参数，简化函数的调用参数
  28.         let params = [2,3,4,5];
  29.         console.log(sum(...params))
  30.     </script>
  31. </body>
  32. </html>

总结

  1. 函数参数有必选和默认之分，必选参数是必须要赋值的参数，否则函数返回NaN，默认参数是函数的参数赋值默认值，如传值使用传递的值，如不给值，使用默认值
  2. 可以通过归内参数，…扩展参数来简化函数的参数声明和调用

四种高阶函数

1、回调函数

  1. <script>
  2.     // 高阶函数：使用函数作为参数或者将函数作为返回值的函数
  3.     // 1.回调函数
  4.     document.addEventListener("click",function(){
  5.         alert("哈喽 百万弟弟~~");
  6.     });
  7. </script>

2、偏函数

简化了声明时的参数声明，先固定几个函数，其他函数交给子函数处理

  1. <script>
  2.     // 2.偏函数
  3.     let sum = function(a,b){
  4.         return function(c,d){
  5.             return a+b+c+d;
  6.         };
  7.     };
  8.     let summax = sum(2,3);
  9.     console.log(summax(4,5));
  10. </script>

3、柯里化

简化了调用参数

  1. <script>
  2.      // 3.柯里化
  3.      sum = function(a){
  4.          return function(b){
  5.              return function(c){
  6.                  return function(d){
  7.                      return a+b+c+d;
  8.                  };
  9.              };
  10.         };
  11.      };
  12.      let res = sum(1)(2)(3)(4);
  13.      console.log(res);
  14. </script>

4、纯函数

完全独立于调用上下文,返回值只能受到传入的参数影响

  1. <script>
  2.     // 4.纯函数
  3.     function add(a,b){
  4.         return a+b;
  5.     };
  6.     console.log(add(1,4));
  7. </script>

箭头函数的参数特征

箭头函数用法

  1. 简化匿名函数的声明
  2. 如果函数体只有一条语句，可以不写return和{}
  3. 如果只有一个参数，连小括号也可以不要
  4. 如果没有参数不能省略小括号
  1. <!DOCTYPE html>
  2. <html lang="en">
  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.         let sum = (a,b)=>{
  12.             return a+b;
  13.         }
  14.         console.log(sum(3,4))
  15.         // 如果函数体只有一条语句，可以不写`return`和`{}`
  16.         sum = (a,b)=>a+b;
  17.         console.log(sum(7,8));
  18.         // 如果只有一个参数，连小括号也可以不要
  19.         let a = x=> x;
  20.         console.log(a("我是百万弟弟"));
  21.         // 如果没有参数不能省略小括号
  22.        a = ()=> 7;
  23.         console.log(a());
  24.     </script>
  25. </body>
  26. </html>

总结

  1. 合理利用好箭头函数可以大大简化代码的书写

闭包原理与实现并演示它

  1. <!DOCTYPE html>
  2. <html lang="en">
  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.         // js三种作用域：全局，函数，块
  11.         // 1、全局作用域
  12.         let site = "PHP中文网";
  13.         console.log(site);
  14.         // 2、函数作用域
  15.         function getSite() {
  16.             let domain = "www.php.cn";
  17.             return site + domain;
  18.         }
  19.         console.log(getSite());
  20.         // 3、块作用域
  21.         {
  22.             let a = 1;
  23.             const B = "Hello";
  24.         }
  25.         // 4、闭包：能有访问自由变量的函数
  26.         // 自由变量:既不是函数参数变量 也不是私有变量，存在于函数低啊用上下文中
  27.         let num = 90;
  28.         function add(a,b){
  29.             let t=0;
  30.             return t + a + b + num;
  31.         }
  32.         console.log(add(5,6));
  34.         function a(){
  35.             let n = 101;
  36.             // 这个返回的子函数就是闭包
  37.             return function(){
  38.                 return n;
  39.             }
  40.         }
  41.         console.log(a()());
  42.     </script>
  43. </body>
  44. </html>

总结

  1. 能够访问自由变量的函数叫做闭包，所以，理论上讲任何函数都是闭包。
  2. 私有变量不可以被外部访问，但是私有变量中存在匿名函数并且使用了这个私有变量，这个私有变量对于匿名函数来说就是可随意访问的自由变量，因此匿名函数能调用这个私有变量，这样的函数即为闭包的原理
上一条：世界上最好的编程语言下一条：初学PHP ,基础一览。
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多