JS中变量和函数的使用

247 阅读6分钟

一、变量的介绍

1、啥是变量?

  变量的本质是一块有名字的内存空间。变量由变量名和变量值构成。变量名指的是内存空间的别名,一般位于赋值运算符的左边;而变量值指的是内存空间中的数据,一般位于赋值运算符的右边。例如:var balance =250;其中balance为变量名,是内存空间的别名;250为变量值,为数据。

2、如何声明变量?

 暂且可将声明理解为创造,当声明变量时,使用关键字 var
 第一种:单独声明

   <script>
       var a = 32;  //声明一个变量,变量名为a,变量值为32;
       var b = 45;  //声明一个变量,变量名为b,变量值为45;
  </script>

 第二种:一个var多个声明变量

<script>
    var a = 32,b = 45,c = 57;   //利用一个var来声明多个变量用逗号隔开
    var x = 123,
        y = 245,
        z = 100;  //此写法与上面意思一样写法不同而已
</script>

 第三种:重复声明

<script>
   var a = 120; 
   var a = 356;   //这些指令表明使用同一变量名声明两次,造成重复
</script>

 第四种:遗漏声明

<script>
    var m = 12;
    var n = 32;
    alert(m)  //可弹出m的值,却遗漏了下面n的值
</script>

注意细节:
  1.在JS中重复声明虽然是允许的,但在开发中,不要这样用;
  2.在JS中遗漏声明也是允许,但在实际开发时, 也是要尽量避免的;
  3.在JS中,可以通过alert(),来弹出一个变量的值。

3、声明变量的特征有?

特征1:如果仅仅是声明变量,那么变量是有默认值

<script>
    var a;   // 如果你仅仅是声明一个变量,并非赋值,那么它的默认值为undefined
    console.log(a)  // 打印出a的值
</script>

特征2:使用var 声明的变量可以进行提升,提升就是把加var的变量提前最前面

解析:JS代码在执行之前有一个预编译,预编译做了两件事:
  (1)把加var的变量提升,提升的仅仅是声明,而没有赋值部分;
  (2)把函数提升到了代码段(一个script标签就是一个代码段)的最前面。 当预解析完后,才会执行JS代码;
  (3)当函数与变量套用着,加var的变量虽然那个要提升,但由于此时的变量为局部变量,只会提升到函数体的最前面。

例1.1:<script> 
        var a;  //此时只有声明提升到前面而变量值没有
        console.log(a)  // 打印出的a的值为undefined
        var a = 120;  //这一步相当于没操作 
     </script>
例1.2:<script> 
        var a;  //此时只有声明提升到前面而变量值没有
        console.log(a)  // 打印出的a的值为undefined
        var a = 120;  //这一步相当于没操作 
        console.log(a)  //打印出的a的值为120
     </script>
例2:<script> 
       g()             //调用函数
        function g(){
        console.log("g....")  //此时也可以打印出来g...,因为函数整个提升到了前面
       }                        //声明定义变量
    </script>
例3:<script>
        console.log("--------------------")  //打印出----------
        var a;                               //这是将局部变量提升到函数体最前面
        function f(){
            console.log(a)                  //要打印时会去寻找变量,即为undefined
            a = 2;
          }
       f();
    </script>

4、变量分为哪几类?

1.局部变量
  局部变量指在函数内声明的变量。它只能在函数内部访问,在函数外面是不能被访问;就好像是各个地方的方言一样。

例子:<script>
        function f(){
           var name = "wangcai";  //局部变量,因为这个变量放在函数里面
           console.log(name)
         }
        console.log("----"+name) //这里因为name是局部变量,所以只会显示----
       // 函数声明完后,你要使用这个函数,那么你一定要调用这个函数
       f()
     </script>

2.全局变量
  全局指变量指在函数外声明的变量。它在函数内部和外部都可以访问;就如同标准普通话在任何地区都可以用。

例子:<script>
        var age = 100;  //全局变量声明定义了age
        function f(){
          console.log("在函数里面访问的全局变量"+age)  //这里为局部变量只有调用函数后才会打印出来
        }
       console.log(age)  //此为全局变量,在函数外声明的
       f() // 函数调用,这里会将函数的第二行代码执行出来
    </script>

二、函数的认识

1、啥是函数?

  函数可以说成是个功能块,当你给它一个输入值时,在这个功能块中通过某种关系或者说映射,就能得到一个输出值。就像豆浆机,将准备的大豆放到机器中,通过榨汁得到一杯豆浆。

2、如何定义函数?

方式一:函数声明
  用关键字function来声明函数,其中基本格式如下:function  f(){ };其中有f为函数名;()是函数的特殊标志;{}叫函数体或者具体的功能

function  f(){
    console.log("函数声明")
}

方式二:函数表达式
  函数表达式本质上是一个变量;它指的是将以function声明的函数作为表达式放在赋值的右边,重新定义一个变量。

var g = function  f(){
    console.log("函数表达式")
}
f();

区别:声明函数与函数表达式两者在提升阶段不一样;函数声明可以将函数调用写到函数声明之前,而函数表达式则将函数调用提前会出错。

函数声明:
<script>
  f();
  function  f(){
     console.log("函数声明提升")     //此时是可以打印出"函数声明提升"
   }
</script>
函数表达式:
<script>
  f();
  var g = function  f(){
     console.log("函数表达式提升")  //会报错,f没有定义
   }
</script>

3、函数返回值

1.函数在没有写return或者只写了return时,默认返回undefined。

(1) function  f(){
    //这是相当于默认的return undefined;
    }
(2)function  f(){
      return;  //同上,默认的return undefined;
}

2.在一个函数中,执行过return语句后,下面的语句将不再执行。

function  f(){
    console.log("caomeitai")
    return thanks;   //当执行过该语句,下面不再执行
    console.log("xiaoyuzhou")  //并未执行
}

4、函数的参数

  在函数定义与函数调用时,有两个参数:形参与实参。形参即形式参数,代表着在定义函数时,小括号中的参数;实参即实际参数则代表在调用函数时,小括号中的参数。

function  add(x,y){    //这里小括号中的x,y为形参
    return  x+y;
}
console.log(add(2,3));  //在调用了add函数时的2,3为实参