JavaScript函数操作

函数声明

具名函数

function 函数名(参数列表) {
    函数体
    return 返回值
}

function getSum(num1, num2) {
    document.write(num1 + num2)
}

如果不传参，默认是undefined

undefined+undefined会出现NaN

形参可以给默认值

function getSum(x = 0, y = 0){
    document.write(num1 + num2)
}

函数声明与函数表达式

函数声明：在主代码流中声明为单独的语句的函数：

// 函数声明
function sum(a, b) {
  return a + b;
}

函数表达式：在一个表达式中或另一个语法结构中创建的函数。下面这个函数是在赋值表达式 = 右侧创建的：

// 函数表达式
let sum = function(a, b) {
  return a + b;
};

更细微的差别是，JavaScript 引擎会在 什么时候 创建函数。

函数表达式是在代码执行到达时被创建，并且仅从那一刻起可用。

一旦代码执行到赋值表达式 let sum = function… 的右侧，此时就会开始创建该函数，并且可以从现在开始使用（分配，调用等）。

函数声明则不同。

在函数声明被定义之前，它就可以被调用。

例如下面的代码会正常工作：

sayHi("John"); // Hello, John

function sayHi(name) {
  alert( `Hello, ${name}` );
}

函数调用

函数名()

匿名函数

没有名字的函数，无法直接使用

使用方式：

函数表达式
立即执行函数

1.函数表达式

将匿名函数赋值给一个变量，并且通过变量名称进行调用我们将这个称为函数表达式

语法：

let fn = function(){
    函数体
}

2.立即执行函数

(function(形参){函数体})(实参); //立即执行函数必须加分号

函数参数

动态参数

arguments是函数内部内置的伪数组变量，它包含了调用函数时传入的所有实参

function sum() {
    let s = 0
    for(let i = 0;i < arguments.length;i++){
        s += arguments[i]
    }
    return s
}

剩余参数

剩余参数允许我们将一个不定数量的参数表示为一个数组

function getSum(...other){
    // other得到[1,2,3]
    console.log(other)
}
getSum(1, 2, 3)

展开运算符

展开运算符(…)，将一个数组进行展开

const arr = [1,5,3,8,2]
console.log(...arr) // 1 5 3 8 2

说明：

不会修改原数组

使用场景：

const arr1 = [1,2,3]
//1 求数组最大最小值
Math.max(...arr1)

//2 合并数组
const arr2 = [3,4,5]
const arr = [...arr1, ...arr2]

箭头函数

目的：引入箭头函数的目的是更简短的函数写法并且不绑定this，箭头函数的语法比函数表达式更简洁

使用场景：箭头函数更适用于那些本来需要匿名函数的地方

基本语法

const fn = (x) => {
    console.log(x)
}
fn(1)

//只有一个形参的时候，可以省略小括号
const fn = x => {
    console.log(x)
}
fn(1)

//只有一行代码的时候，可以省略大括号
const fn = x => console.log(x)
fn(1)

//只有一行代码的时候，可以省略return
/*const fn = x => {
    return x + x
}*/
const fn = x => x + x
fn(1)

//箭头函数可以直接返回一个对象(加小括号的函数体返回对象字面量表达式)
const fn = uname => ({ uname: uname });
fn('zhangsan');

箭头函数参数

箭头函数没有arguments动态参数，但是有剩余参数…args

const getSum = (...arr) => {
    let sum = 0
    for(let i = 0;i < arr.length;i++){
        sum += arr[i]
    }
    return sum
}
getSum(2,3,4)

箭头函数this

以前this的指向：谁调用的这个函数，this就指向谁

箭头函数不会创建自己的this，它只会从自己的作用域链的上一层沿用this

总结

函数是值。它们可以在代码的任何地方被分配，复制或声明。
如果函数在主代码流中被声明为单独的语句，则称为“函数声明”。
如果该函数是作为表达式的一部分创建的，则称其“函数表达式”。
在执行代码块之前，内部算法会先处理函数声明。所以函数声明在其被声明的代码块内的任何位置都是可见的。
函数表达式在执行流程到达时创建。

在大多数情况下，当我们需要声明一个函数时，最好使用函数声明，因为函数在被声明之前也是可见的。这使我们在代码组织方面更具灵活性，通常也会使得代码可读性更高。

所以，仅当函数声明不适合对应的任务时，才应使用函数表达式。

SkyLeech's Blog