JavaScript中...使用场景

在 JavaScript 中，三个点（...）通常被称为展开运算符（Spread Operator）和剩余参数（Rest Parameter），它们有多种使用场景：

1. 展开运算符

1.1 数组的展开

const array1 = [1, 2, 3];
const array2 = [...array1, 4, 5, 6];

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

1.2 对象的展开

const obj1 = { a: 1, b: 2 };
const obj2 = { ...obj1, c: 3, d: 4 };

console.log(obj2); // { a: 1, b: 2, c: 3, d: 4 }

2. 剩余参数

2.1 剩余参数收集函数参数

function sum(...numbers) {
  return numbers.reduce((total, num) => total + num, 0);
}

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

2.2 剩余参数用于解构

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

console.log(first); // 1
console.log(second); // 2
console.log(rest); // [3, 4, 5]

3. 函数调用中的展开运算符

function multiply(a, b, c) {
  return a * b * c;
}

const numbers = [2, 3, 4];

console.log(multiply(...numbers)); // 24

4. 克隆数组和对象

4.1 克隆数组

const originalArray = [1, 2, 3];
const clonedArray = [...originalArray];

console.log(clonedArray); // [1, 2, 3]

4.2 克隆对象

const originalObject = { a: 1, b: 2 };
const clonedObject = { ...originalObject };

console.log(clonedObject); // { a: 1, b: 2 }

这些是三个点（...）在 JavaScript 中常见的使用场景。展开运算符和剩余参数可以简化数组和对象的操作，提高代码的可读性和灵活性。

代码解读：

const tempDatas = datas.map(model=>{
    return {
        ...model,
        opened:open
    }
})

这段代码是使用 map 方法对数组 datas 进行遍历，对每个元素 model 进行处理，生成一个新的数组 tempDatas。在处理过程中，每个 model 被克隆，并添加了一个新的属性 opened，该属性的值为变量 open 的值。

逐步解读这段代码：

1. datas 是一个数组，其中包含多个对象（可能是模型或数据）。

2. map 方法用于遍历 datas 数组中的每个元素，并对每个元素执行传入的回调函数。

3. 回调函数接收一个参数 model，这代表数组中的每个元素。

4. 在回调函数中，使用了展开运算符 ...model，这会克隆对象 model 的所有属性，创建一个新的对象。这确保了对原始对象的修改不会影响原数组中的对象。

5. 新创建的对象同时设置了一个新属性 opened，其值为变量 open 的值。这样，每个 model 对象都被复制并添加了一个新的属性。

6. 最终，tempDatas 数组包含了经过处理的新对象，其中每个对象都具有与原始对象相同的属性，同时新增了 opened 属性。

这种模式通常用于在不修改原始数据的情况下，生成经过一些变换的新数组。在这里，目的是为每个 model 添加一个 opened 属性，并且该属性的值为变量 open 的值。