浅谈前端 | JavaScript函数-一一网

微信公众号搜索【程序媛小庄】，领取全套python全栈教程，还有小庄整理的不断更新的电子书、面试资料等你来拿哦~

前言

JavaScript的小工具也是函数，嗯…..(o(╯□╰)o)直接来看看吧。

函数简介

在JavaScript中定义函数的关键字是function，JavaScript中的函数也分有无参数，基本语法格式如下：

// 函数定义
function 函数名 (形参1, 形参2...){
    // 函数体代码
}

// 函数调用，函数名加()
function(实参1, 实参2...)
复制代码

无参函数

// 语法格式
function f1() {
    // 无参函数代码
    console.log('hello world')
};

// 函数调用
f1();
复制代码

有参函数

// 形参个数与实参个数相同
function func1(a,b)
{
	console.log(a,b);
};
func1(1,2); // 1 2



// 实参个数大于形参个数，实参个数多了也不会报错，只要形参有对应的数据
function func1(a,b)
{
	console.log(a,b);
};
func1(1,2，3，4);  // 1 2



// 实参个数小于形参个数,少的形参就是undefined
function func1(a,b)
{
	console.log(a,b);
};
func1(1); // 1 undefined



// arguments关键字：能够获取函数接收到的所有参数

function func1(a,b)
{	
	console.log(arguments);
	console.log(a,b);
};
func1(1,2,3);
/*
Arguments(3) [1, 2, 3, callee: ƒ, Symbol(Symbol.iterator): ƒ]
1 2
*/



//arguments简单使用

function func2(a,b) {
  if(arguments.length<2){
    console.log('传少了')
  }else if (arguments.length>2){
    console.log('传多了')
  }else{
    console.log('正常执行')
  }
}
复制代码

函数的返回值 – return

// 返回值只有一个
function index()
{
	return 666;
};
res = index();  // 666

// 返回值有多个，只能拿到最后一个
function index()
{
	return 666,999;
}
res = index();  // 999

// 返回值有多个的时候，想要全部的返回值，可以放在数组中
function index()
{
	return [666,999];
}
res = index();  // (2) [666, 999]

// 注意：javascript不支持解压赋值
复制代码

匿名函数

function()
{
	console.log('hello world');
};  // Uncaught SyntaxError: Function statements require a function name

// res相当于函数名,但是这种写法和定义一个有名函数没什么区别
var res = function()
{
	console.log('hello world');
};
res();
复制代码

箭头函数

主要用来处理简单的业务逻辑，类似于python中的匿名函数。

// 箭头左边的是形参 右边的是返回值
var func1 = v => v;
// 等价于
var func1 = function(v)
{
	return v;
};

var func1 = (arg1,arg2) => arg1+arg2;
//等价于
var func1 = function(arg1,arg2)
{
	return arg1+arg2;
}
复制代码

函数的全局变量与局部变量

名称空间的查找顺序与python一致，都是以定义阶段为主：

// 案例1
var city = "BeiJing";
function f() 
{
  var city = "ShangHai";
  function inner()
  {
    var city = "ShenZhen";
    console.log(city);
  }
  inner();
}

f();  // ShenZhen

// 案例2
var city = "BeiJing";
function Bar() 
{
  console.log(city);
}
function f() 
{
  var city = "ShangHai";
  return Bar;
};
var ret = f();
ret();  // BeiJing

// 案例3
var city = "BeiJing";
function f()
{
    var city = "ShangHai";
    function inner()
    {
        console.log(city);
    };
    return inner;
}
var ret = f();
ret();  // ShangHai
复制代码