JavaScript学习笔记（4）

引用类型

对象是某个特定引用类型的实例，新对象是使用new操作符后跟一个构造函数来创建的。

---

1 Object类型

Object的实例不具备多少功能，但对于应用程序中存储和传输数据而言，他们确实是非常理想的选择。
创建Object实例的方式有两种，一种是new Object()，一种是直接使用对象字面量的方法。

var o1 = new Object();
o1.name = "Name";
o1.age = 20;

var o2 = {name:"Name",age:20};

对象字面量同样可以向函数传递大量可选参数。

function display(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);

    display({name:"Tom",age:10});
    display({name:"Jerry"});
}

通常情况，使用点表示法访问对象的属性。JS同样可以使用方括号表示法访问对象的属性。

alert(o1["name"]);//方括号表示法
alert(o1.name);//点表示法
var propertyName = "name";
alert(o1.[propertyName]); //通过变量访问属性

---

2 Array类型

JS数组的没意向可以保存任何类型的数据，数组的大小可以动态调整。
创建方式有两种：使用构造函数，使用数组字面量表示法。

//使用构造函数
var colors1 = new Array();
var colors2 = new Array(20);
var colors3 = new Array("red","green","blue");

//使用字面量
var color4 = ["red","green","blue"];

数组的length值是可变的，通过修改这个值可以从数组末尾移除或添加项。访问移除后的项会返回undefined，新增的每一项在赋值之前也都是undefined。

---

2.1 检测数组

value instanceof Array可以确定一个对象是不是数组。但如果有多个框架，就会出现对个全局执行环境，instanceof操作符就不一定起效了。
Array.isArray(value)可以完成同样的工作。

---

2.2 转换方法

每个对象都有toLocaleString()，toString()，valueOf()方法。
toString()返回有数组中每个值的字符串形式拼接而成的一个以逗号分隔的字符串。
valueOf()返回的还是数组。
toLocaleString()返回结果通常与toString()相同，对数组的每一项调用toLocaleString()方法。
join()方法可以使用自定义的分隔符来构建这个字符串，默认使用逗号。

var color = ["red","green","blue"];
alert(color); //red,green,blue ,alert内部会调用toString将参数转为字符串
alert(color.toString()); //red,green,blue
alert(color.valueOf()); //red,green,blue
alert(colors.join("||")); //red||green||blue

---

2.3 栈方法

JS数组提供了push()和pop()方法，实现类似栈的行为。
push()方法接受任意数量的参数，把它们逐个加到数组模为，返回修改后的数组长度。
pop()方法则从数组末尾移除最后一项，减少length值，返回移除的项。

---

2.4 队列方法

JS数组提供了push()和shift()方法，实现类似队列的行为。
push()方法接受任意数量的参数，把它们逐个加到数组模为，返回修改后的数组长度。
shift()方法移除数组的第一个项，减少length值，返回移除的项。
反向队列方法：
unshift()方法在数组前端添加任意数量的项，并返回新长度。
pop()方法在数组的末尾移除一项，减少length值，返回移除的项。

---

2.5 重排序方法

reverse()方法用于翻转数组项的顺序。
sort()方法默认按照升序排列数组项，其比较的时候会对每一项调用toString()然后比较得到字符串，即使数组都是数值也会比较字符串。因此要想比较数值，需要写一个排序函数作为参数传入sort()。

function compare(value1, value2) {
    if(value1<value2) {
        return -1;
    }else if(value1>value2) {
        return 1;
    }else{
        return 0;
    }
}

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

---

2.6 操作方法

concat()，基于当前数组中的一个或多个项创建一个新数组。先将原数组复制到新数组，再将接收到的参数数组或元素添加到新数组的末尾。

var colors = ["red","green","blue"];
var colors2 = colors.concat("yellow", ["black","brown"]);

alert(colors); //red,green,blue
alert(colors2); //red,green,blue,yellow,black,brown

slice()基于当前数组中的一个或多个项创建一个新数组。参数为要返回的项的起始和结束位置。省略第二个参数则表示一直到数组末尾。不省略的话，返回起始位置到结束位置之间的所有项（不包括结束位置所在的那一项）。当参数有负数的时候，则用数组长度加上该数来确定相应的位置。如果结束位置小于起始位置，则返回空数组。

var colors = ["red","green","blue","yellow","black","brown"];
var colors2 = colors.slice(1);
var colors3 = colors.slice(1,4);

alert(colors2); //green,blue,yellow,black,brown
alert(colors3); //green,blue,yellow

splice()主要用于向数组的中部插入项，使用方法有3种：

• 删除：删除任意数量的项，有两个参数(要删除的第一项的位置，要删除的项数)。
• 插入：向指定位置插入任意数量的项，有三个参数(起始位置，0，要插入的项)。
• 替换：向指定位置插入任意数量的项，且删除任意数量的项，有三个参数(起始位置，要删除的项数，要插入的项)。

这个方法始终返回一个数组，该数组包含删掉的项（如果没有删除，则返回空数组）。

---

2.7 位置方法

indexOf()和lastIndexOf()
参数
(要查找的项，查找的起点位置(可选))。
indexOf()方法从数组的开头向后查找；
lastIndexOf()方法从数组的末尾向前查找。
查找的起点，一个整数，即从Array的第几个元素开始向后/前查找。
返回值
要查找的项在数组中的位置，没查到就是-1。

---

2.8 迭代方法

迭代方法会对数组的每一项运行给定函数。
every()：如果函数的每一项都返回true则返回true。
some()：如果该函数对任一项返回true，则返回true。
filter()：返回该函数会返回true的项组成的数组。
map()：返回每次函数调用的结果组成的数组。
forEach()：这个方法没有返回值。

以上方法都不会修改数组中包含的值。

var numbers = [1,2,3,4,5,4,3,2,1];
var everyResult = numbers.every(function(item,index,array){
    return(item>2);
});

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

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

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

numbers.forEach(function(item,index,array){
    //执行某些操作 类似于for循环
});

alert(everyResult); //false 只有numbers的每一项都大于2，才会返回true
alert(someResult); //true 只要numbers有一项大于2，就会返回true
alert(filterResult); //[3,4,5,4,3] 返回所有大于2的项组成的数组
alert(mapResult); //[2,4,6,8,10,8,6,4,2] 对每一项执行乘2操作，并返回结果组成的数组

---

2.9 缩小方法

reduce()和reduceRight()，这两个方法都会迭代数组的所有项，再构建一个最终返回的值。
reduce()方法从数组的第一项开始，这个遍历到最后。
reduceRight()只是方向相反。
参数
function(prev,cur,index,array)，这个函数返回的任何值都会作为第一个参数自动传给下一项。

var numbers = [1,2,3,4,5];
var sum = numbers.reduce(function(prev,cur,index,array){
    return prev+cur;
});
alert(sum); //结果是15

迭代从第二个元素开始，
第一次执行function的时候，prev是1，cur是2，
第二次执行function的时候，prev是3（之前操作return的结果），cur是3（第三项）

---

3 Date类型

创建日期对象，var date = new Date();
不传递参数的情况下，返回当前时间。
可以用Date.parse()和Date.UTC()将特定日期转为UTC时间并作为Date()参数，即可以根据特定时间创建日期对象。

var someDate = new Date("Oct 6,2016");
var someDate1 = new Date(Date.parse("Oct 6,2016"));
var someDate2 = new Date(Date.UTC(2016,9,6,15,50,50)); //2016年10月6日15时50分50秒（月份从0开始）

3.1 获取和设置时间

从年到毫秒都有其对应的get和set方法。
getTime()：返回表示该日期的毫秒数
setTime()：用毫秒数设置日期
getFullYear()：取得4位数的年份
getUTCFullYear()：取得UTC日期的4位数的年份
setFullYear()：设置4位数的年份
setUTCFullYear()：设置UTC日期的4位数的年份
都是类似的，就不赘述了。

---

4 RegExp类型

JS同样支持正则表达式，语法和其他语言也类似。
创建：var expression = /pattern/flags;或var exp = new RegExp(pattern,flags);
pattern：正则表达式部分
flags：标志，可以单独使用也可以组合使用

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

var pattern1 = /[ab]cd/i;
var pattern2 = new RegExp("[ab]cd","i");
//二者是等价的 但是传递给构造函数的参数是字符串，有时候需要双重转义

4.1 RegExp实例方法

exec()
用于捕获组，接受要应用匹配模式的字符串作为参数，没有匹配的情况下返回null，匹配到了则返回包含第一个匹配项信息的数组。

var text = "a and b and c";
var pattern = /a( and b( and c)?)?/gi;

var matches = pattern.exec(text);
alert(matches.index); //0 表示匹配项在字符串中的位置
alert(matches.input); //"a and b and c" 表示应用正则表达式的字符串
alert(matches[0]); //"a and b and c" 第0个捕获组，即匹配到的字符串的完整形式
alert(matches[1]); //" and b and c" 第1个捕获组，第1层括号所匹配到的内容
alert(matches[2]); //" and c" 第2个捕获组，第2层括号所匹配到的内容

test()
参数和exec()一样，匹配则返回true，否则返回false

---

5 Function类型

JS的函数实际上是对象，每个函数都是Function类型的实例，而且都与其他引用类型一样有属性和方法，因此函数名实际上是一个指向函数对象的指针，不会与某个函数绑定。函数通常使用函数声明语法定义。

function sum(n1,n2){
    return n1+n2;
}

var sum1 = function(n1,n2){
    return n1+n2;
}; //与声明变量一致，末尾有分号 function关键字后面没有函数名，可以通过变量名引用函数

var sum2 = new Function("n1","n2","return n1+n2");//不过这种办法效率很低
//三者等价

函数也是引用类型，当多个变量指向同一函数，即使置空一个变量，这个函数也可以继续被其他变量使用。

function sum(n1,n2){
    return n1+n2;
}
alert(sum(10,10));

var anotherSum = sum;//指向sum函数的指针
alert(anotherSum(10,10));//像调用sum一样，返回20

sum = null;//将sum置为null断绝与函数的关系
alert(anothSum(10,10));//仍然可以使用anotherSum调用该函数，返回20

---

5.1 函数内部属性

函数内部，有三个特殊的对象：arguments、this、caller。
arguments的主要用途是保存函数的参数，这个对象还有一个callee的属性，该属性是一个指针，指向拥有这个arguments对象的函数，常用于实现松耦合。
this对象与Java的this类似，this引用的是函数据以执行的环境对象。
caller对象保存了调用当前函数的函数的引用。如果在全局中调用当前函数，则其值为null。

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

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

display(); //显示"red"

o.display = display;
o.display(); //显示"blue"

display()定义在全局，其this在调用之前是不确定的，根据调用它的对象来决定this是什么。

---

5.2 函数属性和方法

JS中函数是对象，因此函数也有属性和方法，每个函数都包含2个属性：length和prototype。

• length：表示函数希望接受的命名参数的个数。
• prototype：保存了引用类型的所有实例方法。诸如toString()等方法都存在prototype名下。

每个函数都包含2个非继承而来的方法：apply()和call()。用于在特定的作用域中调用函数，实际上等于设置函数体内this对象的值。
apply()方法有两个参数，一个是在其中运行函数的作用域，另一个是参数数组，可以是Array数组或arguments对象。
call()方法类似，只是要逐个列出参数。

---

6 基本包装类型

为了便于操作基本类型值，JS有三个特殊的引用类型：Boolean、Number、String。每当读取一个基本类型值的时候，后台就会创建一个对应的基本包装类型的对象，从而可以调用一些方法来操作这些数据。

6.1 Number类型

方法	作用
toFixed(num)	按照num指定的小数位数返回数值的字符串表示
toExponential(num)	返回以指数表示法表示的数值的字符串形式，num为输出结果的小数位数
toPrecision(num)	根据具体情况，返回数值的形式，参数表示数值的所有数字的位数（不包含指数部分）

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

---

6.2 String类型

6.2.1 字符方法

方法	作用
charAt(num)	以单字符字符串的形式返回给定位置的字符
charCodeAt(num)	以字符串形式返回该字符的编码
fromCharCode(num1，num2,…)	将接收到的字符编码转换成字符串

可以用访问数组的方式，用[下标]访问。

---

6.2.2 字符串操作方法

这些方法都不改变原字符串。

方法	作用
concat()	拼接字符串，返回新字符串，不改变原字符串
slice()	作用和Array类型的slice一样
substring()	当参数为正数时，和slice一样，当参数为负数时，会将负数都转换为0

---

6.2.3 字符串位置方法

方法	作用
indexOf()	作用和Array类型的indexOf一样
lastIndexOf()	作用和Array类型的lastIndexOf一样

---

6.2.4 字符串模式匹配方法

方法	作用
match()	本质与RegExp类型的exec一样，参数是正则表达式或RegExp对象
search()	参数与match一样，返回字符串中第一个匹配项的索引，没有则返回-1。
split()	可以基于指定的分隔符将一个字符串分割成多个子字符串，并将结果放入一个数组中

replace()方法比较重要，所以单独列出。
作用：替换子字符串
参数：第一个参数与match一样，第二个参数为要替换成的子串，
正则表达式的全局标志g可以完成替换所有子字符串的功能。
如果第二个参数是字符串，
还可以使用一些特殊的字符序列，将正则表达式操作得到的值插入到结果字符串中

字符序列	替换文本
$$	$
$&	匹配整个模式的子字符串，与RegExp.lastMatch的值相同
$’($+单引号)	匹配的子字符串之前的子字符串，与RegExp.leftContext的值相同
$`($+~)	匹配的子字符串之后的子字符串，与RegExp.rightContext的值相同
$n	匹配的第n个捕获组的子字符串，n从0到9，$1是匹配的第一个捕获组的子字符串
$nn	匹配的第n个捕获组的子字符串，n从01到99，$01是匹配的第一个捕获组的子字符串

举例如下：

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

第个参数还可以是个函数：

var text = "<p id=\"ID\">something</p>"
result = text.replace(/[<>"&]/g,function(match,pos,originalText){
    switch(match){
        case "<" : return "&lt;";
        case ">" : return "&gt;";
        case "&" : return "&amp;";
        case "\"" : return "&quot;";
    }
});

alert(result); //"&lt;p id=&quot;ID&quot;&gt;something&lt;/p&gt;"

---

6.2.5 其他方法

方法	作用
trim()	创建一个字符串的副本，删除前置和后缀的空格，并返回结果
trimLeft()	删除前置空格
trimRight()	删除后缀空格
toLowerCase()	转换为全小写
toUpperCase()	转换为全大写
toLocaleLowerCase()	根据代码所运行地区的语言环境来转换为小写
toLocaleUpperCase()	根据代码所运行地区的语言环境来转换为大写
localeCompare(string)	根据两个字符串在字母表中的相对位置比较大小

---

7 单体内置对象

JS还有两个单体内置对象Global和Math。

7.1 Global对象

7.1.1 Global对象的方法

不属于任何其他对象的属性和方法，最终都划归Global对象，实际上没有全局变量和全局函数，所有在全局定义域中定义的属性和函数都是Global对象的属性。
之前提到的isNaN()、isFinite()、parseInt()都是Global对象的方法。

方法	作用
encodeURI()	对URI编码，将一些不能出现在URL中的字符转码，用于整个URI，不会转码本身属于URI的字符（: / # ?）
encodeURIComponent()	作用一样，但更针对URI的某一段，会转换所有非标准字符
decodeURI()	对应的解码方法
decodeURIComponent()	对应的解码方法
eval()	将传入的参数当做实际的JS语句来解析，并把结果插到原位置

---

7.1.2 window对象

在web中，将Global全局对象作为window对象的一部分实现。
在全局作用域中声明的所有变量和函数都成为了window对象的属性。

---

7.2 Math对象

用于保存数学公式和信息。

---

7.2.1 Math对象的属性

属性	说明
Math.E	自然对数的底数，e
Math.LN10	10的自然对数
Math.LN2	2的自然对数
Math.LOG2E	以2为底数的e的对数
Math.LOG10E	以10为底数的e的对数
Math.PI	π
Math.SQRT1_2	1/2的平方根
Math.SQRT2	2的平方根

---

7.2.1 Math对象的方法

方法	说明
max(n1,n2,n3,…)	求最大值
min(n1,n2,n3,…)	求最小值
ceil(num)	向上取整
floor(num)	向下取整
round(num)	四舍五入
random()	返回0和1之间的一个随机数，不包扩0和1
abs(num)	求绝对值
exp(num)	求e的num次幂
log(num)	求num的自然对数
pow(num,power)	求num的power次幂
sqrt(num)	求num的平方根
tan(x)	求x的正切
cos(x)	求x的余弦
sin(x)	求x的正弦
atan(x)	求x的反正切
acos(x)	求x的反余弦
asin(x)	求x的反正弦
atan2(y,x)	求y/x的反正切