ES6之扩展运算符与应用
在使用react的过程中,会有如下写法1
2const data={name:"ssdfin",value:1}
const component = <Component {...data}>
发现对 … 三个点理解不是很深,所以单独记录下 ES6 rest/spread 特性
扩展运算符(spread)
- 场景1:使用在数组之前。
作用:将一个数组转为用逗号分隔的参数序列
1 | function foo(x, y, z){ |
当运算符”…”用在数组之前时,数组会被转为用逗号分隔的参数序列。
- 场景2:替代apply()方法
1 | // ES5的 写法 |
- 场景3:替代数组的concat()方法
1 | let a = [2, 3, 4] |
上面的用法基本上替代了concat(..),这里的行为就像[1].concat(a, [5])
注意:扩展运算符后如果是空数组,不会产生任何效果
1 | [...[], 1] |
收集运算符(rest)
作用:收集剩余的参数转为一个数组。
场景:在函数参数之前使用。
场景1:函数参数之前
1
2
3
4
5
6
function foo(x, y, ...z){ //z表示把剩余的参数收集到一起组成一个名叫z的数组。
console.log(x, y, z)
}
foo(1, 2, 3, 4, 5) //x赋值1,y赋值2,z中赋值[3, 4, 5]数组场景2:结构赋值
1 | const [first, ...rest] = [1, 2, 3, 4, 5]; //此处'...'作为rest收集运算符使用 |
总结:
如何判断ES6中的运算符是扩展运算符(spread)还是收集运算符(rest),主要取决于其作用的位置。
1.数组之前,作为扩展运算符使用,将数组转为逗号分隔的参数序列。
2.函数形参中,收集传入的参数为数组。
3.解构赋值中,收集对应的数据为数组。
原文: