您的位置:首页 > Web前端 > JavaScript

关于js的引用类型

2017-03-26 16:46 141 查看

一 关于引用变量与基本数据变量

在js中包含着5种基本数据类型:Number,Boolean,String,Null,Undefined.

这里最需要注意的就是String,它在JAVA中是属于引用类型的。

这五种基本数据类型都是按值进行访问的,因为可以操作保存在变量中的实际的值。

而引用类型的值是保存在内存中的对象。与其他的语言不同的是,js不允许直接访问内存中的位置,也就是说不能直接操作对象的内存空间。当复制保存这对象的某个变量时,操作的是对象的引用。但在为对象添加属性时,操作的是实际的对象。

例如:

var person = new Object();
var zhangsan = person;//操作的是对象的引用 其实zhangsan是一个与person指向同一个对象的指针。
person.name="lisi";//操作的是实际的对象。


确定哪一个值是那种基本类型可以使用typeof操作符,而确定一个只是哪种引用类型可以使用instanceof操作符。

例如:

var person = new Object();
var n = null;

alert(typeof person);//Object
alert(typeof n);//Object

//对象与NULL的typeof都是Object

alert(person instanceof Object);//true
alert(n instanceof Object); // false

//在检测一个引用类型值和Object构造函数的时候,instanceof操作符始终会返回true,如果使用Instanceof操作符检测基本类型的值,此操作符永远都会返回false,因为基本类型不是对象。


二、Object类型

1.Object类型

(1)对象的创建(两种方式)

i.

var person = new Object();


ii.使用对象字面量表示法

var person = {
name:"zhangsan";
age:27
};
//最后一个属性后面添加逗号,会在IE7以及更早版本Opera中导致错误
//属性名也可以使用字符串
var person = {
"name":"zhangsan",
"age" : 27
};

//花括号中是空白的,则可以定义只包含默认属性和方法的对象
var person={};//相当于new Object();


一般更喜欢使用第二种方式,因为更清晰,更有数据封装的感觉.经常使用对象字面量来进行参数的传递.

例如:

function displayInfo(args){
var output="";
if(typeof args.name == "string")
output += "Name: "+args.name+"\n";
if(typeof args.age == "Number")
output += "Age: "+args.age+"\n";
alert(output);
}

displayInfo({
name:"zhangsan".
age:27
});
//Name: zhangsan
//Age: 27
displayInfo({
name:lisi
});
//Name: lisi


(2)对象属性的访问(2种方式)

i.点表示法(推荐使用)

alert(person.name);


ii.方括号表示法(如果属性名容易导致语法错误或者属性名使用了关键字或者是保留字推荐使用这种方法)

alert(person["name"]);


2.Array类型

与其他原因的不同点:

i.数组中的每一项都可以保存任何类型的数据.

例如:

var person = new Array();
person[0] = 1;
person[1] = "zhangsan";
person[2] = true;


ii.数组的大小是可以动态调整的

例如:

var person = new Array(2);
person[0] = 1;
person[1] = 2;
person[2] = 3;//不会报错的.


(1)数组的创建

i.使用Array构造函数

var person = new Array();

//设置长度
var person = new Array(5);

//设置值
var person = new Array("zhangsan","lisi");


ii.使用数组字面量表示法

var person = ["zhangsan","lisi"];
var person = [];//创建一个空数组
var person = [,,,,];//这种方式不可取!!!每一项都会获得undefined值.


(2)数组值的获取

通过方括号法获取

//这点跟c java差不多
alert(person[0]);


(3)js数组中length的奇妙用法

js数组中的length不是只读的,还是可写的.

因此可以通过length来动态的改变数组的长度,添加新项等.

例如:

//减小数组长度
var values=[1,2,3,4];
values.length = 3;
alert(values[3]); //undefined 本来是4


//增大数组长度
var values=[1,2,3,4];
values.length = 5;
alert(values[4]); //undefined


//添加新项
var values = [1,2,3,4];
values[values.length] = 5;
values[values.length] = 6;


//数组的长度等于最后一个索引+1
var values = [1,2,3,4];
values[1000] = [5];
alert(values.length);//1001


3 数组方法

(1)转换方法

i.toString()

返回由数组中每个值的字符串形式拼接而成的一个以都好分隔的字符串.

ii.valueOf()

返回数组

iii.toLocalString()

返回的值是根据区域而定的,经常与toString和valueOf一样.

iv.join()

接收一个参数,该参数为字符串分隔符

(2)栈方法

push():向栈的顶部插入元素

pop():向栈的顶部移除元素

var values = new Array();
var count = values.push(1,2);
alert(count);//2

count = values.push(3);
alert(count);//3

var item = values.pop();
alert(item);//3
alert(count);//2


(3)队列方法

push():向数组末端添加项

shift():移除数组中的第一个项并返回该项

var values = new Array();
var count = values.push(1,2);
alert(count);//2

count = values.push(3);
alert(count);//3

var item = values.shift();
alert(item);//1
alert(count);//2


unshift():在数组前端添加任意个项并返回新数组的长度.

可以从相反的方向来模拟队列.即在数组的前端添加项,在数组的末端移除项.(这里有的人会以为是栈 但是不是的.移除项是移除目前你添加在数组中的第一个数组的最后一个项.看例子!)

var values = new Array();
var count = values.unshift(1,2);
alert(count); // 2

count = values.unshift(3);
alert(count);//3

var item = values.pop();
alert(item);//2
alert(count);//2


(4)重排序方法

reverse():反转排序后的数组项的顺序.

sort();对数组进行排序.本质是调用每个项的toString()fangfa ,然后比较得到的字符串.这样就很容易出现错误.例如下面:

var values=[1,10,15,5,20];
values.sort();
alert(values); //1,10,15,20,5


解决方法:

sort()允许接受一个比较函数作为参数.

例如:

//从小到大
function compare(value1,value2){
if(value1 < value2)
return -1;
else if(value1 > value2)
return 1;
else
return 0;
}

var values=[1,10,15,5,20];
values.sort(compare);
alert(values);//1,5,10,15,20
//从大到小排序
function compare(value1,value2){
if(value1 > value2)
return -1;
else if(value1 < value2)
return 1;
else
return 0;
}
//更简单的方法进行排序
function compare(value1,values)
return value1 - value2;


(5)操作方法

concat():基于当前数组的所有项创建一个新数组.具体的来说,就是先创建当前数组的一个副本,然后将接收到的参数添加到这个副本的末尾…(应该有点拼接的意思吧…)

var person = ["zhangsan","lisi","wangwu"];
var morePerson = person.concat("lalala",["liyiyi","cheng123"]);

alert(person);//zhangsan,lisi,wangwu
alert(morePerson);//zhangsan,lisi,wangwu,lalala,liyiyi,cheng123


slice():在只有一个参数的时候,返回从该参数指定位置开始到当前数组结尾的所有项;如果有两个参数,该方法返回起始和结束位置之间的项,但是不包括结尾的项.

var person = ["zhangsan","lisi","wangwu","lalala","liyiyi"];
var person1 = person.slice(1);
var person2 = person.slice(1,4);

alert(person1);//lisi,wangwu,lalala,liyiyi
alert(person2);//lisi,wangwu,lalala
//PS:如果slice()方法的参数中有一个负数,则用数组长度加上该数来确定相应的位置.


splice():向数组中插入项

删除:可以删除任意数量的项.需要指定两个参数:要删除的第一项的位置和要删除的项数.

splice(0,2);//删除数组中的前两项


插入:可以向指定位置插入任意数量的项,需要至少三个参数:起始位置,0(要删除的项数),要插入的项,入股偶要插入多个项,可以再传入第四第五甚至更多的项

splice(2,0,"zhangsan","wangwu");
//从第二项开始插入"zhangsan","wangwu"


替换:可以向指定位置插入任意数量的项,且同时删除任意数量的项,需要至少三个参数:起始位置,要删除的项数和要插入的任意数量的项,插入的项不必与删除的项数一致

splice(2,1,"zhangsan","wangwu");
//删除第二项,并且插入zhangsan,wangwu


(6)位置方法

indexOf():从数组的开头往后面查找特定项在数组中的位置

lastIndexOf():从数组的末尾开始往前查找.

如果没找到就返回-1

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

alert(numbers.indexOf(4,4));    //5
alert(numbers.lastIndexOf(4,4));//3


(7)迭代方法

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

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

forEach():对数组中的每一项运行给定函数.这个方法没有返回值.

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

some():对数组中的每一项运行给定函数,如果该函数对任一项返回true,则返回true;

var numbers = [1,2,3,4,5,4,3,2,1];

var everyResult = numbers.every(function(item,index,array){
return item > 2;
});

alert(everyResult); // false;

var someResult = numbers.some(function(item,index,array){
return item > 2;
});
alert(someResult); // true 只要一个满足就可以

var filterResult = numbers.filter(function(item,index,array){
return item > 2;
});

alert(filterResult);//[3,4,5,4,3]

var mapResult = numbers.map(function(item,index,array){
return item * 2;
});

alert(mapResult); // [2,4,6,8,10,8,6,4,2]

numbers.forEach(function(item,index,array){
//执行某些操作
});


(8)归并方法

reduce():从数组的第一项开始迭代数组的所有项

reduceRight():从数组的最后一项开始迭代数组的所有项

这两个方法都接收两个参数:一个在每一项上调用的函数和作为归并基础的初始值.

传给reduce()和reduceRight()的函数接收4个参数:前一个值,当前值,项的索引和数组对象.这个函数返回的任何值都会作为第一个参数自动传给下一项.

var values = [1,2,3,4,5];

var sum = values.reduce(function(prev,cur,index,array){
return prev + cur;
});
alert(sum);//15

var sum1 = values.reduceRight(function(prev,cur,index,array){
return prev + cur;
});
alert(sum1);//15   5 + 4 + 3 + 2 + 1


4 Date类型

在js中,Date类型使用自UTC(国际协调时间)1970年1月1日午夜开始经过的毫秒数来保存日期。可以保存1970年1月1日之前或之后的100 000 000年。

(1)创建Date对象

var date = new Date();
//不传递参数会获得当前的时间
//接收的参数是相应日期的毫秒数.
//因此提供了俩方法:Date.parse(),Date.UTC()会将特定格式的日期转化为毫秒数
//Date.parse()是通常是因地区而异的.
var date = new Date(Date.parse("May 1,2017"));
等价于
date = new Date("May 1,2017");
//如果传入的字符串不能表示日期的话,会返回NaN.如果将日期传入Date构造函数,后台也会调用Date.parse();


//Date.UTC()也会返回日期对应的毫秒数,但是与Date.parse()不同的是,在构建值得时候用了不同的参数.Date.UTC()的参数分别是年份,基于0的月份(0表示1月),月中的某一天(1到31),小时数(0到23),分钟,秒以及毫秒数.在这些参数中只有前两个是必须的.如果没有提供月中的天数,默认是1.其他都默认是0.

var date = new Date(Date.UTC(2017,2));//表示2017年3月1日0时


//关于Date.now()方法,返回表示调用这个方法时的日期和时间的毫秒数
var start = Date.now();

doSomething();

var end = Date.now();

var time = end - start;

//目前支持这个方法的有IE9+,Firefox3+,Safari3+,Opera10.5和Chrome.在不支持它的浏览器中,使用+操作符获取Date对象的时间戳也会达到相同的效果

var start = +new Date();

doSomething();

var end = +new Date();

var tiem = end - start;


关于toString()与toLocalString()和valueOf()方法

toLocalString()方法会按照与浏览器设置的地区相适应的格式返回日期和时间,这就意味着会包含AM,PM,但不会包含时区信息,而toString()方法则通常返回带有时区信息的日期和时间,其中时间一般以军用时间表示.

valueOf()返回日期的毫秒.因此可以方便使用标胶操作符来比较日期.

var date1 = new Date(2017,0,1);
var date2 = new Date(2017,1,1);
alert(date1 < date2); // true
alert(date1 > date2); //false


5 RegExp类型

var expression = / pattern / flags;

//包括正则表达式以及一个或者多个标志.


关于标志 正则表达式匹配模式支持下列3个标志:

g:表示全局模式,即模式将被应用于所有字符串,而非在发现第一个匹配项时立即停止.
i:表示不区分大小写
m:表示多行模式,即在到达一行文本末尾时还会继续查找下一行中是否存在于模式匹配的项.


正则表达式字面量与构造函数:

var reg = /\[bc\]at/;
//等价于(使用构造函数)
//由于构造函数的模式参数是字符串,所以在某些情况下要对字符进行双重转义
var reg = new RegExp("\\[bc\\]at");


两者所构建的正则表达式是不一样的,正则表达式字面量始终会共享同一个RegExp实例,而使用构造函数创建的每一个新RegExp实例都是一个新实例.

例如:

var re = null,i;
//只为/cat/创建了一个RegExp实例.
//由于实例属性不会重置,所以在循环中再次调用test()方法会失败.因为第一次调用test()找到"cat",但第二次调用时从索引为3的字符开始的,所以就找不到它了.
for(i = 0; i < 10; i++) {
re = /cat/g;
re.test("catastrophe");
}
//每次循环中创建正则表达式,因为每次迭代都会创建一个新的RegExp实例,所以每次调用test()都会返回true
for(i = 0; i < 10; i++){
re = new RegExp("cat","g");
re.test("catastrophe");
}


RegExp实例属性:

global:布尔值,表示是否设置了g标志

ignoreCase:布尔值.表示是否设置了i标志

lastIndex:整数,表示开始搜索下一个匹配项的字符位置,从0算起.

multiline:布尔值,表示是否设置m标志.

source:正则表达式的字符串表示,按照字面量形式而非传入构造函数中的字符串模式返回.

例如:

var pattern1 = /\[bc\]at/i;

alert(pattern1.global);//false
alert(pattern1.ignoreCase);//true
alert(pattern1.multiline);//false
alert(pattern1.lastIndex);//0
alert(pattern1.source);//"\[bc\]at"

var pattern2 = new RegExp("\\[bc\\]at","i");
alert(pattern2.global);//false
alert(pattern2.ignoreCase);//true
alert(pattern2.multiline);//false
alert(pattern2.lastIndex);//0
alert(pattern2.source);//"\[bc\]at"


RegExp的实例方法:

(1)exec(),该方法时专门为捕获组而设计的.exec()接收一个参数,即要应用模式的字符串,然后返回包含第一个匹配项信息的数组,或者在没有匹配项的情况下返回null.返回的数组是Array的实例,但包含两个额外的属性:index和input.

index:表示匹配项在字符串中的位置。

input:表示应用正则表达式的字符串。

var text = "mom and dad and baby";
var pattern = /mom ( and dad ( and baby)?)?/gi;
//数组中的第一项是匹配的整个字符串,第二项包含与第一个捕获组匹配的内容,第三项包含与第二个捕获组匹配的内容,依此类推。
var matchs = pattern.exec(text);
alert(matchs.index);//0
alert(matchs.input);//"mom and dad and baby"
alert(matchs[0]);//"mom and dad and baby"
alert(matchs[1]);//"and dad and baby"
alert(matchs[2]);//"and baby"


var text = "cat,bat,sat,fat";
var pattern1 =/.at/;
//非全局模式 每次调用exec()返回的都是第一个匹配项“cat”。
var matchs = pattern1.exec(text);
alert(matchs.index);//0
alert(matchs[0]);//cat
alert(pattern1.lastIndex);//0

matchs = pattern1.exec(text);
alert(matchs.index);//0
alert(matchs[0]);//cat
alert(pattern1.lastIndex);//0
//全局模式,会在字符串中继续查找新匹配项
var pattern2 = /.at/g;
var matchs = pattern2.exec(text);
alert(matchs.index);//0
alert(matchs[0]);//cat
alert(pattern2.lastIndex);//3

matchs = pattern2/exec(text);
alert(matchs.index);//5
alert(matchs[0]);//bat
alert(pattern2.lastIndex);//8


(2)test()方法

接受一个字符串参数,在模式与该参数匹配的情况下返回true,反之返回false.这个方法与exec()最大的不同就是返回值不同,因此他们的用处也不一样,test()一般是用来检测是否与某个模式匹配,而不在乎文本的内容.

var text="2017-03-27";
var pattern=/\d{4}-\d{2}-\d{2}/;

if(pattern.test(text)){
alert("Ther pattern was matched.");
}


(3)toLocalString()和toString()

都会但会正则表达式的字面量

跟RegExp的实力属性source是类似的.

var pattern = new RegExp("\\[bc\\]at","gi");
alert(pattern.toStirng());// "/\[ba\]at/gi"
alert(pattern.toLocalString());// "/\[ba\]at/gi"


(4)valueOf()

返回正则表达式本身

RegExp构造函数的属性(静态属性)

input():最近一次要匹配的字符串.lastMatch(&):最近一次的匹配项.

lastParen(+):最近一次匹配的捕获组.leftContext(`):input字符串中lastMatch之前的文本.

rightContext(′):input字符串中lastMatch之后的文本.multiline(*):布尔值,表示是否所有表达式都使用多行模式.

1−9 :存储第一,第二到第九个匹配的捕获组.

var text = "this has been a short summer";
var pattern = /(.)hort/g;

if(pattern.test(text)){
alert(RegExp.input);//this has been a short summber
alert(RegExp.lastMatch);//short
alert(RegExp.lastParen);//s
alert(RegExp.multiline);//false
alert(RegExp.leftContext);//this has been a
alert(RegExo.rightContext);//summer
}
if(pattern.test(text)){
alert(RegExp.$_);//this has been a short summer
alert(RegExp.$&);//short
alert(RegExp.$+);//s
alert(RegExp.$*);//false
alert(RegExp.$`);//this has been a
alert(RegExp.$');//summer
}


6 Function类型

(1)定义函数

//1
function sum(num1,num2){
return num1 + num2;
}
//2
var sum = function(num1,num2){
return num1 + num2;
}
//3 不推荐
var sum = new Function("num1","num2","return num1 + num2");


(2)函数名只是指向函数的指针,因此函数名与包含对象指针的其他变量没什么区别.

function sum(num1,num2){
return num1 + num2;
}
alert(sum(10,20));//30

var anotherSum = sum;
sum = null;

alert(anotherSum(10,20));//30


(3)函数声明以及函数表达式的区别

解析器在向执行环境中加载数据时,对函数声明和函数表达式的方式不一样的.解析器会率先读取函数声明,并使其在执行任何代码之前可用;而对于函数表达式,只有当执行到它所在的代码行才会真正被解释执行.

//正确
alert(sum(10,20));//30
function sum(num1,num2){
return num1 + num2;
}
//错误
alert(sum(10,20));//30
var sum = function(num1,num2){
return num1 + num2;
};


(4)作为值的函数

function createComparionFunction(propertyName){
return function(object1,object2){
var value1 = object1[propertyName];
var value2 = object2[propertyName];
if(value1 < value2){
return -1;
}else of(value1 > value2){
return 1;
}else {
return 0;
}
}
}
var data=[{name:"zhangsan",age:19},{name:"lisi",age:29}];
data.sort(createComparisonFunction("name"));
alert(data[0].name);//lisi

data.sort(createComparisonFunction("age"));
alert(data[0].name);//zhangsan


(5)函数内部属性

在函数内部,有两个特殊的对象:arguments和this.

i.callee(arguments对象)

消除函数和函数名之间的紧密耦合.相当于函数名和函数体是无关系的.

该属性是一个指针,指向的是当前的函数,对于无函数名的函数要调用自身函数是非常有用的.

function factorial(num){
if(num < 1)
return 1;
else{
return num * factorial(num - 1);
}
}

//等价于
function factorial(num){
if(num < 1)
return 1;
else {
return num * arguments.callee(num - 1);
}
}

var trueFactorial = factorial;//在另一个位置保存了函数的指针.指向的是函数的内容 而不会因为factorial的改变就改变
factorial = function(){
return 0;
}
//使用上面factorial函数
alert(truefactorial(5));//0
alert(factorial(5));//0
//使用下面factorial函数..
alert(trueFactorial(5));//120
alert(factorial(5));//0


ii.caller属性(this对象)

保存着调用当前函数的函数的引用

function outer(){
inter();
}
function inter(){
alert(inter.caller);//outer函数的源代码
alert(arguments.callee.caller);//等同于上面那句,但是耦合度更低
}


(6)函数属性和方法

length:函数希望接收的命名参数的个数

prototype:保存所有实例方法的真正所在.例如toString()等方法实际上都保存在prototype下.

apply():在特定的作用域调用函数.

接收两个参数,一个是在其中运行函数的作用域,另一个是参数数组,可以是Array的实例,也可以是arguments对象.

function sum(num1,num2){
return num1 + num2;
}
function callSum1(num1,num2){
return sum.apply(this,arguments);//传入arguments对象
}
function callSum2(num1,num2){
return sum.apply(this,[num1,num2]);//传入数组
}
alert(callSum1(10,10)); //20
alert(callSum2(10,10));//20


call():与applay()相同,不同之处是第二个参数,call()需要直接传递参数给函数.

function sum(num1,num2){
return num1 + unm2;
}
function callSum(num1,num2){
sum.call(this,num1,num2);
}
alert(callSum(10,10));//20


//改变函数作用域
window.color = "red";
var o = {color="blue"};

function sayColor(){
alert(this.color);
}

sayColor(); //red
sayColor.call(this);//red
sayColor.call(window);//red
sayColor.call(o);//blue


bind():创建一个函数的实例.

window.color = "red";
var o = {color="blue"};

function sayColor(){
alert(this.color);
}
var objectSayColor = sayColor.bind(o);
objectSayColor(); //blue


toString()和toLocaleString(),valueOf()返回函数的代码.

7 基本包装类型

为了便于操作基本类型值,存在着3个特殊的引用类型:Boolean,Number,String.

var s1 = "text";
var s2 = s1.substring(2);
//执行过程:
//(1)创建String类型的一个实例
//(2)在实例上调用指定的方法
//(3)摧毁这个实例.
var s1 = new String("text");
var s2 = s1.substring(2);
s1 = null;


引用类型与基本包装类型的主要区别

使用new操作符创建的引用类型的实例在执行流离开当前作用域之前都一直保存在内存中,而自动创建的基本包装类型的对象,则只存在于一行代码的执行瞬间,然后立即被销毁.

var s1 = "text";
s1.color = "red";
alert(s1.color); // undefined


对基本包装类型的实例调用typeof会返回”object”,而且所有基本包装类型的对象在转换为布尔类型时值都是true.

Object构造方法会根据传入值的类型返回相应基本包装类型的实例,例如:

var obj = "text";
alert(obj instanceof String);//true


Boolean类型

valueof():返回基本类型true或者false;

toString():返回字符串”true”和”false”

var falseObject = new Boolean(false);
var result = falseObject && true;
alert(result);//true
//布尔表达式中所有对象都会被变换为true

var falseValue = false;
var result = falseValue && true;
alert(result);//false


Number类型

valueOf():基本数据类型的数值

toString(),toLocaleString():返回字符串形式的数值.

toString()可以接受一个表示基数的参数,告诉它返回几进制数值的字符串形式.

var num = 10;
alert(num.toString());//"10"
alert(num.toString(2));//"1010"
alert(num.toString(8));//"12"


toFixed():按照指定的小数位返回数值的字符串表示

var num = 10;
alert(num.toFixed(2));//"10.00"

var num = 10.005;
alert(num.toFixed(2));//"10.01"
//有自动舍入得特性,不同浏览器的舍入规则不一样.


toExponential():返回以指数表示法表示的数值的字符串形式.

var num = 10;
alert(num.toExponential(1));//1.0e+1


toPrecision():返回固定大小格式,也可能返回指数格式.具体规则看哪种格式最合适.接受一个参数,即表示数值的所有数字的位数,不包括指数部分.

var num = 99;
alert(num.toPrecision(1));//"1e+2"
alert(num.toPrecision(2));//"99"
alert(num.toPrecision(3));//"99.0"


String类型

valueOf(),toString(),toLocaleString():返回对象所表示的基本字符串值.

length属性:表示字符串中包含的字符个数.

var hello = "hello world";
alert(hello.length);//"11"


提供的方法;

i.字符方法

charAt():以单字符字符串的形式返回给定位置的那个字符

var hello = "hello world";
alert(hello.charAt(1));//"e"


charCodeAt():获得指定位置的字符编码

var hello = "hello world";
alert(hello.charCodeAt(1));//输出"101"


ii.字符串操作方法

concat():连接字符串

var s = "hello ";
var result = s.concat("world","!");

alert(s);//"hello "
alert(result);//"hello world!"


slice()与substring():切割字符串,接收两个参数,第一个参数是开始的位置,第二个参数是结束的位置,包括开始的位置不包括结束的位置.

substr():切割字符串,接收两个参数,第一个参数是开始的位置,第二个参数是表示要切割几个字符.

var s = "hello world";
alert(s.slice(3));//"lo world"
alert(s.substring(3));//"lo world"
alert(s.substr(3));//"lo world"
alert(s.slice(3,7));//"lo w"
alert(s.substring(3,7));//"lo w"
alert(s.substr(3,7));//"lo worl"


区别在于:传入的参数为负值的时候,它们的行为就不一样.

//当slice()中传入负值的时候会加上字符串的长度
//当substr()如果第一个参数为负值会加上字符串的长度,第二个参数为负值会转换为0
//当substring()传入负值的时候回全部转换为0
var s = "hello world";
alert(s.slice(-3));//"rld"
alert(s.substring(-3));//"hello world"
alert(s.substr(-3));//"rld"
alert(s.slice(3,-4));//"lo w"
alert(s.substring(3,-4));//"hel" s.substring(3,0) -->s.substring(0,3);
alert(s.substr(3,-4));//""(空字符串) s.substr(3,0);


iii.字符串位置方法

indexOf():从一个字符串中搜索给定的子字符串,从头向后搜索

lastIndexOf():同上,只不过是从后往前找.

俩函数接收两个参数,第二个参数是可选的,第一个参数是要查找的字符串,第二个参数是从第几个字符开始找.

indexOf()从该参数指定的位置向后搜索,忽略该位置之前的所有字符,lastIndexOf()则会从指定的位置向前搜索.

var s = "hello world";
alert(s.indexOf("o",6));//7
alert(s.lastIndexOf("o",6));//4


iv.trim()

消除字符串开头和结尾的空格

var s = "            hello   world          ";
var result = s.trim();
alert(s);//            hello   world
alert(result);//hello  world


v.大小写转换

toLowerCase(),toLocaleLowerCase(),toupperCase(),toLocaleUpperCase(),带有Locale的两个函数是针对特定地区实现的.

vi.字符串的模式匹配

match():类似于RegExp中的exec();

search():返回字符串中第一个匹配项的索引;如果没有匹配项则返回-1,始终是从字符串开头向后搜索.

replace():接收两个参数,第一个参数可以使一个RegExp对象或者一个字符串,第二个参数可以使一个字符串或者一个函数.

如果第一个参数是一个字符串,name只会替换第一个子字符串,要想替换所有的字符串就得使用正则表达,指定全局(g)标志.

var text = "cat,bat,sat,fat";
var result = text.replace("at","aa");
alert(text);//"caa,bat,sat,fat"

result = text.replace(/at/g,"aa");
alert(text);//"caa,baa,saa,faa"


如果第二个参数是字符串,name还可以使用一些特殊的字符序列.

$$ $

$& 匹配整个模式的子字符串,类似于RegExp.lastMatch

$’ 匹配的子字符串之前的子字符串.类似于RegExp.leftContext

$` 匹配的子字符串之后的子字符串,类似于RegExp.rightContext

$n 匹配第n个捕获组的子字符串,其中n从0到9

$nn 匹配第nn个捕获组的子字符串,其中nn从01到99

var text = "cat,bat,sat,fat";
result = text.replace(/(.at)/g,"word($1)");
alert(result);//word(cat),word(bat),word(sat),word(fat)


如果第二个参数是一个函数,在只有一个匹配项的时候回传递3个参数,模式的匹配项,模式匹配项在字符串中的位置和原始字符串,如果定义了多个捕获组,那么参数依次是模式的匹配项,第一个捕获组的匹配项,第二个捕获组的匹配项….,但最后两个仍然是模式匹配项在字符串中的位置和原始字符串.

function a(text){
return text.replace(/[<>"&]/g,function(match,pos,originalText){
switch(match){
case "<":
return "<";
case ">":
return ">";
case "&":
return "&";
case "\"":
return "&aquot;";
}
});
}
alert(a("<p class=\"greeting\">Hello World!</p>"));
//<p class=&aquot;greeting&au=quot;>Hello World!</p>


split():基于一个指定的分隔符将字符串分隔成多个子字符串.可以接受两个参数,第一个参数为分隔符,可以是字符串也可以是正则表达式,可以接受第二个可选的参数,用于指定数组的大小.

var text = "red,blue,green,yellow";
var colors1=text.split(",");//["red","blue","green","yellow"]
var colors2=text.split(",",2);//["red","blue"]
var colors3=text.split(/[^\,]+/);//["",",",",",",",""]//以非逗号进行分割


vii.localeCompare()方法,比较两个字符串,如果字符串排在字符串参数之前返回负数(大部分情况是-1),如果相等返回零,如果字符串排在字符串参数之后返回正数(大部分情况是1)

viii.fromCharCode()

与charCodeAt()是相反的

alert(String.charCodeAt(104,101,108,108,111));//"hello"
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: