js中...的用法

短命女 2023-10-04 23:57 13阅读 0赞

参考文章：[https://blog.csdn.net/alwyn0721/article/details/127256831][https_blog.csdn.net_alwyn0721_article_details_127256831]

三点是es6中出现的扩展运算符。作用是遍历当前使用的对象能够访问到的所有属性，并将属性放入当前对象中。存在一个问题，重名了怎么办，当重名的时候将会选取后者。

扩展运算符的用法还有其他值得注意的地方，下面的例子可以很好的演示：

var a = {"a":"a","b":"b"}
    var b = {...a} //{"a":"a","b":"b"}
    var c = {...a,"b":"b1"} //{"a":"a","b":"b1"}
    var d = {...a,...{"a":"a1","b":"b1"}} //{"a":"a1","b":"b1"}
    
    console.log(a)
    console.log(b)
    console.log(c)
    console.log(d)

![32d76ea41cde43b3b94073ccec7ef0f8.png][]

## 1.含义：展开运算符（spread operator）和剩余运算符（rest operator） ##

### **展开运算符** ###

展开运算符允许迭代器在接收器内部分别展开或扩展。迭代器和接收器可以是任何可以循环的对象，例如数组、对象、集合、映射等。你可以把一个容器的每个部分分别放入另一个容器。

const newArray = ['first', ...oldArray]

### **剩余参数** ###

剩余参数语法允许我们将无限数量的参数表示为数组。命名参数的位置可以在剩余参数之前

const func = (first, second, ...rest) => {}

## 2.用法： ##

### 2.1 复制数组 ###

const fruits = ['apple', 'orange', 'banana'];
    const fruitsCopied = [...fruits]; // ['apple', 'orange', 'banana']
     
    console.log(fruits);
    console.log(fruitsCopied);

![eb15939c9db9493db3f6932ab32eaa23.png][]

### 2.2 复制对象 ###

复制的工作方式与数组相同。

const todo = { name: 'Clean the dishes' };
    const todoCopied = { ...todo }; // { name: 'Clean the dishes' }
    console.log(todo); 
    console.log(todoCopied);

![06a44a1b42a04da4a488a029817b0b31.png][]

### 2.3 去重 ###

Set 对象仅存储唯一的元素，并且可以用数组填充。它也是可迭代的，因此我们可以将其展开到新的数组中，并且得到的数组中的值是唯一的。

const fruits = ['apple', 'orange', 'banana', 'banana'];
    const uniqueFruits = [...new Set(fruits)]; // ['apple', 'orange', 'banana']
    console.log(fruits); 
    console.log(uniqueFruits);

![7a164894a70a468aa54418bbad34cca3.png][]

### 2.4 串联数组 ###

const fruits = ['apple', 'orange', 'banana'];
    const vegetables = ['carrot'];
    const fruitsAndVegetables1 = [...fruits, ...vegetables]; // ['apple', 'orange', 'banana', 'carrot']
    const fruitsAndVegetables2 = ['carrot', ...fruits]; // ['carrot', 'apple', 'orange', 'banana']
    
    console.log(fruitsAndVegetables1); 
    console.log(fruitsAndVegetables2);

![6519903946244f9dba555ea686ab8c17.png][]

### 2.5 将参数作为数组进行传递 ###

const mixer = (x, y, z) => console.log(x, y, z);
    const fruits = ['apple', 'orange', 'banana'];
    console.log(fruits); 
     
    mixer(...fruits); // 'apple', 'orange', 'banana'

![8e79be1a43b14e7e9e2fb2598b17a676.png][]

### 2.6 将参数转化为数组 ###

JavaScript 中的参数是类似数组的对象。你可以用索引来访问它，但是不能调用像 map、filter 这样的[数组方法][Link 1]。参数是一个可迭代的对象，那么我们做些什么呢？在它们前面放三个点，然后作为数组去访问！

const mixer = (...args) => console.log(args);
    mixer('apple'); // ['apple']

![e9a8a0e3ec5e4cf5acc0ac47bceb166f.png][]

### 2.7 数组切片 ###

展开运算符也可以做到，但是必须一个一个去命名其余的元素

const fruits = ['apple', 'orange', 'banana'];
    const [apple, ...remainingFruits] = fruits; // ['orange', 'banana']
    console.log(fruits);
    console.log(remainingFruits);

![3e8ef54ede024e14b484fa1e7c37afd1.png][]

### 2.8 合并对象 ###

合并的唯一区别是具有相同键的属性将被覆盖。最右边的属性具有最高优先级。

![4a02edb0058c4810b5b0f35765814489.png][]

### 2.9 字符串拆分成字符 ###

可以用展开运算符把字符串拆分为字符。当然，如果用空字符串调用 split 方法也是一样的

const country = 'USA';
    console.log(country);
    console.log([...country]); // ['U', 'S', 'A']

![848dcf711bbd47e8bc9e0bd6b5a70ec3.png][]

[https_blog.csdn.net_alwyn0721_article_details_127256831]: https://blog.csdn.net/alwyn0721/article/details/127256831
[32d76ea41cde43b3b94073ccec7ef0f8.png]: https://img-blog.csdnimg.cn/img_convert/32d76ea41cde43b3b94073ccec7ef0f8.png
[eb15939c9db9493db3f6932ab32eaa23.png]: https://img-blog.csdnimg.cn/img_convert/eb15939c9db9493db3f6932ab32eaa23.png
[06a44a1b42a04da4a488a029817b0b31.png]: https://img-blog.csdnimg.cn/img_convert/06a44a1b42a04da4a488a029817b0b31.png
[7a164894a70a468aa54418bbad34cca3.png]: https://img-blog.csdnimg.cn/img_convert/7a164894a70a468aa54418bbad34cca3.png
[6519903946244f9dba555ea686ab8c17.png]: https://img-blog.csdnimg.cn/img_convert/6519903946244f9dba555ea686ab8c17.png
[8e79be1a43b14e7e9e2fb2598b17a676.png]: https://img-blog.csdnimg.cn/img_convert/8e79be1a43b14e7e9e2fb2598b17a676.png
[Link 1]: https://so.csdn.net/so/search?q=%E6%95%B0%E7%BB%84%E6%96%B9%E6%B3%95&spm=1001.2101.3001.7020
[e9a8a0e3ec5e4cf5acc0ac47bceb166f.png]: https://img-blog.csdnimg.cn/img_convert/e9a8a0e3ec5e4cf5acc0ac47bceb166f.png
[3e8ef54ede024e14b484fa1e7c37afd1.png]: https://img-blog.csdnimg.cn/img_convert/3e8ef54ede024e14b484fa1e7c37afd1.png
[4a02edb0058c4810b5b0f35765814489.png]: https://img-blog.csdnimg.cn/img_convert/4a02edb0058c4810b5b0f35765814489.png
[848dcf711bbd47e8bc9e0bd6b5a70ec3.png]: https://img-blog.csdnimg.cn/img_convert/848dcf711bbd47e8bc9e0bd6b5a70ec3.png