JS:ES6-5 rest参数与扩展运算符

rest参数概述： ES6 引入 rest 参数，用于获取函数的实参，注意与arguments对象的区别

rest参数只包括没有给出名称的参数，而arguments包含所有参数
arguments 对象不是真正的数组，而rest 参数是数组实例（可以用sort, map, forEach, pop等方法）
arguments 对象拥有一些rest参数没有的功能

代码示例及相关说明：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>rest参数</title>
</head>
<body>
<script>
// ES6 引入 rest 参数，用于获取函数的实参，用来代替 arguments；
// ES5获取实参的方式
function data(){
console.log(arguments);   //["大哥","二哥","三哥","四哥"]
}
data("大哥","二哥","三哥","四哥");
// ES6的rest参数...args，rest参数必须放在最后面
function data(...args){
console.log(args); // fliter some every map  //["大哥","二哥","三哥","四哥"]
}
data("大哥","二哥","三哥","四哥");
</script>
</body>
</html>

扩展运算符（...）能将数组转换为逗号分隔的参数序列；好比 rest 参数的逆运算，将一个数组转为用逗号分隔的参数序列，对数组进行解包；

代码示例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>扩展运算符应用</title>
</head>
<body>
<script>
// 『...』 扩展运算符能将『数组』转换为逗号分隔的『参数序列』// 声明一个数组
const tfboys = ['易烊千玺','王源','王俊凯'];
// => '易烊千玺','王源','王俊凯'// 声明一个函数
function chunwan(){
console.log(arguments);
}
chunwan(...tfboys);// chunwan('易烊千玺','王源','王俊凯')</script>
</body>
</html>

应用：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>扩展运算符应用</title>
</head>
<body>
<div id = "d1"></div>
<div id = "d2"></div>
<script>
//1. 数组的合并 情圣 误杀 唐探
const kuaizi = ['王太利','肖央'];
const fenghuang = ['曾毅','玲花'];
// 传统的合并方式
// const zuixuanxiaopingguo = kuaizi.concat(fenghuang);
const zuixuanxiaopingguo = [...kuaizi, ...fenghuang];
console.log(zuixuanxiaopingguo);
//2. 数组的克隆
const sanzhihua = ['E','G','M'];
const sanyecao = [...sanzhihua];// ['E','G','M']
console.log(sanyecao);
//3. 将伪数组转为真正的数组
const divs = document.querySelectorAll('div');
const divArr = [...divs];
console.log(divArr); // arguments
</script>
</body>
</html>

<!DOCTYPE html>
<html><head><meta charset="UTF-8" /><title>Document</title></head><body><script type="text/javascript" >let arr1 = [1,3,5,7,9]let arr2 = [2,4,6,8,10]console.log(...arr1); //展开一个数组let arr3 = [...arr1,...arr2]//连接数组//在函数中使用function sum(...numbers){return numbers.reduce((preValue,currentValue)=>{return preValue + currentValue})}console.log(sum(1,2,3,4));//构造字面量对象时使用展开语法let person = {name:'tom',age:18}let person2 = {...person}//console.log(...person); //报错，展开运算符不能展开对象person.name = 'jerry'console.log(person2);console.log(person);//合并let person3 = {...person,name:'jack',address:"地球"}console.log(person3);</script></body>
</html>

JS:ES6-5 rest参数与扩展运算符相关推荐

ES6之三个点（扩展运算符及rest运算符）
ES6中出现了三个点的写法,初次看到一脸懵逼,现在让我们好好来搞清楚这三个点... 首先需要了解的是在ES6中新增了扩展运算符和rest参数,而这两个都是用...三个点来表示的(麻蛋就不能用不同的表示 ...
ES6 rest参数，扩展运算符，Symbol数据类型，迭代器和生成器【详解加案例】(二)
文章目录 1.ES6 rest 参数 2. ES6 扩展运算符 2.1 ES6 简介 2.2 应用 3. ES6 Symbol 数据类型 3.1 Symbol两种创建方式 3.2 Symbol注意事项 ...
ES6-ES11-第一部分-let、const、解构赋值、模板字符串、简化对象写法、箭头函数、函数参数默认值、rest 参数、扩展运算符、Symbol、迭代器、生成器、Promise、Set、Map
根据视频进行整理 [https://www.bilibili.com/video/BV1uK411H7on?p=1] 视频资源(百度网盘): 链接:[https://pan.baidu.com/s/1 ...
js ... es6中三个点是什么意思真名叫扩展运算符
前言:求真求实东西实现了居然不知道怎么做完的有点恐怖背景 js去重 let inCmpGroup = [...new Set(this.selectedData.map(x => x. ...
ES6 | let 关键字 + const关键字 + 箭头函数 + rest参数 + 扩展运算符 ... + Symbol + 迭代器 + 生成器 + 变量的解构赋值 + 模板字符串
目录 ECMASript 相关介绍 ECMASript 6 新特性 let 关键字 const关键字变量的解构赋值模板字符串简化对象写法箭头函数 => 参数默认值 rest参数扩展运算 ...
ES9新特性_ES9扩展运算符与rest参数---JavaScript_ECMAScript_ES6-ES11新特性工作笔记053
然后我们再去看看 es9中对,对象扩展运算符的增加. 可以看到说...这个rest参数与spread扩展运算符...,在es6中已经有了,但是es6,这个只是针对于数组的 es9可以针对对象提供了,类 ...
ES6扩展运算符用法
扩展运算符可以将数组或者对象转为用逗号分隔的参数序列扩展运算符(...)用于取出参数对象中的所有可遍历属性,拷贝到当前对象中用法: 1.将一个数组放入另一个数组中 var middle = [3, ...
c语言扩展运算符是什么,扩展运算符的6个重要用途
前言由于ES6和Babel的出现,编写JavaScript代码变得难以置信的灵活,从新的语法到自定的编译器,像JSX.我变成了扩展运算符(Spread Operator)的超级粉丝,三个点就改变你编 ...
JavaScript 扩展运算符
文章目录扩展运算符使用扩展运算符复制数组使用扩展运算符克隆数组带对象的扩展运算符剩余参数参考文档在本教程中,您将借助示例了解 JavaScript 扩展运算符. 扩展运算 ...

JS:ES6-5 rest参数与扩展运算符

JS:ES6-5 rest参数与扩展运算符相关推荐

最新文章

热门文章