JavaScript基础入门篇（二）

引用类型

对象是某个引用类型的实例，新对象是使用new操作符后跟一个构造函数来创建的。构造函数本身是一个函数，只不过该函数是为创建对象的目的而定义的。

Object类型

大多数引用类型值都是Object类型的实例

创建：

• new操作符

var person=new Object();
person.name="ly";
person.age=22;

• 对象字面量

var person={
	name:"ly",
	age:22
}

在适用对象字面量时，属性名也可以使用字符串（用引号包起来）。
也可以使用空花括号：

var person={}；
person.name="ly";

一般来说，访问对象属性时使用的都是点表示法，不过也可以使用方括号表示法来访问对象的属性。在使用方括号语法时，应该讲要访问的属性以字符串的形式放在方括号中，例如 ：person["name"]。
从功能上看，这两种访问方式没有任何区别，但方括号的优点是可以通过变量来访问属性：var key="name"; person[key]"。
如果属性名中包含会导致语法错误的字符，或者属性名使用的是关键字，也可以使用方括号：person["first name"]

Array类型

数组是一个按顺序排列的集合，集合的每个值称为元素。JavaScript的数组可以包括任意的数据类型。数组用[]表示，元素之间用,分隔，并且ECMAScript数组的大小是可以动态调整的，即可以随着数据的添加自动增长。

创建：
有两种基本方式：

• 使用Array构造函数

var result=new Array();//创建了一个空数组
var arr=new Array(1,2,3);//创建了数组[1,2,3]
var colors=new Array(20);//创建了一个长度为20的数组

也可以省略new，结果相同：

var result=Array();//创建了一个空数组
var arr=Array(1,2,3);//创建了数组[1,2,3]
var colors=Array(20);//创建了一个长度为20的数组

• 字面量
  数组的字面量有一对包含数组项的方括号表示，多个项数之间由,隔开

var result=[];//创建了一个空数组
var arr=[1,2,3];//创建了数组[1,2,3]
var color=[2,3,];//最好不要这样写，因为这样可能会创建一个2项或3项的数组

在例子的第三个中，在IE8及之前的版本中，color会是一个2，3，undefined的数组，在其他浏览器中，color是一个包含2项的数组。

数组的元素可以通过索引来访问和设置。注意，索引的开始值为0。

检测数组
判断某个对象是不是数组。

• instanceof
  对于一个网页，过着一个全局作用域而言，使用instanceof操作符就可以得到结果：

if(value instanceof Array){
//...
}

但他的问题在于，他假定只有一个全局执行环境。如果网页包含多个框架，那实际上就有多个不同的全局执行环境从而存在多个版本的Array构造函数，如果从一个框架向另一个框架传入一个数组，那么传入的数组与第二个框架中原生创建的数组分别具有和各自的不同的构造函数。
为解决这个问题，ECMAScript 5新增了Array.isArray()方法。

• Array.isArray()
  确定某个值到底是不是数组

if(Array.isArray(value){
//...
}

数组的方法(可点击）

Date类型

Date类型使用字UTC（国际协调时间）1970年1月1日午夜（零时）开始经过的毫秒数来保存日期。在使用这种数据存储格式的条件下，Date类型保存的日期能够准确精确到1970年1月1日之前或之后的100 000 000年。

创建：
使用new操作符和Date构造函数

var date=new Date();

在不传参的情况下，new Date()自动获取当前的日期和时间。
如果想要根据特定的日期和时间创建日期对象，必须传入便是该日期的毫秒数（即从1970年1月1日午夜起至该日期止经过的毫秒数。

ECMAScript提供了两个方法获得毫秒数：Date.parse()，Date.UTC()
Date.parse()：传入日期的字符串参数得到毫秒数
Date.UTC()：参数是年份、月份（基于0）、月中的天数、小时数、分钟、秒及毫秒（前两项必需）
var date1=new Date(Date.parse(“2005,1,1”));
var date2=new Date(Date.UTC(2005,0,1));
这两个方法等价于new Date(“2005,1,1”);
new Date(2005,0,1);
他们虽然省略了方法的调用，但是执行时会在后台调用方法。

Date.now()：返回表示调用这个方法时的日期和时间的毫秒数

方法：

• toLocaleString()：按照与浏览器设置的地区相适应的格式返回日期和时间，应该会包括AM、PM（不包含时区信息）
• toString()：返回带有时区信息的日期和时间
• valueOf()：返回日期的毫秒表示
• toDateString()：以特定于实现的格式显示星期几、月、日和年
• toTimeString()：以特定于实现的格式显示时、分、秒和时区
• toLocaleDateString()：以特定于地区的格式显示星期几、月、日和年
• toLocaleTimeString()：以特定于实现的格式显示时、分、秒
• toUTCString()：以特定于实现的格式完整的UTC日期

以上方法因浏览器而异

    var date=new Date();
    console.log(date.toLocaleString());
    console.log(date.toString());
    console.log(date.valueOf());
    console.log(date.toDateString());
    console.log(date.toTimeString());
    console.log(date.toLocaleDateString());
    console.log(date.toLocaleTimeString());
    console.log(date.toUTCString());

除此以外还有很多方法：点击

var n=+new Date()也可以得到毫秒值

RegExp类型

ECMAScript通过RegExp类型来支持正则表达式。

①创建：

• 字面量创建

var expression = / pattern / flags ;

其中的pattern部分可以是任何简单或复杂的正则表达式，可以包含字符类、限定符、分组、向前查找以及反向引用。
每个正则表达式都带有一个或多个标志位flags，用以标明正则表达式的行为。

标志：

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

	var reg=/at/g;   //全局匹配at
    var reg2=/[bc]at/i;  //匹配第一个bat或cat，不区分大小写
    var reg3=/.at/gi;    //匹配所有以at结尾的3个字符的组合，不区分大小写

正则表达式的元字符：( [ { \ ^ $ | ) ? * + . ] }，如果想要匹配的字符串中包含这些字符，就必须对他们进行转义

	var reg1=/[bc]at/i;   //匹配第一个bat或cat，不区分大小写
    var reg2=/\[bc\]at/i;//匹配第一个[bc]at，不区分大小写

• 构造函数创建
  接收两个参数，一个是要匹配的字符串模式，一个是可选的标志字符串

var reg=new RegExp("[bc]at","i");
//等价于
var reg1=/[bc]at/i;   
//匹配第一个bat或cat，不区分大小写

需要注意的是：在构造函数创建的方法中，参数是字符串，所以元字符要双重转义

使用正则表达式字面量和使用RegExp构造函数创建的正则表达式不一样。在ECMAScript 3 中，正则表达式字面量始终会共享同一个RegExp实例，而使用构造函数创建的每一个新RegExp实例都是一个新实例。ECMAScript 5规定，使用字面量要和构造函数一样，每次都创建新的实例。

②实例属性

• global：布尔值，表示是否设置了g标志
• ignoreCase：布尔值，表示是否设置了i标志
• lastIndex：整数，表示开始搜索下一个匹配项的字符位置，从0算起
• multiline：布尔值，表示是否设置了m标志
• source：正则表达式的字符串表示，按照字面量形式而非传入构造函数中的字符串模式返回

③实例方法

• exec()
  专门为捕获组而设计的。接收一个参数，即要应用模式的字符串，然后返回包含第一个匹配项的信息的数组；或者在没有匹配项的情况下返回null。
  返回的数组虽然是Array的实例，但包含两个额外的属性：index,input
  index表示匹配项在字符串中的位置；input表示应用正则表达式的字符串。
  在数组中，第一项是与整个模式匹配的字符串，其他项是与模式中的捕获组匹配的字符串（如果没有捕获组，则该数组只包含一项）

var test="mom and dad and baby";
var reg=/mom( and dad( and baby)?)?/gi;
var matches=reg.exec(test);
console.log(matches.index); //0
console.log(matches.input);//"mom and dad and baby"
console.log(matches[0]);   //"mom and dad and baby"
console.log(matches[1]);   //" and dad and baby"
console.log(matches[2]);   //" and baby"

• test()
  目标字符串与某个模式是否匹配。返回结果为boolean值。

var text="000-00-0000";
var reg=/\d{3}-\d{2}-\d{4}/;
if(reg.test(text)){
	...
}

• toString()、toLocaleString()
  返回正则表达式的字面量
• valueOf()
  返回正则表达式本身

Function类型

函数实际上是对象。可以封装一段特定功能的代码。每个函数都是Function类型的实例，具有属性和方法。函数名是一个指向函数对象的指针。

函数名仅仅是只想函数对象的指针，因此函数名和包含对象指针的其他变量没有什么不同，所以，一个函数可以有多个名字。

①创建

• 函数声明

function sum(a,b){
	return a+b;
}

• 函数表达式

var sum=function(a,b){
	return a+b;
};

• 构造函数
  可以传入多个参数，但最后一个参数会作为函数体。

var sum =new Function ("a","b","return a+b");

②没有重载

function sum(a){
	return a+100;
}
function sum(a){
	return a+200;
}
var result=sum(100);//300

后面的函数覆盖了前面的函数

②函数声明和函数表达式

解析器在向执行环境中加载数据时，会率先读取函数声明，并使其在任何代码之前可用（可以访问）；而函数表达式，则必须等到解析器执行到他所在的代码行，才会真正被解释执行。也就是说，函数声明存在函数声明提升问题。

③作为值的函数
可以传参，可以返回

示例：斐波那契数列
函数作为返回值

	function getFib(n){
        if(n===1||n===2){
            return 1;
        }
        return getFib(n-1)+getFib(n-2);
    }
    console.log(getFib(7));

示例：sort()比较
函数作为参数

 		function compare(value1, value2) {
            if (value1 < value2) {
                return -1;
            } else if (value1 > value2) {
                return 1;
            } else {
                return 0;
            }
        }
        var arr = [13, 24, 51, 3];
        console.log(arr.sort(compare)); // [3, 13, 24, 51]

④函数内部属性

• arguments
  类数组对象，包含着传入函数中的所有参数。（获取实参）
  这个对象有一个callee属性：该属性是一个指针，指向拥有这个arguments对象的函数。
  示例：阶乘函数

	function getF(n){
        if(n<=1){
            return 1;
        }
        return n*getF(n-1);
    }
    console.log(getF(7));

以上代码，这个函数的执行与函数名紧紧的绑在一起。为了解决这个问题，可以使用callee

	function getF(n){
        if(n<=1){
            return 1;
        }
        return n*arguments.callee(n-1);
    }
    console.log(getF(7));

• this
  引用的是函数执行的环境对象

var color="red";
var o={color:"blue"};

function col(){
	return this.color;
}
col();    //"red",此时的this是window
o.col=col;
o.col();  //"blue"，此时的this是o对象

• caller
  调用当前函数的引用，如果是在全局作用域中调用当前函数，它的值为null

function outer(){
	inner();
}
function inner(){
	console.log(inner.caller);  //指向outer()
}
outer();   

⑤函数属性和方法

• 属性

1. length：表示函数希望接收的命名参数的个数

function sum(a,b){
	return a+b;
}
console.log(sum.length);   //2

2. prototype：保存引用类型所有实例方法的真正所在。在ECMAScript 5中，prototype属性是不可枚举的。

• 方法
  每个函数都有两个非继承而来的方法：call()、apply()。这两个方法的作用都是在特定过的作用域中调用函数，实际上等于设置函数体内的this。

1. apply()：接收两个参数，一个是在其中运行函数的作用域，另一个是参数数组，第二个参数可以是Array实例，也可以是arguments对象。
2. call()：和apply()的作用相同，区别在于接收参数的方式不同。对于call()而言，第一个参数是this值没有变化，变化的是其余参数都直接传递给函数。

function sum(a,b){
	return a+b;
}
function callSum(a,b){
	return sum.apply(this,arguments);
	//等价
	//return sum.apply(this,[a,b]);
	//return sum.call(this,a,b);
}
alert(callSum(10,10);

call、apply真正强大的地方是能够扩充函数赖以运行的作用域。看以下示例

var color="red";
var o={color:"blue"};

function col(){
	return this.color;
}
col();    //"red"
col.call(this);   //"red"
col.call(window);  //"red"
col.call(o);    //"blue"

3. bind()：ECMAScript 5还定义了一个方法bind()。这个方法会创建一个函数的实例，其this值会绑定到传给bind函数的值

var color="red";
var o={color:"blue"};

function col(){
	return this.color;
}
var fn=col.bind(o);    
fn();     //"blue"

4. 每个函数继承的toString()、toLocaleString()和valueOf()方法始终返回函数的代码，其结果因浏览器而异

基本包装类型

ECMAScript提供了3个特殊的引用类型：Boolean、String、Number。他们与引用类型相似，但也具有各自的特殊行为。

实际上，每当读取到一个基本类型的时候，后台就会创建一个对应的基本包装类型的对象，从而让我们能够调用方法操作这些数据。

var str="ly is an apple";
var s1=str.substring(2);

当第二行代码访问str时，访问过程处于一种读取模式，而在读取模式中访问字符串时，后台都会自动完成下列处理：
1.创建String类型的一个实例
2.在实例上调用指定方法
3.销毁这个实例

引用类型和基本包装类型的区别：对象的生存周期。使用new操作符创建的引用类型的实例，在执行流离开当前作用域之前都一直保存在内存中。而自动创建的基本包装类型的对象，则只存在于一行代码的执行瞬间，然后立即被销毁。这意味着我们不能在运行时给类型值添加属性和方法。

var str="some string";
str.color="red";
alert(str.color); //undefined

对基本包装类型的实例调用 typeof会返回"object"，而且所有的基本包装类型对象在转换为布尔类型的值都为true。

①Boolean类型
Boolean类型是与布尔值对应的引用类型。

创建：

var b=new Boolean(true);

valueOf()：返回基本类型值true或false
toString()：返回字符串"true"或"false"

要注意的是在布尔表达式中使用Boolean对象
布尔表达式中的所有对象都会被转换为true

var fobj=new Boolean(false);
var result=fobj&&true;
alert(result);   //true

alert(typeof fobj);    //object
alert(typeof false);    //boolean
alert(fobj instanceof Boolean);  //true

②Number类型、

Number类型是与数字值对应的引用类型。

创建：

var num=new Number(10);

valueOf()：返回对象表示的基本类型的值
toString()、toLocaleString()：返回字符串形式的数值，toString()可以传参表示进制

方法：

• toFixed()：按照指定的小数位返回数值的字符串格式

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

• 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"

实际上，toPrecision()会根据要处理的数值决定到底是调用toFixed()还是toExponential()。

③String类型

String类型是与字符串对应的引用类型。

创建：

var str=new String("hello world");

valueOf()、toString()、toLocaleString()：返回对象表示的基本字符串值

• length：String类型的每个实例都有一个length属性，表示字符串中包含多少个字符

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

字符串的方法（可点击）

单体内置对象

ECMA-262对内置对象的定义是：由ECMAScript实现提供的、不依赖于宿主环境的对象，这些对象在ECMAScript程序执行之前就已经存在了。

内置对象：Object、Array、String、Global、Math、Date等等…

①Global对象

不属于任何其他对象的属性和方法，最终都是他的属性和方法。事实上，没有全局变量和全局函数；所有在全局作用域中定义的属性和函数，都是Global对象的属性。

之前学习的isNaN()、parseInt()等等，都是Global对象的方法，除此之外，还有一些其他的方法：

• URI编码方法

1. encodeURI()、encodeURIComponent()
   可以对URI进行编码，利用特殊的UTF-8编码代替所有无效的字符（有效的URI中不能包含某些字符，例如空格）。
   encodeURI()主要对于整个URI；encodeURIComponent()主要用于对URI中的某一段进行编码。它们的区别主要在于encodeURI不会对本身属于URI的特殊字符进行编码，例如冒号、正斜杠、问好和井号；而encodeURIComponent()则会对他发现的任何特殊字符进行编码。

var uri="https://blog.csdn.net/qq_42853241/article/details/85068177";
console.log(encodeURI(uri));
//"https://blog.csdn.net/qq_42853241/article/details/85068177";

console.log(encodeURIComponent(uri));
//"https%3A%2F%2Fblog.csdn.net%2Fqq_42853241%2Farticle%2Fdetails%2F85068177"

2. decodeURI()、decodeURIComponent()
   与上面两个方法对应。decodeURI()只能对使用encodeURI()替换的字符进行解码；decodeURIComponent()能够解码使用encodeURIComponent()编码的所有字符

var uri="http%3A%2F%2Fwww.wrox.com%2Fillegal%20value.htm%23start";
console.log(decodeURI(uri));
//"http%3A%2F%2Fwww.wrox.com%2Fillegal value.htm%23start"

console.log(decodeURIComponent(uri));
//"http://www.wrox.com/illegal value.htm#start"

URI方法用于替代已经被ECMA-262第3版废弃的escape()和unescape()方法
URI方法可以编码所有的Unicode字符，而原来的方法只能编码ASCII字符

• eval()
  eval()方法就像是一个完整的ECMAScript解析器，只接受一个参数，即要执行的ECMAScript字符串

eval("alert('hi')");
//等价于
alert("hi");

eval()将传入的参数当作实际的ECMAScript语句来解析，然后把执行结果插入到原位置。
通过eval()执行的代码被认为是包含该次调用的执行环境的一部分，因此被执行的代码具有与该执行环境相同的作用域链。

var msg="hello world";
eval("alert(msg)");  //"hello world"

同样的，我们可以在eval()中定义一个函数或者变量

eval("function sayHi(){
	alert('hi');
}");
sayHi(); //'hi'
eval("var msg='hello world';");
alert(msg);  //'hello world'

在eval()中创建的任何变量或函数都不会被提升，因为在解析代码的时候，他们被包含在一个字符串中，只在eval()被执行的时候创建.
严格模式下，在外部访问不到eval()中创建的任何变量或函数，因此，前面的一个例子在严格模式下会导致错误。
严格模式下，为eval赋值也会导致错误"use strict"; eval='hi';报错

• Global对象的属性
  Global对象还包含一些属性：undefined、NaN、Infinity都是Global对象的属性，此外，所有的原生引用类型的构造函数，像Object和Function，也都是Global对象的属性

• window对象
  ECMAScript没有指出如何直接访问Global对象，但Web浏览器都是将这个全局对象作为window对象的一部分加以实现的。因此，在全局作用域中声明的所有变量和函数，就都成为window对象的属性。
  另一种取得Global对象的方法是使用以下代码

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

② Math对象

Math——为保存数学公式和信息提供的公共位置。

与我们在JS直接编写的计算功能相比，Math对象提供的计算功能执行起来要快的多。

• Math对象的属性
  语法：Math.***，例如：Math.E
  
• min()、max()
  用于确定一组数值中的最大值和最小值，可以接受任意多个数值参数

var min=Math.min(3,54,32,16);
console.log(min);//3

要找到数组中的最大或最小值：

	var arr=[1,2,3,44,23,87,14,87];
    var result=Math.max.apply(Math,arr);
    console.log(result);//87

• 舍入方法
  floor()、ceil()、round()
  Math.ceil()：向上舍入
  Math.floor()：向下舍入
  Math.round()：四舍五入

console.log(Math.ceil(25.1));  //26
console.log(Math.ceil(25.6));  //26
console.log(Math.ceil(25.9));  //26

console.log(Math.floor(25.1));  //25
console.log(Math.floor(25.6));  //25
console.log(Math.floor(25.9));  //25

console.log(Math.round(25.1));  //25
console.log(Math.round(25.5));  //26
console.log(Math.round(25.9));  //26

• random()
  返回大于等于0小于1的一个随机数（返回的是小数值）
  语法：值=Math.floor(Math.random()*可能值的总数+第一个可能的值)

1-10中的随机整数
Math.floor(Math.random()*10+1)

2-10中的一个随机整数
Math.floor(Math.random()*9+2)

• 其他方法
  点击