扩展运算符的作用及使用场景

对象扩展运算符

• 对象的扩展运算符(...)用于取出参数对象中所有的可遍历属性，拷贝到当前对象之中

let bar = {a:1,b:2}
let baz = {...bar} //{a:1,b:2}

• 这里扩展运算符实际上等价于

let bar = {a:1,b:2}
let baz = Object.assign({},bar) //{a:1,b:2} 对象的浅拷贝

• Object.assign()方法用于对象的合并，将源对象(source)的所有可枚举属性，复制到目标对象(target)
• Object.assign()方法的第一个参数是目标对象，后面的参数都是源对象(如果目标对象与源对象有同名属性，或多个源对象有同名属性，则后面的属性会覆盖前面的的属性)
• 如果用户自定义的属性，放在扩展运算符后面，则扩展运算符内部的同名属性会被覆盖掉

let bar = {a:1,b:2}
let baz = {...bar,...{a:2,b:4}} //{a:2,b:4}

• 扩展运算符可以很方便地修改对象的部分属性，在redux中的reducer函数规定必须是一个纯函数，reducer中的state对象要求不能直接修改，可以通过扩展运算符把修改路径的对象都复制一遍，然后产生一个新的对象返回
• 扩展运算符对对象实例的拷贝属于浅拷贝

数组扩展运算符

• 数组的扩展运算符能将一个数组转为用逗号分隔的参数序列，且每次只能展开一层数组

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

• 将数组转化为参数序列

function add(x,y) {
    return x+y
}
const numbers = [1,2]
add(...numbers)

• 复制数组
  • 复制数组时，扩展运算符用于取出参数数组中的所有可遍历属性，拷贝到当前数组之中，这里的前提是参数数组里的每一项都是基础数据类型，将所有基础数据类型重新拷贝到新数组中

const arr1 = [1,2]
const arr2 = [...arr1]

• 合并数组

const arr1 = ["third","fourth"]
const arr2 = ["first","second",...arr1,"fifth"]
//"first","second,"third","fourth","fifth"

• 与解构赋值结合，生成新数组
  • 注意：如果扩展运算符用于数组赋值，只能放在参数的最后一位，否则会报错

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

• 将字符串转为数组
  • 任何有Iterator接口的对象，都可以用扩展运算符转为真正的数组

[..."hello"] //["h","e","l","l","o"]
function foo() {
    const args = [...arguments]
    //用于替换es5中Array.protorype.slice.call(arguments)
}
const numbers = [1,2,3,5]
Math.min(...numbers)//1
Math.max(...numbers)//5

------------------------------------------------------------------------------------------------2024.4.29 每日一题