search

博客列表 >常用函数类型和数据类型

常用函数类型和数据类型

shooter
shooter原创
2022年03月31日 15:37:50832浏览

常用函数类型

1. 命名函数

2. 匿名函数

3. 箭头函数，用来简化匿名函数的声明

运行效果图

代码

  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>Document</title>
  8.   </head>
  9.   <body>
  10.     <script>
  11.       // 1. 命名函数
  12.       function getName(username) {
  13.         return 'hello' + username;
  14.       }
  15.       console.log(getName('吴彦祖'));
  17.       // 2.1 匿名函数
  18.       // 第一种声明方式，将匿名函数当成值赋给一个变量
  20.       let getUserName = function (username) {
  21.         return 'hello' + username;
  22.       };
  23.       console.log(getUserName('陈冠希'));
  25.       // 2.2 第二种方式将声明与调用二合一：立即调用函数，IIFE
  26.       // 表达式，是用一对括号包住的
  28.       console.log(
  29.         (function (username) {
  30.           return 'hello' + username;
  31.         })('刘德华')
  32.       );
  34.       // 2.3 箭头函数，用来简化匿名函数的声明
  35.       function sum(a, b) {
  36.         console.log(a + b);
  37.       }
  38.       sum(1, 2);
  40.       // 改成箭头函数
  41.       // 将命名函数改成了匿名函数
  43.       let add = function (a, b) {
  44.         console.log(a + b);
  45.       };
  46.       add(3, 4);
  48.       // 使用箭头函数来简化匿名函数
  49.       // =>（胖箭头)，->（瘦箭头）
  50.       // 转换方法
  51.       // 1. 去掉function
  52.       // 2. 在参数列表与大括号之间使用'=>'
  53.       acc = (a, b) => {
  54.         console.log(a + b);
  55.       };
  56.       acc(5, 6);
  58.       // 如果只有一个参数，可以不写参数列表的括号
  59.       acc1 = (a) => {
  60.         console.log(a + 1);
  61.       };
  62.       acc1(9);
  64.       // 如果没有参数，括号必须加上
  65.       acc2 = () => {
  66.         console.log(1 + 2);
  67.       };
  68.       acc2();
  70.       // 如果函数体只有一条语句，大括号都可以不用
  72.       acc3 = () => console.log(7 + 8);
  73.       acc3();
  74.     </script>
  75.   </body>
  76. </html>

数据类型

原始类型: number, string, boolean,undefined, null

1. 数组

2. 对象

3. 函数

效果图

代码

  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>Document</title>
  8.   </head>
  9.   <body>
  10.     <script>
  11.       // 1. 原始类型: number, string, boolean,undefined, null
  12.       console.log(1 + 1);
  13.       // typeof 查看数据类型
  14.       console.log(typeof 1 + typeof 1);
  15.       console.log('hello' + 'world');
  16.       console.log(typeof ('hello' + 100));
  18.       // 引用类型，array , object , function
  19.       // 1. 数组
  20.       const arr = [1, 'admin', [1, 2, 3], true];
  21.       console.log(arr);
  22.       // 访问数据元素,必须通过数组的引用(数组名称arr)来访问(arr是一个访问入口)
  23.       // 数组成员 的索引是从0开始
  24.       console.log(arr[1]);
  25.       console.log(arr[2][1]);
  26.       console.log(Array.isArray(arr));
  28.       // 对象
  29.       let obj = {
  30.         id:1,
  31.         username:'吴彦祖',
  32.         num:[1,2,3],
  33.         isOK: true,
  34.         'my email':'84451879@qq.com',
  35.       }
  36.       console.log(obj['username']);
  37.       // 为了简化，并与数组区别，对象有自己的成员访问符：.
  38.       console.log(obj.id);
  39.       console.log(obj['my email']);
  41.       function getUser(obj) {
  42.         return 'id =' + obj.id + ', username =' + obj.username;
  43.       }
  44.       console.log(getUser(obj));
  47.       // 对象是可以将数据与函数封装到一起，做为一个独立的编程单元
  48.       // 对象字面量
  49.       obj2 = {
  50.         id:2,
  51.         username:'陈冠希',
  52.         isOK:true,
  53.         'my email':'84451879@qq.com',
  54.         // 将一个函数转为对象的方法，封装到对象中
  55.         getUser: function(){
  56.           // 在对象中，使用变量this来引用对象自身
  57.           return 'id =' + this.id + ',username =' +this.username;
  58.         },
  59.       };
  60.       console.log(obj2.getUser());
  63.       // 函数
  64.       // 函数是对象，也是一个值，可以当成参数传递，也可以当成返回值
  66.       console.log(typeof
  67.         function() {});
  69.         function f1(callback) {
  70.           console.log(typeof callback);
  71.           console.log(callback());
  72.         }
  74.         f1(function() {
  75.           return 'hello 犀利哥';
  76.         });
  78.         // 函数返回值：闭包
  80.         function f2() {
  81.           // a是 f2的私有变量
  82.           let a = 1;
  83.           return function() {
  84.             // return (a += 1);
  85.             // 而此时，子函数中的a并不是自己的，是父函数的
  86.             return a++;
  88.           };
  89.         }
  91.         console.log(f2());
  92.         const f = f2();
  93.         console.log(f);
  94.         console.log(f())
  95.         console.log(f())
  96.         console.log(f())
  97.         console.log(f())
  98.         console.log(f())
  99.         console.log(f())
  102.         // 函数就是对象，对象就可以添加属性和方法
  103.         let f3 = function() {};
  104.         f3.myemail = '84451879@qq.com';
  105.         console.log(f3.myemail);
  106.         f3.getEmail = function() {
  107.           console.log(this.myemail);
  109.         };
  110.         f3.getEmail();
  116.     </script>
  117.   </body>
  118. </html>
上一条：常用函数类型和数据类型下一条：js的常用函数类型与常用数据类型
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多