ES6之rest参数、扩展运算符

原创已于 2023-08-28 16:15:09 修改 · 345 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #es6 #前端 #vue

于 2023-05-04 17:47:22 首次发布

Vue 专栏收录该内容

21 篇文章

订阅专栏

本文介绍了ES6中的rest参数和扩展运算符。rest参数允许函数接收不定数量的参数并将其存储在数组中，而扩展运算符可以将数组转化为参数序列，用于函数调用、数组合并及克隆。此外，扩展运算符还能用于将伪数组转换为真数组。

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

文章目录

前言
一、rest参数
二、扩展运算符
- 1.将数组转化为逗号分隔的参数序列
- 2.应用
总结

前言

rest参数与arguments变量相似。ES6引入rest参数代替arguments，获取函数实参。
扩展运算符能将数组转化为参数序列。

一、rest参数

		function namelist1() {
            console.log(arguments);
        }

        function namelist2(...args) {
            console.log(args);
        }

        namelist1('张三', '李四', '王五');
        namelist1('张三', '李四', '王五');

在这里插入图片描述
由此可看出args也是数组，所以它可以跟数组方法filter，some，map，every等连用。
注意！rest参数必须放在参数最后，如下：

	function fn(a, b, ...args) {
            console.log(a);
            console.log(b);
            console.log(args);
        }
        fn(1, 2, 3, 4);

二、扩展运算符

1.将数组转化为逗号分隔的参数序列

代码如下（示例）：

	 	const namelist = ['张三', '李四', '王五'];

        function fn() {
            console.log(arguments);
        }
        fn(...namelist); //相当于fn('张三', '李四', '王五')
        console.log(namelist);
        console.log(...namelist);

在这里插入图片描述

2.应用

数组合并

	 	const film = ['失孤', '心灵旅途'];
        const tv = ['盗墓笔记', '秦岭神树'];
        const yule = [...film, ...tv];
        console.log(yule);

在这里插入图片描述

数组的克隆

		const list1 = ['a', 'b', 'c'];
        const list2 = [...list1];
        console.log(list1);
        console.log(list2);

在这里插入图片描述

将伪数组转换为真数组

	<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <script>
        const divs = document.querySelectorAll('div');
        const divlist = [...divs];
        console.log(divs);
        console.log(divlist);
    </script>
</body>

</html>