javascript高级程序设计学习笔记（第五章）--5种引用类型、基本包装类型、单体内置对象

最新推荐文章于 2022-08-04 00:18:24 发布

空气刘海君

最新推荐文章于 2022-08-04 00:18:24 发布

阅读量339

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/weixin_43189446/article/details/82715316

本文深入探讨JavaScript中的数据类型，包括引用类型（对象、数组、日期、正则表达式、函数）和基本包装类型（字符串、数字、布尔值）。详细讲解了每种类型的创建、属性、方法及其实现原理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

引用类型的值（对象）是引用类型的一个实例，引用类型是一种数据结构，将数据和功能组织在一起。也叫对象定义，描述一类对象具有的属性和方法。
新对象的创建：new+构造函数；

//构造函数Object定义了新对象的属性和方法，保存在变量person中
var person = new Object();

-ECMAScript原生引用类型

1.Object类型创建Object实例有两种方法：①new+Object()； ②对象字面量表示法：简化创建包含大量属性的对象的过程；一般用方法②，注意用“｛｝”且最后一个属性末尾不能加“，”。

var person = {
	name : "haha",
	"age" : 18
}; //属性名可以加引号也可以不加

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 : "haha",
	age : 10
}); //用对象字面量封装可选参数
displayInfo({
	age : 20
});

访问对象的属性一般用点表示法，也可以用方括号语法。

alert(person["name"]); //haha ,将要访问属性的字符串放进方括号
var personName = "name"; 
alert(person[personName]); //通过变量访问属性

2.Array类型

var arr = Array(); //可以不加new
var arr1 = new Array(8); //括号里可以添加数组长度
var arr2 = Array("black"); //包含一项“black”的数组

字面量表示法，方括号中的索引表示要访问的值

var color = ['white','black','pink'];
alert(color[2]); //pink

数组的项数保存在length属性中，可以查询也可以修改，还可以在数组末尾添加项。

alert(colors.length); //3
colors.length = 2;  //数组长度变为2，删除了索引值为2的“pink”项
alert(colors[2]); //undefined
colors[colors.length] = "yellow"; //在数组末尾添加“yellow”项
alert(colors[2]); //yellow
colors[99] = "blue";
alert(colors.length); //100

-检测是否数组：Array.isArray(value)方法，value是数组名；
-转换方法：所有的对象都有toString()、valueOf()、toLocaleString()方法，调用数组的toString()和valueOf()方法会返回相同值，即数组每一项的字符串表示，中间用逗号隔开。而直接对数组alert()后台会调用toString()方法，因此也返回相同值。

var colors = ["white","black","pink"];
alert(colors.toString()); //white,black,pink
alert(colors.valueOf()); //white,black,pink
alert(colors); //white,black,pink

默认情况下toLocaleString()也返回相同值，但改变它的返回值时就不同。

var person1 = {
	toString : function() {
		return "haha";
	},
	toLocaleString : function() {
		return "haha";
	}
};
var person2 = {
	toString : function() {
		return "enen";
	},
	toLocaleString : function() {
		return "keke";
	}
};
var person3 = [person1,person2];
alert(person3); //haha,enen
alert(person3.toString()); //haha,enen
alert(person3.toLocaleString()); //haha,keke

用 join(）方法可以修改字符串拼接的分隔符。

var colors = ["white","black","pink"];
alert(colors.join("&")); //white&black&pink

-栈方法：类似数据结构中“先进后出”的栈，数组默认的方法push()【类似推入】、pop()【类似弹出】实现类似栈的行为。两个方法都只能从数组末尾执行。

var numbers = [1,6];
numbers.push(9);
alert(numbers.length); //3
numbers[3] = 11;
var num = numbers.pop(); //删除最后一项11
alert(num); //11
alert(numbers.length); //3

-队列方法：类似“先进先出”的队列数据结构，也由push()方法在队列末尾添加项，由 shift() 方法移除数组前端项，unshift()在数组前端添加项。再结合pop()方法实现类似队列的行为。

var colors = ["white","black","pink"];
colors.push("blue","yellow"); 
var item = colors.shift();
alert(item); //white 
alert(colors); //black,pink,blue,yellow
colors.unshift("purple"); 
alert(colors); //purple,black,pink,blue,yellow
colors.pop();
alert(colors); //purple,black,pink,blue

-重排序方法
reverse()倒序；sort()按字符串升序，自动调用toString()方法。

var values = [10,5,8,11,2];
alert(values.reverse()); //2,11,8,5,10
alert(values.sort()); //10,11,2,5,8

添加一个比较函数，使sort()函数更强大。

function compare(value1,value2) {
	//return value1 - value2;
	if(value2 > value1) {
		return -1; //不用交换
	}else if(value2 < value1) {
		return 1; //要交换
	}else {
		return 0;
	}  
}
var values = [10,5,8,11,2];
alert(values.sort(compare)); //2,5,8,10,11

如果比较的是数值类型或者可以用valueOf()方法转换成数值的对象类型，直接返回前一个值减后一个值就行。降序相反。

-操作方法
concat()：基于当前数组的所有项创建一个新数组；（不改变原数组）

var colors = ["white","black","pink"];
//括号里为空时相当于复制一个当前数组，括号里添加的项可以是数组
var colors1 = colors.concat("blue",["purple","orange"]);
alert(colors1); //white,black,pink,blue,purple,orange
alert(colors); //white,black,pink

slice()：基于当前数组的一个或多个项创建一个新数组，第一个参数起始位置，第二个结束位置，只有一个参数则返回从指定位置到末尾的所有项；（不改变原数组）

colors2 = colors.slice(1);  
colors3 = colors1.slice(2,5); //从第一项到第五项（不包含第五项） 
alert(colors2);	//black,pink
alert(colors3); //pink,blue,purple

splice()：删除，splice(起始位置，项数)，返回删除项组成的数组；插入，splice(起始位置，0，插入项)，返回空数组；替换，splice(起始位置，删除项数，插入项)，返回删除项组成的数组；（改变原数组）

var removed = colors.splice(1,0,"red","green");
alert(colors); //white,red,green,black,pink
alert(removed); //返回一个空数组

removed = colors.splice(2,2); 
alert(colors); //white,red,pink
alert(removed); //green,black

removed = colors.splice(1,1,"yellow","brown");
alert(colors); //white,yellow,brown,pink
alert(removed); //red

-位置方法
ECMAScript5新增：indexOf()从数组开头向后找，lastIndexOf() 从数组末尾向前找；都接受两个参数：要查找的项，表示查找起点位置的索引（小于索引值的数组项不参与查找）；都返回查找项在数组中的位置，没找到返回 -1。

var nums = [3,5,1,6,8,5,10];
alert(nums.indexOf(5)); //1
alert(nums.lastIndexOf(5)); //5
//索引为3之前的项不参与查找，所以返回第二个5的位置
alert(nums.indexOf(5,3)); //5
alert(nums.lastIndexOf(5,3)); //1

//people中的对象和person不是同一个对象，他们只是有同样的属性name
var people = [{name:"Jen"}];
var person = {name:"Jen"};
var morePerson = [person];
alert(people.indexOf(person)); //-1
alert(morePerson.indexOf(person)); //0

-迭代方法：
有5中方法，都接收两个参数：运行函数和运行函数的作用域对象（可选）。
运行函数：对数组的每一项都运行给定函数，函数有数组项的值item，项在数组中的索引index，数组对象array三个参数。
every( )：当函数对所有项返回true，则返回true；
some( )：只要有一项的运行结果为true，返回true；
filter( )：返回函数运行结果为true的项组成的数组；
map( )：返回函数运行结果组成的数组；
forEach( )：只运行函数，不返回结果；
这五种方法都不改变原数组的值。

var arrs = [2,4,3,6,9,7,5,3];
var result = arrs.every((item,index,array) => {
	return item > 3;
});
var result1 = arrs.some((item,index,array) => {
	return item > 3;
});
var result2 = arrs.filter((item,index,array) => {
	return item > 3; 
});
var result3 = arrs.map((item,index,array) => {
	return item + 2; 
});
var result4 = arrs.forEach((item,index,array) => {
	alert(item + 2);  //执行代码，无返回值
});
alert(result); //false
alert(result1); //true
alert(result2); //4,6,9,7,5
alert(result3); //4,6,5,8,11,9,7,5

-缩小函数
reduce()和reduceRight()：迭代数组中所有的项，构建一个最终返回值；
两个方法都接收两个参数：每一项调用的函数和作为缩小基础的初始值（可选）；
方法中四个参数：前一项prev，当前项cur，项的索引index，数组对象array，函数返回的值作为前一项传递给下一项，第一次迭代发生在第一项上；
reduce从前向后遍历，reduceRight相反；

var arrs = [2,4,3,6,9,7,5,3];
var mulp = arrs.reduce((pre,cur,index,array) => {
	return pre * cur;
});
alert(mulp); //136080
var mulp1 = arrs.reduceRight((pre,cur,index,array) => {
	return pre + cur;
});
alert(mulp1); //39

3.Date类型
创建对象：var now = new Date()；保存日期毫秒数
Date.parse()：接收表示日期的字符串参数，返回日期毫秒数，格式“英文月日年”或“月/日/年”（有引号，中间空格或/）；
Date.UTC()：返回日期毫秒数，格式：年，月，日，时，分，秒，毫秒（无引号，中间逗号隔开），都是数字，其中月是基于0（如一月0，二月1），年和月必须，其他参数在未设置时，日默认为1，其他为0；

var someDate = new Date(Date.parse("5/2/2018")); // “May 2 2018”
alert(someDate);//Wed May 02 2018 00:00:00 GMT+0800 (中国标准时间)

var someDate1 = new Date(Date.UTC(2018,1,10,2,10,8,2));
alert(someDate1); //Sat Feb 10 2018 10:10:08 GMT+0800 (中国标准时间)

也可以直接去掉Date.parse和Date.UTC，后台会自动调用。
获取现在的时间用Date.now( )方法
继承的方法：toString()、toLocaleString()（不同浏览器显示不同信息）、valueOf()（返回日期毫秒数）
日期格式化为字符串：toUTCString()、toDateString()等。

alert(someDate.toUTCString()); //Tue, 01 May 2018 16:00:00 GMT
alert(someDate.valueOf());//1525190400000

4.RegExp类型
ECMAScript通过RegExp支持正则表达式。
-字面量定义正则：var expression = / pattern（模式） / flags（标志）；
-构造函数定义： var expression = RegExp（“模式”，“标志（可选）”）；
如果模式中包含元字符｛[（\ $ ^ | ) ? * + . ] }，需要转义，在符号前加“\”；
模式中可能出现两种情况，加[ ]，如cat或bat，/[bc]at/；
构造函数的模式中元字符要加两个“\”，即双重转义;
标志：（g）全局模式，应用于所有字符，并非找到第一个匹配项就停止；（i）忽略大小写；（m）多行模式；
在ECMAScript3中正则表达式字面量始终共享一个实例，而ECMAScript5中和构造函数一样会创建的每一个RegExp实例都是一个新实例。

var pattern = /[cb]at/i;
var pattern1 = /\*cb\*at/i;
alert(pattern.test("Batsshkk")); //true
alert(pattern1.test("Gs*cb*Atss")); //true

var pattern2 = RegExp("\\%hehe\\b","ig");
alert(pattern2.test("%hehe kkk\\"));
alert(pattern2.source); // \%hehe\b ，第一个%转义，第二个\b的“\”不转义

-RegExp实例属性
global：布尔值，表示是否设置g标志；
ignoreCase：布尔值，表示是否设置i标志；
lastIndex：整数，表示开始搜索下一匹配项的字符位置，从0算起；
multiline：布尔值，表示是否设置m标志；
source：正则表达式的字符串形式，返回字面量形式。

-RegExp实例方法
exec( )：为捕获组设计，接收要应用模式的字符串，只返回一个匹配的数组项，没有返回null；两个属性input（应用正则表达式的字符串）和index（匹配项在字符串中的位置）；在模式中设置全局模式每次调用会返回新的匹配项，没有设置每次调用只返回第一个匹配项。

var text = "dad and mom and baby";
var patt = /dad( and mom( and baby))/gi;//捕获组
var matches = patt.exec(text);
alert(matches.index); //0
alert(matches.input); //"dad and mom and baby"
alert(matches[0]); //"dad and mom and baby"
alert(matches[1]); //"and mom and baby"
alert(matches[2]); //"and baby"

var txt = "pat,cat,bat,fat";
var pat = /.at/;
var mats = pat.exec(txt);
alert(mats.index); //0
alert(mats[0]); //pat
alert(pat.lastIndex); //0

mats = pat.exec(txt);
alert(mats.index); //0
alert(mats[0]); //pat
alert(pat.lastIndex); //0

var pat1 = /.at/g;
var mats1 = pat1.exec(txt);
alert(mats1.index); //0
alert(mats1[0]); //pat
alert(pat1.lastIndex); //3 下一项从索引为3的字符开始匹配

mats1 = pat1.exec(txt);
alert(mats1.index); //4
alert(mats1[0]); //cat
alert(pat1.lastIndex); //7

test()：接受一个字符串参数，当模式与参数匹配返回true，常用于验证用户输入；

var testTxt = "01-0230-400";
var pattern_ = /\d{2}-\d{4}-\d{3}/gi; // \d表示数字[0-9]
if(pattern_.test(testTxt)) {
	alert("It is true");
}

RegExp实例继承方法toString()和toLocaleString()都返回正则表达式的字面量；

var pattern_2 = RegExp("\\d{2}-\\d{4}-\\d{3}","gi");
alert(pattern_2.toString());        //  /\d{2}-\d{4}-\d{3}/gi
alert(pattern_2.toLocaleString());  //  /\d{2}-\d{4}-\d{3}/gi

-RegExp构造函数属性
长属性名和短属性名：
input（ $_）：返回最近一次要匹配的字符串； lastMatch（$ &）：返回最近一次的匹配项；
lastParen（ $+ ）：返回最近一次的捕获组； l e f t C o n t e x t （$ `）：返回最近一次匹配项左边的字符串；
rightContext（ $^{'} ）：返回最近一次匹配项右边的字符串； m u l t i l i n e （$ *）：布尔值，是否所有表达式都使用多行模式；
用来获取test()和exec()方法更具体的信息

var context = "have a good day";
var pattern0 = RegExp("(.)oo(.)","gi");
if(pattern0.test(context)) {
	alert(RegExp.input); //have a good day
	alert(RegExp.lastMatch); //good
	alert(RegExp.lastParen); //d
	alert(RegExp.leftContext); //have a 
	alert(RegExp.rightContext); //day
	alert(RegExp.multiline); //false ??undefined
/*
 *opera不支持短属性名input、lastMatch、lastParen、multiline；
 *IE不支持multiline；
 */
	alert(RegExp["$_"]); //have a good day
	alert(RegExp["$&"]); //good
	alert(RegExp["$+"]); //d
	alert(RegExp["$`"]); //have a 
	alert(RegExp["$'"]); //day
	alert(RegExp["$*"]); //false ??undefined
}

9个用于捕获组的属性：RegExp.$1，RegExp.$2，…，RegExp.$9，分别存储第一个，第二个，…，第九个捕获组，调用test()和exec()方法时自动填充；

alert(RegExp.$1); //g
alert(RegExp.$2); //d

5.Function类型
函数是对象，每个函数都是Function类型实例，函数名是指向函数对象的指针。
有三种定义方法：①函数声明语法；②函数表达式，定义一个变量引用函数，函数（变量）末尾有分号；③构造函数，不建议使用。

//函数声明语法
function sum(num1,num2) {
	return num1 + num2;
}
//函数表达式
var sum = function(num1,num2) {
	return num1 + num2;
};
//构造函数
var sum1 = new Function("num1","num2","return num1 + num2");

函数名只是指向对象的指针，不会与函数绑定，一个函数可以有多个名字。

function sum(num1,num2) {
	return num1 + num2;
}
alert(sum(1,2)); //3
var someNum = sum; //不带括号，访问的是函数指针sum而不是调用函数，都指向函数
alert(someNum(1,2)); //3
sum = null; //指针sum赋值null不影响函数本身，与函数“断绝关系”
alert(someNum(1,2)); //3，指针someNum不受sum影响，可以调用函数

-没有重载：创建函数时只是创建了一个引用函数对象的变量（指针），在下面的例子中创建第二个函数时，覆盖了第一个引用函数的变量sum；

function sum(num1,num2) {
	return num1 + num2;
}
function sum(num1,num2) {
	return num1 * 2 + num2;
}
alert(sum(1,2)); //4

相当于：

var sum = function(num1,num2) {
	return num1 + num2;
}
sum = function(num1,num2) {
	return num1 * 2 + num2;
}
alert(sum(1,2));  //4

-函数声明与函数表达式：解析器会在一开始就读取函数声明，在任何时候都可访问；而函数表达式要等到解析器解析到它所在的代码行，才会执行。

alert(multiply(2,3)); //报错：multiply未定义
var multiply = function(num1,num2) {
	return num1 * num2;
} 

alert(multiply(2,3)); //6
function multiply(num1,num2) {
	return num1 * num2;
}

-作为值的函数
函数名是个变量，所以函数可以作为另一个函数的参数，也可作为另一个函数的参数返回；当调用函数名时不加括号，就是访问指针，而不是函数本身。

function callSomeFunction(someFunc,someArg) {  //访问指针，不执行函数
	return someFunc(someArg);  //返回函数执行结果
}
function hello(name) {
	return "Hello," + name;
}
result = callSomeFunction(hello,"Tom");
alert(result);

sort()方法：调用每个对象的toString()方法并确定它们的次序，本章前面有例子。接收比较函数作为参数（可选），确定比较方式。

function position(propertyName) {
	return function(object1,object2) {
		var value1 = object1[propertyName]; //根据对象的属性对数组排序
		var value2 = object2[propertyName];
		if(value1 < value2) {
			return -1;
		}else if(value1 > value2) {
			return 1;
		}else{
			return 0;
		}
	}
}
var data = [{name:"Tom",age:28},{name:"Jan",age:29}]; //创建对象数组
data.sort(position("name")); 
alert(data[0].name); //Jan,返回较小的值
data.sort(position("age"));
alert(data[0].name); //Tom

-函数内部属性
两个特殊对象：this和arguments（保存函数参数的类数组对象，有一个callee属性，指向拥有这个arguments对象的函数）。如果在函数内部调用了同名函数，为了消除这种紧密耦合，用arguments.callee代替函数名，当需要调用函数时无论使用什么名字都不会有影响。

function factorial(num) {
	if(num <= 1){
		return 1;
	}else{
		return num * arguments.callee(num-1); //相当于num * factorial(num-1)
	}
}
var anotherFac = factorial;
factorial = function() {
	return 0;
}
alert(anotherFac(3)); //6 ，如果没有替换，返回0

对象this在全局作用域中引用window对象

window.color = "red";
o = {color:"pink"};
function sayColor() {
	alert(this.color);
}
sayColor(); //访问全局变量window,返回red
o.sayColor = sayColor; 
o.sayColor(); //访问对象o,返回pink

函数名只是包含指针的变量，其中的sayColor( )和o.sayColor( )指向的是同一个函数。
ECMAScript5定义新的函数对象属性：caller（早期Opera不支持），保存调用当前函数的函数的引用，在全局作用域调用，返回null。

function outer() {
	inner();
}
function inner() {
	alert(inner.caller);  //返回outer()函数的源代码
}
outer();
alert(outer.caller); //null

为了实现更松散的耦合，通过arguments.callee.caller访问outer( )函数。

alert(arguments.callee.caller);

*在严格模式下arguments.callee会报错，不能为函数的caller属性赋值。
-函数的属性和方法
length：表示函数希望接受参数的个数；
prototype：保存引用类型所有的实例方法，比如string()和toString()。

function lengthTest(num1,num2) {
	return num1 + num2;
}
alert(lengthTest.length); //2

函数的call()和apply()方法：用于在特定作用域中调用函数，即设置函数中this的值；
都接收两个参数，一个是在其中运行函数的作用域；
两个方法的区别在于接收第二个参数的方式，apply( )接收参数数组，Array的实例或者arguments对象；call( )方法接收的参数必须逐个列出。可以不传参数。
两种方法的结果相同。严格模式下全局变量中的this返回undefined。

function sum(num1,num2) {
	return num1 + num2;
}
function callSum1(num1,num2) {
	return sum.apply(this,arguments);
}
function callSum2(num1,num2) {
	return sum.apply(this,[num1,num2]);
}
function callSum3(num1,num2) {
	return sum.call(this,num1,num2);
}
alert(callSum1(1,2)); //3
alert(callSum2(2,3)); //5
alert(callSum3(4,5)); //9

这两个方法强大之处是在改变调用函数的作用域。

window.color = "red";
o = {color:"pink"};
function sayColor() {
	alert(this.color);
}
sayColor.apply(this); //red
sayColor.apply(window); //red
sayColor.apply(o); //blue

bind( )方法将创建一个函数的实例，其this值会被绑定到传给bind函数中的值。

var anotherColor = sayColor.bind(o); //this值绑定到对象o
anotherColor(); //pink

6.基本包装类型
三种特殊引用类型：String、Number、Boolean；
它们都有具有基本类型的特殊行为，每当读取一个基本类型时，会创建一个对应的基本包装类型对象，这样就可以调用一些方法，但这些对象只在代码执行的一瞬间存在，然后立即被销毁，所以基本类型值不能添加属性和方法。

var str = "hahaha";
alert(str.substring(2,5)); //hah
str.color = "red";
alert(str.color); //undefined

Object构造函数会根据传入类型返回相应的基本包装类型的实例。

var s1 = new Object("hehehe");
alert(s1 instanceof String); //true

用new调用基本包类型的构造函数，与调用同名转型函数不同。

var num3 = 28;
var s1 = Number(num3);
var s2 = new Number(num3);
alert(typeof s1); //number
alert(typeof s2); //object

-Boolean类型
Boolean类型的实例重写了valueOf()和toString()方法，分别返回true/false和"true"/“false”；
布尔表达式中所有的对象都会转换为true，最好不要用Boolean对象；

var b = new Boolean(false);
alert(b && true); //true
var c = Boolean(false);
alert(c && true); //false
alert(typeof b); //object
alert(typeof c); //boolean
alert(b instanceof Boolean); //true
alert(c instanceof Boolean); //false

-Number类型
创建Number对象，调用Number构造函数向其传递数值。Number类型也改写valueOf()和toString()、toLocaleString()方法，前者返回数值，后两个返回数值的字符串形式。toString()中可加转换进制数作为参数。

var n = new Number(22);
alert(n.toString(8)); //"26"

toFixed()方法：返回固定格式，按照参数指定的小数位返回数值的字符串表示，参数位少于原本的数值，四舍五入，多余原来的数值在后面加0；

var n = new Number(22);
var n1 = 2.333;
alert(n.toFixed(3)); //22.000
alert(n1.toFixed(1)); //2.3

toExponencial()方法：返回指数（e）形式，接收一个参数表示小数位数。
toPrecision()方法：返回数值最适合的格式，接收一个参数表示所有数字的位数（不包括指数部分），可能返回固定格式，也可能返回指数格式。

n = 22;
alert(n.toExponential(1)); //2.2e+1 ,小数点后只有一位
alert(n.toPrecision(1)); //2e+1 ,只能返回一位数
alert(n.toPrecision(3)); //2.20 ，返回三位数

与Boolean类型相同，typeOf和instanceof在测试基本数值类型和引用数值类型时得到的结果完全不同。

var n = new Number(22);
var n1 = 2.333;
alert(typeof n); //object
alert(typeof n1); //number
alert(n instanceof Number); //true
alert(n1 instanceof Number); //false

-String类型
valueOf()和toString()、toLocaleString()方法返回对象表示的字符串；
length属性返回字符串的字符个数；

var s = new String("hehehe");
var s1 = "wowowo";
alert(s.length); //6

①字符方法：charAt()一个索引值参数，返回字符串中索引的单个字符；charCodeAt()一个索引值参数，返回字符串中索引的单个字符的字符编码；
charAt()另一种方式：方括号加索引值访问字符串中特定位置的字符，在IE7以及更早的版本中返回undefined；

var s = "have a good day";
//alert(s1.length); //12
alert(s.charAt(3)); //e
alert(s.charCodeAt(4)); //32 
alert(s[5]); //a

*空格符号也是字符，字符编码为32
②字符串操作方法
concat()：用于拼接字符串，一次可以拼接多个，即传入多个参数，不会改变调用它的对象。但一般用加号拼接而不用concat()。

var s = "have a good day";
var s2 = s.concat(",","Tom","!");
alert(s2); //have a good day,Tom!
alert(s); //have a good day

基于子字符串创建新字符串：slice()，substr()，substring()；
都返回被操作字符串的子字符串；
都接受两个参数，第一个参数都是子字符串的起始位置；
第二个参数slice()和substring()的都是最后一个字符后面的位置，substr()是子字符串长度；
没有第二个参数，将字符串长度作为结束位置；
当参数中有负数：slice()将负值加上字符串长度；
substr()第一个参数加上字符串长度，第二个参数转换为0；
substring()将负值都转换为0；

var s1 = new String("haveagoodday");
alert(s1.slice(2,6)); //veag
alert(s1.substr(2,6)); //veagoo
alert(s1.substring(2,6)); //veag
alert(s1.slice(5)); //goodday
alert(s1.substr(5)); //goodday
alert(s1.substring(5)); //goodday

alert(s1.slice(2,-3));//veagood
alert(s1.substr(2,-3)); //空字符串
alert(s1.substring(-3,2)); //ha
alert(s1.slice(-3)); // day
alert(s1.substr(-3)); // day 
alert(s1.substring(-2)); //haveagoodday

③字符串位置方法
indexOf()和lastIndexOf()：都能接受两个参数，一个是查找的子字符串，一个是开始查找位置；区别是一个从开始向后查找，一个从末尾向前查找；返回的是查找到的字符串位置（位置都是从前往后数的），没找到返回-1；

var word = "what is that thing";
alert(word.indexOf("at",4)); //10
alert(word.lastIndexOf("at",9)); //2

可以循环使用，用返回值大小是否为-1来判断；

var wordArr = new Array();
var pos = word.indexOf("h");
while(pos > -1) {
	wordArr.push(pos);
	pos = word.indexOf("h",pos + 1);
}
alert(wordArr); //1,9,14

④trim( )方法：创建一个字符串的副本，删除前后的空格，返回结果；

var trimTest = "  have a good day   ";
alert(trimTest); //  have a good day
alert(trimTest.trim()); //have a good day

支持该方法的浏览器有Chome/Firefox 3.5+/Opera 10.5+/Safari 5+/IE9+；
Firefox 3.5+/Safari 5+/Chome 8+还支持非标准的trimLeft( )、trimRight( )方法。
⑤字符串转换大小写方法
toLowerCase( )/toLocaleLowerCase( )：转换成小写，后一个是按地区规则转换；
toUpperCase( )/toLocaleUpperCase( )：转换成大写；

var helloWolrd = "Hello,Wolrd!"
alert(helloWolrd.toLowerCase()); //hello,wolrd!
alert(helloWolrd.toLocaleLowerCase()); //hello,wolrd!
alert(helloWolrd.toUpperCase()); //HELLO,WOLRD!
alert(helloWolrd.toLocaleUpperCase());	//HELLO,WOLRD!

建议使用可以按地区规则转化的方法
⑥字符串的模式匹配方法
match( )：接受一个参数，一个正则表达式或RegExp对象，返回一个保存匹配字符串的数组，与exec( )方法相似；
search( )：接受一个参数，一个正则表达式或RegExp对象，返回第一个匹配字符串的位置索引，从前向后搜索；

var word = "is that thing what"; 
var patternWord = /..at/g; //非全局模式只匹配一项就停止
var matchWord = word.match(patternWord); 
alert(matchWord.index); //undefined ,非全局模式返回3,第一个匹配项位置
alert(matchWord[1]); //what,非全局模式返回undefined
alert(patternWord.lastIndex); //0

var searchWord = word.search(patternWord);
alert(searchWord); //3

replace( )：接收两个参数，一个是RegExp对象或字符串作为被替换对象，一个是替换的字符串或函数。当第一个参数是字符串，只会替换一个，想要全部替换，用正则的全局模式；返回替换后的字符串；

var replaces = "cat,bat,fat,pat";
alert(replaces.replace("at","ond")); //cond,bat,fat,pat
alert(replaces.replace(/at/g,"ond")); //cond,bond,fond,pond

可以将正则表达式操作得到的值插入结果字符串中。

alert(replaces.replace(/(.at)/g,"word($1)")); //word(cat),word(bat),word(fat),word(pat)
alert(replaces.replace(/fat/g,"$'")); //cat,bat,fat,fat  匹配子字符串之后的字符串
alert(replaces.replace(/.at/g,"$&")); //cat,bat,fat,pat 匹配整个模式的字符串
alert(replaces.replace(/(.at)/g,"$01")); //cat,bat,fat,pat 匹配捕获组的第一项

当第二个参数位函数，只有一个匹配项时，给这个函数传入三个参数：模式的匹配项，模式匹配项在字符串中的位置，原始字符串；
定义多个捕获组时，后两个参数相同，第一个参数是模式匹配项，第一个捕获组的匹配项，第二个捕获组的匹配项。。。

function replaceFunc(replaceTxt) {
	return replaceTxt.replace(/[><"]/g,(match,pos,originalText) => {
		switch(match) {
			case ">" : 
				return "&gt";
			case "<" :
				return "&lt";
			case "\"" :
				return "&quot";
		}
	});
}
var replaceTxt = '<p class="hehe">haha</p>';
alert(replaceFunc(replaceTxt)); 
//&ltp class=&quothehe&quot&gthaha&lt/p&gt

split( )：接受两个参数，第一个是分隔符，可以是RegExp对象或字符串，第二个是返回数组长度；返回由分隔符分隔后的子字符串数组；

var splitTxt = "heh,jaj,kek,lol";
alert(splitTxt.split(",",2));//heh,jaj
alert(splitTxt.split(/[^\,]+/)); //"",",",",",",",""  
//正则表示非“,”号作为分隔符，前后的空字符串是因为分隔符出现在开头“heh”和末尾“lol”

⑦localeCompare( )：字符串在字母表中排在参数字符串的前面，返回正数（一般1）；后面返回负数（一般-1）；相等返回0；这个方法分地区，在美国有大小写之分，大写字母排在小写字母前。

function localeComp(originalStr,compareStr) {
 	var comp = originalStr.localeCompare(compareStr);
 	if(comp > 0) {
 		alert(originalStr + ">" + compareStr);
 	}else if(comp < 0){
 		alert(originalStr + "<" + compareStr);
 	}else{
 		alert(originalStr + "=" + compareStr);
 	}
 }
 localeComp("black","white"); //black<white
 localeComp("black","apple"); //black>apple
 localeComp("black","black"); //black=black

⑧fromCharCode( )：String的静态方法，接收一个或多个字符串编码，把它们转换成一个字符串。

alert(String.fromCharCode(111,105,99,101,110)); //oicen

7.单体内置对象
内置对象：由ECMAScript现实提供的，不依赖宿主环境，在ECMAScript代码执行之前这些对象就已经存在，不需要显示地实例化。如Number、Array等。
①Global对象
全局作用域中定义的属性和函数都属于Global对象，isNaN( ）、parseInt( )、parseFloat( )、isFinit( )都是它的方法；
-其他方法：
encodeURI( )、encodeURIComponent( )：对URL进行编码，使浏览器能够接受和理解；（是i，不是l，uri要写在括号里，第一个c小写）
前者不会对URI的特殊符号编码，如#、/、？、：，只会对URL不能包含的字符如空格字符进行编码，主要用于整个URI；
后者会对任何非标准字符进行编码，主要对URI中的一某段进行编码。（一般使用这个方法）

var uri = "http://www.wrox.com/illegal value.htm#start";
//http://www.wrox.com/illegal%20value.htm#start
alert(encodeURI(uri));
//http%3A%2F%2Fwww.wrox.com%2Fillegal%20value.htm%23start
alert(encodeURIComponent(uri));

decodeURI( )：对使用encodeURI编码的字符进行解码；
decodeURIComponent( )：对使用encodeURIComponent( )编码的字符进行解码；

var uri_ = "http%3A%2F%2Fwww.wrox.com%2Fillegal%20value.htm%23start";
//http%3A%2F%2Fwww.wrox.com%2Fillegal value.htm%23start
alert(decodeURI(uri_));
//http://www.wrox.com/illegal%20value.htm#start
alert(decodeURIComponent(uri_));

eval( )：相当于一个完整的ECMAScript解析器，传入的参数就是要解析的字符串。

var msg = "hahaha";
eval("alert(msg);");
eval("function tryMsg() {alert(msg);}");
tryMsg();
eval("var tryTxt = 'hehe';");
alert(tryTxt);

解析的结果插入到原位置，有相同的作用域，所以方法内和方法外可以相互调用变量或函数，这个方法有风险，使用须谨慎
。
-Global对象的属性
特殊值：NaN、undefined、Infinity；（ECMAScript5指明禁止给它们赋值）
构造函数：Object、Array、Number、String、Function、Date、RegExp、Boolean、Error等。

-window对象
通过访问window对象来访问Global对象，全局变量的作用域中声明的属性和函数都是window对象的属性。

var colo = "white";
function sayColor() {
	alert(window.colo);
}
window.sayColor(); //white

？？？另一种获得Global对象的方法是：创建一个立即调用的函数表达式，返回this；

var global = function() {
	return this;
}();

-Math对象：保存数学公式和信息；
Ⅰ.属性：

alert(Math.E); //e的值
alert(Math.LN2); //ln2
alert(Math.LOG10E); //log10为底e
alert(Math.SQRT1_2*Math.PI); //1/2的平方根

Ⅱ.min( )和max( )方法：

var min = Math.min(22,11,33,44,2,10); //用Math对象调用方法
alert(min);

要找到数组中的最大或最小值，用apply( )方法改变作用域为Math，再传入数组；

var val = [33,22,56,75,84,24,887,334,223];
var resultVal = Math.max.apply(Math,val); //这里的max方法不加括号
alert(resultVal);

Ⅲ.舍入方法
ceil( )：向上取整； floor( )：向下取整； round( )：标准取整；

var valu = 3.6;
alert(Math.ceil(valu)); //4
alert(Math.floor(valu)); //3
alert(Math.round(valu)); //4

Ⅳ.random( )：取0-1之间的随机小数；
取随机数公式：值 = Math.random( )*可能值的总数 + 第一个可能的值；

function selectFrom(lowerValue,upperValue) {
	var choices = upperValue - lowerValue + 1;
	return Math.floor(Math.random()*choices + lowerValue);
}
var selects = [2,3,1,66,44,35,24];
var resul = selects[selectFrom(0,selects.length-1)];
alert(resul); //随机数

一共有7种可能，传入参数最小和最大索引值0和6，用 6*(0-1随机)，向下取整，函数返回获得随机数的索引。

Ⅴ.其他方法
Math.abs(num)：返回num的绝对值；
Math.exp(num)：返回e的num次幂；
Math.power(num，power)：返回num的power次幂；
Math.log(num)：返回10的num次幂；
Math.sqrt(num)：返回num的平方根；
Math.cos(num)：返回num的余弦值；
Math.atan(num)：返回num的反正切值；
Math.atan2(x,y)：返回x/y的反正切值；