title: 函数扩展 speaker: 刘经济 transition: cards files: /css/common.css

[slide]

ESMAScript 6 之函数扩展

演讲者：刘经济

[slide]

参数默认值 {:&.flexbox.vleft}

ES6允许为函数的参数设置默认值，即直接写在参数定义的后面

function person(name = 'zhangsan', age = 30) {
	console.log('My name is' + name + ', I am ' + age + ' years old');
}
person('lisi', 20);
person('wangwu', 26);
person();

[slide]

参数默认值 {:&.flexbox.vleft}

优点：

1、代码可读性更强，更容易意识到哪些参数是可省略的

2、利于代码优化，即使以后调用时不传参数也不会导致报错

注意：参数默认被声明过，不可以用let或const再次生命，否则报错

[slide]

参数默认值 {:&.flexbox.vleft}

##解构赋值默认值结合使用

function person({name, sex = 'male' }) {
	console.log(name + 'is' + sex);
}
person({name: 'zhangsan'});

[slide] #rest参数 {:&.flexbox.vleft} ES6引入rest参数（形式为“...变量名”），用于获取函数的多余参数，这样就不需要使用arguments对象了。

rest参数搭配的变量是一个数组，该变量将多余的参数放入数组中

function add(...values) {

	let sum = 0;
	for(var val of values) {
		sum += val;
	}

	return sum;
}
add(1,2,3)
add(4,5,6,6,7,9);

注意：rest参数必须放在最后位置，之后不能再有其他参数，否则报错

[slide]

#扩展运算符(...) {:&.flexbox.vleft}

扩展运算符是三个点(...)，它将数组转为用逗号分隔的参数序列

function add(x = 1, y = 2, z = 3) {
	console.log(x + y + z);
}
add(...[1, 2, 3]);
add(...[5, 6, 7]);
add(...[1, 2]);
add(...[3]);

[slide]

#扩展运算符(...) {:&.flexbox.vleft}

##应用一：合并数组

let arr1 = ['a', 'b'];
let arr2 = ['1', '2', 3];
let arr3 = ['人', '神'];
let arr4 = ['共', '难'];
[...arr1, ...arr2, ...arr3, ...arr4];
// [ 'a', 'b', '1', '2', 3, '人', '神', '共', '难' ]

[slide]

#扩展运算符(...) {:&.flexbox.vleft}

##应用二：与解构赋值结合，生成数组

const [first, ...rest] = [1, 2, 3, 4, 5];
first // 1
rest // [2, 3, 4, 5]

const [first, ...rest] = [];
first // undefined
rest = [];

const [first, ...rest] = ['foo'];
first // foo
rest // []

[slide]

#扩展运算符(...) {:&.flexbox.vleft}

##应用三：函数返回值

扩展运算符可以解决函数返回多个值的问题

function getStrLengt(str) {
	return [...str]
}

[slide]

#扩展运算符(...) {:&.flexbox.vleft}

##应用四：字符串转换为数组

[...'hello'];
// ['h', 'e', 'l', 'l', 'o'];

[slide]

#扩展运算符(...) {:&.flexbox.vleft}

##应用五：实现Iterator接口的对象

任何Iterator接口的对象，都可以用扩展运算符转为数组

比如querySelectorAll获取的对象, Map, Set, Generator函数都可以通过扩展运算符转换为数组

let nodelist = document.querySelectorAll('div');
[...nodelist];

注意：没有实现Iterator接口的类似数组对象，不能使用扩展运算符转换为真正的数组，否则会报错

[slide] #箭头函数(=>) {:&.flexbox.vleft}

let f = (num1, num2) => num1 + num2;
// 等同于
var f = function(num1, num2) {
	return num1 + num2;
}

[slide] #箭头函数(=>) {:&.flexbox.vleft}

1、如果箭头函数的代码块部分多于一条语句，就要使用大括号将它们括起来，并且使用return语句返回

var sum = (num1, num2) => { return num1 + num2; }

2、由于大括号被解释为代码块，所以如果箭头函数直接返回一个对象，必须在对象外面加上括号

var getTempItem = id => ({ id: id, name: "Temp" });

3、箭头函数可以与变量解构结合使用

const full = ({ first, last }) => first + ' ' + last;
// 等同于
function full( person ){
  return person.first + ' ' + person.last;
}

[slide]

#箭头函数(=>) {:&.flexbox.vleft}

注意：

1、函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象

2、不可以当作构造函数，也就是说，不可以使用new命令，否则会抛出一个错误

3、不可以使用arguments对象，该对象在函数体内不存在。如果要用，可以用Rest参数代替

4、不可以使用yield命令，因此箭头函数不能用作Generator函数

5、函数体内不存在arguments、super、new.target等变量

6、因为没有自己的this，所以也不能用call(), apply(), bind()去修改this指向

[slide] #函数绑定 {:&.flexbox.vleft}

函数绑定运算符(::)，双冒号左边是一个对象，右边是一个函数。

该运算符会自动将左边的对象，作为上下文环境（即this对象），绑定到右边的函数上面

1、如果双冒号左边为空，右边是一个对象的方法，则等于将该方法绑定在该对象上面

2、由于双冒号运算符返回的还是原对象，因此可以采用链式写法

let foo = 'foo'
let obj = {
	foo: 'obj'
}
let bar = {
	foo: 'bar'
}
console.log(obj::obj.foo); // obj
console.log(bar::obj.foo); // bar