search

博客列表 >Javascript中的函数和数据类型

Javascript中的函数和数据类型

go0
go0原创
2022年01月09日 23:19:52555浏览

Javascript中的函数的函数包括命名函数和匿名函数。

命名函数

  1. function是关键字，除此之外，还要有函数名称，（），{}。如下例
    1. function myAdd(a,b){
    2.  return "The value is " + a+b;
    3. }
    4. console.log(myAdd(1, 4));
    上面代码前面3行相当于函数的声明，最后一行console.log输出了函树的调用
    结果值是The value is 14,传入的两个参数被当作字符串处理了。正确的做法是函数体内给a+b加上括号，例如：
    1. function myAdd(a, b) {
    2. return "The value is " + (a + b);
    3. }
    4. console.log(myAdd(1, 4));

匿名函数

匿名函数顾名思义就是没有函数名字了，例如：

  1. function (a, b) {
  2.   return "The value is " + (a + b);
  3. }

与前面的例子相比，仅仅不再有名字了。
问题随之而来，没有函数名，用户怎样调用呢？有两种方法：

  • 用一个常量表示这个函数
  • 立即执行这个函数
  1. 用一个常量表示这个函数 
    1. const myFun = function (a, b) {
    2. return "The value is " + (a + b);
    3. };
    4. console.log(myFun(1, 4));
    这种方式并没有简化函数的使用，因为省了一个函数名，却多了一个变量。
  2. 立即执行这个函数
    1. (function (a, b) {
    2.  return "The value is " + (a + b);
    3. })(1,4)
    用小括号包裹整个函数体，再加上参数
    上面的匿名函数已经执行了，返回了字符串，使用console.log可以在浏览器中输出结果。
    1. console.log((function (a, b) {
    2.  return "The value is " + (a + b);
    3. })(1,4));
    是不是感觉越来越复杂了？后面会越来越简化，等你熟悉这种方式你会爱上它的。

下面开始简化，function这个单词太长了，将它去掉，用一个形象的=>箭头代替，注意，可不是在原位置替换。下面是例子。

  1. const myFun2 = (a, b) => {
  2.   return "The value is " + (a + b);
  3. };
  4. console.log(myFun2(1,4));

另一种形式如下，还是先用小括号包裹整个函数体，再加上参数：

  1. console.log(
  2.   ((a, b) => {
  3.     return "The value is " + (a + b);
  4.   })(1, 4)
  5. );

当只有一个参数的时候还可以更加简化，比如编写一个加1功能的函数：

  1. console.log(
  2. ((x)=>{return x+1;})(3)
  3. );

这个函数只有一个参数，那么包裹参数的小括号可以省略；
如果函数体内只有一条代码，那么return语句和花括号{}也可以省略；最后变成：

  1. console.log(
  2.   (x => x + 1)(3)
  3.   );

写成一行就是

  1. console.log(  (x => x + 1)(3)  );

那如果一个函数不需要参数呢？比如只是输出“hello world”。当然最简单就是直接输出console.log("hello world");按照匿名函数的写法可以写成下面这样

  1. console.log(  ($=>'hello world')()  );

那个$符号什么意思? 其实就是1个参数，你愿意写成x,_,arg1都可以，反正函数体中不需要参数，用不到它，随便写1个合法变量。当然，比较好理解的话还是写成()，表示参数为空。

  1. console.log(  ( ()=>'hello world')()  );

Javascript中的数据类型

  1. 原始数据类型
    1. console.log(123, typeof 123);      // 123 'number'
    2. console.log("hello world", typeof "hello world"); // hello world 'string'
    3. console.log(true, typeof true);  // true 'boolean'
    4. console.log(undefined, typeof undefined);   //undefined  'undefined'
    5. console.log(null, typeof null);   // null  'object'
    6. let a;
    7. console.log(typeof a);  undefined
  2. 引用类型
    由原始数据类型组成的可包含多个值的类型。有3种：数组，对象，函数。
    （1）数组
    1. const arr=[1,"abc", true, [1,2,3]];
    2. console.log(Array.isArray(arr));
    判断arr是不是一个数组不要用typeof了，用Array.isArray()。typeof用于判断原始数据类型。
    （2）对象
    对象其实和数组很像，都可以存储多种数据类型多个值。数组使用中括号，对象使用花括号。
    1. const obj = {name:"zhangSan", password:"123", math:88, english:90};
    2. console.log(obj);
    3. console.log("平均分是："+(obj["math"]+obj.english)/2);
    对象比数组强大的地方在于，对象中的元素可以是函数
    1. const obj2 = {
    2. name: "zhangSan",
    3. password: "123",
    4. math: 88,
    5. english: 90,
    6. total: function(){
    7.    //return obj2.name+"的总成绩是："+(obj.math + obj.english);
    8.    return `${obj2.name}的总成绩是：${this.math+this.english}`;
    9. },
    10. };
    11. console.log(obj2.total());
    12. console.log(obj2 instanceof Object);  // true
    上面用到了模板字面量，Esc键下面的那个反引号包裹，${}中的值可以进行运算和取值。obj也可以用this替代，很直观。
    输出的是：zhangSan的总成绩是：178
    判断变量是不是一个对象，用的是instanceof
    数组和对象经常一起用
    1. arrStu = [
    2. { name: "zhangSan", password: "123", math: 88, english: 90 },
    3. { name: "liSi", password: "123", math: 80, english: 78 },
    4. { name: "wangWu", password: "123", math: 60, english: 100 },
    5. ];
    6. let avg = arrStu.map(item => (item.math + item.english) / 2);
    7. console.log(avg, Array.isArray(avg)); // [89,79,80] true
    8. let maxAvg = avg.reduce(function (x, y) {
    9. if (x > y) {
    10.  return x;
    11. } else {
    12.  return y;
    13. }
    14. });
    15. console.log(maxAvg);   // 输出最高的平均分是89。
    map()是数组的一个高阶函数，把f(x)作用在Array的每一个元素并把结果生成一个新的Array,所以avg是一个数组，里面装的是平均分。
    reduce()把一个函数f作用在Array的每一个元素[x1, x2, x3…]上，这个函数必须接收两个参数，reduce()把结果继续和序列的下一个元素做f计算，其效果就是：
    [x1, x2, x3, x4].reduce(f) = f(f(f(x1, x2), x3), x4)
    比方说对一个Array求和，就可以用reduce实现：
    1. let arr = [1, 3, 5, 7, 9];
    2. arr.reduce(function (x, y) { return x + y; }); // 25
    （3）函数
    使用typeof查看函数的类型，返回值是function；使用instanceof Object查看是不是一个对象，返回值为true。
    1. console.log(typeof function(){});   // 输出function
    2. console.log(function(){} instanceof Object);  // 输出true
    函数是一种数据类型，可以像字符串，数值类型那样作为参数进行传递
    先看看参数类型是数字的函数，3和4传值进去对应x和y。
    1. const sum2num = (x, y) => x + y;
    2. console.log(sum2num(3, 4));
    函数的参数除了可以传递数字，还可以传递一个函数。
    1. function fun2(x) {
    2. let a = x();
    3. console.log(a);
    4. }
    5. const fun = ($) => 3;
    6. fun2(fun);    // <--这里的fun后面没有括号（），否则，就成fun2(3)了
    函数返回值是字符串，数字等比较常见，返回值也可以是函数
    1. function retAfun() {
    2. let x = 1;
    3. return function () {
    4.  x = x + 1;
    5.  return x;
    6. };
    7. }
    8. const rfun = retAfun();
    9. console.log(rfun());  // 输出2
    10. console.log(rfun());  // 输出3
    11. console.log(rfun());  // 输出4
    函数retAfun()中的私有变量x通过返回的函数rfun不断地改变。

通过函数的name属性可以查看函数名，length属性可以查看函数个数，例如：

  1. const aa = function fun123(x,y,z){};
  2. console.log(aa.name);    // 输出的是fun123
  3. console.log(aa.length);  // 输出的是3,表示参数的个数

函数既然是对象，那就可以给它添加属性

  1. console.log(aa instanceof Object);  // 输出true
  2. aa.newAtt="fresh attribute";        
  3. console.log(aa.newAtt);             // 输出fresh attribute
上一条：JS事件冒泡；常用字符串、数组函数下一条：函数与数据类型详解
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多