1-6 扩展运算符

大家好，今天我们来学习一下扩展运算符，什么是扩展运算符呢？扩展运算符在开发中又有什么样的作用呢？下面我们来一起学习一下吧

扩展运算符：把数组或者类数组展开成用逗号隔开的值 ，把逗号隔开的值组合成一个数组

扩展运算符

我们来看一下什么是扩展运算符

function foo(a, b, c){
  console.log(a, b, c)
}
let arr = [1, 2, 3]
foo(...arr)  // 1, 2, 3

在ES5 之前如果我们想把两个数组合并需要怎么写呢？

let arr1 = [1, 2, 3]
let arr2 = [4, 5, 6]
Array.prototype.push.apply(arr1, arr2)
console.log(arr1)  // [1, 2, 3, 4, 5, 6]

使用扩展运算符就可以这么写,得到的效果是一样的

arr1.push(...arr2)
console.log(arr1)  // [1, 2, 3, 4, 5, 6]

看一下字符串会输出什么

let str = 'xiaobai'
var arr = [...str]
console.log(arr) // ['x', 'i', 'a', 'o', 'b', 'a', 'i']

我们看到对于字符串，相当于字符串每一个字符打散成用逗号隔开的值，变成数组里面的每一个值

rest参数

rest 参数也叫剩余参数，下面我们来看一下什么是剩余参数，我们先回顾一下之前的文章

// 在ES5中 如果我们想拿到传进来的参数 需要使用arguments 生成一个伪数组再去操作
function foo(x, y, z){
  // arguments 可以输出一个伪数组
  console.log(arguments)
  let sum = 0
  Array.prototype.forEach.call(arguments, function(item){
    sum += item
  })
  return sum
}
console.log(foo(1, 2))  // 3
console.log(foo(1, 2, 3))  // 6

//  ES6 中 可以直接使用 Array.from方法
function foo(x, y, z){
  let sum = 0
  Array.from(arguments).forEach(function(item){
    sum += item
  })
  return sum
}
console.log(foo(1, 2))  // 3
console.log(foo(1, 2, 3))  // 6

我们通过 ... 可以直接把当前的参数直接变成一个数组

function(...args){
  console.log(args)
  let sum = 0
  args.forEach(function(item){
    sum += 0
  })
  return sum
}
console.log(foo(1, 2))  // [1, 2]  3
console.log(foo(1, 2, 3))  // [1, 2, 3]  6

• 对于不确定参数的时候可以用剩余运算符

function foo(x, ...args){
  console.log(x, args)  // 1   [2, 3, 4] 

}
foo(1, 2, 3, 4)

解构赋值也同样可以使用扩展运算符，下面我们来举例看一下

let [x , ...y] = [1, 2, 3]
console.log(x) // 1
console.log(y) // [2, 3]

• 以上举例我们可以看到如果 ... 在实参上就是扩展运算符，在形参上面就是rest参数

感谢阅读，欢迎大家点赞，收藏，转发，一键三连。