ECMAScript6-运算符的扩展

最新推荐文章于 2024-07-06 16:47:02 发布

菜鸟一枚在这

最新推荐文章于 2024-07-06 16:47:02 发布

阅读量74

点赞数

分类专栏：前端文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/weixin_45969711/article/details/121245377

版权

前端专栏收录该内容

17 篇文章 0 订阅

订阅专栏

运算符的扩展

上期我们讲解了字符串的相关内容，这期我们讲解运算符相关的知识。

es6之扩展运算符三个点（…）

对象的扩展运算符
数组的扩展运算符
剩余参数的处理

1、对象的扩展运算符

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    //声明⼀个对象stu1，内有三个属性
    let stu1 = {name:'李四',age:22,sex:'男'};
    //使⽤三个点将stu1对象中的属性复制⼀份赋给stu2(独⽴的)
    let stu2 = {...stu1};
    stu1.age = 30;
    console.log(stu2); //{name: "李四", age: 22, sex: "男"}

</script>
</body>
</html>

上述代码里面，类似于对变量的复制。

2、数组的扩展运算符

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    //声明⼀个数组，并赋初值，使⽤三个点实现数组的复制
    let a = [10,20,30];
    let b = [...a]; //复制数组a中的所有元素赋给b
    a[2] = 300; //修改数组a中的⼀个元素值
    console.log(b); //数组b没有影响 [10, 20, 30]
    //使⽤三个点实现将数组转为参数序列。
    function demo(x,y,z){
        console.log(x,y,z); //10,20,300
    }
    demo(...a); //使⽤三个点将数组转换为参数序列
</script>
</body>
</html>

3、使⽤三个点(…)对剩余参数的处理

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    //在以前我们使⽤arguments来收集函数调⽤传递的任意数量参数。
    function sum(){
        let res = 0;
        //遍历所有参数
        for(let v of arguments){
            res += v; //累加
        }
        return res;
    }
    console.log(sum(10,20,30,40)); //100 调⽤上⾯函数可以传递很多参数
    //执⾏效果同时，使⽤三点来收集所有参数
    function sum2(...numbers){
        let res = 0;
        for(let v of numbers){
            res += v;
        }
        return res;
    }
    console.log(sum2(10,20,30,40));//100
</script>
</body>
</html>

剩余参数的处理实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    //定义⼀个处理折扣的函数，第⼀个参数为折率，其余参数为价格
    function discount(rate,...prices){
        return prices.map(p => p*rate);
    }
    //计算0.68参数以外的其他价格，打完6.8折后的值。
    console.log(discount(0.68,125,98,246,50));//[85, 66.64, 167.28, 34]
    //有⼀条信息，内容为姓名、编号和数据
    const info = ["zhangsan","1002",12,23,45,34];
    //使⽤解构赋值
    const [name,id,...params] = info;
    console.log(name,id,params); //zhangsan 1002 [12, 23, 45, 34]
</script>
</body>
</html>

实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>扩展运算符实例</title>
    <style>
        body{background-color: darkorange;}
        #hid{color:white;font-size:80px;text-align:center;}
        #hid span{
            margin:5px;
            cursor:pointer;
            display:inline-block;
            transsition:transform 0.25s;
        }
        /*定义⿏标移⼊的动画效果*/
        #hid span:hover{
            transform:translateY(-20px) rotate(10deg) scale(2);
        }
    </style>
</head>
<body>
<h1 id="hid">Hello ES6!</h1>
<script>
    //获取⻚⾯中h1元素节点
    const hid = document.querySelector("#hid");
    //获取节点中间的内容，作为参数调⽤下⾯函数，并将返回结果替换原先h1标签之间的内容中
    hid.innerHTML = wrapWithSpan(hid.textContent);
    //⾃定义函数
    function wrapWithSpan(str){
        //将内容使⽤map遍历，并未每个字符外添加span标签后合并返回。
        return [...str].map(v=>`<span>${v}</span>`).join("");
    }
</script>
</body>
</html>

总结

这里讲解了运算符的扩展相关内容，下一期讲解数值的扩展

菜鸟一枚在这

关注

0
点赞
踩
0

收藏

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

运算符的扩展上期我们讲解了字符串的相关内容，这期我们讲解运算符相关的知识。es6之扩展运算符三个点（…）对象的扩展运算符数组的扩展运算符剩余参数的处理目录运算符的扩展1、对象的扩展运算符2、数组的扩展运算符3、使⽤三个点(...)对剩余参数的处理总结1、对象的扩展运算符<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title&gt
复制链接

扫一扫