A-A+

JavaScript数组和字符串用法介绍

2016年02月21日 web前端设计 暂无评论 阅读 10 views 次

在js编程中数组和字符串操作是很重要的,下面我来一一给大家介绍在js中常用的数组和字符串用法介绍,有需要学习的朋友可参考参考.

一、数组

(1)检测数组

对于一个全局作用域来说,使用instanceof操作符可以检测某个对象是不是数组,代码如下:

  1. if (value instanceof Array){   
  2.    //          
  3. }  

但如果网页中存在多个框架,实际上就存在多个不同的全局作用域,从而存在多个不同版本的Array构造函数。如果从一个框架向另一个框架传入一个数组,以上操作符便不起作用。ES5新增的Array.isArray()方法可以确定某个对象到底是不是数组,而不管它是在哪个全局作用域中创建的,代码如下:

  1. if (Array.isArray(value)){   
  2.    //      
  3. }  

以下举个例子,代码如下:

  1. <Script Language = "JAVAScript">  
  2. <!--  
  3.     var fruit;    //声明数组(变量)  
  4.     fruit = ["西瓜","香蕉","苹果"];    //给数组内三种水果赋值  
  5.     //第一次显示数组“fruit”的3个变量内容,<br>是换行符  
  6.     document.write(fruit[0] + "<br>" + fruit[1] + "<br>" + fruit[2] + "<br>" + fruit);  
  7.     document.write("<hr>");    //插入水平线做为分隔线  
  8.     fruit = [fruit[0],fruit[1],"草霉"];    //更改“fruit”数组内的变量“fruit[2]”为“草霉”  
  9.     //第二次显示数组“fruit”的3个变量内容,<br>是换行符  
  10.     document.write(fruit[0] + "<br>" + fruit[1] + "<br>" + fruit[2] + "<br>" + fruit);  
  11.     document.write("<hr>");     //插入水平线做为分隔线  
  12.     fruit = ["西瓜", ,"草霉"];    //重新给数组“fruit”内的变量赋值  
  13.     //第三次显示数组“fruit”的3个变量内容,<br>是换行符  
  14.     document.write(fruit[0] + "<br>" + fruit[1] + "<br>" + fruit[2] + "<br>" + fruit);  
  15.     document.write("<hr>");    //插入水平线做为分隔线  
  16.     fruit = ["西瓜","香蕉", ,];    //重新给数组“fruit”内的变量赋值,使数组增长到4个变量  
  17.     //第四次显示数组“fruit”的4个变量内容,<br>是换行符  
  18.     document.write(fruit[0] + "<br>" + fruit[1] + "<br>" + fruit[2] + "<br>" + fruit[3] + "<br>" + fruit);  
  19.     document.write("<hr>");    //插入水平线做为分隔线  
  20. -->  
  21. </Script>  

(2)转换方法

所以对象都具有toString()、valueOf()方法。调用数组的toString()方法会返回数组中每个值的字符串形式拼接而成的一个以逗号分隔的字符串。

而调用valueOf()方法返回的还是数组。

使用join()方法,可以使用不同的分隔符来构建由数组转换的字符串。它接受一个字符串参数,将其用作分隔符。默认为逗号。如果传入‘’,则将数组无素拼接起来,与字符串的+操作运算一样。

(3)栈、队列方法

push():接收任意数量的参数,把它们逐个添加到数组末尾,返回修改后数组的长度。

pop():不带参数,移除数组最后一项,并返回该项。

shift():不带参数,移除数组第一个项,并返回该项。

unshift():接收任意数量的参数,添加到数组的前端,返回新数组的长度。

(4)重排序方法

reverse():反转数组项的顺序,并返回修改后的数组。

sort():默认按升序排列数组项,并返回排序后的数组。它会调用每个项的toString()方法,然后比较得到的字符串,即使数组中每一项都是数字,代码如下:

  1. var num = [0,1,5,10,15];   
  2. num.sort();   
  3. console.log(num);  // [0,1,10,15,5]   

因为这种情况,我们一般给sort()传一个比较函数作为参数,代码如下:

  1. function compare(value1, value2){   
  2.    if (value1 < value2){   
  3.         return -1;    //这是升序的。可以交换-1和1,使结果降序。   
  4.     } else if (value1 > value2){   
  5.         return 1;   
  6.     } else {   
  7.         return 0;   
  8.     }      
  9. }  

如果对于数值类型或者其他valueOf()方法会返回数值类型的对象类型,可以使用下面更简单的比较函数:

  1. function compare(value1, value2){   
  2.     return value1 - value2;  //这是升序的。可以交换value1和value2,使结果降序。   
  3. }  

(5)操作方法

split() 方法用于把一个字符串分割成字符串数组。

concat():创建当前数组的一个副本,添加参数到这个副本的末尾,并返回这个新构建的数组。(即原数组不变)

slice():接受一或两个参数,即要返回项的起始和结束位置(结束位置的项不返回)。只有一个参数时,则返回起始项到当前数组末尾的所有项。(原数组不变)

splice():主要用途是向数组的中部插入项。(返回原数组被删除的项组成的数组,或一个空数组)如3种情况:

1.删除:2个参数,要删除的第一项的位置和要删除的项数。splice(0,2)删除数组中的前两项。

2.插入:3个(或以上)参数,起始位置、0(要删除的项数)、要插入的任意项。splice(2,0,'insert')从前数组的位置2插入项'insert'(注意'insert'是第

2项而不是第3项)。

3.替换:3个(或以上)参数,起始位置、要删除的项数、要插入的任意项。splice(2,1,'red','green')删除位置2的项,从位置2插入指定项。

(6)位置方法

indexOf():两个参数,要查找的项和(可选的)表示查找起点的位置的索引。从左向右查找。

lastIndesOf():同上,不同的是从右向左查找。

这两个方法都返回要查找的项在数组中的位置,找不到则返回-1,代码如下:

  1. var num = [1,2,3,4,5,4,3,2,1];   
  2. alert(num.indexOf(4));  //3   
  3. alert(num.lastIndexOf(4));  //5   
  4.     
  5. alert(num.indexOf(4,4));  //5   
  6. alert(num.lastIndesOf(4,4));  //3   

(7)迭代方法

ES5为数组定义了5个迭代方法。每个方法都接受两个参数:要在每一项上运行的函数和(可选的)运行该函数的作用域——影响this值。

而传入这些方法中的函数接收3个参数:数组项的值、该项在数组中的下标、数组对象本身。

every():对数组中的每一项运行给定函数,如果每一项都返回true,则返回true。

some():对数组中的每一项运行给定函数,只要有任一项返回true,则返回true。

filter():对数组中的每一项运行给定函数,返回该函数会返回true的项组成的数组。

forEach():对数组中的每一项运行给定函数,没有返回值。

map():对数组中的每一项运行给定函数,返回每次函数调用的结果组成的数组。

(8)归并方法

ES5新增两个归并数组的方法:reduce()、reduceRight()。这两个方法会迭代数组的所有项,然后构建一个最终返回的值。

reduce()方法从数组的第一项开始,reduceRight()相反。

它们都接收两个参数:在每一项上调用的函数、(可选的)作为归并基础的初始值。

传入的函数接收4个参数:前一个值、当前值、项的索引、数组对象,代码如下:

  1. var num = [1,2,3,4,5];   
  2. var sum = num.reduce(function(prev,cur,index,array){   
  3. //这个函数的返回值会作为第一个参数自动传给下一项。在这里,第一次迭代:prev是1,cur是2。   
  4. //第二次迭代,prev是3(1+2的结果),cur是3.   
  5.         return prev + cur;   
  6. });   
  7. alert(sum);  //15   

二、字符串

(1)字符方法

charAt():接收一个表示字符位置的参数。var str = 'hello'; alert(str.charAt(1)); // 'e'

charCodeAt():参数同上。得到的不是字符而是字符编码。var str = 'hello'; alert(str.charCodeAt(1)); // '101'

也可以使用方括号加索引来访问:var str = 'hello'; alert(str[1]); //'e'

(2)字符串操作方法(以下方法不会影响原字符串)

concat():同数组的类似。实践中更多的是用+。

slice():2个参数表示子字符串的开始位置、结束位置(不包括在子字符串中)。

substring():同上。

substr():第一个参数同上,第二个参数表示返回的字符个数。

以上如果没有第2个参数,则将字符串的长度作为结束位置。

(3)字符串位置方法

indexOf():参考上面数组的。

lastIndesOf():参考上面数组的。

(4)trim()方法:创建一个字符串的副本,删除前置及后缀的所有空格,返回结果。

(5)大小写转换

toLowerCase()、toLocaleLowerCase()、toUpperCase()、toLocaleUpperCase()。

(6)模式匹配方法(待补充)

match()

search()

replace()

split()

(7)localeCompare()方法

这个方法比较两个字符串,返回以下值:

如果字符串在字母表中应该排在字符串参数之前,返回负数(-1),在其之后,则返回正数(1),相等则返回0。(不同地区,方法的行为不同。如国家不同。),代码如下:

  1. var str = 'yellow';   
  2. str.localeCompare('brick');  //1   
  3. str.localeCompare('yellow'); //0   
  4. str.localeCompare('zoo');    //-1   

(8)fromCharCode()

这是String构造函数的一个静态方法。接收一或多个字符串编码,然后将它们转换成一个字符串。与charCodeAt()执行的是相反的操作,代码如下:

String.fromCharCode(104); //'h'

标签:

给我留言