展开运算符（...）

在React的props里碰到了展开运算符，所以这里展开讲一下展开运算符在js原生语法和React里的使用和区别。

首先展开运算符可以用在哪里：

1. 数组

let arr1 = [1,3,5,7,9]
let arr2 = [2,4,6,8,10]

// 输出一个数组[1,3,5,7,9]
console.log(arr1);

// 展开一个数组，结果是1 3 5 7 9
console.log(...arr1);

// 合并两个数组，结果是[1,3,5,7,9,2,4,6,8,10]
let arr3 = [...arr1,...arr2];
console.log(arr3);

2. 函数传参

function sum(...numbers){
    console.log(numbers);
    
    // 求和（面试题）
    return numbers.reduce((preValue,currentValue)=>{
        return preValue + currentValue;
    })
}

console.log(sum(1,2,3,4));

3. 克隆对象

let person = {name:'tom',age:18};

console.log(...person); // ❌错误，展开运算符不能展开对象，所以不能这样使用

// 这里的花括号是js的语法结构，表示克隆对象，可以正常输出
let person2 = {...person};
console.log(person2);

// 克隆对象的同时合并属性值
let person3 = {...person,name:'anne'};

！！！注意：

• 在js原生语法里不能展开对象；

• 用花括号包裹是js的语法结构，表示克隆一个对象。

4. 展开对象（React里使用）

class Demo extends React.Component {
    render(
        const {name, age, sex} = props;
        return (
            <>
                <div>{name}</div>
                <div>{age}</div>
                <div>{sex}</div>
            </>
        )
    )
}

const data { name:'tom',age:18,sex:'女' };
// 可以批量获取属性，注意data里的属性要是props里有的
<Demo {…data} />

！！！注意：

• React里的花括号{}不是克隆了一个对象，仅仅是分隔符，表示里面的是js语句…data

• 而这里可以使用展开运算符来展开对象是因为React和babel允许展开对象，且仅适用于标签属性，其他地方不行