search

博客列表 >声明函数立即执行函数及匿名函数,以及函数的简写,和查看数据类型的原始类型以及以数组及对象的引用类型,函数类型的应用场景目前稀里糊涂

声明函数立即执行函数及匿名函数,以及函数的简写,和查看数据类型的原始类型以及以数组及对象的引用类型,函数类型的应用场景目前稀里糊涂

卢先生
卢先生原创
2021年12月31日 19:50:41546浏览

声明一个带名字的函数:

  1. // 函数
  2. // 声明函数
  3. let name = "名";
  4. // 声明带名字的函数
  5. function namez(name) {
  6.   return name + "字";
  7. }
  8. console.log(namez(name));

示例截图:

声明一个带俩对象名字的函数
  1. // 声明俩参数 参数的值为1和2
  2. let a = 1;
  3. let b = 2;
  4. // 声明名字为namey的函数
  5. function namey(a, b) {
  6.   return a + b;
  7. }
  8. console.log(namey(a, b));
声明一个立即执行的函数
  1. // ↓↓↓↓↓↓下面声明一个立即执行的函数↓↓↓↓↓
  2. function namew(wang) {
  3.   console.log("我的名字是" + wang);
  4. }
  5. namew("王");
  6. // 上面这是立即执行的,感觉怪怪的,中间一个打印,
  7. console.log(
  8.   (function namer(liu) {
  9.     return "我的姓名是" + liu;
  10.   })("刘")
  11. );
  12. // 尝试了好几遍才对,需要包含在打印的()里面,填写函数namer中liu的值↑
  13. // ↑↑↑↑上面这两种,是阅后即焚的声明函数↑↑↑↑↑

示例截图:

函数表达式;

看代码的意思是,声明一个变量,变量的值是一个函数,如下

  1. const Name = function naMe(dog) {
  2.   return "狗英文单词是" + dog;
  3. };
  4. console.log(Name("dog"));
  5. console.log(Name);
  6. // 看到这个符号了吧，以后问别人这是什么意思，一定说是函数表达式 别被笑话
  7. // 上面这种就是声明一个参数,参数的值是一个函数↑↑↑↑↑↑↑↑↑↑
  9. // 匿名函数
  11. let name_a = function (niu) {
  12.   return "这是" + niu + "的意思";
  13. };
  14. console.log(name_a("牛牛"));

示例截图:

匿名函数

代码：

  1. // 匿名函数
  2. let name1 = function (Name) {
  3.   return '我的名字是' + Name
  4. }
  6. console.log(name1('名字'))
  7. // 箭头函数的简写
  9. let name2 = function (a, b) {
  10.   return a + b
  11. }
  12. console.log(name2(1, 2))
  14. // 上面的简写写法为以下
  16. name2 = (a, b) => {
  17.   return a + b
  18. }
  20. console.log(name2(2, 3))
  21. // 上面简写的是去掉了functin，在（）后面增加了=>胖头鱼符号{}
  23. // 上面是因为声明的参数中的函数有2个值，所以已经是最简方法了，但是当函数内就一个值的时候，还可以继续简写
  24. // 先写一个非简写法
  25. let name3 = function (Name3) {
  26.   return Name3
  27. }
  28. console.log(name3('非简写'))
  30. //  下面是简写写法
  32. name3 = (Name3) => {
  33.   return Name3
  34. }
  35. console.log(name3('简写'))
  37. // 上面这是就一个值，下面再练习一下
  39. let name4 = function (Name4) {
  40.   return '这是非' + Name4 + '写法'
  41. }
  42. console.log(name4('简体'))
  44. name4 = (Name4) => {
  45.   return '这是' + Name4 + '写法'
  46. }
  47. console.log(name4('简体'))
  49. // 上面这种写法 还可以简写  因为只有一个参数，且参数仅有一个return返回值简写方式如下
  51. name4 = (Name4) => '这是' + Name4 + '因为就一个return，所以更简单的写法'
  53. console.log(name4('更简单的写法。'))
  55. // 还有，就是没有参数时，一定要把（）写上，也就是匿名的时候，简体写法
  56. // 非简体匿名函数先写一段
  57. const name5 = function () {
  58.   return '还原后学习到了，是因为返回值里面，也是个空参数 ，且非简体的时候，return这个返回值要写'
  59. }
  60. console.log(name5())
  61. //本来想更新一下的，发现声明用的const，不能再次声明了
  62. let name6 = () =>
  63.   '还原后学习到了，是因为返回值里面，也是个空参数 ，且非简体的时候，return这个返回值要写'
  64. console.log(name6())
  65. // 刚刚上面不会写，拿了老师的，还原了一下，看看我是哪里出错的
  66. // let f1 = () => '今天天气很好'
  67. // console.log(f1());
  69. // 还原
  70. //  f1 = function () {
  71. //   return '今天天气很好'
  72. // }
  73. // console.log(f1())

为了能更好的看懂代码，直接上代码图：

匿名函数:
  1. // 匿名函数
  3. let name_a = function (niu) {
  4.   return "这是" + niu + "的意思";
  5. };
  6. console.log(name_a("牛牛"));
  8. // 匿名函数
  9. let name1 = function (Name) {
  10.   return "我的名字是" + Name;
  11. };
  13. console.log(name1("名字"));
  14. // 箭头函数的简写

示例截图:

箭头函数
多值函数简写:
  1. let name2 = function (a, b) {
  2.   return a + b;
  3. };
  4. console.log(name2(1, 2));
  6. // 上面的简写写法为以下
  8. name2 = (a, b) => {
  9.   return a + b;
  10. };
  12. console.log(name2(2, 3));
  13. // 上面简写的是去掉了functin，在（）后面增加了=>胖头鱼符号{}
  15. // 上面是因为声明的参数中的函数有2个值，所以已经是最简方法了，但是当函数内就一个值的时候，还可以继续简写

示例截图:

简写之单值简写:

代码部分:

  1. // 先写一个非简写法
  2. let name3 = function (Name3) {
  3.   return Name3;
  4. };
  5. console.log(name3("非简写"));
  7. //  下面是简写写法
  9. name3 = Name3 => {
  10.   return Name3;
  11. };
  12. console.log(name3("简写"));
  14. // 上面这是就一个值，下面再练习一下
  16. let name4 = function (Name4) {
  17.   return "这是非" + Name4 + "写法";
  18. };
  19. console.log(name4("简体"));
  21. name4 = Name4 => {
  22.   return "这是" + Name4 + "写法";
  23. };
  24. console.log(name4("简体"));
  26. // 上面这种写法 还可以简写  因为只有一个参数，且参数仅有一个return返回值简写方式如下
  28. name4 = Name4 => "这是" + Name4 + "因为就一个return，所以更简单的写法";
  30. console.log(name4("更简单的写法。"));

示例截图:

匿名函数简写

代码部分:

  1. / 还有，就是没有参数时，一定要把（）写上，也就是匿名的时候，简体写法
  2. // 非简体匿名函数先写一段
  3. const name5 = function () {
  4.   return "还原后学习到了，是因为返回值里面，也是个空参数 ，且非简体的时候，return这个返回值要写";
  5. };
  6. console.log(name5());
  7. //本来想更新一下的，发现声明用的const，不能再次声明了
  8. let name6 = () => "还原后学习到了，是因为返回值里面，也是个空参数 ，且非简体的时候，return这个返回值要写";
  9. console.log(name6());
  10. // 刚刚上面不会写，拿了老师的，还原了一下，看看我是哪里出错的
  11. // let f1 = () => '今天天气很好'
  12. // console.log(f1());
  14. // 还原
  15. //  f1 = function () {
  16. //   return '今天天气很好'
  17. // }
  18. // console.log(f1())

示例截图:

整段代码附上:

  1. // 函数
  2. // 声明函数
  3. let name = "名";
  4. // 声明带名字的函数
  5. function namez(name) {
  6.   return name + "字";
  7. }
  8. console.log(namez(name));
  10. // 声明俩参数 参数的值为1和2
  11. let a = 1;
  12. let b = 2;
  13. // 声明名字为namey的函数
  14. function namey(a, b) {
  15.   return a + b;
  16. }
  17. console.log(namey(a, b));
  19. function nameq(php) {
  20.   return "我爱" + php;
  21. }
  22. // 这里打印的时候要注意,参数的值需要用"",数字好像不需要↓
  23. console.log(nameq("php"));
  25. // ↓↓↓↓↓↓下面声明一个立即执行的函数↓↓↓↓↓
  26. function namew(wang) {
  27.   console.log("我的名字是" + wang);
  28. }
  29. namew("王");
  30. // 上面这是立即执行的,感觉怪怪的,中间一个打印,
  31. console.log(
  32.   (function namer(liu) {
  33.     return "我的姓名是" + liu;
  34.   })("刘")
  35. );
  36. // 尝试了好几遍才对,需要包含在打印的()里面,填写函数namer中liu的值↑
  37. // ↑↑↑↑上面这两种,是阅后即焚的声明函数↑↑↑↑↑
  38. // 函数表达式;
  39. // 看代码的意思是,声明一个变量,变量的值是一个函数,如下↓↓↓↓↓
  41. const Name = function naMe(dog) {
  42.   return "狗英文单词是" + dog;
  43. };
  44. console.log(Name("dog"));
  45. console.log(Name);
  46. // 看到这个符号了吧，以后问别人这是什么意思，一定说是函数表达式 别被笑话
  47. // 上面这种就是声明一个参数,参数的值是一个函数↑↑↑↑↑↑↑↑↑↑
  49. // 匿名函数
  51. let name_a = function (niu) {
  52.   return "这是" + niu + "的意思";
  53. };
  54. console.log(name_a("牛牛"));
  56. // 匿名函数
  57. let name1 = function (Name) {
  58.   return "我的名字是" + Name;
  59. };
  61. console.log(name1("名字"));
  62. // 箭头函数的简写
  64. let name2 = function (a, b) {
  65.   return a + b;
  66. };
  67. console.log(name2(1, 2));
  69. // 上面的简写写法为以下
  71. name2 = (a, b) => {
  72.   return a + b;
  73. };
  75. console.log(name2(2, 3));
  76. // 上面简写的是去掉了functin，在（）后面增加了=>胖头鱼符号{}
  78. // 上面是因为声明的参数中的函数有2个值，所以已经是最简方法了，但是当函数内就一个值的时候，还可以继续简写
  79. // 先写一个非简写法
  80. let name3 = function (Name3) {
  81.   return Name3;
  82. };
  83. console.log(name3("非简写"));
  85. //  下面是简写写法
  87. name3 = Name3 => {
  88.   return Name3;
  89. };
  90. console.log(name3("简写"));
  92. // 上面这是就一个值，下面再练习一下
  94. let name4 = function (Name4) {
  95.   return "这是非" + Name4 + "写法";
  96. };
  97. console.log(name4("简体"));
  99. name4 = Name4 => {
  100.   return "这是" + Name4 + "写法";
  101. };
  102. console.log(name4("简体"));
  104. // 上面这种写法 还可以简写  因为只有一个参数，且参数仅有一个return返回值简写方式如下
  106. name4 = Name4 => "这是" + Name4 + "因为就一个return，所以更简单的写法";
  108. console.log(name4("更简单的写法。"));
  110. // 还有，就是没有参数时，一定要把（）写上，也就是匿名的时候，简体写法
  111. // 非简体匿名函数先写一段
  112. const name5 = function () {
  113.   return "还原后学习到了，是因为返回值里面，也是个空参数 ，且非简体的时候，return这个返回值要写";
  114. };
  115. console.log(name5());
  116. //本来想更新一下的，发现声明用的const，不能再次声明了
  117. let name6 = () => "还原后学习到了，是因为返回值里面，也是个空参数 ，且非简体的时候，return这个返回值要写";
  118. console.log(name6());
  119. // 刚刚上面不会写，拿了老师的，还原了一下，看看我是哪里出错的
  120. // let f1 = () => '今天天气很好'
  121. // console.log(f1());
  123. // 还原
  124. //  f1 = function () {
  125. //   return '今天天气很好'
  126. // }
  127. // console.log(f1())

数据类型:

原始类型:

  1. // 原始类型有以下
  2. // number, string, boolean,     undefined, null
  3. // 数字      字符    true false     未定义    空
  4. // 不可再分，是构成其他复合类型的基本单元
查看函数的原始类型:

代码:

  2. console.log(123, typeof 123);
  3. console.log("php", typeof "php");
  4. console.log(true, typeof true);
  6. console.log(undefined, typeof undefined);
  7. console.log(null, typeof null);

示例截图:

上面是老师写的
下面是自己写的

  2. console.log(123, typeof 123);
  3. console.log("php", typeof "php");
  4. // 字符串的时候需要加''引号
  5. console.log(true, typeof true);
  6. console.log(false, typeof false);
  7. console.log(undefined, typeof undefined);
  8. console.log(null, typeof null);
  9. // Object 对象

示例截图:

原始类型的-单值类型:
  1. // 原始类型, 简单类型, 基本类型:  一个变量,存一个值
  2. // 单值类型
  3. let a = 1;
  4. console.log(typeof a);
  5. a = "php";
  6. console.log(typeof a);
  7. // 动态语言: 变量的类型, 由它的值的类型决定
  9. // ! 2. 引用类型
  11. // 引用类型, 都是对象, 默认返回 object ,函数除外 function
  13. // * array, object, function
  15. // 引用类型: 类似其它语言中的"复用类型", 集合类型
  16. // 引用类型的数据,由一个或多个, 相同, 或不同类型的"原始类型"的值构造
  17. // 是一个典型的: 多值类型

示例截图:

刚刚发现,这是老师写的
下面上自己写的
  1. //原始类型 又叫简单类型 单值类型， 比如声明一个变量a a的值=1
  2. let a = 1;
  3. console.log(a);
  4. console.log(a, typeof a);
  5. console.log(typeof a);
  6. // 瞎捣鼓的，老师的是最后这样写法
  7. a = "php";
  8. console.log(typeof a);
  9. a = "";
  10. console.log(typeof a);
  11. // 带了引号就是字符？？？
  12. // 从上面可以看得出来，变量 a 的类型由 值  a的值来决定的

示例截图:

引用类型:
  1. //引用类型
  2. // 引用类型, 都是对象, 默认返回 object ,函数除外 function
  4. // * array, object, function
  6. // 引用类型: 类似其它语言中的"复用类型", 集合类型
  7. // 引用类型的数据,由一个或多个, 相同, 或不同类型的"原始类型"的值构造
  8. // 是一个典型的: 多值类型
  9. // 这几句话是复制老师的
  10. // // // // // // // // //
  11. // 引用类型之数组类型
  12. // // // // // // // // //
引用类型—数组类型
  1. // 引用类型--数组类型
  2. let sz = ["app", 123, 8888];
  3. // 当前数组排序，我理解为0=app，1=123,2=8888
  4. // 打印一下看看
  5. console.log(sz);
  6. // 打印一下其中的值
  7. console.log(sz[1]);
  8. console.log(sz[2]);
  9. // 打印数组类型的正确方法
  10. console.log(Array.isArray(sz));
  11. // boolean 布尔类型

示例截图:

引用类型—对象类型

示例代码:

  1. //引用类型--对象类型
  2. // 对象类型类似数组类型
  3. let duixiang = { name: "对象", shuzi: 123, shuzi2: 678 };
  4. // 其中对象赋值的时候，要用英文的: ,不能用=
  5. // 下面调佣一下看看
  6. console.log(duixiang["name"]);
  7. // 声明的参数之后,这里需要用[''] 来调佣，注意注意
  8. // 那如果全部调佣改如何调佣呢?看下面
  9. console.log(duixiang);
  10. // 全部调佣不需要再加[]
  11. // 还有另外一种方式调用,例如全部调佣,
  12. console.log(duixiang.name, duixiang.shuzi, duixiang.shuzi2);
  13. // 直接使用变量.对象,来实现,不过这必须是合法对象,非合法对象不适用,例如下面的
  14. let duixiang2 = { "name mingzi": "名字", "name _mz": "名字2", name3: "名字3" };
  15. console.log(duixiang2["name _mz"]);
  16. // 上面是当对象是非法对象时，就必须以数组的方式来访问，必须用 变量[''] 这样
  18. // * 对象最吸引人的,不是数组的语义化封装, 而是对数据操作的封装, 方法(语法与函数是一样的)
  19. // 本质上来说, 对象, 就是变量与函数的封装, 内部, 变量->属性, 函数 -> 方法
  20. // 先声明一个对象

示例截图:

声明一组对象且对象内包含函数:

  1. let os = {
  2.   l: "linux",
  3.   shuliang: 3,
  4.   jiage: 100,
  5.   zongji: function () {
  6.     // let sl =
  7.     //   '当前' +
  8.     //   os.l +
  9.     //   '数量为' +
  10.     //   os.shuliang +
  11.     //   '单价为' +
  12.     //   os.jiage +
  13.     //   '总价为' +
  14.     //   os.shuliang * os.jiage +
  15.     //   '元'
  16.     // return sl
  17.     // 需要返回一下 return
  18.     // 上面是使用常规方式来实现的，下面是用this来实现
  19.     let sl =
  20.       "当前" + this.l + "数量为" + this.shuliang + "单价为" + this.jiage + "总价为" + this.shuliang * os.jiage + "元";
  21.     return sl;
  22.     //   这里的this，相当于声明的那个变量 os的替换变量，当变量os改了之后，并不需要在对象里面的函数里面，挨个更改
  23.   },
  24. };
  25. console.log(os.zongji());
  26. // console.log(os['zongji'])这是一个错误的写法，
  27. // 自己试了试，其实可以这么理解，虽然声明的对象里面，如果出现了函数，就以函数的方式调佣，比如console.log(os.zongji())
  28. // 打印上面的数据类型
  29. console.log(typeof os);
  30. // 上面提示的是对象
  31. console.log(os instanceof Object);
  32. // 上面提示的是布尔型

示例截图:

在实际工作中，数组和对象一般都是一起使用，使用演示如下
代码部分:

  1. os = [
  2.   { name: "linux服务器", shuliang: 2, jiage: 100 },
  3.   { name: "win7服务器", shuliang: 2, jiage: 100 },
  4. ];
  5. console.log(os[0]);
  6. console.log(os[1]);
  7. // let res = obj.map(item => item.num * item.price).reduce((acc, cur) => acc + cur);
  8. // console.log(res);老师的js，也不知道怎么用

示例截图:

函数

代码部分:

  1. // 函数是一种数据类型 , 并且 还是 对象
  3. console.log(typeof function () {});
  4. // 函数即是函数, 也是对象
  5. console.log(function () {} instanceof Object);
  6. // 这句拿的老师的，
  7. // ! (一) 函数是数据类型的好处?
  8. // 可以当成普通值来使用, 例如充当函数的参数,或者函数的返回值
  9. // 这个很重要, 当参数,就是回调函数, 当返回值,可以创建一个闭包
  10. // js中很多高级应用, 都严重依赖这二个功能, 这也是"高阶函数"的基本特征
  12. // * 应用场景1: 函数做为参数使用, 回调
  13. function f1(hanshu) {
  14.   return console.log(hanshu());
  15. }
  17. ///应用场景1，没看懂，得后面学习
  18. // 调用f1, 匿名函数当成f1的参数
  19. f1(function () {
  20.   return "Hello 朱老师";
  21. });
  22. // 这里挑起了定义的function函数，
  23. //函数是可以当成一个值的！
  24. //既然可以看成一个值，那么就可以当作参数传递给函数！f1函数的参数就是一个函数类型！
  25. //所以在调用的时候就需要给它传入一个函数！这样才能和上面的函数声明对应上
  26. //还学不会,就去看视频去吧,记住 , 凡是像 123 这样的值, 能出现的地方, 函数都可以出现
  27. // * 应用场景2: 函数当成返回值, 闭包
  28. function f2() {
  29.   let a = 1;
  30.   return function () {
  31.     return a++;
  32.   };
  33. }
  35. function f3() {
  36.   let a = 5;
  37.   return function () {
  38.     return a++;
  39.   };
  40. }
  41. // f2()返回值是一个函数
  42. console.log(f2());
  43. const f = f2();
  44. console.log(f);
  45. console.log(f());
  46. console.log(f());
  47. console.log(f());
  48. console.log(f());
  49. console.log(f());
  50. console.log(f());
  52. console.log(f3());
  53. let d = f3();
  54. console.log(d);
  55. console.log(d());
  56. console.log(d());
  57. console.log(d());
  58. console.log(d());
  59. //* 以上的 回调 + 闭包, 都 是 函数当成"值"来用的经典应用场景
  61. // * 以下是函数当成对象来用
  63. // * 对象有属性和方法, 当然函数也有属性有方法
  65. function func(a, b) {
  66.   return a + b;
  67. }
  68. // 查看函数名
  69. console.log(func.name);
  70. // 查看函数需要几个参数
  71. console.log(func.length);
  73. func.email = "498668472@qq.com";
  75. console.log(func.email);
  76. console.log(func(2, 3));
  78. // ! 函数当成对象有啥用呢?
  79. // * 用处太大了, 整个JS语言体系就靠它撑着了
  80. // * 就算是你没学过编程, 至少听说过面向对象编程, 对象可以被继承,实现代码复用
  81. // * 而JS就是基于原型,实现的继承, 而原型,就是在函数上创建一个普通对象而已
  82. // console.log(func.prototype);
  83. // * 后面要学到的类class,构造函数, 他们都是基于"函数是对象"这个前提的

示例截图:

自己写的代码如下:
  1. // 数据类型
  2. // 原始类型有以下
  3. // number, string, boolean,     undefined, null
  4. // 数字      字符    true false     未定义    空
  5. // 不可再分，是构成其他复合类型的基本单元
  7. console.log(123, typeof 123)
  8. console.log('php', typeof 'php')
  9. // 字符串的时候需要加''引号
  10. console.log(true, typeof true)
  11. console.log(false, typeof false)
  12. console.log(undefined, typeof undefined)
  13. console.log(null, typeof null)
  14. // Object 对象
  15. //原始类型 又叫简单类型 单值类型， 比如声明一个变量a a的值=1
  16. let a = 1
  17. console.log(a)
  18. console.log(a, typeof a)
  19. console.log(typeof a)
  20. // 瞎捣鼓的，老师的是最后这样写法
  21. a = 'php'
  22. console.log(typeof a)
  23. a = ''
  24. console.log(typeof a)
  25. // 带了引号就是字符？？？
  26. // 从上面可以看得出来，变量 a 的类型由 值  a的值来决定的
  28. //引用类型
  29. // 引用类型, 都是对象, 默认返回 object ,函数除外 function
  31. // * array, object, function
  33. // 引用类型: 类似其它语言中的"复用类型", 集合类型
  34. // 引用类型的数据,由一个或多个, 相同, 或不同类型的"原始类型"的值构造
  35. // 是一个典型的: 多值类型
  36. // 这几句话是复制老师的
  37. // // // // // // // // //
  38. // 引用类型之数组类型
  39. // // // // // // // // //
  41. // 引用类型--数组类型
  42. let sz = ['app', 123, 8888]
  43. // 当前数组排序，我理解为0=app，1=123,2=8888
  44. // 打印一下看看
  45. console.log(sz)
  46. // 打印一下其中的值
  47. console.log(sz[1])
  48. console.log(sz[2])
  49. // 打印数组类型的正确方法
  50. console.log(Array.isArray(sz))
  51. // boolean 布尔类型
  52. //引用类型--对象类型
  53. // 对象类型类似数组类型
  54. let duixiang = { name: '对象', shuzi: 123, shuzi2: 678 }
  55. // 其中对象赋值的时候，要用英文的: ,不能用=
  56. // 下面调佣一下看看
  57. console.log(duixiang['name'])
  58. // 声明的参数之后,这里需要用[''] 来调佣，注意注意
  59. // 那如果全部调佣改如何调佣呢?看下面
  60. console.log(duixiang)
  61. // 全部调佣不需要再加[]
  62. // 还有另外一种方式调用,例如全部调佣,
  63. console.log(duixiang.name, duixiang.shuzi, duixiang.shuzi2)
  64. // 直接使用变量.对象,来实现,不过这必须是合法对象,非合法对象不适用,例如下面的
  65. let duixiang2 = { 'name mingzi': '名字', 'name _mz': '名字2', name3: '名字3' }
  66. console.log(duixiang2['name _mz'])
  67. // 上面是当对象是非法对象时，就必须以数组的方式来访问，必须用 变量[''] 这样
  69. // * 对象最吸引人的,不是数组的语义化封装, 而是对数据操作的封装, 方法(语法与函数是一样的)
  70. // 本质上来说, 对象, 就是变量与函数的封装, 内部, 变量->属性, 函数 -> 方法
  71. // 先声明一个对象
  73. let os = {
  74.   l: 'linux',
  75.   shuliang: 3,
  76.   jiage: 100,
  77.   zongji: function () {
  78.     // let sl =
  79.     //   '当前' +
  80.     //   os.l +
  81.     //   '数量为' +
  82.     //   os.shuliang +
  83.     //   '单价为' +
  84.     //   os.jiage +
  85.     //   '总价为' +
  86.     //   os.shuliang * os.jiage +
  87.     //   '元'
  88.     // return sl
  89.     // 需要返回一下 return
  90.     // 上面是使用常规方式来实现的，下面是用this来实现
  91.     let sl =
  92.       '当前' +
  93.       this.l +
  94.       '数量为' +
  95.       this.shuliang +
  96.       '单价为' +
  97.       this.jiage +
  98.       '总价为' +
  99.       this.shuliang * os.jiage +
  100.       '元'
  101.     return sl
  102.     //   这里的this，相当于声明的那个变量 os的替换变量，当变量os改了之后，并不需要在对象里面的函数里面，挨个更改
  103.   },
  104. }
  105. console.log(os.zongji())
  106. // console.log(os['zongji'])这是一个错误的写法，
  107. // 自己试了试，其实可以这么理解，虽然声明的对象里面，如果出现了函数，就以函数的方式调佣，比如console.log(os.zongji())
  108. // 打印上面的数据类型
  109. console.log(typeof os)
  110. // 上面提示的是对象
  111. console.log(os instanceof Object)
  112. // 上面提示的是布尔型
  113. // 在实际工作中，数组和对象一般都是一起使用，使用演示如下
  114. os = [
  115.   { name: 'linux服务器', shuliang: 2, jiage: 100 },
  116.   { name: 'win7服务器', shuliang: 2, jiage: 100 },
  117. ]
  118. console.log(os[0])
  119. console.log(os[1])
  120. // let res = obj.map(item => item.num * item.price).reduce((acc, cur) => acc + cur);
  121. // console.log(res);老师的js，也不知道怎么用
  123. // ! 3. 函数
  124. // 函数是一种数据类型 , 并且 还是 对象
  126. console.log(typeof function () {})
  127. // 函数即是函数, 也是对象
  128. console.log(function () {} instanceof Object)
  129. // 这句拿的老师的，
  130. // ! (一) 函数是数据类型的好处?
  131. // 可以当成普通值来使用, 例如充当函数的参数,或者函数的返回值
  132. // 这个很重要, 当参数,就是回调函数, 当返回值,可以创建一个闭包
  133. // js中很多高级应用, 都严重依赖这二个功能, 这也是"高阶函数"的基本特征
  135. // * 应用场景1: 函数做为参数使用, 回调
  136. function f1(hanshu) {
  137.   return console.log(hanshu())
  138. }
  140. ///应用场景1，没看懂，得后面学习
  141. // 调用f1, 匿名函数当成f1的参数
  142. f1(function () {
  143.   return 'Hello 朱老师'
  144. })
  145. // 这里挑起了定义的function函数，
  146. //函数是可以当成一个值的！
  147. //既然可以看成一个值，那么就可以当作参数传递给函数！f1函数的参数就是一个函数类型！
  148. //所以在调用的时候就需要给它传入一个函数！这样才能和上面的函数声明对应上
  149. //还学不会,就去看视频去吧,记住 , 凡是像 123 这样的值, 能出现的地方, 函数都可以出现
  150. // * 应用场景2: 函数当成返回值, 闭包
  151. function f2() {
  152.   let a = 1
  153.   return function () {
  154.     return a++
  155.   }
  156. }
  158. function f3() {
  159.   let a = 5
  160.   return function () {
  161.     return a++
  162.   }
  163. }
  164. // f2()返回值是一个函数
  165. console.log(f2())
  166. const f = f2()
  167. console.log(f)
  168. console.log(f())
  169. console.log(f())
  170. console.log(f())
  171. console.log(f())
  172. console.log(f())
  173. console.log(f())
  175. console.log(f3())
  176. let d = f3()
  177. console.log(d)
  178. console.log(d())
  179. console.log(d())
  180. console.log(d())
  181. console.log(d())
  182. //* 以上的 回调 + 闭包, 都 是 函数当成"值"来用的经典应用场景
  184. // * 以下是函数当成对象来用
  186. // * 对象有属性和方法, 当然函数也有属性有方法
  188. function func(a, b) {
  189.   return a + b
  190. }
  191. // 查看函数名
  192. console.log(func.name)
  193. // 查看函数需要几个参数
  194. console.log(func.length)
  196. func.email = '498668472@qq.com'
  198. console.log(func.email)
  199. console.log(func(2, 3))
  201. // ! 函数当成对象有啥用呢?
  202. // * 用处太大了, 整个JS语言体系就靠它撑着了
  203. // * 就算是你没学过编程, 至少听说过面向对象编程, 对象可以被继承,实现代码复用
  204. // * 而JS就是基于原型,实现的继承, 而原型,就是在函数上创建一个普通对象而已
  205. // console.log(func.prototype);
  206. // * 后面要学到的类class,构造函数, 他们都是基于"函数是对象"这个前提的

老师的代码学习部分

  1. // ! 细说函数
  3. // ! 1. 命名函数
  5. // 有名字的函数
  6. // 命名: 动 + 名
  7. // 声明
  8. function getName(username) {
  9.   return "Hello " + username;
  10. }
  11. // 调用
  12. console.log(getName("猪老师"));
  14. // ! 2. 匿名函数
  16. // 没有名字的函数
  18. // function (username) {
  19. //   return "Hello " + username;
  20. // }
  22. // * 执行方式1: 立即执行
  24. // * 立即执行函数( IIFE ):  声明 + 执行 2合1
  25. // ! 2.1 IIFE
  26. (function (username) {
  27.   console.log("Hello " + username);
  28. })("灭绝老师");
  30. console.log(
  31.   (function (username) {
  32.     return "Hello " + username;
  33.   })("灭绝老师")
  34. );
  36. // * IIFE: 阅后即焚, 不会给全局环境带来任何的污染,用来创建临时作用域
  37. // node 模块, 就是用 IIFE 来写的
  39. // * 执行方式2: 保存到一个变量中,
  40. // ! 2.2 函数表达式
  42. // 现在, "函数声明", 就变成了"变量声明", 只不过, 变量的值,是一个函数声明
  43. const getUserName = function (username) {
  44.   return "Hello " + username;
  45. };
  47. // ! 表达式: 任何一个可以计算出确定 "值"  的过程
  48. // * 100, 12+45, 'a'+'c',
  50. console.log(getUserName("马老师"));
  51. console.log(getUserName);
  53. // ! 3. 箭头函数
  55. // 匿名函数: 函数表达式, 将函数声明保存到一个变量中, 以后使用这个变量来引用这个函数
  56. let f1 = function (a, b) {
  57.   return a + b;
  58. };
  59. console.log(f1(10, 20));
  61. // 使用 箭头函数 来简化匿名函数的声明
  62. // 匿名函数 --> 箭头函数的语法
  63. // * 1. 去掉 function
  64. // * 2. 在参数括号(...) 与 大括号{...} 之间使用 胖箭头 => 连接
  65. f1 = (a, b) => {
  66.   return a + b;
  67. };
  68. console.log(f1(8, 9));
  70. // 只有一个参数的时候, 括号可以不要了
  71. f1 = username => {
  72.   return "Hello " + username;
  73. };
  75. // 如果只有一条语句,return ,可以不写大括号
  76. // 因为只有一条语句,默认就是return ,所以 return 也可以不写的
  77. f1 = x => {
  78.   return x * 2;
  79. };
  81. f1 = x => x * 2;
  82. console.log(f1(40));
  83. console.log(f1(90));
  85. // 没有参数时, 括号一定要写上
  86. f1 = () => "今天天气很好";
  87. console.log(f1());
  89. f1 = $ => 100 + 200;
  90. console.log(f1());
  92. f1 = _ => 100 + 200;
  93. console.log(f1());
  95. // 箭头函数, 内部的 this, 是固定的, 与它的上下文绑定 , 不能充当构造函数来创建对象
  96. // 箭头函数内部没有 arguments 对象
  98. // ! 使用场景
  100. // 1. 如果函数需要多次调用, 用命名, 函数表达式, 都可以
  101. // 2. 如果代码要求,必须遵循"先声明, 再调用"的规则, 那就必须用"函数表达式"
  102. // 3. 如果只有完成一些特定的,一次性的工作, 不想留下任何痕迹, 用"IIFE", 模块
  103. // 4. 如果调用函数时,需要一个函数充当参数,例如:回调, 就可以使用箭头函数来简化 匿名函数的 声明
  1. // ! 数据类型
  3. // ! 1. 原始类型
  4. // * number, string, boolean, undefined, null
  5. // 不可再分, 是构成其它复合类型的基本单元
  7. console.log(123, typeof 123);
  8. console.log("php", typeof "php");
  9. console.log(true, typeof true);
  11. console.log(undefined, typeof undefined);
  12. console.log(null, typeof null);
  14. // 原始类型, 简单类型, 基本类型:  一个变量,存一个值
  15. // 单值类型
  16. let a = 1;
  17. console.log(typeof a);
  18. a = "php";
  19. console.log(typeof a);
  20. // 动态语言: 变量的类型, 由它的值的类型决定
  22. // ! 2. 引用类型
  24. // 引用类型, 都是对象, 默认返回 object ,函数除外 function
  26. // * array, object, function
  28. // 引用类型: 类似其它语言中的"复用类型", 集合类型
  29. // 引用类型的数据,由一个或多个, 相同, 或不同类型的"原始类型"的值构造
  30. // 是一个典型的: 多值类型
  32. // ! 2.1 数组
  33. // 声明
  34. const arr = ["手机", 2, 5000];
  35. console.log(arr);
  36. // 数组的索引是从0开始递增的正整数, 0, 1, 2
  37. console.log(arr[0]);
  38. console.log(arr[1]);
  39. console.log(arr[2]);
  40. console.log(arr[3]);
  42. console.log(typeof arr);
  43. // 判断数组类型的正确方法
  44. console.log(Array.isArray(arr));
  46. // 为了更直观的表达数据之间的关联, 可以将 数字索引 换 有意义 的"字符串"
  48. // const arr1 = { 0: "手机", 1: 2, 2: 5000 };
  49. // console.log(arr1);
  50. // console.log(arr1[0]);
  51. // console.log(arr1[1]);
  53. // ! 2.2 对象
  54. // 对象 更像一个语义化的  数组
  55. // name, num , price : 属性,类似于变量
  56. let obj = { name: "手机", num: 2, price: 5000 };
  57. console.log(obj);
  58. console.log(obj["name"]);
  59. console.log(obj["num"]);
  60. console.log(obj["price"]);
  62. // 因为对象的属性名称都是合法的标识符,可以使用点来访问
  63. console.log(obj.name, obj.num, obj.price);
  65. // 当属性名是非常标识符时, 必须使用数组的方式来访问对象的属性
  66. obj = { "my email": "admin@php.cn" };
  67. console.log(obj["my email"]);
  69. // * 对象最吸引人的,不是数组的语义化封装, 而是对数据操作的封装, 方法(语法与函数是一样的)
  70. // 本质上来说, 对象, 就是变量与函数的封装, 内部, 变量->属性, 函数 -> 方法
  71. obj = {
  72.   // name, num, price: 属性, 类似于变量
  73.   name: "手机",
  74.   num: 3,
  75.   price: 7000,
  77.   // total: 方法,实际上还是一个属性,只不过它的值是一个函数
  78.   total: function () {
  79.     // let str = obj.name + " 总计: " + obj.num * obj.price + " 元 ";
  80.     // 模板字面量, 来简化, 内部有变量的字符串
  81.     // let str = obj.name + " 总计: " + obj.num * obj.price + " 元 ";
  82.     // 反引号声明的模板字符串, 可以插入变量/表达式, 这叫"插值"
  83.     // 应该是对象内部, 使用 当前对象的一个引用, 这样才独立于外部对象
  84.     // let str = `${obj.name} 总计 ${obj.num * obj.price} 元`;
  85.     // this: 始终与当前对象绑定(执行环境 /  执行上下文 )
  86.     // this = obj
  87.     let str = `${this.name} 总计 ${this.num * this.price} 元`;
  88.     return str;
  89.   },
  90. };
  92. console.log(obj.total());
  94. console.log(typeof obj);
  95. console.log(obj instanceof Object);
  97. // 实际工作中, 而是将数组与对象组合起来一起用
  98. // obj是一个由三个对象构成的数组
  99. obj = [
  100.   { name: "手机", num: 2, price: 5000 },
  101.   { name: "电脑", num: 2, price: 5000 },
  102.   { name: "相机", num: 2, price: 5000 },
  103. ];
  105. // 求三个商品的总和
  106. let res = obj.map(item => item.num * item.price).reduce((acc, cur) => acc + cur);
  107. console.log(res);
  109. // ! 3. 函数
  110. // 函数是一种数据类型 , 并且 还是 对象
  112. console.log(typeof function () {});
  113. // 函数即是函数, 也是对象
  114. console.log(function () {} instanceof Object);
  116. // ! (一) 函数是数据类型的好处?
  117. // 可以当成普通值来使用, 例如充当函数的参数,或者函数的返回值
  118. // 这个很重要, 当参数,就是回调函数, 当返回值,可以创建一个闭包
  119. // js中很多高级应用, 都严重依赖这二个功能, 这也是"高阶函数"的基本特征
  120. // 函数是js的一等公民, 就是通过这个体现的
  122. // * 应用场景1: 函数做为参数使用, 回调
  123. function f1(callback) {
  124.   // 参数 callback 是一个函数
  125.   console.log(callback());
  126. }
  128. // 调用f1, 匿名函数当成f1的参数
  129. f1(function () {
  130.   return "Hello 朱老师";
  131. });
  133. // * 应用场景2: 函数当成返回值, 闭包
  134. function f2() {
  135.   let a = 1;
  136.   return function () {
  137.     return a++;
  138.   };
  139. }
  141. // f2()返回值是一个函数
  142. console.log(f2());
  143. const f = f2();
  144. console.log(f);
  145. console.log(f());
  146. console.log(f());
  147. console.log(f());
  148. console.log(f());
  149. console.log(f());
  150. console.log(f());
  152. //* 以上的 回调 + 闭包, 都 是 函数当成"值"来用的经典应用场景
  154. // * 以下是函数当成对象来用
  156. // * 对象有属性和方法, 当然函数也有属性有方法
  158. function func(a, b) {
  159.   return a + b;
  160. }
  161. // 查看函数名
  162. console.log(func.name);
  163. // 查看函数需要几个参数
  164. console.log(func.length);
  166. func.email = "498668472@qq.com";
  168. console.log(func.email);
  169. console.log(func(1, 2));
  170. console.log(func);
  172. // ! 函数当成对象有啥用呢?
  173. // * 用处太大了, 整个JS语言体系就靠它撑着了
  174. // * 就算是你没学过编程, 至少听说过面向对象编程, 对象可以被继承,实现代码复用
  175. // * 而JS就是基于原型,实现的继承, 而原型,就是在函数上创建一个普通对象而已
  176. // console.log(func.prototype);
  177. // * 后面要学到的类class,构造函数, 他们都是基于"函数是对象"这个前提的
上一条：JS数据类型与函数下一条：JavaScript基础
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多