美文网首页
JavaScript高级程序设计读书笔记(五)之JS的引用类型

JavaScript高级程序设计读书笔记(五)之JS的引用类型

作者: 惶惶不安的青年 | 来源:发表于2017-09-03 17:29 被阅读0次

    引用类型的值(对象)是引用类型的一个实例。创建一个引用类型实例需要用new操作符后跟一个构造函数来创建。构造函数本身也是函数,只不过出于创建新对象的目的而定义的。

    一、Object类型

    Object实例有两种创建方式:
    1、var obj = new Object();
    2、使用对象字面量表示法
    var person={ }
    用对象字面量创建实际上是不会调用Object构造函数的。
    访问实例属性有两种
    1、点表示法:alert(obj.name)一般建议用点表示法访问。
    2、方括号表示法:alert(obj[name])在属性名中包含会导致语法错误的字符的时候可以用方括号表示法。

    二、Array类型

    Array类型即数组是数据的有序列表,每个元素都可以使不同类型,也可动态调整大小,也可随着数组添加自动增长。两种创建方式:1、var arr=new Array()Array可以接受参数可以是数组长度也可以是数组的元素。2、var arr=[]。访问数组通过下标和方块号表示法,arr[0]表示访问,数组的第一个元素。length也可以访问数组的长度。

    1、检测数组

    第一个alert(arr instanceof Array)//true问题在于,有多个全局执行环境(网页中包含多个框架)就会具有各自不同的构造函数。于是延伸出第二种方式。
    第二个alert(Array.isArray(arr))//true

    2、转换方法

    所有对象都具有toLocaleString()toString()valueOf()方法.
    数组调用toString()返回数组中每个值的字符串形式拼接而成的一个以逗号分隔的字符串。valueOf()返回的还是数组,toLocaleString()大多返回的和前两个一样,但是他会调用每一个数组元素的toLoceString()方法。
    join()则是用不同的分隔符来构建字符串(参数可以是任意符号,不传入则是逗号分隔)。

    3、栈方法

    栈是一种LIFO(last-in-first-out 后进先出)的数据结构,由push()pop()组成栈方法。
    push()方法接收任意数量参数,把他们逐个添加到数组末尾。
    pop()方法从数组末尾删除最后一项,减少length值,并返回最后一项。

    4、队列方法

    队列是一种FIFO(first-in-first-uot 先进先出)。在队列末端添加数据,在队列前端删除数据,由push()shift()组成队列方法。
    shift()删除数组中第一个元素并将第一个返回,减少数组length值1。
    pop()unshift()可以从相反的方向模拟队列。就是从前端添加项,从末尾移出。
    unshift()shift()相反在数组前端添加任意数量的元素。pop()从末位删除。

    5、重排序方法

    重排序顾名思义重新排序方法有reverse()和sort()。
    reverse()就是把数组翻转过来。
    sort()按升序排列数组,最小值位于最前面渐渐增大,在排序的时候会为每一个元素掉用toString()成字符串进行比较。一般不是最佳方案,这时候就需要在sort()中传递一个比较函数,比较函数接受两个参数,如果第一个参数应位于第二个参数之前返回负数,如果相等则反回0,第一个参数位于第二个参数之后返回正数。

    function compare(value1,value2){
            if(value1>value2){
                  return 1;//这是升序如果倒序只要换一下返回值即可
            }else if(value1<value2){
                  return -1;//这是升序如果倒序只要换一下返回值即可
            }else{
                  retuen 0;
            }
    }
    function compare(value1,value2){ //如果是数值类型或可以用valueOf()返回数值的对象类型可以用这个函数 
                  return value2-value1;//这是升序如果倒序交换即可。
    }
    
    6、操作方法

    JavaScript为操作已经包含在数组中的项提供了很多方法如:concat()slice()splice()
    concet():基于当前数组的项创建一个新数组。然后将接收到参数添加到新数组末尾。并返回新数组。
    slice:他能够基于当前数组中一个或者多个创建一个新数组。接受两个参数,第一个起始位置,第二个要结束的位置,一个参数就是起始到末尾。
    splice:删除、插入、替换。删除时传两个参数1、起始位置 2、要删除几个。插入时传三个参数1、起始位置 2、要删除的项可以为0(表示不删除)3、要添加的项可以多个逗号分隔。替换时传入三个参数1、起始位置 2、要删除的项 3、要替换的项()可多项。三种功能

    7、位置方法

    JavaScript的位置方法:indexOf()和lastIndexOf()。
    indexOf():有两个参数1、要查找的项2、可选的查找的起始位置。从开始查起。
    lastIndexOf():从后面查起。两个方法都返回查找值在数组的位置,没有返回-1。且查找的时候都是全等于===。

    8、迭代方法

    JavaScript为数组定义了5个迭代方法,每个方法都接受两个参数:要在每一项上运行的函数和(可选的)运行在该函数的作用域---影响this的值。
    every():给定运行每一项的函数,如果该函数对每一项都返回true,则返回true。
    filter():同上,返回该函数会返回true的项组成数组。
    forEach():同上,这个方法没有返回值。
    map():同上,返回每次函数调用的结果组成数组。
    some():同上,如果该函数任意一项返回true,则返回true。
    给定函数三个参数:function(数组项的值,该数组中的位置,数组本身)。

    9、缩小方法

    ECMAScript 5 还新增了两个缩小数组方法:reduce()reduceRight()。这两个方法都会迭代数组中所有项,然后构建一个最终返回值。reduce是从数组前面开始reduceRight是从后面遍历,他们都接受两个参数:一个在每一项上调用的函数和(可选的)作为缩小基础的初始值。
    给定函数:function(前一个值,当前值,项的索引,数组对象)。

    三、Data类型

    javascript的Date使用的是自UTC(国际协调时间)1970年1月1日0时0分0秒开始经过的毫秒书来保存日期。
    创建日期对象var now = new Date()使用new和Date操作符。
    var a = Date.now()返回1970,1,1到现在的毫秒数,var a = +newDate()一样的效果。

    1、继承方法

    Date对象也重写了toLocaleString()toString()valueOf方法,toLocaleString()会按着与浏览器设置地区先适应的格式日期和时间,这大致意味着时间格式会包含AM和PM,但不会包含时区。toString()通常返回带有时区信息的日期和时间。valueOf()不会返回字符串,会返回日期的毫秒表示。

    2、日期格式化方法
    var a = new Date(2017,09,01) 
    a//Sun Oct 01 2017 00:00:00 GMT+0800 (中国标准时间)
    a.toDateString()//"Sun Oct 01 2017"以特定于实现的格式显示星期几、月、日、年。
    a.toTimeString()//"00:00:00 GMT+0800 (中国标准时间)"以特定于实现的格式显示时、分、秒。
    a.toLocaleDateString()//"2017/10/1"以特定于地区的格式显示星期几、月、日、年。
    a.toLocaleTimeString()//"上午12:00:00"以特定于实现的格式显示时、分、秒。
    a.toUTCString()//"Sat, 30 Sep 2017 16:00:00 GMT"以特定于实现的格式完整的UTC日期。
    
    3.日期/时间组件方法
    [getDate()]从 Date 对象返回一个月中的某一天 (1 ~ 31)。
    [getDay()]从 Date 对象返回一周中的某一天 (0 ~ 6)。
    [getMonth()]从 Date 对象返回月份 (0 ~ 11)。
    [getFullYear()]从 Date 对象以四位数字返回年份。
    [getYear()]请使用 getFullYear() 方法代替。
    [getHours()]返回 Date 对象的小时 (0 ~ 23)。
    [getMinutes()]返回 Date 对象的分钟 (0 ~ 59)。
    [getSeconds()]返回 Date 对象的秒数 (0 ~ 59)。
    [getMilliseconds()]返回 Date 对象的毫秒(0 ~ 999)。
    [getTime()]返回 1970 年 1 月 1 日至今的毫秒数。
    [getTimezoneOffset()]返回本地时间与格林威治标准时间 (GMT) 的分钟差。
    [getUTCDate()]根据世界时从 Date 对象返回月中的一天 (1 ~ 31)。
    [getUTCDay()]根据世界时从 Date 对象返回周中的一天 (0 ~ 6)。
    [getUTCMonth()]根据世界时从 Date 对象返回月份 (0 ~ 11)。
    [getUTCFullYear()]根据世界时从 Date 对象返回四位数的年份。
    [getUTCHours()]根据世界时返回 Date 对象的小时 (0 ~ 23)。
    [getUTCMinutes()]根据世界时返回 Date 对象的分钟 (0 ~ 59)。
    [getUTCSeconds()]根据世界时返回 Date 对象的秒钟 (0 ~ 59)。
    [getUTCMilliseconds()]根据世界时返回 Date 对象的毫秒(0 ~ 999)。
    [parse()]返回1970年1月1日午夜到指定日期(字符串)的毫秒数。
    [setDate()]设置 Date 对象中月的某一天 (1 ~ 31)。
    [setMonth()]设置 Date 对象中月份 (0 ~ 11)。
    [setFullYear()]设置 Date 对象中的年份(四位数字)。
    [setYear()]请使用 setFullYear() 方法代替。
    [setHours()]设置 Date 对象中的小时 (0 ~ 23)。
    [setMinutes()]设置 Date 对象中的分钟 (0 ~ 59)。
    [setSeconds()]设置 Date 对象中的秒钟 (0 ~ 59)。
    [setMilliseconds()]设置 Date 对象中的毫秒 (0 ~ 999)。
    [setTime()]以毫秒设置 Date 对象。
    [setUTCDate()]根据世界时设置 Date 对象中月份的一天 (1 ~ 31)。
    [setUTCMonth()]根据世界时设置 Date 对象中的月份 (0 ~ 11)。
    [setUTCFullYear()]根据世界时设置 Date 对象中的年份(四位数字)。
    [setUTCHours()]根据世界时设置 Date 对象中的小时 (0 ~ 23)。
    [setUTCMinutes()]根据世界时设置 Date 对象中的分钟 (0 ~ 59)。
    [setUTCSeconds()]根据世界时设置 Date 对象中的秒钟 (0 ~ 59)。
    [setUTCMilliseconds()]根据世界时设置 Date 对象中的毫秒 (0 ~ 999)。
    [toSource()]返回该对象的源代码。
    

    四、RegExp类型

    JavaScript用RegExp类型来支持正则表单式。var expression = / pattern / flags

    模式(pattern)部分:可以是任何简单或者复杂正则表达式。
    标志(flags)部分:用以标明表达式的行为。
    有三个标志
    1、g:表示全局模式 全局匹配。
    2、i:表示不区分大小写模式。
    3、m:表示多行模式。在达到一行末尾时继续往下查。
    var patteern= / .at / gi //匹配所有以at结尾的三个字符的组合,全局且不区分大小写。

    模式中的元字符都必须转义,正则表达式中的元字符包括:

    ( [ { \ ^ $ | ? * + . ) ] }

    正则表达式字面量和正则表达式构造函数创建的实例在循环使用上有差别,正则表达式字面量始终都会共享一个实例,用构造函数则不会。但是在后代浏览器修改了这个bug

    1、RegExp实例属性

    global:布尔值,表示是否设置了g。
    ignoreCase:布尔值,表示是否设置了i。
    lastIndex:整数,表示搜索下一个匹配的位置,从0起。
    multiline:布尔值,表示是否设置了m标志。
    source:正则表达式的字符串表示,按照字面量形式而非传入构造函数中的字符串模式返回。

    2、RegExp实例方法

    exec():接受一个参数,即是字符串,返回第一个返回项信息的数组,没有匹配返回null。返回包含两个额外属性index和input。index表示返回的位置,input表示应用表达式的字符串。如果不设置全局标志g多次调用则会始终返回第一个匹配项,设置g标志会查找新的匹配项。
    test():接受一个参数,返回布尔值。验证通过返回true,不通过false。

    3、RegExp构造函数属性

    RegExp构造函数的属性返回最近一次正则表达式操作而变化。他们又分为长属性名和短属性名

    input ($_):属性返回原始字符串。
    leftContext ($`):返回匹配字符串之前的字符串。
    rightContext ($'):返回匹配之后的字符串。
    lastMatch ($&):返回最近一次匹配的字符串。
    lastparem ($+):返回最近一次捕获组。

    4、RegExp类型的局限性

    1、匹配字符串开始和末尾的\A和\Z的锚。(但是支持插入^ $,来匹配字符串开始和末尾)
    2、向后查找。(但是支持往前查找)
    3、并集与交集类。
    4、原子组。
    5、Unicode支持。
    6、命名捕获组。(但是支持编码的捕获组)
    7、单行和无间隔匹配模式。
    8、条件匹配。
    9、正则表达式注释。

    五、Function类型

    每个函数都是Function类型的实例,创建函数三种方式函数声明式、函数表达式、Function构造函数。

    1、没有重载

    说白了就是函数名覆盖了,函数的指针被覆盖了。

    2、函数声明和函数表达的区别

    函数声明会变量提升,而函数表达式必须执行到代码。

    3、作为值的函数

    函数本身就是个变量,所以函数作为值来传递,而且可以把一个函数做为另一个函数的值返回。
    4、函数内部属性
    arguments和this,arguments是类数组对象保存着函数的参数,但是他有一个属性callee的属性指向arguments对象的数组。this指向的就是函数执行环境。还有一个caller他指向的是调用此函数的函数引用。arguments和callee还有caller在严格模式下会报错。

    5、函数的属性和方法

    函数的两个属性length和prototype,length就是查看函数希望得到的参数函数名.length,prototype是为函数添加自定义属性和方法的。
    函数的两个方法apply()和call(),这两个方法都是在特定的作用域下调用函数,实际上就是设置函数体内this对象的值。第一个在其中运行函数的作用域,第二个参数apply必须是数组或者是arguments对象,call的第一参数没变还是this但是其余的必须是逐个列举的。还有他们的作用可以扩充函数作用域。bind()方法,他会创建一个函数的实例,把this值绑定到传入bind()函数中的值。

    window.color='red';
    var o = {color:'blue'};
    function sayColor(){
          alert(this.color);
    }
    sayColor()//red
    sayColor.call(window)或者apply(window)//red;
    sayColor.call(o)或者apply(o)//blue;
    var objectSayColor = sayColor.bind(o);
    objectSayColor();//biue
    

    toString()、valueOf()、toLocoleString()都返回函数的代码。

    六、基本包装类型

    JavaScript还有三个基本包装类Number、Boolean、String。但是他们都有与之对应的基本类型的特殊行为。

    三个基本类型在调用方法的时候其实都是通过后台转变成基本包装类的,只不过在完成调用方法后被销毁实例。
    var s= "string";
    s.color='red';
    alert(s.color)//undefined
    如上给基本类型添加属性一样,当添加时调用基本包装类型构造函数,添加完就销毁,如果访问基本类型属性会重新调用基本包装类型构造函数。但是没有所以返回undefined。

    当然,也可以手动调用基本包装类构造函数,但是不建议用。一是会引用类型和基本类型处理上分不清,二是有不确定因素。

    用基本包装类型构造函数创建的实例调用typeof会返回Object。
    用基本包装类用new和不用说有区别的。用new就是Object类型。

    Boolean类型

    像这样var boolean = new Boolean(true);,来创建Boolean对象。
    Boolean重写valueof()、toString()这两个方法

    valueof返回的是基本类型boolean值true和false。
    toString返回的是字符串'true'和'false'。

    Boolean对象和boolean基本类型的区别

    Boolean对象会返回true,因为除了null和undefined之外的对象都返回true。
    typeof操作符boolean基本类型会返回boolean,而Boolean对象会返回Object。
    instanceof测试Boolean,Boolean对象会返回true,而boolean基本类型会返回false。

    Number类型

    像这样var number = new Number(12)来创建Number对象实例。
    Number重写valueof()、toString()、toLocaleString()这三个方法

    valueof返回基本类型数值。
    toString和toLocaleString返回是字符串的数值。

    Number类型还提供了将数值格式化字符串的方法

    toFixed():接受一个参数,传入数字,几就代表显示几位小数。
    toExponential():也是接受一个参数,传入数字,该方法返回以指数表示法(也称e表示法)。
    toPrecision():接受一个参数,传入数字,传入几表示用几位数表示数值。

    Number对象和number基本类型的区别

    Number对象会返回true,因为除了null和undefined之外的对象都返回true。
    typeof操作符number基本类型会返回number,而Number对象会返回Object。
    instanceof测试Number,Number对象会返回true,而number基本类型会返回false。

    String类型

    像这样var string= new String('hello')来创建String对象实例。
    每一个String实例类型都有一个length属性。
    1、字符串方法

    charAt():接受一个参数,基于0字符位置返回给定数值位置的那个字符。其实也可以string[0]用方括号访问。
    charCodeAt():接收一个参数,基于0字符位置返回给定数值位置的那个字符编码。

    2、字符串操作方法

    concat():拼接字符串方法,传入一个或多个将要拼接的字符串,其实用+拼接更加方便。
    slice():截取字符串方法,两个参数,第一个起始位置,第二个结束位置。第一个参数为负数时,会和length属性相加来返回。第二个为负数时,也是会相加。
    substring():截取字符串方法,两个参数,第一个起始位置,第二个结束位置。第一个参数为负数时,会转化成0。第二个为负数时,会解析成0。
    substr():截取字符串方法,两个参数,第一个起始位置,第二个结束个数。第一个参数为负数时,会和length属性相加来返回。第二个为负数时,会解析成0。

    3、字符串位置方法

    indexOf():搜索给定字符,然后返回相应字符位置,没找到返回-1,第二个参数是起始搜索位置,从正面搜索。
    lastIndexOf():搜索给定字符,然后返回相应字符位置,没找到返回-1,第二个参数是起始搜索位置,从后面搜索。

    4、trim()方法
    该方法会创建一个字符串副本,删除前面和后面所有空格并返回。Chrome8+支持trimLeft()和trimRight()方法。
    5、字符串大小转化方法

    toUpperCase():转化为大写。
    toLowerCase():转化为小写。
    toLocaleUpperCase():针对地区的方法。
    toLocaleLowerCase():针对地区的方法。

    6、字符串的模式匹配方法

    match():和RegExp对象的exec()方法相同,在字符串上调用,只接受一个参数,要么是正则表达式,要么是RegExp对象。
    search():和match参数一样,返回字符串中第一个匹配索引。
    replace():替换方法,接受两个参数,第一个是RegExp对象或者是匹配字符。第二个可以是一个字符换或者是一个函数。函数接受三个参数能给更精确替换,function(match(模式的匹配项),pos(模式匹配项在字符串中位置),originalText(原始字符串))。
    split():分隔字符串,给予传入的字符分隔,第二个是分隔数组的大小。

    7、localeCompaare()方法
    localeCompaare()大于要比较的字符串返回1,等于返回0,小于返回-1。
    8、fromCharCode()方法传入字符编码返回字符串。
    9、HTML方法

    七、单体内置类型

    内置对象是指有javascript实现提供的,不依赖宿主环境的对象。

    Global对象

    Global对象是整个javascript的最底层对象。前面所介绍的都是Glodal的方法属性。还有以下方法

    encodeURL()和encodeComponent()方法是对URL进行编码,以便发给浏览器。
    eval()方法只接受一个参数,是对要javascript字符串执行。在严格模式下访问不到eval中创建的任何变量和方法。给eval赋值也会报错。

    Math对象

    1、Math对象的属性

    Math.E:自然对数的底数,就是常量e的值
    Math.LN10:10的自然数
    Math.LN2:2的自然数
    Math.LOG2E:以2为底e的对数
    Math.LOG10E:以10为底e的对数
    Math.PI:返回圆周率(约等于3.14159)。
    Math.SQRT1_2:1/2的平方根
    Math.SQRT2:2的平方根

    2、min()和max()方法,他们确定一组数据里面最小和最大的值。他们都接受任意多个值。
    3、舍入方法

    Math.ceil():向上舍入到最近的整数
    Math.floor():向下舍入到最近的整数
    Math.round():标准的四舍五入到最近的整数

    4、Math.random()方法返回介于0到1之间的随机小数。
    5、Math对象其他方法列表

    [abs(x)]:返回数的绝对值。
    [acos(x)]:返回数的反余弦值。
    [asin(x)]:返回数的反正弦值。
    [atan(x)]:以介于 -PI/2 与 PI/2 弧度之间的数值来返回 x 的反正切值。
    [atan2(y,x)]:返回从 x 轴到点 (x,y) 的角度(介于 -PI/2 与 PI/2 弧度之间)。
    [ceil(x)]:对数进行上舍入。
    [cos(x)]:返回数的余弦。
    [exp(x)]:返回 e 的指数。
    [log(x)]:返回数的自然对数(底为e)。
    [pow(x,y)]:返回 x 的 y 次幂。
    [sin(x)]:返回数的正弦。
    [sqrt(x)]:返回数的平方根。
    [tan(x)]:返回角的正切。

    小结

    Object是一个基础类型,其他的所有类型都是从Object上继承的基本行为。
    Array类型是一组值的有序列表,同时还提供了操作和转换这些值的方法。
    Date类型提供了有关日期和时间的信息,还有他们相关的计算功能。
    RegExp类型正则表达式的一个接口,还提供了最基本和一些高级的正则表达式功能。
    函数是Function类型的实例。
    因为有了基本包装类型,所以基本类型值可以当作对象来访问,三种基本包装类分别是String、Number、Boolean。
    每个包装类型都映射到同名的基本类型。
    在读取模式下访问基本类型值时,就会创建对应的基本包装类型的对象,从而方便操作。
    操作基本类型语句一经执行结束,就会立即销毁。
    在所有代码执行之前,作用域就已经存在两个内置对象Global和Math对象,在大多数javascript实现中都不能访问Global对象,但是可以在浏览器中实现了承担该对象的window对象。全局变量和函数都是Global对象的属性,Math对象提供了很多属性和方法用于数学计算。
    

    相关文章

      网友评论

          本文标题:JavaScript高级程序设计读书笔记(五)之JS的引用类型

          本文链接:https://www.haomeiwen.com/subject/rwcdjxtx.html