文档章节

DOM笔记(九):引用类型、基本包装类型和单体内置对象

dwqs
 dwqs
发布于 2014/12/19 11:45
字数 3545
阅读 43
收藏 11
js

一、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,greenalert(colors.toString());
alert(colors.valueOf());
alert(colors);

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

var person1 = 
{
    toLocaleString:function()
    {        return "test1";
    },
    toString:function()
    {        return "test2";
    }
};var person2 = 
{
    toLocaleString:function()
    {        return "dwqs";
    },
    toString:function()
    {        return "ido321";
    }
};var people = [person1,person2];
alert(people);                     //test2,ido321alert(people.toString());          //test2,ido321alert(people.toLocaleString());    //test1,dwqs

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

           栈是一种先进后出(LIFO)的数据结构。在栈中插入项称为推入,删除项称为弹出,两个动作均只发生在栈的顶部。在ECMAScript中,推入和弹出对应的方法是push()和pop(),分别在数组末尾添加和末尾删除数组元素。

var colors = new Array();var count = colors.push('red','green');   //推入两项,并返回修改后的数组长度alert(count);  //2count = colors.push("black");
alert(count);  //3var item = colors.pop();
alert(item);  //blackalert(colors.length); //2

          队列是先进先出(FIFO)的数据结构,push()在队列末端添加项,shift()在前端删除项,数组长度减1,并返回删除项。与shift()相反的是unshift(),其在前端添加项并返回新数组的长度。

var colors = new Array();var count = colors.push('red','green');   //推入两项,并返回修改后的数组长度alert(count);  //2count = colors.push("black");
alert(count);  //3var item = colors.shift();
alert(item);  //blackalert(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()接受一个比较函数作为参数,根据返回值确定哪一个排前排后。

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

     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,bluealert(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,brownalert(colors4);    //green,blue,yellow(不包括位置4的元素)//splice():对数组元素进行删除、插入和替换//1、删除:指定两个参数,要删除的第一项的位置和删除的项数,返回从数组中删除的项var removed = colors3.splice(1,2);
alert(colors3);  //green,black,brownalert(removed);  //blue,yellow//2、插入和替换:三个参数,起始位置、要删除的项数和插入的项//若第二个参数是0,执行插入,返回空数组;不为0,则执行替换,返回删除的项组成的数组var newcolors = ["red","green","blue"];var removed2 = newcolors.splice(1,2,"yellow","orange");
alert(newcolors);    //red,yellow,orangealert(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。对于不支持此方法的浏览器,可以使用+操作符将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

 

三、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()列举出全部参数再传给函数。

function sum(num1,num2)
{     return num1+num2;
}function applySum(num1,num2)
{     return sum.apply(this,arguments); //return sum.apply(this,[num1,num2]); }function callSum(num1,num2)
{     return sum.call(this,num1,num2);
}
alert(applySum(10,10));  //20alert(callSum(10,20));  //30

 

四、基本包装类型

    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);  //numbervar 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);  //objectalert(typeof falseValue); //booleanalert(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对象

  常见属性和方法

属性 说明
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的平方根
Math.min()与Math.max() 求一组数的最小和最大值
Math.ceil() 进1取整
Math.floor() 舍1取整
Math.round() 四舍五入
Math.random 返回0~1的随机数,包含0不包含1

原文首发:http://www.ido321.com/1351.html


© 著作权归作者所有

dwqs
粉丝 3
博文 20
码字总数 24979
作品 0
广州
程序员
私信 提问
JavaScript 闯关记

《JavaScript 闯关记》之 DOM(下) Element 类型 除了 Document 类型之外,Element 类型就要算是 Web 编程中最常用的类型了。Element 类型用于表现 XML 或 HTML 元素,提供了对元素标签名、...

掘金官方
2018/01/10
0
0
JavaScript 学习笔记4

第五章 引用类型 也称为对象定义,描述的是一类对象所具有的属性和方法 1.Object:基础类型,其他所有类型都从Object继承了基本的行为 创建实例方式 a.var person=new Object();b.对象字面...

candy-chocolate
2016/11/01
2
0
JavaScript的数据类型及判断

最近自己回归基础看了下javascript的相关知识点,想着看都看了,写出来记录下足迹也是一件好事,遂记录~ 还有还有,哪位大佬有广州前端开发工程师的机会推荐一下吗,简历可以戳blog下的res...

call_me_R
06/01
0
0
Typescript 内置对象

在 Typescript 数组类型 这篇文章末我们提及到了 Typescripe 一种内置对象。 在 Typescript 中内置对象是作为已经定义好(内置)的类型去使用的,很显然它是存在全局作用域(Global)上。 EC...

pr
06/25
0
0
【BS学习】JavaScript总结

概述 使用 语法、关键保留字及变量 数据类型 运算符 流程控制语句 函数 对象和数组 时间与日期 正则表达式 Function类型 变量、作用域及内存 基本包装类型 内置对象 面向对象与原型 匿名函数...

yym15732626210
2018/02/26
0
0

没有更多内容

加载失败,请刷新页面

加载更多

优雅的关闭Spring Boot

优雅的关闭Spring Boot 1、实现 TomcatConnectorCustomizer 接口拿到Tomcat的连接获取 Tomcat连接池 2、实现 ApplicationListener<ContextClosedEvent> 监听服务器关闭事件,注册JVM钩子函数...

sowhat
今天
2
0
Python3-Web开发

简介 Web开发框架 什么是Web框架? Web应用程序框架或简单的Web框架表示一组库和模块,使Web应用程序开发人员能够编写应用程序,而不必担心协议,线程管理等低级细节。 virtualenv是一个虚拟...

wuxinshui
今天
3
0
使用技媒体实践编写发布博客

技媒体实践博客 CSDN OSChina 知乎 简书 思否 掘金 51CTO

晨猫
今天
2
0
Lucene

1、什么是全文检索 数据分类 我们生活中的数据总体分为两种:结构化数据和非结构化数据。 结构化数据:指具有固定格式或有限长度的数据,如数据库,元数据等。 非结构化数据:指不定长或无固...

榴莲黑芝麻糊
昨天
5
0
python到setuptools、pip工具的安装

python安装 基础开发库   apt-get install gcc  apt-get install openssl libssl-dev 安装数据库和开发库   apt-get install mysql-server libmysqld-dev python环境   下载地址...

问题终结者
昨天
6
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部