《JavaScript高级程序设计（第3版）》——引用类型（五）

时间 2019-12-09

标签 javascript 高级程序设计引用类型栏目 JavaScript 繁體版

原文原文链接

引用类型

引用类型的值（对象）是引用类型的一个实例。javascript

建立新对象：new 操做符后跟一个 构造函数前端

var person = new Object();

上面：java

引用类型： Object
构造函数：Object()
实例保存在变量 person 中。

Object 类型

建立 Object 实例的方式一：构造函数建立

var person = new Object();

建立 Object 实例的方式二：对象字面量

对象字面量这种方式不会调用 Object 构造函数

var person = {
    name: "Nicholas",  // 属性之间用逗号隔开
    age: 29    // 在最后一个属性后面不加都好
}

属性名也能够用字符串：

var person = {
    "name": "Nicholas",  // 属性之间用逗号隔开
    "age": 29    // 在最后一个属性后面不加都好
    5: true   // 数值属性会自动转换为字符串 
}

访问属性

alert(person["name"]); //要将属性以字符串形式放在方括号中
alert(person.name);

方括号的优势：能够经过变量来访问属性

var propertyName = "name";
alert(person[propertyName]);

Array 类型

ECMAScript 数组的每一项能够保存任何类型的数据。好比：第一个位置保存字符串，第二个位置保存数值，第三个位置保存对象，等。数组大小是能够动态调整的。

建立数组方式一：Array 构造函数

var colors = new Array();
var colors = new Array(20); //长度为20
var colors = new Array("red", "blue", "green"); //建立了一个包含3个字符串的数组

在使用 Array 构造函数时能够省略 new 操做符

var colors = Array(3);
var colors = Array("greg");

建立数组方式二：数组字面量

数组字面量这种方式不会调用 Array 构造函数

var colors = ["red", "blue", "green"];// 建立一个包含3个字符串的数组
var names = [];                          // 建立一个空数组
var values = [1, 2, ];                // 不要这样！ 这样会建立一个包含 2 或 3 项的数组
var options = [, , , , ,]             // 不要这样！ 这样会建立一个包含 5 或 6 项的数组

检测数组

ES5新增 Array.isArray()方法，肯定某个值是否是数组。有些浏览器不支持。正则表达式

if (Array.isArray(value)){
    //执行某些操做
}

转换方法

toString()， valueOf()express

var colors = ["red", "blue", "green"];
alert(colors.toString());   // "red,blue,green"  返回数组中每一个值的字符串以逗号分隔的拼接字符串
alert(colors.valueOf());    // ["red", "blue", "green"]   返回的仍是数组
alert(colors);              // 与 toString() 相同

join()数组

var colors = ["red", "blue", "green"];
console.log(colors.join(","));   // red,blue,green
console.log(colors.join("||"));  // red||blue||green

栈方法（LIFO 后进先出）

push() 接收任意数量的参数，把他们逐个添加到数组末尾浏览器

pop() 从数组末尾移除最后一项，减小数组的 length 值，返回移除的项。app

var colors = new Array();               // 建立一个数组
var count = colors.push("red", "blue"); // 推入两项
console.log(count);                     // 2

count = colors.push("black");           // 推入另外一项
console.log(count);                     // 3

var item = colors.pop();                // 取得最后一项
console.log(item);                      // black
console.log(colors.length);             // 2

队列方法（FIFO 先进先出）

shift() 移除第一项dom

unshift() 在数组前端添加项函数

重排序方法

reverse() 反转数组项的顺序

sort() 按升序排列数组项，sort()会调用 toString()转型方法，

==特别注意==：因此sort()比较的是字符串。

var values = [0, 1, 10, 15, 5];
console.log(values.reverse());   // [5, 15, 10, 1, 0]
console.log(values.sort());      // [0, 1, 10, 15, 5]

将比较函数传递到 sort()能够保持正确的升序：

function compare(value1, value2) {
    if (value1 < value2) {
        return -1;
    } else if (value1 > value2) {
        return 1;
    } else {
        return 0;
    }
}
var values = [0, 1, 10, 15, 5];
values.sort(compare);
console.log(values);  // [0, 1, 5, 10, 15]

用 ES6中的箭头函数来写数组升序：

var values = [0, 1, 10, 15, 5];
values.sort((value1, value2) => value1 - value2);
console.log(values);  // [0, 1, 5, 10, 15]

用 ES6中的箭头函数来写数组降序：

var values = [0, 1, 10, 15, 5];
values.sort((value1, value2) => value2 - value1);
console.log(values);  // [15, 10, 5, 1, 0]

操做方法

concat() 建立副本，将参数添加到副本的末尾，返回新构建的数组

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

slice() 数组截取

var colors = ["red", "blue", "green", "yellow", "purple"];
var colors2 = colors.slice(1);     // 第一项 到 末尾
var colors3 = colors.slice(1, 4);  // 第一项 到 第四项
console.log(colors2);  // ["blue", "green", "yellow", "purple"]
console.log(colors3);  // ["blue", "green", "yellow"]

splice()

var colors = ["red", "green", "blue"];
var removed = colors.splice(0,1);              //remove the first item
alert(colors);     //green,blue
alert(removed);    //red - one item array
        
removed = colors.splice(1, 0, "yellow", "orange");  //insert two items at position 1
alert(colors);     //green,yellow,orange,blue
alert(removed);    //empty array

removed = colors.splice(1, 1, "red", "purple");    //insert two values, remove one
alert(colors);     //green,red,purple,orange,blue
alert(removed);    //yellow - one item array

位置方法

indexOf() 要查找的值从前日后首次出现的索引

lastIndexOf() 要查找的值从后往前首次出现的索引

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       

var person = { name: "Nicholas" };
var people = [{ name: "Nicholas" }];
var morePeople = [person];
        
alert(people.indexOf(person));     //-1
alert(morePeople.indexOf(person)); //0

迭代方法

every() 对数组中每一项运行给定函数，每一项都true,则返回 true

some()

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

filter()

var numbers = [1,2,3,4,5,4,3,2,1];     
var filterResult = numbers.filter(function(item, index, array){
     return (item > 2);
});       
alert(filterResult);   //[3,4,5,4,3]

forEach() 对每一项运行指定函数，无返回值

map()

var numbers = [1,2,3,4,5,4,3,2,1];       
var mapResult = numbers.map(function(item, index, array){
     return item * 2;
});        
alert(mapResult);   //[2,4,6,8,10,8,6,4,2]

归并方法

reduce() 从前日后执行函数

reduceRight() 从后往前执行函数

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

Date 类型

ECMAScript 中的 Date 类型是在早期 Java 中的 java.util.Date 类基础上构建的，使用自UTC（国际协调时间）1970年1月1日午夜（零时）开始通过的毫秒数来保存日期。
Date 类型保存的日期可以精确到1970年1月1日以前或以后的100 000 000 年。

建立 Date 实例

构造函数建立：

var now = new Date();

var now = new Date();
alert(now); //Wed Mar 20 2019 21:32:55 GMT+0800 (中国标准时间) 当前时间
        
var someDate = new Date(Date.parse("May 25, 2004"));
alert(someDate); //Tue May 25 2004 00:00:00 GMT+0800 (中国标准时间)

ES5 中添加了 Date.now()方法

// 取得开始时间
var start = Date.now();
// 调用函数
doSomething();
// 取得中止时间
var stop = Date.now();
var result = stop - start;

对于不支持 Date.now()的浏览器，使用 +操做符也能够获取 Date 对象的时间戳：

// 取得开始时间
var start = +new Date();
// 调用函数
doSomething();
// 取得中止时间
var stop = +new Date();
var result = stop - start;

RegExp 类型

建立正则表达式：字面量

var expression = / pattern / flags;
/ 模式(pattern) / 标志(flags)     的组合

3种标志：

g ：表示全局(global)模式，模式被应用于全部字符串，而非在发现第一个匹配时当即中止。
i：表示不区分大小写(case-insensitive)，忽略模式与字符串的大小写。
m：表示多行(multiline)模式，在到达一行文本末尾时继续查找下一行。

模式中使用的全部元字符都必须转义。
正则表达式中的元字符包括：( [ \ ^ $ | ) ? * + . ] }

// 匹配字符串中全部"at"的实例
var pattern1 = /at/g;

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

// 匹配全部以 "at" 结尾的3个字符的组合，不区分大小写
var pattern4 = /.at/gi;
// 匹配全部 ".at"，不区分大小写
var pattern5 = /\.at/gi;

建立正则表达式：RegExp构造函数

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

RegExp实例方法

exec() 捕获组

test() 验证。经常使用于验证用户输入的状况。

Function 类型

ECMAScript 中，函数其实是对象。每一个函数都是 Function 类型的实例，与其余引用类型同样具备属性和方法。
函数是对象，函数名是一个指向对象的指针，不会与某个函数绑定。

函数没有重载

函数声明与函数表达式

函数声明：解析器在向执行环境加载数据时，在代码开始执行以前，就经过 函数声明提高 读取并将函数声明添加到执行环境中。对代码求值时，JavaScript 引擎在第一遍会声明函数并将它们放到源代码树的顶部。、
函数表达式：解析器执行到它所在的代码行，才会真正被解释执行。

下面的代码能够正常运行：

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

将函数声明改成函数表达式会错误：

alert(sum(10, 20));
var sum = function(num1, num2){
    retuen num1 + num2;
};

函数内部属性

arguments

this

this 引用的是函数执行的环境对象——或者也能够说是 this 值（当在网页的全局做用域中调用函数时， this 对象引动的就是 window）。

函数属性和方法

每一个函数都包含两个属性
- length
- prototype
每一个函数都包含两个非继承而来的方法
- apply()
- call()
ES5还定义了一个方法
- bind()

基本包装类型

ECMAScript 还提供了3个特殊的引用类型：Boolean、Number，String
每当读取一个基本类型值的时候，后台就会建立一个对应的基本包装类型的对象，从而让咱们可以用一些方法来操做这些数据。
引用类型与基本包装类型的区别：
- 使用 new 操做符建立的引用类型的实例，在执行流离开当前做用于以前都一直保存在内存中
- 自动建立的基本包装类型的对象，则只存在于一行代码的执行瞬间，而后当即被销毁。

Boolean 类型

布尔对象：
- 布尔表达式中的全部对象都会被转换为 true

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

基本类型的布尔值：

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

Number 类型

var numberObject = new Number(10);

toString() 参数表示返回几进制数值的字符串形式

alert(numberObject.toString());       //"10"
alert(numberObject.toString(2));      //"1010"
alert(numberObject.toString(8));      //"12"
alert(numberObject.toString(10));     //"10"
alert(numberObject.toString(16));     //"a"

toFixed() 参数表示显示几位小数

alert(numberObject.toFixed(2));    //outputs "10.00"

toExponential() 返回以指数表示法（也称 e 表示法）表示的数值的字符串形式

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

toPrecision() 参数表示数值的全部数字的位数

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

String 类型

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

字符方法

charAt() 参数：字符位置返回：给定位置的字符（单字符字符串形式）

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

charCodeAt() 参数：字符位置返回：给定位置字符的编码

var stringValue = "hello world";
alert(stringValue.charCodeAt(1));   // 输出 “101”，也就是小写字母 "e" 的字符编码

[] ES5中的访问个别自负的方法

var stringValue = "hello world";
alert(stringValue[1]);   // "e"

字符串操做方法

concat() 字符串拼接

var stringValue = "hello";
var result = stringValue.concat("world");
alert(stringValue); // "hello"
alert(result);      // "hello world"

slice()
substr()
substring()

var stringValue = "hello world";
alert(stringValue.slice(3));        //"lo world"
alert(stringValue.substring(3));    //"lo world"
alert(stringValue.substr(3));       //"lo world"
alert(stringValue.slice(3, 7));     //"lo w"
alert(stringValue.substring(3,7));  //"lo w"
alert(stringValue.substr(3, 7));    //"lo worl"  第二个参数指定的是要返回的字符个数

字符串位置方法

indexOf() 从指定位置向后搜索
lastIndexOf() 从指定位置向前搜索

var stringValue = "hello world";
alert(stringValue.indexOf("o"));         //4
alert(stringValue.lastIndexOf("o"));     //7
alert(stringValue.indexOf("o", 6));         //7  从第6个开始向后搜索
alert(stringValue.lastIndexOf("o", 6));     //4  从第6个开始向前搜索

`trim()`方法

ECMAScript 中定义的 trim()方法。

建立一个字符串的副本，删除前置及后缀的全部空格，而后返回结果。

字符串大小写转换方法

toLowerCase()
toLocaleLowerCase()
toUpperCase()
toLocaleUpperCase()

var stringValue = "hello world";
alert(stringValue.toLocaleUpperCase());  //"HELLO WORLD"
alert(stringValue.toUpperCase());        //"HELLO WORLD"
alert(stringValue.toLocaleLowerCase());  //"hello world"
alert(stringValue.toLowerCase());        //"hello world"

字符串的模式匹配方法

mach() 只接受一个参数

var text = "cat, bat, sat, fat"; 
var pattern = /.at/;
        
var matches = text.match(pattern);        
alert(matches.index);        //0
alert(matches[0]);           //"cat"
alert(pattern.lastIndex);    //0

search() 接受惟一参数，返回字符串中第一个匹配项的索引

var text = "cat, bat, sat, fat"; 
var pos = text.search(/at/);
alert(pos);   //1

replace() l两个参数：参数一：RegExp对象或者一个字符串，参数二：字符串或函数。

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

result = text.replace(/at/g, "ond");
alert(result);    //"cond, bond, sond, fond"

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

split() 分割结果是数组

var colorText = "red,blue,green,yellow";
var colors1 = colorText.split(",");      //["red", "blue", "green", "yellow"]
var colors2 = colorText.split(",", 2);   //["red", "blue"]
var colors3 = colorText.split(/[^\,]+/); //["", ",", ",", ",", ""]

`localCompare()` 方法

localCompare() 比较两个字符串在字母表中的顺序

var stringValue = "yellow";       
alert(stringValue.localeCompare("brick"));  //1
alert(stringValue.localeCompare("yellow")); //0
alert(stringValue.localeCompare("zoo"));    //-1

`fromCharCode()` 方法

fromCharCode() 接收一或多个字符串编码，把他们转换成一个字符串

alert(String.fromCharCode(104, 101, 108, 108, 111)); //"hello"

单体内置对象

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

z在全部代码执行以前，做用域中就已经存在两个内置对象：Global 和 Math。

Global 对象

事实上，没有全局变量或全局函数
全部在全局做用域中定义的属性和函数，都是 Global 对象的属性。

URI 编码方法

encodeURI()
encodeURIComponent()

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()
decodeURIComponent()

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 value.htm#start
alert(decodeURIComponent(uri));

`eval()` 方法

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

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

Math 对象

Math.max()
Math.min()
Math.ceil() 向上舍入
Math.floor() 向下舍入
Math.round() 四舍五入
Math.random() 返回大于等于 0 小于 1 的随机数