扩展运算符和剩余参数是什么意思？应用场景？剩余参数 1.1 剩余参数是什么剩余参数的作用：将传入的参数组合为一个数

剩余参数 1.1 剩余参数是什么剩余参数的作用：将传入的参数组合为一个数组，即使没有传值，也会是一个空数组

语法：通过 ...参数名定义，使用时直接使用对应参数名即可

const add = (x,y,...args) => {
  console.log(args) // [3,4,5,6,7]
}
add(1,2,3,4,5,6,7) //1对应x,2对应y，剩下的会被组合成数组（剩余参数）

.2 剩余参数的注意事项箭头函数的参数部分即使只有一个剩余参数，也不可以省略圆括号

// 不使用剩余参数时，当只有一个参数可以省略圆括号
const num = x => {
  console.log(x)
}
// 当使用了剩余参数，即使只有一个剩余参数，也不可以省略圆括号
const add = (...args) => {
  console.log(args)
}
num(1)
add(5,2,3,4)

1 2 3 4 5 6 7 8 9 10

使用剩余参数代替 arguments 获取实际参数

箭头函数无arguments对象，可以通过剩余参数来代替

const fun = (...args) => {
  console.log(args)
}
fun('嘟嘟',18,'女')

1 2 3 4

剩余参数只能放在参数列表的最后，剩余参数的后面不能再有其他参数，否则会报错，剩余参数的前面可以有其他参数

3 剩余参数的应用当不明确传入的实参有多少时，可以使用剩余参数接收所有的参数

const add = (...args) => {
  let sum = 0
  for(let i = 0; i < args.length; i++) {
    sum += args[i]
  }
  return sum
}

console.log(add(8,2,9,10,23,87))

1 2 3 4 5 6 7 8 9 剩余参数与解构赋值结合使用（剩余元素）剩余参数不一定要作为函数参数使用不管如何使用，都必须满足：剩余参数必须位于最后

const [a,...args] = [1,23,13,14,15]
console.log(args)

const {x,y,...args1} = {x:12,y:19,z:829,i:31,j:12}
console.log(x,y,args1)

1 2 3 4 5

扩展运算符扩展运算符的作用：合并多个数组或对象有扩展运算符的变量要放最后语法：...变量名
剩余参数和扩展运算符的区别扩展运算符的作用是展开，剩余参数的作用是聚合

数组的扩展运算符通过扩展运算符将数组展开作为函数参数

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

1 2 3 4 5 6 7 4.1 利用扩展运算符复制数组

    const a = [1,2]
    const b = a; // 不是复制，是引用
    const c = [...a] // 复制
    a[0] = 7
    console.log(b) // [7, 2]
    console.log(c) // [1,2]

1 2 3 4 5 6 4.2 利用扩展运算符合并数组

	const ARRAY1 = [1,2,3]
    const ARRAY2 = ['a','b']
    const ARRAY3 = ['我是数组']
    const ARRAY = [...ARRAY1,...ARRAY2,...ARRAY3]
    console.log(ARRAY) // [1,2,3,'a','b','我是数组']

1 2 3 4 5 4.3 利用扩展运算符将字符串转为数组

    console.log([...'你好嘟嘟']) // ['你', '好', '嘟', '嘟']

1 4.4 利用扩展运算符将类数组转换为数组

常见类数组arguments、NodeList

function add() { console.log([...arguments]); } add(2,8,19,10)

对象扩展运算符对象必须写在 {} 中进行展开 5.1 扩展运算符复制对象 const person = {

name:'嘟嘟', age:19, sex:'女' }

console.log({...person}) // {name: '嘟嘟', age: 19, sex: '女'} 1 2 3 4 5 6 5.2 扩展运算符合并对象属性同名时，后面的属性会覆盖前面的 const person = { name:'嘟嘟', age:19, sex:'女' } const person1 = { age:18, hobby:'游泳' } console.log({...person,...person1}) //{name: '嘟嘟', age: 18, sex: '女', hobby: '游泳'} 1 2 3 4 5 6 7 8 9 10 5.3 空对象的展开空对象的展开没有任何效果，得到的也是个空对象

console.log({...{}}) // {} console.log({...{},name:'dudu '}) // {name: 'dudu '}

5.4 非对象的展开展开的如果不是对象，会自动转为对象，再将属性罗列出展开的如果是字符串，会被转换为类数组对象，其他的非对象展开会得到一个空对象

console.log({...true,...9}) // {} console.log({...'dudu'}) // {0: 'd', 1: 'u', 2: 'd', 3: 'u'}

1 2

5.5 对象中对象属性的展开展开运算符不会展开对象中的对象属性

const person = { name:'嘟嘟', age:19, sex:'女', hobby: { sport:'游泳' } } console.log({...person}) // {name: '嘟嘟', age: 19, sex: '女', hobby: {…}}

剩余参数可以被解构剩余参数可以被解构,这就意味着剩余参数中的元素可以被赋给函数体中的同名变量 function func(name, ...[age, address]) { console.log(name) // 输出：'tom' console.log(age) // 输出：29 console.log(address) // 输出： 'shenzheFn' console.log(arguments) // { '0': 'tom', '1': 29, '2': 'shenzhen' } } func('tom', 29, 'shenzhen')

1 2 3 4 5 6 7 8 引入剩余参数就是为了替代函数内部的 arguments，arguments对象不具备有数组的方法，而剩余参数本身就是一个数组剩余参数在函数中声明时必须放在最后下面是错误的写法：

function demo(...args, name) { // 抛出语法错误 } 1 2 3 剩余参数不能在对象字面量的setter方法中声明 setter方法只会接收一个参数，而剩余参数不会限制参数的数量

var obj = { // 报错："set" 访问器不能具有 rest 参数。 set age(...args) { this._age = age } }

扩展运算符和剩余参数是什么意思 ？ 应用场景？

扩展运算符和剩余参数是什么意思？应用场景？