ES6 扩展运算符

最新推荐文章于 2024-09-03 17:02:58 发布

luo166888

最新推荐文章于 2024-09-03 17:02:58 发布

阅读量141

点赞数

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

本文链接：https://blog.csdn.net/luo166888/article/details/105293251

版权

ES6 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

扩展运算符（ spread ）是三个点（…）。它好比 rest 参数的逆运算，将一个数组转为用逗号分隔的参数序列
对象中的扩展运算符(…)用于取出参数对象中的所有可遍历属性，拷贝到当前对象之中

例如：

const you = ['Gonrge', 'John', 'Thmas']
const old = ['Tom', 'Bom', 'Jelly']

// 整合两个数组
const members1 = you.concat(old); //传统写法
console.log(members1);

// 在整合的数组中添加一个元素，传统写法
let members2 = [];
members2.concat(you);
members2.push('Mary');
members2 = members2.concat(old);
console.log(members2)
// es6 扩展运算符写法如下
let members3 = [...you, 'Mary', ...old]


// 扩展运算符复制数组
const currentMembers1 = [].concat(members3) // 传统写法
const currentMembers2 = [...members3] // 扩展运算符写法

扩展运算符的练习：

将h2中的字符拆分为一个一个，并添加动画效果


// 扩展运算符的运用
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .heading span {
        cursor: pointer;
        display: inline-block;
        transition: transform 0.25s
    }
    .heading span:hover {
        color: darkblue;
        transform: translateY(-20px) rotate(10deg) scale(2)
    }
</style>
<body>
    <h2 class='heading'>LARAVIST!</h2>
</body>
<script>
const heading = document.querySelector(".heading");

function wrap(word){
    // 将h2字符串拆分为一个一个的字符
    return [...word].map(span => `<span>${span}</span>`).join("")
}

// 替换为拆分后的字符
heading.innerHTML = wrap(heading.textContent)
</script>
</html>

扩展运算符的运用场景

1.将节点列表转换为真数组

const todos = [...document.querySelectorAll("li")];
const names = todos.map(todo => todo.textContent)
console.log(names)

2.扩展对象的属性

const favorites = {
    color:['yellow','red'],
    fruits:['banana','mongo']
}
const shopping = ['milk','sweets',...favorites.fruits] //可使用扩展运算符将fruits扩展到shopping中
console.log(shopping);

3.扩展运算符在函数中的运用

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]);
console.log(date)
// 使用es6方法，使用扩展运算符，不用一个一个的调用字段
const date2 = new Date(...dateFields)
console.log(date2)

luo166888

关注

0
点赞
踩
0

收藏

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

扩展运算符（ spread ）是三个点（…）。它好比 rest 参数的逆运算，将一个数组转为用逗号分隔的参数序列对象中的扩展运算符(…)用于取出参数对象中的所有可遍历属性，拷贝到当前对象之中例如：const you = ['Gonrge', 'John', 'Thmas']const old = ['Tom', 'Bom', 'Jelly']// 整合两个数组const member...
复制链接

扫一扫

专栏目录