【读书笔记】JavaScript 引用类型

187 阅读7分钟

引用类型的值(对象)是引用类型的一个实例。

5.1 Object 类型

  • 创建 Object 实例的方式:
// 第一种是使用 new 操作符后跟 Object 构造函数
var person = new Object();
person.name = "Nicholas";
person.age = 29;

//第二种是对象字面量表示法
var person = {
    name : "Nicholas",
    age : 29
};

5.2 Array 类型

  • 创建数组的基本方式:
//第一种是使用 Array 构造函数
var colors = new Array();

//第二是使用数组字面量表示法
var colors = ["red", "blue", "green"];
  • 5.2.1 检测数组
if (value instanceof Array){
    //对数组执行某些操作
}
  • 5.2.2 转换方法
var colors = ["red", "blue", "green"]; // 创建一个包含 3 个字符串的数组
    alert(colors.toString()); // red,blue,green
    alert(colors.valueOf()); // red,blue,green
    alert(colors.toLocaleString()); // red,blue,green
    alert(colors.join(",")); //red,green,blue
  • 5.2.3 栈方法

ECMAScript 为数组专门提供了 push() 和 pop() 方法

var colors = new Array(); // 创建一个数组
var count = colors.push("red", "green"); // 推入两项
alert(count); //2

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

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

  • 5.2.4 队列方法

shift() :够移除数组中的第一个项并返回该项,同时将数组长度减 1
push() :向数组末端添加项的方法
unshift():数组的前端添加项

var colors = new Array(); //创建一个数组
var count = colors.push("red", "green"); //推入两项
alert(count); //2

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

var item = colors.shift(); // 取得第一项
alert(item); //"red"
alert(colors.length); //2

var colors = new Array(); //创建一个数组
var count = colors.unshift("red", "green"); // 推入两项
alert(count); //2
  • 5.2.5 重排序方法

reverse() :反转数组项的顺序
sort():升序排列数组项

var values = [1, 2, 3, 4, 5];
values.reverse();
alert(values); //5,4,3,2,1

var values = [0, 1, 5, 10, 15];
values.sort();
alert(values); //0,1,10,15,5
  • 5.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():它能够基于当前数组中的一或多个项创建一个新数组。 slice() 方法可以 接受一或两个参数,即要返回项的起始和结束位置。

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

alert(colors2); //green,blue,yellow,purple
alert(colors3); //green,blue,yellow

splice()

var colors = ["red", "green", "blue"];
var removed = colors.splice(0,1); // 删除第一项
alert(colors); // green,blue
alert(removed); // red,返回的数组中只包含一项

removed = colors.splice(1, 0, "yellow", "orange"); // 从位置 1 开始插入两项
alert(colors); // green,yellow,orange,blue
alert(removed); // 返回的是一个空数组

removed = colors.splice(1, 1, "red", "purple"); // 插入两项,删除一项
alert(colors); // green,red,purple,orange,blue
alert(removed); // yellow,返回的数组中只包含一项
  • 5.2.7 位置方法

indexOf():从数组的开头(位置 0)开始向后查找
lastIndexOf():从数组的末尾开始向前查找

var numbers = [1,2,3,4,5,4,3,2,1];
alert(numbers.indexOf(4)); //3
alert(numbers.lastIndexOf(4)); //5
  • 5.2.8 迭代方法

//every 
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

//some
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]

//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]

//forEach
var numbers = [1,2,3,4,5,4,3,2,1];
    numbers.forEach(function(item, index, array){
        //执行某些操作
});
  • 5.2.9 归并方法

reduce():从数组的第一项开始,逐个遍历到最后
reduceRight():从数组的最后一项开始,向前遍历到第一项

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

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

5.3 Date 类型

ECMAScript 中的 Date 类型是在早期 Java 中的 java.util.Date 类基础上构建的。为此, Date 类型使用自 UTC(Coordinated Universal Time,国际协调时间)1970 年 1 月 1 日午夜(零时)开始经过 的毫秒数来保存日期。

  • 创建一个日期对象
var now = new Date();

5.4 RegExp 类型

ECMAScript 通过 RegExp 类型来支持正则表达式。使用下面类似 Perl 的语法,就可以创建一个正 则表达式。

var expression = / pattern / flags ;
  • 5.4.2 RegExp 实例方法

    • exec():该方法是专门为捕获组而设计的。

    exec() 接受一个参数,即要应用模式的字符串,然后返回包含第一个匹配项信息的数组;或者在没有匹配项的情况下返回 null 。
    但包含两个额外的属性: index 和 input 。其中, index 表示匹配项在字符串中的位置,而 input 表示应用正则表达式的字符串。

    var text = "mom and dad and baby";
    var pattern = /mom( and dad( and baby)?)?/gi;
    var matches = pattern.exec(text);
    alert(matches.index); // 0
    alert(matches.input); // "mom and dad and baby"
    alert(matches[0]); // "mom and dad and baby"
    alert(matches[1]); // " and dad and baby"
    alert(matches[2]); // " and baby"
    
    • test() :在模式与该参数匹配的情况下返回true ;否则,返回 false 。
    var text = "000-00-0000";
    var pattern = /\d{3}-\d{2}-\d{4}/;
    if (pattern.test(text)){
        alert("The pattern was matched.");
    }
    

5.5 Function 类型

5.6 基本包装类型

ECMAScript 还提供了 3 个特殊的引用类型: Boolean 、 Number 和String 。

5.7 单体内置对象

  • 5.7.1 Global 对象

      1. URI 编码方法
    var uri = "http://www.wrox.com/illegal value.htm#start";
    
    alert(encodeURI(uri));//"http://www.wrox.com/illegal%20value.htm#start"
    
    alert(encodeURIComponent(uri));//"http%3A%2F%2Fwww.wrox.com%2Fillegal%20value.htm%23start"
    
    //encodeURI() 编码后的结果是除了空格之外的其他字符都原封不动,只有空格被替换成了%20 。而 encodeURIComponent() 方法则会使用对应的编码替换所有非字母数字字符。
    
    var uri = "http%3A%2F%2Fwww.wrox.com%2Fillegal%20value.htm%23start";
    
    alert(decodeURI(uri));//http%3A%2F%2Fwww.wrox.com%2Fillegal value.htm%23start
    
    alert(decodeURIComponent(uri));//http://www.wrox.com/illegal value.htm#start
    //decodeURI()输出的结果中,只有 %20 被替换成了空格。而在第二次调用 decodeURIComponent()输出的结果中,所有特殊字符的编码都被替换成了原来的字符,得到了一个未经转义的字符串
    
      1. eval() 方法

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

     eval("alert('hi')");//alert("hi");
    
      1. Global 对象的属性
      1. window 对象
  • 5.7.2 Math 对象

      1. Math 对象的属性

      1. min() 和 max() 方法
      1. 舍入方法
    Math.ceil() 执行向上舍入,即它总是将数值向上舍入为最接近的整数;
    Math.floor() 执行向下舍入,即它总是将数值向下舍入为最接近的整数;
    Math.round() 执行标准舍入,即它总是将数值四舍五入为最接近的整数
    
      1. random() 方法
    var num = Math.floor(Math.random() * 10 + 1); //选择一个 1到 10 之间的数值
    
      1. 其他方法

    5.8 小结

    对象在 JavaScript 中被称为引用类型的值,而且有一些内置的引用类型可以用来创建特定的对象, 现简要总结如下:

    引用类型与传统面向对象程序设计中的类相似,但实现不同;
    Object 是一个基础类型,其他所有类型都从 Object 继承了基本的行为;
    Array 类型是一组值的有序列表,同时还提供了操作和转换这些值的功能;
    Date 类型提供了有关日期和时间的信息,包括当前日期和时间以及相关的计算功能;
    RegExp 类型是 ECMAScript 支持正则表达式的一个接口,提供了最基本的和一些高级的正则表 达式功能。

    函数实际上是 Function 类型的实例,因此函数也是对象;而这一点正是 JavaScript 最有特色的地 方。由于函数是对象,所以函数也拥有方法,可以用来增强其行为。
    因为有了基本包装类型,所以 JavaScript 中的基本类型值可以被当作对象来访问。三种基本包装类 型分别是: Boolean 、 Number 和 String 。以下是它们共同的特征:

    每个包装类型都映射到同名的基本类型;
    在读取模式下访问基本类型值时,就会创建对应的基本包装类型的一个对象,从而方便了数据 操作;
    操作基本类型值的语句一经执行完毕,就会立即销毁新创建的包装对象。

    在所有代码执行之前,作用域中就已经存在两个内置对象: Global 和 Math 。在大多数 ECMAScript 实现中都不能直接访问 Global 对象;不过,Web 浏览器实现了承担该角色的 window 对象。全局变 量和函数都是 Global 对象的属性。 Math 对象提供了很多属性和方法,用于辅助完成复杂的数学计算 任务。