Es6 - 扩展运算符和rest运算符

252 阅读1分钟

扩展运算符和rest运算符

它们可以很好的为我们解决参数和对象数组未知情况下的编程,让我们的代码更健壮和简洁。

对象扩展运算符 (。。。)

function fun(...arg) {  console.log(arg[0])  console.log(arg[1])  console.log(arg[2])}fun('aa', 'bb')
打印结果  aa  bb undefined

即使没有第三个参数也不会报错 aa bb undefined

使用场景

var arr1 = [1,2,3]var arr2 = arr1arr2.push(4)console.log(arr1)     [1, 2, 3, 4]console.log(arr2)     [1, 2, 3, 4]

arr1 和 arr2 地址内存空间相同,会相互影响
修改

var arr1 = [1,2,3]var arr2 = [...arr1]arr2.push(4)console.log(arr1)     [1, 2, 3]console.log(arr2)     [1, 2, 3, 4]

问题解决

rest运算符

function fun(first, ...arg) {  console.log(arg.length);}fun(0, 1, 2, 3, 4, 5, 6, 7);

es5

function fun(first, ...arg) {  console.log(arg.length);  for (let i = 0; i < arg.length; i++) {    console.log(i)  }}fun(0, 1, 2, 3, 4, 5, 6, 7);

es6

function fun(first, ...arg) {  console.log(arg.length);  for (let val of arg) {    console.log(val)  }}fun(0, 1, 2, 3, 4, 5, 6, 7);

rest 是剩余的意思,也就是说 除了已知确定的参数之外,其他剩余的参数可以使用 (...arg)展开,在 es6 可以使用 for of 的循环方式代替 es5 的for 循环。