Blogger Information
Blog 18
fans 0
comment 2
visits 10466
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
Javascript中的函数和数据类型
go0
Original
559 people have browsed it

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
Correcting teacher:PHPzPHPz

Correction status:qualified

Teacher's comments:“最后一行console.log输出了函树的调用”
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post