数组的扩展→扩展运算符(...)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>扩展运算符</title>
</head>
<body>
    <script>
        /*
        扩展运算符(spread)是三个点(...)。
        它好比 rest 参数的逆运算,将一个数组转为用逗号分隔的参数序列。
        */
        function sum(...numbers){
            return numbers
        }
        console.log(sum(1,3,9))//[1, 3, 9]

        //reduce() 方法对数组中的每个元素执行一个由您提供的reducer函数(升序执行),将其结果汇总为单个返回值。
        function sum1(...numbers){
            return numbers.reduce((prev,curr)=>{
                console.log(`prev:${prev},curr:${curr}`)//prev:1,curr:3  prev:4,curr:9
                return prev+curr
            })
        }
        console.log(sum1(1,3,9))//13



        /*
        场景练习:汇率或者乘法表
        运用到:扩展运算符(...)和map映射
        */
        function exchangeRate(rate,...amounts){
            console.log(rate,amounts)//100 (3) [14.56, 1571.45, 16830.01]
            return amounts.map(amount=>{
                return amount*rate
            })
        } 
        console.log(exchangeRate(100,14.56,1571.45,16830.01))//(3) [1456, 157145, 1683000.9999999998]


        /*
        变量的结构
        */
        const player=['xyz',12,23,56,34,7,8]
        
        const[name1,id1,scores1]=player
        console.log(name1,id1,scores1)//xyz 12 23

        const [name,id,...scores]=player
        console.log(name,id,scores)//xyz 12 (5) [23, 56, 34, 7, 8]


    </script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>扩展运算符1</title>
</head>

<body>
    <script>
        const youngers = ['小红', '小明'];
        const olders = ['张三', '李四'];
        /*
        将youngers数组和olders数组进行整合:
        ['小红', '小明','张三', '李四']。
        */

        //JS方法
        // concat() 方法用于合并两个或多个数组。此方法不会更改现有数组,而是返回一个新数组。
        const members = youngers.concat(olders)
        console.log(members)//["小红", "小明", "张三", "李四"]





        /*
        注意现在我想在这两个数组:youngers数组和olders数组进行整合后
        在里面加个名字['小红', '小明','小强','张三', '李四']。
       */

        // ES5
        let members1 = [];
        members1 = members1.concat(youngers);
        members1.push('小强');
        members1 = members1.concat(olders);
        console.log(members1);//(5) ["小红", "小明", "小强", "张三", "李四"]

        //ES6
        const members2 = [...youngers, '小强', ...olders];
        console.log(members2);["小红", "小明", "小强", "张三", "李四"]


        /*
        注意现在问题继续延伸:我想在这两个数组:youngers数组和olders数组进行整合后
        在里面加个名字['小红', '小明','小强','张三', '李四'],并且修改第一个名字小红,
        而不影响整合后加名字的数组:
        */

        //失败的操作
        const members3 = [...youngers, '小强', ...olders];
        const members4=members3;
        members4[0]='小东';
        console.log(members3);//(5) ["小东", "小明", "小强", "张三", "李四"]
        console.log(members4);//(5) ["小东", "小明", "小强", "张三", "李四"]

        //成功的操作
        const members5 = [...youngers, '小强', ...olders];
        const members6=[...members5];
        members6[0]='小东';
        console.log(members5);//(5) ["小红", "小明", "小强", "张三", "李四"]
        console.log(members6);//(5) ["小东", "小明", "小强", "张三", "李四"]






    </script>
</body>

</html>

猜你喜欢

转载自blog.csdn.net/JEFF_luyiduan/article/details/94342669
今日推荐