javascript中数组和字符串的方法对比


Posted in Javascript onJuly 20, 2016

前面的话

字符串和数组有很多的相同之处,它们的方法众多,且相似度很高;但它们又有不同之处,字符串是不可变值,于是可以把其看作只读的数组。本文将对字符串和数组的类似方法进行比较

可索引

ECMAScript5定义了一种访问字符的方法,使用方括号加数字索引来访问字符串中的特定字符

可索引的字符串的最大的好处就是简单,用方括号代替了charAt()调用,这样更加简洁、可读并且可能更高效。不仅如此,字符串的行为类似于数组的事实使得通用的数组方法可以应用到字符串上

如果参数超出范围或是NaN时,则输出undefined

var str = "hello";
console.log(str[0]);//h
console.log(str[[1]]);//e

console.log(str[false]);//undefined
console.log(str[-1]);//undefined
console.log(str[NaN]);//undefined
console.log(str[]);//报错
var arr = ['h','e','l','l','o'];
console.log(arr[0]);//h
console.log(arr[[1]]);//e

console.log(arr[false]);//undefined
console.log(arr[-1]);//undefined
console.log(arr[NaN]);//undefined
console.log(arr[]);//报错

转换

字符串可以使用split()方法转换为数组;而数组可以使用join()方法转换为字符串

【split()】

split()方法基于指定的分隔符将一个字符串分割成多个字符串,并将结果放在一个数组中,分隔符可以是字符串,也可以是一个正则表达式

该方法可以接受(可选的)第二个参数用于指定数组的大小。如果第二个参数为0-array.length范围内的值时,按照指定参数输出,其他情况将所有结果都输出

若指定分隔符没有出现在字符串中,则以数组的形式返回原字符串的值

var colorText = 'red,blue,green,yellow';
console.log(colorText.split(''));//["r", "e", "d", ",", "b", "l", "u", "e", ",", "g", "r", "e", "e", "n", ",", "y", "e", "l", "l", "o", "w"]
console.log(colorText.split(','));//["red", "blue", "green", "yellow"]
console.log(colorText.split(',',2));//["red", "blue"]
console.log(colorText.split(',',6));//["red", "blue", "green", "yellow"]
console.log(colorText.split('-'));//["red,blue,green,yellow"]
console.log(colorText.split(/\,/));//["red", "blue", "green", "yellow"]
console.log(colorText.split(/e/));//["r", "d,blu", ",gr", "", "n,y", "llow"]
console.log(colorText.split(/[^\,]+/));//将除去逗号以外的字符串变为分隔符["", ",", ",", ",", ""],IE8-会识别为[",",",",","]

【join()】

join()方法可以使用不同的分隔符来构建这个字符串,join()方法只接收一个参数,用作分隔符的字符串,然后返回包含所有数组项的字符串

如果不给join()方法传入任何值,则使用逗号作为分隔符

var a = [1,2,3];
console.log(a.join());//'1,2,3'
console.log(a.join(' '));//'1 2 3'
console.log(a.join(''));//'123'

var b = new Array(10);
b.join('-');//'---------',9个连字符组成的字符串

如果数组中的某一项的值是null或者undefined,则该值在join()方法返回的结果中以空字符串表示

var colors = [1,undefined,2,null,3];
console.log(colors.join());//'1,,2,,3'

由于字符串是类数组对象,所以,也可以使用join()方法

console.log(Array.prototype.join.call('hello', '-'));// "h-e-l-l-o"
var str = 'test';
var arr = str.split('')//["t", "e", "s", "t"]
console.log(arr.join('-'));//'t-e-s-t'

拼接

字符串和数组共同拥有拼接方法concat()

var value = 'hello';
console.log(value.concat('world'));//'helloworld'
console.log(value.concat(['world']));//'helloworld'
console.log(value.concat([['world']]));//'helloworld'
var value = ['hello'];
console.log(value.concat('world'));//["hello", "world"]
console.log(value.concat(['world']));//["hello", "world"]
console.log(value.concat([['world']]));//["hello", ["world"]]

创建

字符串和数组都拥有创建方法slice(),分别用于创建子字符串和子数组

slice()方法基于当前数组(或字符串)中的一个或多个项创建一个新数组(或字符串),接受一个或两个参数,即要返回项的起始和结束位置,最后返回新数组(或字符串)

slice(start,end)方法需要两个参数start和end,返回这个数组(或字符串)中从start位置到(但不包含)end位置的一个子数组(或字符串);如果end为undefined或不存在,则返回从start位置到数组(或字符串)结尾的所有项

如果start是负数,则start = max(length + start,0)

如果end是负数,则end = max(length + end,0)

start和end无法交换位置

var numbers = [1,2,3,4,5];
console.log(numbers.slice(2));//[3,4,5]
console.log(numbers.slice(2,undefined));//[3,4,5]
console.log(numbers.slice(2,3));//[3]
console.log(numbers.slice(2,1));//[]

console.log(numbers.slice(-3));//-3+5=2 -> [3,4,5]
console.log(numbers.slice(-8));//max(5 + -8,0)=0 -> [1,2,3,4,5]

console.log(numbers.slice(0,-3));//-3+5=2 -> [1,2]
console.log(numbers.slice(-2,-1));//-2+5=3;-1+5=4; -> [4]
var stringValue = 'hello world';
console.log(stringValue.slice());//'hello world'
console.log(stringValue.slice(2));//'llo world'
console.log(stringValue.slice(20));//''
console.log(stringValue.slice(2,undefined));//'llo world'

console.log(stringValue.slice(2,-5));//'llo '
console.log(stringValue.slice(2,-20));//''
console.log(stringValue.slice(-2,2));//''
console.log(stringValue.slice(-2,-20));//''      
console.log(stringValue.slice(-2,20));//'ld'
console.log(stringValue.slice(-20,2));//'he'
console.log(stringValue.slice(-20,-2));//'hello wor'

位置

字符串和数组都拥有查找位置的两个方法:indexOf()和lastIndexOf()。位置方法和中括号[]读取方法正好相反,一个是通过项查找索引,一个是通过索引查找项

【indexOf()】

indexOf(search,start)方法接收search和start两个参数,返回search首次出现的位置,如果没有找到则返回-1

字符串中的search参数会调用String()转型函数,将该参数的非字符串值转换为字符串;而数组中的search参数则使用严格相等运算符(===)进行比较

不论是数组还是字符串,第二个参数start都会隐式调用Number()转型函数,将start非数字值(undefined除外)转换为数值;若忽略该参数或该参数为undefined、NaN时,start = 0

若start参数为负数,字符串的处理是将start=0;而数组的处理是start = max(0,start+length)

var string = 'hello world world';
console.log(string.indexOf('ld'));//9
console.log(string.indexOf('ld',undefined));//9
console.log(string.indexOf('ld',NaN));//9
console.log(string.indexOf('ld',-1));//9
console.log(string.indexOf('ld',10));//15
console.log(string.indexOf('ld',[10]));//15
console.log(string.indexOf('true',[10]));//-1
console.log(string.indexOf(false,[10]));//-1
var arr = ['a','b','c','d','e','a','b'];
console.log(arr.indexOf('a',undefined));//0
console.log(arr.indexOf('a',NaN));//0
console.log(arr.indexOf('a',1));//5
console.log(arr.indexOf('a',true));//5
console.log(arr.indexOf('a',-1));//max(0,-1+7)=6; -1
console.log(arr.indexOf('a',-5));//max(0,-5+7)=2; 5
console.log(arr.indexOf('a',-50));//max(0,-50+7)=0; 0

【lastIndexOf()】

与indexOf()方法相反,lastIndexOf()方法是从右向左查找

lastIndexOf(search,start)方法接收search和start两个参数,返回searchString第一次出现的位置,如果没有找到则返回-1

类似地,字符串中的search参数会调用String()转型函数,将该参数的非字符串值转换为字符串;而数组中的search参数则使用严格相等运算符(===)进行比较

不论是数组还是字符串,第二个参数start都会隐式调用Number()转型函数,将start非数字值(undefined除外)转换为数值

若忽略该参数或该参数为undefined、NaN时,字符串的处理是start = length - 1;而数组的处理是start = 0

若start参数为负数,字符串的处理是将start=0;而数组的处理是start = max(0,start+length)

var string = 'hello world world';
console.log(string.lastIndexOf('ld'));//15
console.log(string.lastIndexOf('ld',undefined));//15
console.log(string.lastIndexOf('ld',NaN));//15
console.log(string.lastIndexOf('ld',-1));//-1
console.log(string.lastIndexOf('h',-1));//0
console.log(string.lastIndexOf('w',undefined));//12

console.log(string.lastIndexOf('ld',10));//9
console.log(string.lastIndexOf('ld',[10]));//9
console.log(string.lastIndexOf('true',[10]));//-1
console.log(string.lastIndexOf(false,[10]));//-1
var arr = [1,2,3,'1','2','3'];
console.log(arr.lastIndexOf('2'));//4
console.log(arr.lastIndexOf(3));//2
console.log(arr.lastIndexOf(0));//-1

var arr = ['a','b','c','d','e','a','b'];
console.log(arr.lastIndexOf('b'));//6
console.log(arr.lastIndexOf('b',undefined));//-1
console.log(arr.lastIndexOf('a',undefined));//0
console.log(arr.lastIndexOf('b',NaN));//-1
console.log(arr.lastIndexOf('b',1));//1
console.log(arr.lastIndexOf('b',-1));//max(0,-1+7)=6; 6
console.log(arr.lastIndexOf('b',-5));//max(0,-5+7)=2; 1
console.log(arr.lastIndexOf('b',-50));//max(0,-50+7)=0; -1

以上这篇javascript中数组和字符串的方法对比就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 用原型继承来实现对象系统
Mar 22 Javascript
JS幻灯片可循环播放可平滑旋转带滚动导航(自写)
Aug 05 Javascript
javascript遍历控件实例详细解析
Jan 10 Javascript
jQuery oLoader实现的加载图片和页面效果
Mar 14 Javascript
angularjs 中$apply,$digest,$watch详解
Oct 13 Javascript
快速实现jQuery多级菜单效果
Feb 01 Javascript
详谈js的变量提升以及使用方法
Oct 06 Javascript
微信小程序云开发之新手环境配置
May 16 Javascript
解决vue项目,npm run build后,报路径错的问题
Aug 13 Javascript
js实现炫酷光感效果
Sep 05 Javascript
js实现网页随机验证码
Oct 19 Javascript
element-ui 弹窗组件封装的步骤
Jan 22 Javascript
js简单实现图片延迟加载的方法
Jul 19 #Javascript
JS实现输入框提示文字点击时消失效果
Jul 19 #Javascript
JavaScript新增样式规则(推荐)
Jul 19 #Javascript
JavaScript动态添加css样式和script标签
Jul 19 #Javascript
javascript中使用未定义变量或值的情况分析
Jul 19 #Javascript
js基于cookie记录来宾姓名的方法
Jul 19 #Javascript
jQuery悬停文字提示框插件jquery.tooltipster.js用法示例【附demo源码下载】
Jul 19 #Javascript
You might like
DedeCms模板安装/制作概述
2007/03/11 PHP
PHP生成和获取XML格式数据的方法
2016/03/04 PHP
PHP数据库表操作的封装类及用法实例详解
2016/07/12 PHP
ThinkPHP3.2.1图片验证码实现方法
2016/08/19 PHP
IE中jscript/javascript的条件编译
2006/09/07 Javascript
jQuery 剧场版 你必须知道的javascript
2009/05/27 Javascript
JavaScript 事件查询综合
2009/07/13 Javascript
WEB高性能开发之疯狂的HTML压缩
2010/06/19 Javascript
jquery键盘事件介绍
2011/01/31 Javascript
javascript写的简单的计算器,内容很多,方法实用,推荐
2011/12/29 Javascript
利用JS判断用户是否上网(连接网络)
2013/12/23 Javascript
JS实现超精简响应鼠标显示二级菜单代码
2015/09/12 Javascript
在Linux系统中搭建Node.js开发环境的简单步骤讲解
2016/01/26 Javascript
原生JavaScript实现动态省市县三级联动下拉框菜单实例代码
2016/02/03 Javascript
快速解决js动态改变dom元素属性后页面及时渲染的问题
2016/07/06 Javascript
JS短信验证码倒计时功能的实现(没有验证码,只有倒计时)
2016/10/27 Javascript
JS+HTML5实现图片在线预览功能
2017/07/22 Javascript
Three.js基础学习教程
2017/11/16 Javascript
详解javascript对数组和json数组的操作
2019/04/15 Javascript
如何在JavaScript中创建具有多个空格的字符串?
2020/02/23 Javascript
vue addRoutes路由动态加载操作
2020/08/04 Javascript
在Python的struct模块中进行数据格式转换的方法
2015/06/17 Python
Linux上安装Python的PIL和Pillow库处理图片的实例教程
2016/06/23 Python
asyncio 的 coroutine对象 与 Future对象使用指南
2016/09/11 Python
python样条插值的实现代码
2018/12/17 Python
python产生模拟数据faker库的使用详解
2020/11/04 Python
Wedgwood美国官网:英国骨瓷,精美礼品及家居装饰
2018/02/17 全球购物
干部考察材料范文
2014/12/24 职场文书
学校捐书倡议书
2015/04/27 职场文书
上诉答辩状范文
2015/05/22 职场文书
卢旺达饭店观后感
2015/06/05 职场文书
2015大学迎新标语
2015/07/16 职场文书
2019年暑期法院实习报告
2019/12/18 职场文书
python周期任务调度工具Schedule使用详解
2021/11/23 Python
Python利用FlashText算法实现替换字符串
2022/03/31 Python
Java版 单机五子棋
2022/05/04 Java/Android