- ES6允许为函数的参数设置默认值,即直接写在参数定义的后面
function log(x,y = 'World'){
console.log(x,y)
}
log('Hello') // Hello World
log('Hello', 'China') //Hello China
log('Hello','') //Hello
function Point(x=0,y=0){
this.x = x
this.y = y
}
const p = new Point()
p //{x:0, y:0}
- 与解构赋默认值结合使用
function foo({x,y=5}){
console.log(x,y)
}
foo({}) //undefined 5
foo({x:1}) //1 5
foo({x:1,y:2}) //1 2
foo()
//Cannot destructure property 'x' of 'undefined' as it is undefined.
//上面代码指定。如果没有提供参数,函数foo的参数默认为一个空对象
//下面是另一个解构赋默认值的例子
function fetch(url,{body='',method='GET',headers={}}){
console.log(method)
}
fetch('http://example.com',{}) //GET
fetch('http://example.com') //报错
- 函数的length属性,指定了默认值以后,函数的length属性,将返回没有指定默认值的参数个数,也就是说,指定了默认值后,length属性将失真
(function(a){}).length //1
(function(a=5){}).length //0
(function(a,b,c=5){}).length //2
上面代码中, length 属性的返回值,等于函数的参数个数减去指定了默认值的参数个数。比如,上面最后一个函数,定义了 3 个参数,其中有一个参数 c 指定了默认值,因此 length 属性等于 3 减去 1 ,最后得到 2 。
这是因为 length 属性的含义是,该函数预期传入的参数个数。某个参数指定默认值以后,预期传入的参数个数就不包括这个参数了。同理,后文的 rest 参数也不会计入 length 属性。
(function(...args) {}).length // 0
如果设置了默认值的参数不是尾参数,那么 length 属性也不再计入后面的参数了。
(function(a=0,b,c){}).length //0
(function(a,b=1,c){}).length //1
- rest ,用于获取函数的多余参数,这样就不需要使用arguments对象了,rest参数搭配的变量是一个数组,该变量将多余的参数放入数组中
function add(...values){
let sum = 0
for(var val of values){
sum += val
}
return sum
}
add(2,5,3) //10
上面代码的add函数是一个求和函数,利用rest参数,可以向该函数传入任意数目的参数,下面是一个rest参数代替arguments变量的例子
//arguments变量的写法
function sortNumbers(){
return Array.prototype.slice.call(arguments).sort()
}
//arguments对象不是数组,而是一个类数组对象,所以为了使用数组的方法,必须使用Array.prototype.slice.call先将其转为数组
//rest参数的写法
const sortNumbers = (...numbers) => numbers.sort()
//rest是一个真正的数组,数组特有的方法都可以使用
function push(array,...items){
items.forEach(function(item){
array.push(item)
})
}
var a = []
push(a,1,2,3)
a //[1,2,3]
//注意,rest参数之后不能再有其他参数(即只能是最后一个参数),否则会报错
function f(a,...b,c){}
//VM1054:1 Uncaught SyntaxError: Rest parameter must be last formal parameter
//函数的length属性,不包括rest参数
(function(a){}).length //1
(function(...a){}).length //0
(function(b,...a){}).length //1
- 函数的name属性,返回该函数的函数名
function foo(){}
foo.name //foo
//需要注意的是,ES6对这个属性的行为做出了一些修改,如果将一个匿名函数赋值给一个变量,ES5的name属性会返回空字符串,而ES6的name属性会返回实际的函数名
var f = function(){}
//ES5
f.name //''
//ES6
f.name //f
//如果将一个具名函数赋值给一个变量,则ES5和ES6的name属性都返回这个具名函数原本的名字
const bar = function baz(){}
//ES5
bar.name //baz
//ES6
bar.name //baz
- 箭头函数,ES6允许使用箭头函数
var f = v => v
//等同于
var f = function(v){
return v
}
//如果箭头函数不需要参数或需要多个参数,就使用一个圆括号代表参数部分
```javascript
var f = () => 5
//等同于
var f = function(){return 5}
var sum = (num1,num2) => num1 + num2
//等同于
var sum = function(num1,num2){
return num1 + num2
}
//如果箭头函数的代码块多于一条语句,就要使用大括号将它们括起来,并且使用return语句返回
var sum = (num1,num2) => {return num1 + num2}
!!由于大括号被解释为代码块,所以如果箭头函数直接返回一个对象,必须在对象外面加上括号,否则会报错
let getTempItem = id => {id:id,name:'Temp'}
//报错,VM1866:1 Uncaught SyntaxError: Unexpected token ':'
let getTempItem = id => ({id:id,name:'Temp'})
箭头函数可以与变量解构结合使用
const full = ({first,last}) => first + ' ' + last
//等同于
function full(person){
return person.first + ' ' + person.last
}
箭头函数的一个用处是简化回调函数
//一般写法
[1,2,3].map(function(x){
return x * x
})
//箭头函数写法
[1,2,3].map( x => x * x )
//一般写法
let values = [1,4,2,4,3,5,6,2]
var result = values.sort(function(a,b){
return a - b
})
//箭头函数写法
var result = values.sort((a,b)=>a-b)
//[1, 2, 2, 3, 4, 4, 5, 6]
//下面是rest参数与箭头函数结合的例子
const numbers = (...nums) => nums
numbers(1,2,3,4,5) //[1,2,3,4,5]
const headAndTail = (head,...tail) => [head,tail]
headAndTail(1,2,3,4,5) //[1,[2,3,4,5]]
箭头函数使用注意点:
- 函数体内的this对象,就是定义时所在的对象,而不是使用时所在的对象
- 不可以当做构造函数,也就是不可以使用new命令
- 不可以使用arguments对象,该对象在函数体内不存在,如果要用,可以用rest参数代替
- 不可以使用yield命令,因此箭头函数不能用作Generator函数
function foo(){
setTimeout(()=>{
console.log('id:',this.id)
},100)
}
var id = 21
foo.call({id:42}) //id:42
//上面代码中,setTimeout的参数是一个箭头函数,这个箭头函数的定义生效是在foo函数生成时,而它的真正执行要等到100毫秒后,如果是下面的普通函数,执行时this应该指向全局对象window,这时应输出21,但是箭头函数导致this总是指向函数定义失效时所在的对象,所以输出的是42
function foo(){
setTimeout(function(){
console.log('id:',this.id)
},100)
}
var id = 21
foo.call({id:42}) //id:21
//箭头函数可以让setTimeout里面的this,绑定定义时所在的作用域,而不是指向运行时所在的作用域