ES6学习笔记（2）- ...的用法

rest参数

es6引入rest参数，用于获取函数的实参，用来代替arguments

// es5
function jishubu() {
	console.log(arguments);  // es5 arguments为object类型，
}

// es6
function jishubu(...args) {
	console.log(args);  // ['张三', '李四', '王五'], args为数组类型，可以用数组的一些方法，比如filter，map，some，every
}
jishubu('张三', '李四', '王五')

扩展运算符

「…」扩展运算符能将「数组」转换为逗号分隔的「参数序列」
例如：
声明一个数组

const arr = ['张三', '李四', '王五'];
// 声明一个函数
function jishubu() {
	console.log(arguments);
}

// 调用
jishubu(arr);  // arguments只有一个元素，是一个数组元素，如图1

jishubu(...arr); // 等同于把arr数组['张三', '李四', '王五']变为参数序列'张三', '李四', '王五'，此时arguments有三个元素，如图2

扩展运算符的应用

1. 数组的合并

const arr = [1, 2, 3];
const arr1 = [4, 5, 6];
// es5
const res = arr.concat(arr1);

// es6
const res1 = [...arr, ...arr1];

2. 数组的克隆

const arr = [1, 2, 3];
// es6
const res = [...arr]; // 浅拷贝

3. 将伪数组转为真正的数组

const divs = document.querySelectorAll('div');
const divArr = [...divs];