乐趣区

关于javascript:ES6五-函数

jiezi

函数

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

  • 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

学习幅员

退出移动版