1. 首页
  2. 前端

js中将字符串转换成数组和过滤空值的方法

工作中在处理数据时,难免会有将字符串转化成数组,并且去除 false,null,0,undefiend,NaN和空字符串””的场景,有时候还会要求将数组中的各项转换成数值类型等,这里就对于上面的场景,进行一个实例分析,这里就以去除空字符串””为例。

假如有这样一个字符串:

var str=”,1,2,3,4,5,”;

我们对该字符串按照上面的场景进行处理。

1.首先,将该字符串转换成数组。

实现该步骤的方法有很多,根据个人爱好选择,这里我就用js中的split方法实现。使用split用逗号(,)对字符串进行分割.

var splitStr=str.split(",");

得到的数组splitStr为:

[“”,”1″,”2″,”3″,”4″,”5″,””]

2.对该数组进行去除空字符串处理

splitStr数组中有空字符串“”,当然得想办法将空字符串过滤掉。这里我们定义一个函数来处理空字符串,如下:

function bouncer(arr) {
  return arr.filter((val)=>{
    return !(val === "");
  });
}

解释:定义一个函数bouncer,形参arr,该参数arr是个数组,这里使用filter方法来对数组中的元素进行过滤,filter的val参数是arr数组的每一项,然后通过判断每一项val是否为空,如果val不为空则返回,最后将过滤的结果返回出去。

3.函数调用

有了空字符串过滤函数,现在就可以直接调用该函数了,代码如下:

var stringArr=bouncer(splitStr);

将第一步转化的数组splitStr作为实参,传给函数bouncer,结果如下:

[“1″,”2″,”3″,”4″,”5”]

4.将字符串数组转换为数值数组

此时,数组stringArr中的每一项值都是字符串类型的,而我们想要的是数字类型的,这时也需要对类型进行转换。代码如下:

var getNumberArr=stringArr.map((value)=>{
  return Number(value)
})

对数组stringArr中的每一项值value通过map进行遍历,并且将该值使用Number()来转化成数值类型,然后返回得到新的数组getNumberArr,这时该数组getNumberArr中的每一项就被转换成数值类型了,getNumberArr结果如下:

[1,2,3,4,5]

至此,功能已完成,完整的代码如下:

<script>
  function bouncer(arr) {
    return arr.filter((val)=>{
      return !(val === "");
    });
  }

  var str=",1,2,3,4,5,";
  var splitStr=str.split(",");
  var stringArr=bouncer(splitStr);

  var getNumberArr=stringArr.map((value)=>{
    return Number(value)
  })
  console.log(getNumberArr)
</script>

当然,实现该场景的方法有多种,不同的人实现方法可能不同,希望大家动手自己试着写一下,举一反三。有什么问题欢迎在下方留言,也可以将你自己的实现方法展示在下方留言处,分享给更多人。

建议:本例子中的数组遍历使用了map方法,遍历方法很多,如:for,foreach,for ……in,map,for……of ,filter,every,some,in等等,可以参考博文【浅谈JavaScript中热闹的循环及使用方法详细介绍】根据不同的场景或需求合理选择,对这些不懂的可以自己下去研究下。

原创文章,作者:Ferrycoln,如若转载,请注明出处:https://ms200.cn/archives/618

发表评论

电子邮件地址不会被公开。 必填项已用*标注

评论列表(3条)

  • 东东 2018年11月21日 下午7:42

    站长辛苦了,拿走了,希望继续多出些干货。

  • 匿名 2018年11月21日 下午7:39

    好,刚好用在项目中了,搜藏下了

  • 小石头 2018年11月21日 下午7:30

    不错,又学到知识了。

联系我们

在线咨询:点击这里给我发消息

邮件:499661635@qq.com.com

工作时间:周一至周五,9:30-18:30

QR code