ES6-数组的新增特性-扩展运动符

最新推荐文章于 2025-05-27 08:11:14 发布

ZhangXD_BLOG

最新推荐文章于 2025-05-27 08:11:14 发布

阅读量227

点赞数

CC 4.0 BY-SA版权

分类专栏： ES6

本文链接：https://blog.youkuaiyun.com/u012054869/article/details/82015736

ES6 专栏收录该内容

14 篇文章

订阅专栏

本文深入解析了JavaScript中的扩展运算符（...），展示了其在数组复制、合并、与解构赋值结合使用及处理字符串等方面的强大功能。通过实例，读者可以了解如何利用扩展运算符解决实际编程问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.扩展运算符（...）

(1)定义：

扩展运算符相当于rest参数的逆运算，把数组转换为用逗号分割的参数列表，例子：

<script>
	// rest案例
	function fn(...args){//通过...args将字符串转为数组
		console.log(args);
	}
	fn(10,20,30);

	//逆运算
	function demo(x,y,z){
		console.log(x+y+z);
	}
	let argList =[1,2,3];
	demo(...argList);

</script>

（2）应用
a. 复制（克隆）数组

例子：

<script>
	// 复制数组
	let a = [10,20,30];
	//复制数组a,复制给b
	let b =a;
	b[1]="小红";
	console.log(a);//输出10，小红，30，将b的“地址”复制给a，当修改b时，同样a中也进行了更改

	//解决上面问题，复制的a时，禁止将b的“地址”复制给a，就是修改b的时候，a的值不更改
	let arr1 =[100,200,300];
	let arr2 = [...arr1];//...将数组转换成参数列表
	arr2[1]="丁";
	console.log(arr1);
	console.log(arr2);
</script>

b. 合并数组
例子：

<script>
    let a =['赵','钱','孙'];
    let b =['香蕉','苹果','西瓜','草莓','橙子'];
    let c =[100,2,45,149,35,89];

    // 将三个数组合并
    // ES5中实现的方法
    let newArgs = a.concat(b,c);
    console.log(newArgs);

    //ES6扩展运算符
    let newList =[...a,...b,...c];//
    console.log(newList);//[ "赵", "钱", "孙", "香蕉", "苹果", "西瓜", "草莓", "橙子", 100, 2, … ]
    //...将数组转换为参数列表
</script>

c. 与解构赋值一起使用，例子：

 <script> 
  //扩展运算符与解构赋值一起使用
    let Arr = [a,b,...args]=[1,2,3,4,5,6];
    console.log(1);//1
    console.log(2);//2
    console.log(args);//3,4,5,6
</script>

d. 作用域字符串，例子：

<script>
    //扩展运算符作用域字符串
    let args1 =[...'helloworld'];//输出Array [ "h", "e", "l", "l", "o", "w", "o", "r", "l", "d" ]；所以，总结：不但能把数组转换成一个由逗号隔开的参数列表，还能转换成把字符串组成由逗号隔开的数组
    console.log(args1);

</script>

总结：

总结：不但能把数组转换成一个由逗号隔开的参数列表，还能转换成把字符串组成由逗号隔开的数组；

e. 扩展运算符作用域所有实现了Iterator接口的数据类型；