ES6-剩余参数 and 扩展运算符
2018-06-27 本文已影响0人
闪电西兰花
1.ES6的剩余参数可以帮助很简单的将剩余参数组合为一个数组
//...加变量的形式表示所有参数，相当于将所有参数存在num变量里
//由代码可见，num变量是个数组
<script type="text/javascript">
function sum(...nums) {
console.log(nums); //[1,2,3]
}
sum(1,2,3);
</script>
- 剩余参数应用场景
//对函数参数处理
<script type="text/javascript">
function sum(...nums) {
return nums.reduce((prev,curr) => prev + curr,0);
}
console.log( sum(1,2,3) ); //6
</script>
<script type="text/javascript">
function converCurrency (rate,...amounts) {
console.log(amounts); //[12, 34, 656, 23]
return amounts.map(amount => amount * rate);
}
const amounts = converCurrency(0.89,12,34,656,23);
console.log(amounts); //[10.68, 30.26, 583.84, 20.47]
</script>
//数组解构
<script type="text/javascript">
const player = ['Asher',2132,5.8,9.8,4.6,5.5];
const [name,id,scores] = player;
console.log(name,id,scores); //Asher 2132 5.8
const [name1,id1,...scores1] = player;
console.log(name1,id1,scores1); //Asher 2132 [5.8, 9.8, 4.6, 5.5]
</script>
2.ES6 扩展运算符是一个与剩余参数作用相反的过程
//原始拼接数组的方法
<script type="text/javascript">
const youngers = ['Asher','Mac','Asher','Hal'];
const olders = ['Page','Lang','Oliver'];
let members = youngers.concat(olders);
console.log(members); //["Asher", "Mac", "Asher", "Hal", "Page", "Lang", "Oliver"]
</script>
//扩展运算符拼接数组
<script type="text/javascript">
const youngers = ['Asher','Mac','Asher','Hal'];
const olders = ['Page','Lang','Oliver'];
let members = [...youngers,...olders];
console.log(members); //["Asher", "Mac", "Asher", "Hal", "Page", "Lang", "Oliver"]
</script>
//扩展运算符和添加数组项
<script type="text/javascript">
const youngers = ['Asher','Mac','Asher','Hal'];
const olders = ['Page','Lang','Oliver'];
let members = [...youngers,'Lisa',...olders];
console.log(members); //["Asher", "Mac", "Asher", "Hal", "Lisa", "Page", "Lang", "Oliver"]
</script>
//复制数组时复制的是引用，因此这里的newMembers和members都变了
<script type="text/javascript">
const youngers = ['Asher','Mac','Asher','Hal'];
const olders = ['Page','Lang','Oliver'];
const members = [...youngers,'Lisa',...olders];
let newMembers = members; //复制数组时，复制的是引用
console.log(newMembers); //["Asher", "Mac", "Asher", "Hal", "Lisa", "Page", "Lang", "Oliver"]
newMembers[1] = 'Karen';
console.log(newMembers); //["Asher", "Karen", "Asher", "Hal", "Lisa", "Page", "Lang", "Oliver"]
console.log(members); //["Asher", "Karen", "Asher", "Hal", "Lisa", "Page", "Lang", "Oliver"]
</script>
//使用扩展运算符达到复制数组的作用时，members就不会变了
<script type="text/javascript">
const youngers = ['Asher','Mac','Asher','Hal'];
const olders = ['Page','Lang','Oliver'];
const members = [...youngers,'Lisa',...olders];
let newMembers = [...members];
console.log(newMembers); //["Asher", "Mac", "Asher", "Hal", "Lisa", "Page", "Lang", "Oliver"]
newMembers[1] = 'Karen';
console.log(newMembers); //["Asher", "Karen", "Asher", "Hal", "Lisa", "Page", "Lang", "Oliver"]
console.log(members); // ["Asher", "Mac", "Asher", "Hal", "Lisa", "Page", "Lang", "Oliver"]
</script>
3.扩展运算符小练习
//使用扩展运算符将字符串分解并组成一个数组，然后分别给每个字母添加动画样式
<style type="text/css">
body {
background-color: #87CEFF;
text-align: center;
font-size: 50px;
color: #fff;
text-shadow: 3px 3px 0 rgba(0,0,0,.2)
}
.heading span {
cursor: pointer;
display: inline-block;
transition: transform .25s;
}
.heading span:hover {
transform: translate(-20px) rotate(10deg) scale(2);
}
</style>
<body>
<h2 class="heading">congratulations!</h2>
<script type="text/javascript">
const heading = document.querySelector('.heading');
heading.innerHTML = wrapWithSpan(heading.textContent);
function wrapWithSpan (word) {
return [...word].map(letter => `<span>${letter}</span>`).join('');
}
</script>
</body>
trans.PNG
//扩展运算符也可以将可迭代的对象转换成一个真正的数组
<body>
<ul>
<li>go to store</li>
<li>watch TV</li>
<li>go shopping</li>
</ul>
<script type="text/javascript">
const todo = document.querySelectorAll('li');
console.log(todo);
const todos = [...document.querySelectorAll('li')];
console.log(todos);
</script>
</body>
extend.PNG
//通过扩展运算符获取对象属性
<script type="text/javascript">
const fav = {
color: ['blue','yellow'],
fruits: ['mango','cherry']
}
const shoppingList = ['milk',...fav.fruits];
console.log(shoppingList); //["milk", "mango", "cherry"]
</script>
//通过扩展运算符获取对象属性
<script type="text/javascript">
const users = [
{id:21561, name: 'Asher', age:5},
{id:15163, name:'Mic', age:35},
{id:29622, name:'Rose', age:9}
];
const id = 15163;
const todoIndex = users.findIndex(todo => todo.id === id);
const newUsers = [...users.slice(0,todoIndex), ...users.slice(todoIndex + 1)];
console.log(newUsers);
</script>
spread.PNG
//用push方法新增数组项时可以用扩展运算符push整个数组
//同时还可以分解参数
<script type="text/javascript">
const fruits = ['mango','coconut'];
const newFruits = ['cherry','pear'];
fruits.push(...newFruits);
console.log(fruits); //["mango", "coconut", "cherry", "pear"]
const time = [2018,9,8];
const date = new Date(...time);
console.log(date); //Mon Oct 08 2018 00:00:00 GMT+0800 (中国标准时间)
</script>
