默认参数
- 对于函数而言，经常会用到参数，关于参数的默认值通常都是写在函数体中，如在 ES5 写法
function foo(x, y) {
y = y || 'world'
console.log(x, y)
}
foo('hello', 'defualt')
foo('hello', 0)
- 当一个函数有很多参数涉及初始化的时候，这样写代码不美观
function foo(x, y = 'world') {
console.log(x, y)
}
foo('hello', 0)
函数参数是从左到右解析，如果没有默认值会被解析成 undefined
- 如果我们想让具体某个参数使用默认值，我们可以使用 undefined 进行赋值
function f(x, y = 7, z = 42) {
return x + y + z
}
console.log(f(1, undefined, 43)) // 51
- ES6中不仅可以给参数默认赋值具体的数值，同时参数赋值支持参数的逻辑运算进行赋值
function f(x, y = 7, z = x + y) {
return z * 0.5
}
console.log(f(1, 7)) // 4
- 在函数体内，有时候需要判断函数有几个参数，一共有2个办法。
在 ES5 中可以在函数体内使用 arguments 来判断。
function foo(a, b = 1, c) {
console.log(arguments.length)
}
foo('a', 'b') //2
在 ES6 中不能再使用 arguments 来判断了，但可以借助 Function.length 来判断。
Function.length 是统计第一个默认参数前面的变量数
function foo(a, b = 1, c) {
console.log(foo.length)
}
foo('a', 'b') // 1
function foo(a = 2, b = 1, c) {
console.log(foo.length)
}
foo('a', 'b') // 0
Rest 参数
- 写函数的时候，不是很确定参数有多少个，求和运算
function sum() {
let num = 0
Array.prototype.forEach.call(arguments, function(item) {
num += item * 1
})
return num
}
console.log(sum(1, 2, 3)) // 6
console.log(sum(1, 2, 3, 4)) // 10
- ES6不是很确定参数有多少个，求和运算
function sum(...nums) {
let num = 0
nums.forEach(function(item) {
num += item * 1
})
return num
}
console.log(sum(1, 2, 3)) // 6
console.log(sum(1, 2, 3, 4)) // 10
Rest Parameter 也可以和其他参数一起来用，比如：
function sum(base, ...nums) {
let num = base
nums.forEach(function(item) {
num += item * 1
})
return num
}
console.log(sum(30, 1, 2, 3)) // 36
console.log(sum(30, 1, 2, 3, 4)) // 40
arguments 不是数组，所以不能直接使用数组的原生 API 如 forEach，而 Rest Parameter 是数组，可以直接使用数组的原生 API。
扩展运算符
Spread Operator 和 Rest Parameter 是形似但相反意义的操作符，简单的来说 Rest Parameter 是把不定的参数“收敛”到数组，而 Spread Operator 是把固定的数组内容“打散”到对应的参数。
function sum(x = 1, y = 2, z = 3) {
return x + y + z
}
console.log(sum(...[4])) // 9
console.log(sum(...[4, 5])) // 12
console.log(sum(...[4, 5, 6])) // 15
rest参数是讲不确定的参数收到数组中sum(1, 2, 3)，function sum(...nums) {}
扩展运算符是将固定的数组内容打散到对应的的参数 sum(...[4, 5, 6]) function sum(x = 1, y = 2, z = 3) {}
所以可以知道Rest 参数用来解决函数参数不确定的场景，扩展运算符用来解决已知参数集合应用到固定参数的函数上
假如没有扩展运算符，则需要这样写
function sum(x = 1, y = 2, z = 3) {
return x + y + z
}
console.log(sum.apply(null, [4])) // 9
console.log(sum.apply(null, [4, 5])) // 12
console.log(sum.apply(null, [4, 5, 6])) // 15
length属性
function foo(x, y, z) {
console.log(x, y)
}
console.log(foo.length) //3
函数指定了默认值以后，函数的length属性，将返回没有指定默认值的参数个数。
function foo(x = 1, y = 2, z = 3) {
console.log(x, y)
}
console.log(foo.length)
// 0
name属性
function foo() {}
foo.name // "foo"
箭头函数(常用)
之前声明函数需要使用 function
function hello() {
console.log('say hello')
}
// 或
let hello = function() {
console.log('say hello')
}
ES6函数
let hello = () => {
console.log('say hello')
}
//带参数
let hello = (name) => {
console.log('say hello', name)
}
// 或者
let hello = name => {
console.log('say hello', name)
}
如果只有一个参数，可以省略括号，如果大于一个参数一定要记得带括号
- 如果返回值是表达式
如果返回值是表达式可以省略 return 和 {}
let pow = x => x * x
- 如果返回值是字面量对象
let person = (name) => ({
age: 20,
addr: 'Beijing City'
})
- 箭头函数this
普通函数的this
let foo = {
name: 'es',
say: function() {
console.log(this.name)
}
}
console.log(foo.say()) // es
普通函数的写法，say 在被调用之后，this 指向的是调用 say 方法的对象，显示是 foo 对象，所以 this === foo this.name 也就是 foo.name
用箭头函数，this指向问题
let foo = {
name: 'es',
say: () => {
console.log(this.name, this)
}
}
console.log(foo.say()) // undefined
因为箭头函数中对 this 的处理是定义时，this 的指向也就是 foo 外层的所指向的 window，而 window 没有 name 属性，所以结果是 undefined。
1、箭头函数中this指向定义时所在的对象，而不是调用时所在的对象
2、箭头函数不可以当作构造函数
3、箭头函数不可以使用arguments对象
网友评论