ES6 扩展运算符

最新推荐文章于 2022-05-16 20:58:58 发布

五仁卤鸡翅

最新推荐文章于 2022-05-16 20:58:58 发布

阅读量188

点赞数

分类专栏： ES6 文章标签： javascript es6

本文链接：https://blog.csdn.net/MoonNight608/article/details/104167017

版权

ES6 专栏收录该内容

20 篇文章 1 订阅

订阅专栏

介绍

本文是在学习ES6时做的一些学习笔记，所有的笔记请查看：ES6 学习笔记

扩展运算符

扩展运算符示例功能如下：
1、对象中的扩展运算符(…)用于取出参数对象中的所有可遍历属性，拷贝到当前对象之中
2、整合两个数组
3、扩展运算符复制数组

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Spread operator Intro</title>
</head>

<body>
<script>
const youngers = ['Geroge','John','Thomas'];
const olders = ['James','Adrew','Martin'];

// 整合两个数组
const members = youngers.concat(olders); //传统写法
console.log(members);

// 在整合的数组中添加一个元素，传统写法
let members = [];
members.concat(youngers);
members.push('Mary');
members=members.concat(olders);
console.log(members)

// es6 扩展运算符写法如下
let members=[...youngers,'Mary',..olders]

// 扩展运算符复制数组
const currentMembers=[].concat(members) // 传统写法
const currentMembers = [...members] // 扩展运算符写法
</script>

</body>
</html>

简单效果：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Spread operator Intro</title>
</head>
<style>
.heading span{
    cursor:pointer;
    dispaly:inline-block;
    transition:transform 0.25s
    
}
.heading span:hover{
    transofrm：translateY(-20px) rotate(10deg) scale(2)
}
</style>

<body>
<h2 class='heading'> LARAVIST!</h2>
<script>
const heading=document.querySelector('.heading')
heading.innerHtml=wrapWithSpan(heading.textContent);

function wrapWithSpan(word){
    return [...word].map(letter => `<span>${letter}<span>`)
    .join('');
}

</script>

</body>
</html>

扩展运算符例子：
1、使用扩展运算符，解决document.querySelectorAll()返回的nodelist
不是数组得问题，替换了Array.from()，因为nodelist为可迭代对象
2、扩展对象的属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Spread operator Intro</title>
</head>
<body>
<ul>
 <li>go to store</li>
<li>watch tv</li>
<li>go shopping</li>
</ul>

<script>
// 使用扩展运算符，解决document.querySelectorAll()返回的nodelist
// 不是数组得问题，替换了Array.from(),nodelist为可迭代对象，
// 使用扩展操作符...进行操作
const todos=[...document.querySelectorAll('li')]
const names = todos.map(todo=>todo.textContent)
console.log(todos)

// 扩展对象的属性
const favorites = {
    color: ['yellow','blue'],
    fruits: ['banana','mongo'],
}
const shoppinglist = ['milk','sweets',...favorites.fruits] ；

// 根据指定id删除数组中的某个值
const todos=[
    {id: 1,name: 'go to store',completed: false},
    {id: 2,name: 'watch tv',completed: true},
    {id: 3,name: 'Go shopping',completed: false}
]
const id=2;
const todoIndex=todos.findIndex(todo=>todo.id === id)
// 使用扩展运算符，将数组中的每一项扩展到新数组中
const newtodos=[...todos.slice(0,todoIndex),...todos.slice(todoIndex+1)];
</script>

</body>
</html>

将扩展运算符应用于函数上：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Spread operator Intro</title>
</head>
<body>
<ul>
 <li>go to store</li>
<li>watch tv</li>
<li>go shopping</li>
</ul>

<script>

const fruit = ['apple','banana','pear'];
const newfruit = ['orange','mongo'];
// 将newfruit的内容放入fruit里面
fruit.push.apply(fruit,newfruit); //传统方法，将newfruit的内容存入fruit数组中
fruit.push(...newfruit); // es6方法，将newfruit扩展为参数

const dateFields = [2017,5,6];
// 传统方法
const date=new Date(dateFields[0],dateFields[1],dateFields[2]);
// 使用es6方法，使用扩展运算符，不用一个一个的调用字段
const date=new Date(...dateFields)
console.log(date)
                                   

</script>

</body>
</html>

五仁卤鸡翅

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ES6 扩展运算符

目录介绍扩展运算符介绍本文是在学习ES6时做的一些学习笔记，所有的笔记请查看：ES6 学习笔记本文视频地址为:https://www.bilibili.com/video/av47304735?p=21扩展运算符扩展运算符示例功能如下：1、对象中的扩展运算符(…)用于取出参数对象中的所有可遍历属性，拷贝到当前对象之中2、整合两个数组3、扩展运算符复制数组<!DOC...
复制链接

扫一扫