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中万恶的function实例分析
May 25 Javascript
使用JavaScript构建JSON格式字符串实现步骤
Mar 22 Javascript
完美实现bootstrap分页查询
Dec 09 Javascript
JS实现可编辑的后台管理菜单功能【附demo源码下载】
Sep 13 Javascript
基于JavaScript实现屏幕滚动效果
Jan 18 Javascript
详解angularjs中如何实现控制器和指令之间交互
May 31 Javascript
ReactNative之FlatList的具体使用方法
Nov 29 Javascript
vue.js父子组件通信动态绑定的实例
Sep 28 Javascript
15个顶级开源JavaScript框架和库
Oct 10 Javascript
30分钟精通React今年最劲爆的新特性——React Hooks
Mar 11 Javascript
Vue scrollBehavior 滚动行为实现后退页面显示在上次浏览的位置
May 27 Javascript
JQuery事件委托(适用于给动态生成的脚本元素添加事件)
Feb 01 jQuery
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
谈谈新手如何学习PHP
2006/12/23 PHP
php中处理mysql_fetch_assoc返回来的数组 不用foreach----echo
2011/05/04 PHP
PHP常用技巧总结(附函数代码)
2012/02/04 PHP
新浪SAE云平台下使用codeigniter的数据库配置
2014/06/12 PHP
smarty高级特性之过滤器的使用方法
2015/12/25 PHP
Thinkphp5.0 框架的请求方式与响应方式分析
2019/10/14 PHP
laravel框架语言包拓展实现方法分析
2019/11/22 PHP
Laravel5.1 框架Request请求操作常见用法实例分析
2020/01/04 PHP
各种常用的JS函数整理
2013/10/25 Javascript
正则表达式中特殊符号及正则表达式的几种方法总结(replace,test,search)
2013/11/26 Javascript
JS短路原理的应用示例 精简代码的途径
2013/12/13 Javascript
node.js中的fs.closeSync方法使用说明
2014/12/17 Javascript
JS+HTML5手机开发之滚动和惯性缓动实现方法分析
2016/06/12 Javascript
VUEJS实战之利用laypage插件实现分页(3)
2016/06/13 Javascript
Node.js如何自动审核团队的代码
2016/07/20 Javascript
浅谈js中调用函数时加不加括号的问题
2016/07/28 Javascript
js+html制作简单验证码
2017/02/16 Javascript
使用JavaScript开发跨平台的桌面应用详解
2017/07/27 Javascript
vue2.0 兄弟组件(平级)通讯的实现代码
2018/01/15 Javascript
使用watch监听路由变化和watch监听对象的实例
2018/02/24 Javascript
vue router带参数页面刷新或回退参数消失的解决方法
2019/02/27 Javascript
详解vue.js移动端配置flexible.js及注意事项
2019/04/10 Javascript
vue实现后台管理权限系统及顶栏三级菜单显示功能
2019/06/19 Javascript
vue 组件基础知识总结
2021/01/26 Vue.js
[02:54]DOTA2英雄基础教程 暗影牧师戴泽
2013/12/05 DOTA
Python之web模板应用
2017/12/26 Python
[原创]Python入门教程3. 列表基本操作【定义、运算、常用函数】
2018/10/30 Python
PyTorch基本数据类型(一)
2019/05/22 Python
Python 中的 import 机制之实现远程导入模块
2019/10/29 Python
python3 求约数的实例
2019/12/05 Python
pygame实现飞机大战
2020/03/11 Python
在python中list作函数形参,防止被实参修改的实现方法
2020/06/05 Python
python 爬取百度文库并下载(免费文章限定)
2020/12/04 Python
HTML5 video标签(播放器)学习笔记(二):播放控制
2015/04/24 HTML / CSS
美国和加拿大房车出售在线分类广告:RVT.com
2018/04/23 全球购物
学校师德师风整改方案
2014/10/28 职场文书