DOM笔记（九）：引用类型、基本包装类型和单体内置对象

今天药忘吃喽~ 2022-08-06 04:05 16阅读 0赞

**一、Array**

**1 、创建数组的方式**

//Array构造函数(可以去掉new)
    var colors0 = new Array();
    var colors1 = new Array(20);
    var colors3 = new Array("red","blue","green");
    
    //数组字面量
    var colors4 = ["red","blue","green"];
    var colors5 = [];

可以根据元素的索引对数组元素进行访问，在数组末尾增加(或者删除)元素可以用colors.length，此种方式在末尾添加的元素自动获得undefined值。也可以用堆栈和队列的方式（见后文）。

**2、数组常见方法**

2.1、数组检测

//检测某个对象是不是数组
    if(value instanceof Array)
    {
      //操作
    }
    //instanceof只在只有一个全局执行环境时才有效，对于多框架网页，此方法不适合
    //ECMAScript5 新增isArray()方法，可以解决instanceof的问题
    
    if(Array.isArray(value))
    {
      //操作
    }

2.2、转换方法：toString()、valueOf()、toLocaleString()

var colors = ["red","blue","green"];
    //均显示red,blue,green
    alert(colors.toString());
    alert(colors.valueOf());
    alert(colors);

toString()返回由数组元素用逗号(,)拼接而成的字符串，valueOf返回的还是数组，alert(colors)会在后台调用toString()方法。toLocaleString()会调用数组每一项的toLocaleString()方法，而不是toString(),通常返回值和调用toString()和valueOf()相同，但是有例外。

2.3、栈和队列方法：push()、pop()、shift()、unshift()

栈是一种先进后出(LIFO)的数据结构。在栈中插入项称为推入，删除项称为弹出，两个动作均只发生在栈的顶部。在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

队列是先进先出(FIFO)的数据结构，push()在队列末端添加项，shift()在前端删除项，数组长度减1，并返回删除项。与shift()相反的是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);  //black
    alert(colors.length); //2

2.4、数组排序：sort()和reverse()

默认情况下，sort()会调用每一个数组元素的toString()方法，得到字符串，按照ASCII码的升序排序；reverse()则是反序排序。sort()和reverse()返回排序后的数组

//reverse反序
    var values1 = [1,2,3,4,5];
    alert(values1.reverse());  //5,4,3,2,1
    //sort排序
    var values2 = [0,1,5,10,15];
    alert(values2.sort());  //0,1,10,15,5

得到10和5的字符串形式时,1的ASCII码是49,5的ASCII码是52,所以默认下,sort()会认为5>10。为按照自然顺序排序，sort()接受一个比较函数作为参数，根据返回值确定哪一个排前排后。

2.5、迭代方法：every()、filter()、forEach()、map()、some()

上述的5个迭代方法均在ECMAScript 5中定义，每个方法均接收两个参数：数组每一项上运行的函数和运行该函数的作用域对象—影响this。传入方法中的函数均接收三个参数：数组项的值、该值在数组中的位置和数组对象本身。此5个方法均不会修改数组中包含的值。(IE9+等现代主流浏览器均支持ECMAScript 5)

every()：对数组中的每一项运行给定的函数，若该函数对每一项都返回true，则返回true。

filter()：对数组中的每一项运行给定的函数，返回该函数返回true的项组成的数组。

forEach()：对数组中的每一项运行给定的函数，无返回值。

map()：对数组中的每一项运行给定的函数，返回每次函数调用的结果组成的数组。

some()：对数组中的每一项运行给定的函数，若该函数对任一项返回true,则返回true。

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

2.6、其它函数：concat()、slice()、splice()、indexOf()、lastIndexOf()、reduce()、reduceRight()

var colors = ["red","green","blue"];
    //concat()：基于当前数组返回一个新的数组
    var colors2 = colors.concat("yellow",["black","brown"]);
    alert(colors);     //red,green,blue
    alert(colors2);    //red,green,blue,yellow,black,brown
    
    //slice():基于当前数组的一个或多个项创建一个新数组
    var colors3 = colors2.slice(1);
    var colors4 = colors2.slice(1,4);
    alert(colors3);    //green,blue,yellow,black,brown
    alert(colors4);    //green,blue,yellow(不包括位置4的元素)
    
    //splice():对数组元素进行删除、插入和替换
    //1、删除：指定两个参数，要删除的第一项的位置和删除的项数,返回从数组中删除的项
    var removed = colors3.splice(1,2);
    alert(colors3);  //green,black,brown
    alert(removed);  //blue,yellow
    
    //2、插入和替换：三个参数，起始位置、要删除的项数和插入的项
    //若第二个参数是0，执行插入，返回空数组；不为0，则执行替换，返回删除的项组成的数组
    var newcolors = ["red","green","blue"];
    var removed2 = newcolors.splice(1,2,"yellow","orange");
    alert(newcolors);    //red,yellow,orange
    alert(removed2);  //green,blue

splice() 方法与 slice() 方法的作用是不同的，splice() 方法会直接对数组进行修改。slice不会。

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类基础上构建的，因此，Date类型使用自UTC 1970.1.1午夜零时开始经过的毫秒数来保存时间。

**1、创建日期对象**

//基于当前时间
    var now0 = new Date();  
    //基于指定的日期字符串
    var now1 = new Date(Date.parse("May 25,2004")); 
    //基于UTC时间创建
    var now2 = new Date(Date.UTC(2014,11,16));

也可以传一个毫秒数给Date创建对象,而Date.parse()和Date.UTC()也返回一个基于指定日期的毫秒数.。Date.parse()基于GMT，传给Date.parse()的字符串不能解析为字符串则返回NaN；Date.UTC()的参数分别是年份、基于0的月份（0是1月份）、月中的一天（1到31）、小时数（0到23）、分钟、秒和毫秒数，年份和月份是必须的参数，其他参数可选（也可将相同的参数传给Date的构造函数）。

ECMAScript 5新增了一个Date.now(),获取当前日期和时间，参见：[http://msdn.microsoft.com/library/ff679974.aspx][http_msdn.microsoft.com_library_ff679974.aspx]。对于不支持此方法的浏览器，可以使用+操作符将Date对象转为字符串。

**2、Date对象常见方法**

**    ** getFullYear()：取得四位数的年份

getMonth()：返回日期中的月份，0表示一月

getDate()：返回日期中的天数（1到31）

getDay()：返回日期中星期的星期几（0是星期日，6是星期六）

getHours()：返回日期中的小时数（0~23)

getMinutes()：返回日期中的分钟数（0~59）

getSeconds()：返回日期中的秒数（0~59）

getMilliseconds()：返回日期中的毫秒数

更多方法：[http://www.w3school.com.cn/jsref/jsref\_obj\_date.asp][http_www.w3school.com.cn_jsref_jsref_obj_date.asp]

**三、Function**

**1、概述**

在JavaScript中，Function是一种对象类型，所以每个函数都是Function的实例，而函数名则只是一个指向函数对象的指针，不会与某个函数绑定。

//以下三种方式是等价的
    function sum(num1,num2)
    {
         return num1+num2;
    }
    
    var sum = function(num1,num2)
    {
         return num1+num2;
    }
    
    var sum = new Function("num1","num2","return num1+num2");

第三种方式始终把第三个参数当作函数体,不推荐使用。第一种相对第二种，有函数声明提升的优势。因为函数名是一个指针，这对于理解JavaScript没有重载很有用处。

function add(num)
    {
         return num+100;
    }
    function add(num)
    {
        return num+200;
    }
    alert(add(100));  //300

声明的两个同名函数,后者覆盖了前者.(可以把函数名当作特殊的变量处理，所以也可以用于参数和作为函数的返回值)，所以，其等价代码：

var add = function(num)
    {
         return num+100;
    };
    
    add = function(num)
    {
        return num+200;
    }

**2、属性和方法**

arguments：保存函数的参数，是一个数组对象，其拥有一个callee属性，是一个指针，指向拥有arguments对象的函数（一般就函数本身）

this：函数的执行环境对象，一般指向本身，但可以用call()或者apply()改变this的指向。

caller：ECMAScript 5新增的属性，指向调用当前函数的函数的引用。若在全局调用当前函数，则其值是null。

function outer()
    {
         inner();
    }
    
    function inner()
    {
         alert(arguments.callee.caller);  //返回outer函数的整个定义
    }
    outer();

prototype：指向对象的原型对象（在面向对象的笔记中会详细介绍）

apply()和call()：设置函数体中的this指向，二者区别是：apply()以数组形式将参数传递给函数，call()列举出全部参数再传给函数。

**四、基本包装类型**

ECMAScript提供了3个特殊的引用类型：Boolean、Number和String（后续放在正则表达式一文中介绍），用于操作基本类型。当读取一个基本类型的值时，后台会创建一个对应的基本包装类型的对象，然后可以调用对应的方法来操作数据。

var s1 = "test string";
    var s2 = s1.substring(4);
    alert(s2);  //string

s1是一个基本类型，本身没有定义任何的方法。但是，当读取到s1时，后台会创建一个String类型的实例，在实例上调用指定方法，再销毁实例，其等价如下：

//后台等价的代码
    var s1 = new String("test string");
    var s2 = s1.substring(4);
    s1 = null;

所以基本类型和引用类型的主要区别是对象的生存期。new出来的对象实例在执行流离开当前作用域之前一直存在，而基本类型的对象只存在于一行代码的执行瞬间，然后立即被销毁了。

var s1="test string";
    s1.color = "red";   
    alert(s1.color);  //undefined

其次,二者还存在一个区别,当用类型检测函数时，返回值不一样。见代码:

var value = "25";
    var number = Number(value);
    alert(typeof number);  //number
    
    var obj = new Number(value);
    alert(typeof obj);  //object

**1、Boolean**

Boolean类型是与布尔值对应的引用类型，重写了valueof()和toString()方法，前者返回基本类型值true和false，后者返回字符串”true”和”false”。区别和注意点看代码：

//注意点
    var falseObject = new Boolean(false);
    var result0 = falseObject && true;
    alert(result0);  //true;
    
    var falseValue = false;
    var result1 = falseValue && true;
    alert(result1);  //false;
    
    //区别
    alert(typeof falseObject);  //object
    alert(typeof falseValue); //boolean
    alert(falseObject instanceof Boolean);  //true;
    alert(falseValue instanceof Boolean); //false

**2、Number**

Number类型是与数字值对应的引用类型，valueof()返回基本数字值，toString(\[param\])返回字符串形式，param表示按哪种进制的字符串形式返回。

var num = 10;
    alert(num.toString()); //"10"
    alert(num.toString(2)); //"1010"
    alert(num.toString(8)); //"12"
    alert(num.toString(10)); //"10"
    alert(num.toString(16)); //"a"

另外,Number类型提供格式化字符串的函数

//toFixed(number):返回指定小数位数的数值字符串形式,
    var num = 10;
    var num1 = 10.005;
    alert(num.toFixed(2));  //"10.00"
    alert(num1.toFixed(2));  //"10.01"
    //toExponential(number):返回指数表示的字符串形式
    alert(num.toExponential(1));  //"1.0e+1"
    //toPrecision(number):返回上述两种方式中最合适的一种
    var num2 = 99;
    alert(num2.toPrecision(1));  //"1e+2"
    alert(num2.toPrecision(2));  //"99"
    alert(num2.toPrecision(3));  //"99.0"

Number类型与基本类型的区别同Boolean类型一致

**五、单体内置对象**

ECMA-262对内置对象的定义是：有ECMAScript实现提供的、不依赖于宿主环境的对象，这些对象在ECMAScript程序执行之前就已经存在了。Object、Array、String等都是内置对象，可以直接使用。除了这些，还有两个：Global和Math

**1、Global对象**

Global对象时ECMAScript的全局对象，对于不属于任何其它对象的方法和属性、所有在全局作用域中定义的属性和函数，都是Global对象的属性，如isNaN()、isFinite()、parseInt()和parseFloat()等。ECMAScript没有直接指出如何访问Global对象，但Web浏览器都将Global对象作为window对象的一部分加以实现。因此，在全局作用域中的函数和变量，都成了window对象的一部分。

除了上述方法，Global对象还定义了URI编码方法和eval()方法。

encodeURI(uristring)/encodeURIComponent(uristring)：对URI编码，返回编码后的字符串。前者用于对整个URI编码，不会对冒号、正斜杠(/)、问号和井字号等本身属于URI的特殊字符进行编码；后者主要对URI的某一段进行编码，对于冒号、正斜杠(/)、问号和井字号等任何的非标准字符都会编码。

decodeURI(uristring)/decodeURIComponent(uristring)：前者对encodeURI(uristring)编码的字符串进行解码；后者对encodeURIComponent(uristring)编码的字符串进行解码。

eval(string)：string是要执行的JavaScript字符串，eval()对JavaScript字符串进行解析，并将执行结果插入到原来的位置。eval()执行的代码是包含该次调用的执行环境的一部分，被执行的代码与该执行环境有相同的作用域链。在eval()中创建的任何变量或者函数都不会被提升。

var x3 = "test";
    var x=3;
    var y = eval("x"+x);
    alert(y);  //test

**2、Math对象**

常见属性和方法

<table> 
 <tbody> 
 <tr> 
 <td>属性</td> 
 <td>说明</td> 
 </tr> 
 <tr> 
 <td>Math.E</td> 
 <td>常量e的值</td> 
 </tr> 
 <tr> 
 <td>Math.LN10</td> 
 <td>10的自然对数</td> 
 </tr> 
 <tr> 
 <td>Math.LN2</td> 
 <td>2的自然对数</td> 
 </tr> 
 <tr> 
 <td>Math.LOG2E</td> 
 <td>以2为底e的对数</td> 
 </tr> 
 <tr> 
 <td>Math.LOG10E</td> 
 <td>以10为底e的对数</td> 
 </tr> 
 <tr> 
 <td>Math.PI</td> 
 <td>圆周率的值</td> 
 </tr> 
 <tr> 
 <td>Math.SQRT1_2</td> 
 <td>1/2的平方根</td> 
 </tr> 
 <tr> 
 <td>Math.SQRT2</td> 
 <td>2的平方根</td> 
 </tr> 
 <tr> 
 <td>Math.min()与Math.max()</td> 
 <td>求一组数的最小和最大值</td> 
 </tr> 
 <tr> 
 <td>Math.ceil()</td> 
 <td>进1取整</td> 
 </tr> 
 <tr> 
 <td>Math.floor()</td> 
 <td>舍1取整</td> 
 </tr> 
 <tr> 
 <td>Math.round()</td> 
 <td>四舍五入</td> 
 </tr> 
 <tr> 
 <td>Math.random</td> 
 <td>返回0~1的随机数，包含0不包含1</td> 
 </tr> 
 </tbody> 
</table>

原文首发：[http://www.ido321.com/1351.html][http_www.ido321.com_1351.html]

[http_msdn.microsoft.com_library_ff679974.aspx]: http://msdn.microsoft.com/library/ff679974.aspx
[http_www.w3school.com.cn_jsref_jsref_obj_date.asp]: http://www.w3school.com.cn/jsref/jsref_obj_date.asp
[http_www.ido321.com_1351.html]: http://www.ido321.com/1351.html