JS常用函数整理--set&split&join

在实际编写代码处理问题时,发现对数组对象的处理还是很陌生,在这里记录一下使用方法。


编写背景及参考代码

交易金额超过 ¥1000
或者,它和另一个城市中同名的另一笔交易相隔不超过 60 分钟(包含 60 分钟整)
每个交易字符串 transactions[i] 由一些用逗号分隔的值组成,这些值分别表示交易的名称,时间(以分钟计),金额以及城市。

给你一份交易清单 transactions,返回可能无效的交易列表。你可以按任何顺序返回答案。
示例 1:

输入:transactions = [“alice,20,800,mtv”,“alice,50,100,beijing”]
输出:[“alice,20,800,mtv”,“alice,50,100,beijing”]
解释:第一笔交易是无效的,因为第二笔交易和它间隔不超过 60 分钟、名称相同且发生在不同的城市。同样,第二笔交易也是无效的。

示例 2:

输入:transactions = [“alice,20,800,mtv”,“alice,50,1200,mtv”]
输出:[“alice,50,1200,mtv”]
示例 3:

输入:transactions = [“alice,20,800,mtv”,“bob,50,1200,mtv”]
输出:[“bob,50,1200,mtv”]

提示:

transactions.length <= 1000
每笔交易 transactions[i] 按 “{name},{time},{amount},{city}” 的格式进行记录
每个交易名称 {name} 和城市 {city} 都由小写英文字母组成,长度在 1 到 10 之间
每个交易时间 {time} 由一些数字组成,表示一个 0 到 1000 之间的整数
每笔交易金额 {amount} 由一些数字组成,表示一个 0 到 2000 之间的整数

解答:
var invalidTransactions = function (transactions) {
            let invalid = new Set();
            transactions.forEach((element, index) => { //将transactions转成便于比较的二维数组
                transactions[index] = element.split(",");
            });
            for (let i = 0; i < transactions.length; i++) { //两层遍历取符和结果的值
                if (transactions[i][2] > 1000) {
                    invalid.add(transactions[i].join(","));
                }
                    for (let j = i + 1; j < transactions.length; j++) {
                        if (transactions[j][0] === transactions[i][0]
                            && Math.abs(transactions[i][1] - transactions[j][1]) <= 60
                            && transactions[i][3] != transactions[j][3]) {
                            invalid.add(transactions[i].join(","));
                            invalid.add(transactions[j].join(","));
                        }
                }
            }
            return [...invalid];
        };

思考及学习

在我自己实际答题时,未注意将每个元素进行二维数组分割这样一个操作,默认成了数组对象的组成方式:

transactions:[
               {
                      id:1,
                      name:"alice",
                      amount:800,
                      time:20,
                      city:"mtv"
               },
               {
                     id:2,
                     name:"alice",
                     amount:100,
                     time:50,
                      city:"beijing"
              }
           ]

因此在实际运行过程中一直无结果输出。

set的使用

ES6 提供了新的数据结构 Set。它类似于数组,但是成员的值都是唯一的,没有重复的值。这也省去了本题中,需要去除重复的需求。
代码示例:

	const s = new Set();
	[2,3,5,4,5,2,2].forEach(x => s.add(x));
	// Set结构不会添加重复的值
	for(let i of s) {
		 console.log(i);
	}

打印结果:
打印结果
将本题的字符输入进行测试
测试
set中每一个值都不会重复,但是,为何在本题“前端小队长”写的那串代码输出的时候,可以做到显示的是["alice,20,800,mtv", "alice,50,100,beijing"],这里就要提及数组处理方法split和join了

join使数组变字符串

        let ListBefore=["1","2","3","4"];
        joinList = ListBefore.join(",");
        console.log(joinList);

输出结果:
在这里插入图片描述

split使字符串变数组

strToList=joinList.split(",")
//输出结果 (4) ["1", "2", "3", "4"]

可以通过两个变量的值看出这一转换过程
数组字符串
分析时发现,将字符串数组进行拆分,变成二维数组的方法竟然是这样,emmm,js的语法还是要好好地看一看

            transactions.forEach((element, index) => { //将transactions转成便于比较的二维数组
                transactions[index] = element.split(",");
            });
附解决方案参考来源:
CSDN博主「前端小端长」
原文链接:https://blog.csdn.net/zhang1339435196/article/details/101440416
题目来源:
力扣(LeetCode)
链接:https://leetcode-cn.com/problems/invalid-transactions

这里是我在看到“前端小队长”的写法前随意写的解法。
因为不知道data的渲染需要在函数最后加 THIS 琢磨了好久都没有结果。还好及时请教了小伙伴

 this.test=result

这里是我拙劣的解答

<!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>
    <style>
        [v-cloak]{
            display:none;
        }
        *{
            padding:0;
            margin:0;
            list-style:none;
        }

        .container{
            width:90%;
            margin:10px auto;
            line-height: 20px;
        }

        .thead-ul
        {
            display: flex;
            border:1px solid burlywood;
            padding: 10px;
            color:burlywood;
        }

        .thead-ul li
        {
            flex:1;
            text-align:center;
            align-items: center;
            padding:20px ;
        }
    </style>
</head>
<body>
    <div id="app" v-cloak>
        <div class="container">
            <span>输入</span>
            <!-- <input type="text" :value="test"> -->
            <ul class="thead-ul">
                <li>name</li>
                <li>time</li>
                <li>amount</li>
                <li>city</li>
            </ul>
            <ul class="thead-ul" v-for="item in transactions">
                <li>{{item.name}}</li>
                <li>{{item.time}}</li>
                <li>{{item.amount}}</li>
                <li>{{item.city}}</li>
            </ul>
            <span>输出</span>
            <button @click="invalidTransactions(transactions,test)">函数调用</button>
            <div style="height:100px;border:1px solid burlywood">
                <ul class="thead-ul" v-for="item in test">
                    <li>{{item.name}}</li>
                    <li>{{item.time}}</li>
                    <li>{{item.amount}}</li>
                    <li>{{item.city}}</li>
                </ul>
            </div>
        </div>
    </div>
        <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
    <script>
        Vue.config.devtools = false
        Vue.config.productionTip = false    
        new Vue({
            el:"#app",
            methods: {
                invalidTransactions(transactions,test){
                    let result=[];
                    var keys;
                    var j;
                    var i;
                    for (var j=0;j< transactions.length;j++)
                    {
                        keys= transactions[j];
                        if (keys.amount>1000)
                        {
                            if(result.length==0){
                                result.push(keys)
                            }else{
                               let flag=0
                               for (let m=0;m<result.length;m++)
                               {
                                   if(keys.id==result.id){flag=1;break}
                               }
                               if(flag==0){result.push(keys)}   
                            }
                        }
                        for(i=j+1;i<transactions.length;i++ )
                        {
                            if(keys.name==transactions[i].name && keys.city!=transactions[i].city && Math.abs(keys.time-transactions[i].time)<=60)
                                { 
                                    if(result.length==0){
                                        result.push(keys)
                                        result.push(transactions[i])
                                    }else{
                                        let flag1=0
                                        let flag2=0
                                        for (let m=0;m<result.length;m++)
                                        {
                                            if(keys.id==result.id){flag1=1;break}
                                            if(transactions[i].id==result.id){flag2=1;break}
                                        }
                                        if(flag1==0){result.push(keys)}
                                        if(flag2==0){result.push(keys)}
                                    }
                                }
                        }
                    }
                    this.test=result
                }
            },
            data() {
                return {
                    transactions:[
                        {
                            id:1,
                            name:"alice",
                            amount:800,
                            time:20,
                            city:"mtv"
                        },
                        {
                            id:2,
                            name:"alice",
                            amount:100,
                            time:50,
                            city:"beijing"
                        }
                    ],
                    test:[]
                }
            }
        })
    </script>
</body>
</html>
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章