函数

• 函数（函数办法更新【默认值、不确定参数、箭头函数】）

• Default Parameters —— 如何解决函数参数默认值？

  • ES5
  • ES6
  • 函数参数个数

• Rest Parameter —— 怎么解决不确定参数？

  • ES5
  • ES6

• Spread Operator（rest 参数的逆运算）

  • ES5
  • ES6

• Arrow Functions(箭头函数)

  • 申明

  • 参数状况

    • 能够加参数
    • 有且只有一个参数的时候，括号能够省略
    • 花括号什么状况下能够省略
  • this 的指向，不是谁调用指向谁，是谁定义指向谁
• ES6-ES10 学习幅员

函数办法更新【默认值、不确定参数、箭头函数】

Default Parameters —— 如何解决函数参数默认值？

判断函数有没有默认值不能应用 a || b，只能判断其是否等于 undefined

ES5

// x 是必传值，y 和 z 是不用传值
function f (x, y, z) {if ( y === undefined) {y = 7}
    if (z === undefined) {z = 42}
    return x + y + z
}

console.log(f(1)) // 50
console.log(f(1, 8)) // 51
console.log(f(1, 8, 43)) // 52

ES6

函数参数是从左到右解析，如果没有默认值会被解析成 undefined

// x 是必传值，y 和 z 是不用传值
function f (x, y = 7, z = 42) {return x + y + z}
console.log(f(1)) // 50
console.log(f(1, 8)) // 51
console.log(f(1, 8, 43)) // 52

如何让 y 只取默认值

// 有默认值的放最初
// 能够看进去原理和 ES5 是相似的
console.log(f(1, undefined, 43))

默认值除了常量，还能够是其余参数的运算表达式

function f (x, y = 7, z = x + y) {return x * 10 + z}
console.log(f(1, undefined, 2)) // 12--1 * 10 + 2
console.log(f(1))  // 18--1 * 10 + (1 + 7)
console.log(f(1, undefined))  // 18--1 * 10 + (1 + 7)

函数参数个数

ES5 应用 arguments 示意函数参数的伪数组，arguments.length 示意参数的个数

function f (x, y, z) {return arguments.length}
console.log(f(1))  // 1
console.log(f(1, undefined)) // 2
console.log(f(1, undefined, 2)) // 3

ES6 中不反对 arguments

// length 是函数没有默认值的参数的个数，并不是执行的时候传入参数的个数
function f (x, y = 7, z = x + y) {return f.length}
console.log(f(1))  // 1
console.log(f(1, undefined)) // 1
console.log(f(1, undefined, 2)) // 1

Rest Parameter —— 怎么解决不确定参数？

ES5

应用 arguments

function sum () {
    let num = 0
    // 两种办法进行遍历
    // Array.prototype.forEach.call(arguments, function (item) {
    //     num += item * 1
    // })
    
    Array.from(arguments).forEach(function (item) {num += item * 1})
    return num
}
console.log(sum(1, 2, 3)) // 6

ES6

应用 Rest

1. 数组
2. 示意所有参数
3. 能够拆开示意局部参数
4. 残余参数只能应用一次，且放在最初的地位上

function sum (...nums) {
    // ... —— Rest parameter 所有的参数都在三点前面的 nums 变量中
    let num = 0
    // 间接当作数组遍历
    nums.forEach(function (item) {num += item * 1})
    return num
}
console.log(sum(1, 2, 3)) // 6

// 将第一个参数 × 2 + 残余参数
function sum (base, ...nums) {
    let num = 0
    nums.forEach(function (item) {num += item * 1})
    return base * 2 + num
}
console.log(sum(1, 2, 3)) // 7 —— 1 * 2 + 5

Spread Operator（rest 参数的逆运算）

Spread Operator 和 Rest Parameter 是形似但相同意义的操作符，简略来说 Rest Parameter 是把不定参数“收敛”成数组，而 Spread Operator 是把固定数组“打散”到对应的参数中

有一个数组，要整体当成参数

ES5

// 计算三角形周长
function sum (x = 1, y = 2, z = 3) {return x + y + z}
let data = [4, 5, 6]
console.log(sum(data[0], data[1],  data[2])) // 15
console.log(sum.apply(this, data)) // 15
// apply() 办法：承受两个参数，一个是在其中运行函数的作用域，另一个是参数数组（能够是 Array 的实例，也能够是 arguments 对象），它将作为参数传给 Function（data–>arguments）// 定义：办法调用一个具备给定 this 值的函数，以及作为一个数组（或相似数组对象）提供的参数。// call() 办法与 apply() 办法的区别在于承受参数的形式不同，应用 call 办法是传递给函数的参数必须一一例举进去
console.log(sum.apply(null, [4, 5, 6])) // 15

ES6

console.log(sum(...data)) // 15

Arrow Functions(箭头函数)

() => {}

申明

右边括号外面是参数，后边括号外面是函数体

// ES5 申明函数
function hello () {}
let hello = function () {}

//ES6
let hello = () => {console.log('hello world')
}
hello() //hello world

参数状况

能够加参数

let hello = (name) => {console.log('hello world' + name)
}
hello('beijing') //hello world beijing

有且只有一个参数的时候，括号能够省略

let hello = name => {console.log('hello world' + name)
}
hello('beijing') //hello world beijing

花括号什么状况下能够省略

1. 返回是一个表达式（没有花括号的时候，表达式的值会主动 return，有了花括号，必须写 return）

let sum = (z, y, z) => x + y + z
console.log(sum(1, 2, 3)) // 6
//return 和花括号都能够省略 

1. 返回是一个对象，要用小括号括住

let sum = (x, y, z) => ({
    x: x,
    y: y,
    z: z
})
// 小括号是函数表达式的意思，这个时候的花括号示意对象 

1. 其余状况老老实实写

this 的指向，不是谁调用指向谁，是谁定义指向谁

换句简略的话说，箭头函数不扭转 this 的指向

// ES5
let test = {
    name: 'test',
    say: function () {console.log(this.name)
    }
}
test.say()   // test

// ES6
let test = {
    name: 'test',
    say: () => {console.log(this.name)
    }
}
test.say()   // undefined
// 因为箭头函数中对 this 的解决是定义时，this 的指向也就是 test 外层所指向的 window，而 window 没有 name 属性，所以是 undefined

学习幅员