1. 默认参数
1.1 ES6 之前设置默认参数
function log(x, y) {
y = y || 'World';
console.log(x, y);
}
log('Hello') // Hello World
log('Hello', 'China') // Hello China
log('Hello', '') // Hello World
1.2 es6写法
function log(x,y="ben"){
console.log(x+" "+y);
};
log("hello"); //hello ben
log("hello","yuan"); //hello yuan
log("hello",""); //hello
1.3 参数变量是默认声明的,所以不能用let或const再次声明。
function foo(x = 5) {
let x = 1; // error
const x = 2; // error
}
2.不定参数(rest 参数)
2.1不定参数用来表示不确定参数个数,形如,...变量名——是一个数组,该变量将多余的参数放入数组中
function ben(...person){
console.log(person.length);
console.log(person[0]);
console.log(person[1]);
}
ben(1,3,5);
2.2函数的length属性,不包括rest 参数
function ben(a,...person){
console.log(person[0]);
console.log(person[1]);
console.log(a);
}
ben(1,3,5);
console.log(ben.length); //1
2.3rest 参数之后不能再有其他参数(即只能是最后一个参数),否则会报错
function ben(a,...person,b){
console.log(person[0]);
console.log(person[1]);
console.log(a);
}
ben(1,3,5); //Rest parameter must be last formal parameter
console.log(ben.length); //1
3.箭头函数
基本语法是: 参数 => 函数体
3.1 基本用法
var f = v => v;
//等价于
var f = function(a){
return a;
}
f(1); //1
3.2 如果箭头函数不需要参数或需要多个参数,就使用一个圆括号代表参数部分
var f = () => 5;
// 等同于
var f = function () { return 5 };
var sum = (num1, num2) => num1 + num2;
// 等同于
var sum = function(num1, num2) {
return num1 + num2;
};
3.3 多个语句和单个返回
如果箭头函数的代码块部分多于一条语句,使用大括号将它们括起来,并且使用return语句返回。
当箭头函数函数体有多行语句,用 {} 包裹起来,表示代码块,当只有一行语句,并且需要返回结果时,可以省略 {} , 结果会自动返回
var f = (a,b) => {
let result = a+b;
return result;
}
f(6,2); // 8
3.4返回对象
// 报错
var f = (id,name) => {id: id, name: name};
f(6,2); // SyntaxError: Unexpected token :
// 不报错
var f = (id,name) => ({id: id, name: name});
f(6,2); // {id: 6, name: 2}
3.5 应用——回掉函数的匿名函数写法简单
setTimeout((name,age) => {
console.log(name,age);
},1000);
3.6 箭头函数的this
(1)函数体内的this对象,就是定义时所在的对象,而不是使用时所在的对象。前版本this对象的指向是可变的,但是在箭头函数中,它是固定的。
(2)不可以当作构造函数,也就是说,不可以使用new命令,否则会抛出一个错误。
(3)不可以使用arguments对象,该对象在函数体内不存在。如果要用,可以用 rest 参数代替。
function foo() {
setTimeout(() => {
console.log('id:', this.id);
}, 100);
}
var id = 21;
foo.call({ id: 42 });
setTimeout的参数是一个箭头函数,这个箭头函数的定义生效是在foo函数生成时,而它的真正执行要等到 100 毫秒后。如果是普通函数,执行时this应该指向全局对象window,这时应该输出21。但是,箭头函数导致this总是指向函数定义生效时所在的对象(本例是{id: 42}),所以输出的是42。
var Person = {
'age': 18,
'sayHello': function () {
setTimeout(function () {
console.log(this.age);
});
}
};
var age = 20;
Person.sayHello(); // 20
var Person1 = {
'age': 18,
'sayHello': function () {
setTimeout(()=>{
console.log(this.age);
});
}
};
var age = 20;
Person1.sayHello(); // 18
懵逼???
var Person = {
'age': 18,
'sayHello': ()=>{
console.log(this.age);
}
};
var age = 20;
Person.sayHello(); // 20
// 此时 this 指向的是全局对象
var Person1 = {
'age': 18,
'sayHello': function () {
console.log(this.age);
}
};
var age = 20;
Person1.sayHello(); // 18
// 此时的 this 指向 Person1 对象
网友评论