数组的扩展→扩展运算符（...）

灰太狼 2021-12-19 15:53 270阅读 0赞

<!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>