1.常用函数类型

1.1命名函数

1.2匿名函数

1.3箭头函数：箭头函数是用来简化匿名函数的。

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  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>函数</title>
  8.   </head>
  9.   <body>
  10.     <script>
  11.       // 函数：一般当成数据类型使用
  12.       //   1.命名函数
  13.       function gerName(username) {
  14.         return "你好," + username;
  15.       }
  16.       console.log(gerName("朱老师"));
  17.       //   2.匿名函数
  18.       //   第一种使用方式：赋给一个变量
  19.       let userName = function (username) {
  20.         return "你好," + username;
  21.       };
  22.       console.log(userName("李老师"));
  23.       //   第二种使用方式：立即调用函数（IIFE），将声明与调用合并。
  24.       //   表达式：用一对括号括起来
  25.       console.log(
  26.         (function (username) {
  27.           return "你好," + username;
  28.         })("杨老师")
  29.       );
  30.       //   3.箭头函数：用来简化匿名函数
  31.       function sum(a, b) {
  32.         console.log(a + b);
  33.       }
  34.       sum(2, 3);
  35.       //   改造成箭头函数
  36.       //   第一步：改造成匿名函数
  37.       //   let add = function (a, b) {
  38.       //     console.log(a + b);
  39.       //   };
  40.       //   第二步：使用箭头函数来简化
  41.       //   简化方法：删除function,在参数列表与大括号之间加入胖箭头：=>
  42.       add = (a, b) => {
  43.         console.log(a + b);
  44.       };
  45.       add(3, 10);
  46.       //   如果只有一个参数，参数括号可以不写
  47.       add = (a) => {
  48.         console.log(a + 15);
  49.       };
  50.       add(3);
  51.       //   如果没有参数，参数括号必须填写
  52.       add = () => {
  53.         console.log(2 + 2);
  54.       };
  55.       add();
  56.       //   如果函数体只有一条语句，大括号可以删除
  57.       add = () => console.log(2 + 8);
  58.       add();
  59.       //   示例
  60.       //   let userName = function (username) {
  61.       //     return "你好," + username;
  62.       //   };
  63.       //   改造后：
  64.       let f1 = (username) => "你好," + username;
  65.       console.log(f1("张老师"));
  66.     </script>
  67.   </body>
  68. </html>

2.常用数据类型

2.1 原始类型：number,string,boolean,undefined,null

2.2 引用类型：array,object,function

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  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>数据类型</title>
  8.   </head>
  9.   <body>
  10.     <script>
  11.       // 1.原始类型：number,string,boolean,undefined,null
  12.       //   一个变量一个值，标量
  13.       // 不同类型的数据，先转换后运算
  14.       console.log("hell " + 100);
  15.       console.log(typeof ("hell" + 100));
  16.       //   隐式转换:true => 1
  17.       console.log(true + 1);
  18.       console.log(typeof (true + 1));
  19.       //   undefined
  20.       console.log(typeof undefined);
  21.       console.log(null);
  22.       console.log(typeof null);
  23.       //   2.引用类型：array,object,function
  24.       //   一个变量保存的是一个集合，不是单值，通过变量引用访问
  25.       //   引用类型判断不能用typeof来判断，用Array.isArray()
  26.       //  数组
  27.       const arr = [1, [1, 5, 6], "admin", true];
  28.       console.log(arr);
  29.       //   访问数组成员中的元素，必须引用数组来访问
  30.       console.log(arr[2]);
  31.       console.log(arr[1][2]);
  32.       // 判断是否是数组类型
  33.       console.log(Array.isArray(arr));
  34.       console.log(Array.isArray(arr) ? "数组" : "不是数组");
  35.       //   对象
  36.       let obj = {
  37.         id: 1,
  38.         jurisdiction: [1, 5, 6],
  39.         username: "朱老师",
  40.         isok: true,
  41.       };
  42.       console.log(obj["username"]);
  43.       console.log(obj["jurisdiction"][2]);
  44.       //   简化访问方式
  45.       console.log(obj.username);
  46.       console.log(obj.jurisdiction[2]);
  47.       //   示例
  48.       function getUser(obj) {
  49.         return "id = " + obj.id + ",username = " + obj.username;
  50.       }
  51.       console.log(getUser(obj));
  52.       //   对象是可以将数据和函数封装在一起，作为一个独立的编程单元
  53.       //   对象字面量
  54.       obj = {
  55.         id: 1,
  56.         jurisdiction: [1, 5, 6],
  57.         username: "朱老师",
  58.         isok: true,
  59.         // 将一个函数转为对象的方法，封装到对象中
  60.         getUser: function (obj) {
  61.           return "id = " + obj.id + ",username = " + obj.username;
  62.         },
  63.       };
  64.       console.log(obj.getUser(obj));
  65.       console.log("-------------");
  66.       //   在对象中，使用变量this来引用对象自身
  67.       obj2 = {
  68.         id: 1,
  69.         jurisdiction: [1, 5, 6],
  70.         username: "朱老师",
  71.         isok: true,
  72.         getUser: function () {
  73.           return "id = " + this.id + ",username = " + this.username;
  74.         },
  75.       };
  76.       console.log(obj2.getUser());
  77.       console.log("--------------");
  78.       //   函数：函数是对象，也是一个值，可以当作参数传递，也可以当成返回值
  79.       //   示例
  80.       console.log(typeof function () {});
  81.       function f2(callback) {
  82.         console.log(typeof callback);
  83.         console.log(callback());
  84.       }
  85.       //   传入一个函数作为参数
  86.       f2(function () {
  87.         return "Hell, How are you?";
  88.       });
  89.       //   函数当返回值：调用不属于自己的参数，形成闭包，闭包不销毁父函数，占用内存较大
  90.       function f3() {
  91.         let a = 1;
  92.         return function () {
  93.           return (a = a + 1);
  94.           //   return (a += 1);
  95.           //   return (a += 3);
  96.           //   return a++;
  97.         };
  98.       }
  99.       //   调用后作用域不被销毁
  100.       console.log(f3());
  101.       const f = f3();
  102.       console.log("-----");
  103.       console.log(f());
  104.       //   父函数作用域不注销，每次递增
  105.       console.log(f());
  107.       //   函数就是对象，对象可以添加属性和方法
  108.       //   f4是函数
  109.       let f4 = function () {};
  110.       //   添加属性
  111.       f4.myEmail = "652@php.cn";
  112.       console.log(f4.myEmail);
  113.       //   添加方法测试
  114.       f4.getEmail = function () {
  115.         console.log(this.myEmail);
  116.       };
  117.       f4.getEmail();
  118.     </script>
  119.   </body>
  120. </html>

更多相关文章

  1. Android(安卓)Activity设置全屏
  2. 【笔记】android捕获触摸事件
  3. 函数参数,返回值与模板字面量,模板函数
  4. 函数的参数和返回值问题以及模板字面量和模板函数
  5. 实例演示函数参数与返回值、演示模板字面量与模板函数
  6. 1. 实例演示函数参数与返回值 2. 实例演示模板字面量与模板函数
  7. 常用函数类型和数据类型
  8. PHP的命令行扩展Readline相关函数的使用
  9. PHP执行linux命令6个函数代码实例

随机推荐

  1. [原]Android(安卓)插件 根据布局xml自动
  2. 基于iMAG开发的ITeye手机客户端
  3. android universalimageloader 几点改进
  4. 大数据开发工程师
  5. Android压力测试快速入门教程（图解）——Mon
  6. Android基础——通过activity和XML绑定实
  7. Android(安卓)ListFragment
  8. 一半是天使一半是魔鬼的Unsafe类详解（疫情
  9. 泛型就这么简单
  10. 运维人员的PMP考证路上心路历程