PHP8.1.21版本已发布
vue8.1.21版本已发布
jquery8.1.21版本已发布

博客列表 > 关于JS的变量及函数浅谈

关于JS的变量及函数浅谈

我是贝壳
我是贝壳 原创
2021年01月06日 10:57:32 625浏览

关于JS的变量及函数浅谈

1. 变量与常量的区别

解析:

变量及常量都是我们用来指定某个特定的数据的名称,如三角形中的三边a、b、c一样。
变量主要有以下两大类型:

原始类型

  • 字符串类型
  • 数值类型
  • 布尔类型
  • undefined(声明变量但没有初始化时,变量的类型也是undefined)
  • null(object的实例)

引用类型

  • 数组
  • 对象
  • 函数

区别:

  • 变量的声明与初始化两个步骤可以分开完成,即变量可以先声明,后面实际使用的时候再进行初始化,且可以重复赋值(尽量不要重复声明)。
  • 但是常量不同,它必须在声明的同时完成初始化,且后续只能引用,不能重新赋值。

命名规则:

  • 驼峰法:首字母小写,第二个单词开始每个单词的首字母大写,如:
    1. let userName = '作者';
  • 帕斯卡:又称为大驼峰法,即每个单词的首字母都大写,如:
    1. let UserName = '作者';
  • 匈牙利:在命名前加一字母来标识变量的类型。
    1. let Bisempty = false;

结合现在大多数人的编写习惯,建议使用驼峰法

2. 函数与匿名函数的区别

普通函数的声明格式为:

  1. function getName(name){
  2. return name;
  3. }

但是匿名函数的声明可以没有函数名称,通常是赋值到某个变量或者直接调用,如:

  1. let sum = function(a,b){
  2. return a+b;
  3. }

普通函数定义之后,可以在代码的任何位置进行调用。如果需要避免这种情况,则可以使用匿名函数,将函数匿名定义赋给某个变量之后,遵从变量必须先定义后使用的原则!

3. 箭头函数的参数特征

箭头函数本意是用来简化匿名函数的声明。

普通匿名函数声明为
let sum = function(a,b){
return a+b;
}

使用箭头函数简化后的声明为:

  1. let sum = (a,b) =>{
  2. return a+b;
  3. }

当函数体只有一条语句时,还可以进一步简化:

  1. let sum = (a,b) => a + b;

如果只有一个参数,小括号也可以省略,如

  1. let sum = a => 2a;

但是如果没有参数,小括号不可以省略!

注:(1)箭头函数没有原型属性prototype,不能当构造函数用
(2)箭头函数中的this,始终与它的上下文绑定!

4. 闭包原理与实现并演示它

闭包原理:能够访问自由变量的函数,自由变量既不是函数参数也不是私有变量,存在于函数调用上下文中。所以理论上来讲,任何函数都是闭包。任何子函数都是闭包

  1. let num = 100 ;
  2. function add(a,b){
  3. let t = 1;
  4. function add2(a,b){
  5. return a+b+t+num;
  6. }
  7. }

以上代码中的num就是一个自由变量,t相对于add()来讲是私有变量,但是相对于add2()来讲,也是一个自由变量,自由变量会暂时存在计算机内存中,不像私有变量一样用完马上消失。所以使用闭包可以访问到函数内部的私有变量,但是某种程度上,也会造成内存浪费。

5. 四种高阶函数

高阶函数的定义:使用函数作为参数或者将函数作为返回值的函数,四种高阶函数分别如下:

5.1 回调函数,最常用的场景就是事件方法,下面就是把function()作为addEventListener方法的参数

  1. document.addEventListener('click',function(){
  2. alert('hello world');
  3. })

5.2 偏函数:当遇到参数非常多的函数,可以考虑先传递一部分参数,然后把剩下的参数交给函数的返回函数处理。这样就能简化函数参数的声明。

  1. let sum = function(a,b,c,d){
  2. return a+b+c+d;
  3. }
  4. let sum2 = function(a,b){
  5. return function(c,d){
  6. return a+b+c+d;
  7. }
  8. }
  9. let f1 = sum(1,2);
  10. console.log(f1(3,4));

5.3 柯里化:更为极端的偏函数,同样是5.2上面的代码,柯里化之后,可写成以下代码,简化函数参数的调用。

  1. sum = function(a){
  2. return function(b){
  3. return function(c){
  4. return function(d){
  5. return a+b+c+d;
  6. }
  7. }
  8. }
  9. }
  10. console.log(sum(1)(2)(3)(4));

5.4 纯函数:完全独立于调用上下文,返回值只能受到传入的参数影响。如下:

  1. function sum(a,b){
  2. return a+b;
  3. }
声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议