js实现字符串和数组之间相互转换操作


Posted in Javascript onJanuary 12, 2016

本文实例介绍了javascript中字符串和数组的相互转换方法,分享给大家供大家参考,具体内容如下
字符串和数组的相互转换操作是非常的重要的,因为在实际编码过程中会经常用到,所以这是必须要掌握的知识点,当然这个知识点并不难,知道了就永远知道了,并不是那种需要充分实践才能够掌握的东西,下面就做一下简单的介绍。
一.字符串转换为数组
此操作会用到split()函数,它能够以指定的字符作为分隔符,将字符串转换成一个数组,实例代码如下:

var Str="abc-mng-zhang-mayi";
var newArray=Str.split("-");
console.log(newArray);

由输出的结果可以看出,split()函数已经将字符串转换成一个数组。
二.将数组转换为字符串
此操作可以使用Array对象的join()函数来实现,此函数可以将数组中的元素以指定的字符连接起来,然后返回产生的字符串。
代码如下: 

var newArray=["abc","mng","zhang","mayi"];
var Str=newArray.join("-");
console.log(Str);

以上代码实现了我们的要求,使用"-"将数组元素连接了起来,并生成了一个字符串。
上面的两个例子都是使用的自带的函数,当然我们也可以自己写,这样灵活性更大,并且知根知底。
三.自定义字符串转换为数组

function StringToArray(str,substr) 
{ 
 var arrTmp=new Array(); 
 if(substr=="") 
 { 
 arrTmp.push(str); 
 return arrTmp; 
 } 
 var i=0,j=0,k=str.length; 
 while(i<k) 
 { 
 j=str.indexOf(substr,i); 
 if(j!=-1) 
 { 
  if(str.substring(i,j)!="") 
  { 
  arrTmp.push(str.substring(i,j)); 
  } 
  i = j+1; 
 } 
 else
 { 
  if(str.substring(i,k)!="") 
  { 
  arrTmp.push(str.substring(i,k)); 
  } 
  i=k; 
 } 
 } 
 return arrTmp; 
}
var Str="abc-mng-zhang-mayi";
console.log(StringToArray(Str,"-"));
console.log(StringToArray(Str,"-").length);

以上代码同样实现了将字符串转换为数组的功能,下面对代码进行一下注释:
代码注释:
1.function StringToArray(str,substr){},此函数用来进行转化,str是要被转换的字符串,substr是分隔符。
2. var arrTmp=new Array(),声明一个数组,用来存放分割的字符串片段。
3.if(substr=="") {arrTmp.push(str);return arrTmp;},如果字符串分隔符为空,那么就将整个字符串放入数组。
4. var i=0,j=0,k=str.length;声明三个变量,并赋初值,k的值是字符串中字符的个数。
5.while(i<k){},一个while循环语句,执行的条件是i的值小于k也就是小于字符串中字符的个数。
6.j=str.indexOf(substr,i),用来检测分隔符在字符串出现的位置,如果indexOf()函数带有两个参数的,第二个参数是查找指定字符开始的位置,这段代码要结合下面的代码理解。
7.if(j!=-1),如果查找的分隔符存在。
8.if(str.substring(i,j)!=""){},截取从开始查找位置到查找到第一个分隔符之间的字符串。
9.arrTmp.push(str.substring(i,j));,将截取的字符串放入数组。
10.i=j+1;将开始查找的位置设置为分隔符的下一个字符。
11.else{},如果没有查找。
12.if(str.substring(i,k)!=""){arrTmp.push(str.substring(i,k));},如果最后一个分隔符之后的字符不为空,那么就添加到数组。
13.i=k,将i设置为k,这样循环就停止了。
14.return arrTmp; 返回数组。
相关知识:
1.push()方法的定义和用法:
此方法可以给指定的数组末尾追加一个或者多个新的元素,并返回数组的长度。
注:新元素是直接追加到原有的数组,而不是创建新的数组。
点击可参阅数组更多属性和方法。
语法结构:
arrayObject.push(元素一,元素二,....,元素N)

参数列表:
参数 描述
参数(一...N) 必需。要被追加的新元素。

实例代码:

var a = [1,2,3];
console.log(a.push("zhang","dao"));

2.indexOf()方法的定义和用法:
此方法返回指定的字符串在字符串中首次出现的位置。
如果没有检索到相应的字符串,返回值是-1。
注:此方法对大小写敏感。
语法结构:
stringObject.indexOf(substring,startindex)

实例代码:

var a=new String("abcdefg")
console.log(a.indexOf("b"));

b在字符串abcdefg中第二个出现。输出结果:1。

var a=new String("abcdefg")
console.log(a.indexOf("B"));

此方法对大小写敏感的,所以字符串abcdefg中并没有大写的B出现。输出结果:-1。

var a=new String("abcdefg")
console.log(a.indexOf("e",4));

检索开始的位置是4,字符串首次出现的位置还是从字符串的起始开始计算的。输出结果:4。

 3.substring()函数。

四.自定义数组转换为字符串

function ArrayToString(arr,str) 
{ 
 var strTmp=""; 
 for(var i=0;i<arr.length;i++) 
 { 
 if(arr[i]!="") 
 { 
  if(strTmp=="") 
  { 
  strTmp = arr[i]; 
  } 
  else
  { 
  strTmp=strTmp+str+arr[i]; 
  } 
 } 
 } 
 return strTmp; 
}
var newArray=["abc","mng","zhang","mayi"]; 
console.log(ArrayToString(newArray,"-"));

以上代码实现了我们的要求,可以将数组转换为字符串,下面对代码进行一下注释:
代码注释:
1.function ArrayToString(arr,str){},第一个参数是数组,第二个参数是连接字符串。
2.var strTmp="",声明一个空字符串。
3.for(var i=0;i<arr.length;i++) {},遍历数组中的每一个元素。
4.f(arr!=""){}如果数组元素不为空。
5.if(strTmp=="") {strTmp=arr;},如果字符串中也为空,那么就将数组中的此元素赋值给字符串strTmp。
6.else{strTmp=strTmp+str+arr},否则进行字符串连接。
7.return strTmp,返回转换后的字符串。

以上就是js实现字符串和数组之间相互转换的详细代码,希望对大家的学习有所帮助。

Javascript 相关文章推荐
javascript之大字符串的连接的StringBuffer 类
May 08 Javascript
javascript写的简单的计算器,内容很多,方法实用,推荐
Dec 29 Javascript
js函数参数设置默认值的一种变通实现方法
May 26 Javascript
javascript检测两个数组是否相似
May 19 Javascript
jQuery移动web开发中的页面初始化与加载事件
Dec 03 Javascript
jQuery移动端日期(datedropper)和时间(timedropper)选择器附源码下载
Apr 19 Javascript
基于BootStrap Metronic开发框架经验小结【六】对话框及提示框的处理和优化
May 12 Javascript
EasyUI中在表单提交之前进行验证
Jul 19 Javascript
Javascript获取图片原始宽度和高度的方法详解
Sep 20 Javascript
jquery中有哪些api jQuery主要API
Nov 20 jQuery
在Vue环境下利用worker运行interval计时器的步骤
Aug 01 Javascript
原生JavaScript实现换肤
Feb 19 Javascript
js右下角弹出提示框示例代码
Jan 12 #Javascript
jquery插件EasyUI中form表单提交实例分享
Jan 11 #Javascript
详解WordPress开发中get_current_screen()函数的使用
Jan 11 #Javascript
提升jQuery的性能需要做好七件事
Jan 11 #Javascript
jQuery 移动端artEditor富文本编辑器
Jan 11 #Javascript
AngularJs动态加载模块和依赖注入详解
Jan 11 #Javascript
jquery在ie7下选择器的问题导致append失效的解决方法
Jan 10 #Javascript
You might like
php+javascript的日历控件
2009/11/19 PHP
PHP中SESSION使用中的一点经验总结
2012/03/30 PHP
细谈php中SQL注入攻击与XSS攻击
2012/06/10 PHP
PHP has encountered a Stack overflow问题解决方法
2014/11/03 PHP
jQuery 锚点跳转滚动条平滑滚动一句话代码
2010/04/30 Javascript
js怎么终止程序return不行换jfslk
2013/05/30 Javascript
JavaScript实现大数的运算
2014/11/24 Javascript
举例详解AngularJS中ngShow和ngHide的使用方法
2015/06/19 Javascript
iframe跨域通信封装详解
2015/08/11 Javascript
Jquery调用iframe父页面中的元素及方法
2016/08/23 Javascript
深究AngularJS中ng-drag、ng-drop的用法
2017/06/12 Javascript
微信小程序图片选择区域裁剪实现方法
2017/12/02 Javascript
vue项目中导入swiper插件的方法
2018/01/30 Javascript
vue cli构建的项目中请求代理与项目打包问题
2018/02/26 Javascript
js捆绑TypeScript声明文件的方法教程
2018/04/13 Javascript
JavaScript使用math.js进行精确计算操作示例
2018/06/19 Javascript
Javascript 实现 Excel 导入生成图表功能
2018/10/22 Javascript
vue.js的vue-cli脚手架中使用百度地图API的实例
2019/01/21 Javascript
LayUI switch 开关监听 获取属性值、更改状态的方法
2019/09/21 Javascript
Vue使用富文本编辑器Vue-Quill-Editor(含图片自定义上传服务、清除复制粘贴样式等)
2020/05/15 Javascript
js实现省级联动(数据结构优化)
2020/07/17 Javascript
Python学习笔记之if语句的使用示例
2017/10/23 Python
python实现飞机大战微信小游戏
2020/03/21 Python
详解Python3 基本数据类型
2019/04/19 Python
python隐藏类中属性的3种实现方法
2019/12/19 Python
浅谈cv2.imread()和keras.preprocessing中的image.load_img()区别
2020/06/12 Python
Python Selenium模块安装使用教程详解
2020/07/09 Python
python正则表达式的懒惰匹配和贪婪匹配说明
2020/07/13 Python
python线程池 ThreadPoolExecutor 的用法示例
2020/10/10 Python
采购助理岗位职责
2014/02/16 职场文书
2014新年元旦活动策划方案
2014/02/18 职场文书
俞敏洪励志演讲稿
2014/04/29 职场文书
职工擅自离岗检讨书
2014/09/23 职场文书
2014年维修工作总结
2014/11/22 职场文书
Win11 Build 22000.51版本文件资源管理器“命令栏”和上下文菜单有什么新变化?
2021/11/21 数码科技
python turtle绘图命令及案例
2021/11/23 Python