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 相关文章推荐
基于jquery实现的仿优酷图片轮播特效代码
Jan 13 Javascript
BootStrap 智能表单实战系列(五) 表单依赖插件处理
Jun 13 Javascript
js重写方法的简单实现
Jul 10 Javascript
Bootstrap CSS组件之大屏幕展播
Dec 17 Javascript
jQuery插件FusionCharts绘制ScrollColumn2D图效果示例【附demo源码下载】
Mar 22 jQuery
AngularJS页面传参的5种方式
Apr 01 Javascript
jQuery插件imgAreaSelect基础讲解
May 26 jQuery
JavaScript中附件预览功能实现详解(推荐)
Aug 15 Javascript
JS实现的找零张数最小问题示例
Nov 28 Javascript
javascript中call,apply,callee,caller用法实例分析
Jul 24 Javascript
jquery将json转为数据字典的实例代码
Oct 11 jQuery
ES6的异步操作之promise用法和async函数的具体使用
Dec 06 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
利用递归把多维数组转为一维数组的函数
2006/10/09 PHP
php之Smarty模板使用方法示例详解
2014/07/08 PHP
分享自定义的几个PHP功能函数
2015/04/15 PHP
支持中文、字母、数字的PHP验证码
2015/05/04 PHP
在laravel框架中使用model层的方法
2019/10/08 PHP
JQuery设置和去除disabled属性的5种方法总结
2013/05/16 Javascript
js锁屏解屏通过对$.ajax进行封装实现
2014/07/31 Javascript
jQuery实现限制textarea文本框输入字符数量的方法
2015/05/28 Javascript
Javascript中的getUTCHours()方法使用详解
2015/06/10 Javascript
JQuery实现网页右侧随动广告特效
2016/01/17 Javascript
jQuery简单设置文本框回车事件的方法
2016/08/01 Javascript
AngularJS 表达式详解及实例代码
2016/09/14 Javascript
Angular 4.X开发实践中的踩坑小结
2017/07/04 Javascript
不使用 JS 匿名函数理由
2017/11/17 Javascript
vue如何解决循环引用组件报错的问题
2018/09/22 Javascript
Vue之beforeEach非登录不能访问的实现(代码亲测)
2019/07/18 Javascript
vue自定义switch开关组件,实现样式可自行更改
2019/11/01 Javascript
JavaScript闭包原理与用法学习笔记
2020/05/29 Javascript
[02:12]打造更好的电竞完美世界:完美盛典回顾篇
2018/12/19 DOTA
如何使用 Pylint 来规范 Python 代码风格(来自IBM)
2018/04/06 Python
如何安装2019Pycharm最新版本(详细教程)
2019/09/26 Python
Python 使用type来定义类的实现
2019/11/19 Python
Python中Subprocess的不同函数解析
2019/12/10 Python
Python reques接口测试框架实现代码
2020/07/28 Python
python利用 keyboard 库记录键盘事件
2020/10/16 Python
Python生成pdf目录书签的实例方法
2020/10/29 Python
python cookie反爬处理的实现
2020/11/01 Python
中英文自我评价常用句型
2013/12/19 职场文书
项目副经理岗位职责
2013/12/30 职场文书
安全责任书范文
2014/03/12 职场文书
超市客服工作职责
2014/06/11 职场文书
预备党员自我批评思想汇报
2014/10/10 职场文书
初中团支书竞选稿
2015/11/21 职场文书
一文了解JavaScript用Element Traversal新属性遍历子元素
2021/11/27 Javascript
《游戏王:大师决斗》将推出新卡牌包4月4日上线
2022/03/31 其他游戏
JavaScript前端面试组合函数
2022/06/21 Javascript