JavaScript学习(三):引用类型

时间:2021-09-11 15:44:46

引用类型的值(对象)是某个特定引用类型的实例,新对象是new操作符后跟一个构造函数来创建的。

Object类型

  访问对象属性的时候一般使用点表示法,如果属性名中包含会导致语法错误的字符,或者属性名使用的是关键字和保留字,则可以使用方括号表示法。

Array类型

  数组的length属性不只是只读的,可以通过这个属性在数组末尾删除项或者向数组中添加新项。

  在数组末尾添加新项:Array[Array.length] = 'black';

     1.检测数组

  value instanceof Array

  涉及到不同框架之间传递时,更有效的办法是Array.isArray(value);

  2.转换方法

var colors = ['red','black','green'];
alert(colors.toString());    //返回用逗号隔开的字符串
alert(colors.valueOf());     //返回数组本身
alert(colors.join('||'));    //返回用||隔开的字符串

  3.栈方法

var colors = ['red','black','green'];

colors.push('yellow','grey');     //末尾添加,返回长度
colors.pop();                    //末尾移除一项,并返回移除项

  4.队列方法

var colors = ['red','black','green'];

colors.push('yellow','grey');     //末尾添加,返回长度
colors.shift();                 //移除第一项,并返回移除项

colors.unshift('yellow','grey');                 //开头添加,返回长度
colors.pop();                    //末尾移除一项,并返回移除项

  5.重排序方法

values.reverse();          //翻转数组
values.sort();             //应用toString方法排序数组

//sort()方法可以接受比较函数,以便实现想要的排序

function compare(value1,value2) {
    if (...) {        //如果第一个参数在第二个之前,返回正数
        return 1;
    }else if (...) {    //如果在之后,返回负数
        return -1;
    }else {
        return 0;         //如果相等,返回0
    }
}

values.sort(compare);    //按照compare规则排序

  6.操作方法

var colors = ['red','black','green','blue'];

colors.concat('grey');             //复制创建新数组,并在末尾添加
colors.slice(1,3);                 //复制新数组,并对其分割
colors.slice(-2,-1)                //负数则加上数组长度计算

colors.splice(1,2)                //删除从下标1开始的两项
colors.splice(1,0,'white','pink') //从下标1开始插入两项
colors.splice(2,1,'white','pink') //替换

  splice始终都会返回一个数组,包含删除的项。

  7.位置方法

  indexof(向后查找)  lastIndexof(向前查找)

  它们都接受两个参数,要查找的项和表示查找位置起点的索引。第二个参数可选。 

  8.迭代方法

  every():对每一项运行指定函数,函数对每一项都返回ture,则返回ture。

  filter():对每一项运行指定函数,返回对函数返回ture的项组成的数组。

  forEach():对每一项运行指定函数。没有返回值。

  map():对每一项运行指定函数,返回每次函数调用的结果组成的数组。

  some():对每一项运行指定函数,函数对任意一项返回ture,则返回ture。

  9.归并方法

  reduce()  reduceRight()

  每个方法都接受两个参数:一个在每一项上调用的函数和作为归并基础的初始值(不知道怎么用),第二个参数可选。

  内部函数接受四个参数:前一个值,当前值,项的索引和数组对象。

这个函数的返回的任何值都会作为第一个参数自动传给下一项。并且第一次迭代发生在第二项上。

var values = [1,2,3,4,5,6];

var sum = values.reduce(function(pre,cru,index,array) {
    return pre + cru;
});

alert(sum);

 

Date类型

var now = new Date;

now;
//Thu May 17 2018 16:00:44 GMT+0800 (中国标准时间)
Date.parse(now);
//1526544044000
Date.UTC(now);
//NaN
var start = Date.now();

var stop = Date.now();
result
= stop - start; //28064

1.继承的方法

toString()  toLocaleString()

valueOf()返回日期的毫秒表示

2.日期格式化方法

  toDateString()

  toTimeString()

  toLocaleDateString()

  toLocaleTimeString()

  toUTCString()

 

RegExp类型

  var expression = / pattern / flags; 或者  var expression = new RegExp(' pattern ',' flags ');

  flags有下列三个标志:g  全局模式,应用于所有字符串

            i  不区分大小写模式

            m  多行模式,自动继续查找下一行

  注:RegExp构造函数的模式参数是字符串,因此某些情况下要对字符进行双重转义。

  常见: 略

  1.实例属性

  global:布尔值,g

  ignoreCase:布尔值,i

  lastIndex:

  multiline:布尔值,m

  source:字面量形式的正则表达式的字符串表示。

  2.实例方法

  exec():为捕获组设计

  test():检查是否匹配    

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'

var status = pattern.test(text);     //true

  3.RegExp构造函数属性

  input  

  lastMatch

  lastParen

  leftContext

  multiline

  rightContext

  $1 ~$9

function类型

  一般通过声明函数语法定义或者函数表达式定义函数,不推荐使用构造函数方式定义。

  注:使用不带括号的函数名是访问函数指针,而非调用函数。

  1.没有重载

  2.函数声明和函数表达式

  解析器在向执行环境中加载数据的时候,会对函数声明率先读取,并使其在执行任何代码之前可以访问,而函数表达式只有在代码执行到所在的代码行,才能被真正解释。

  3.作为值的函数

  函数名本身就是变量,因此函数可以作为值来使用。

  注:传递函数时后面别加括号,加括号则传递执行之后的结果。

从函数中返回另一个函数,是一种极为有用的技术:

var data = [{'name':'Eric','age':24},{'name':'Cherry','age':23},{'name':'Bob','age':33}];

function compare(propertyName) {
    return function(object1,object2) {
        var value1 = object1[propertyName];
        var value2 = object2[propertyName];

        return value1 - value2;
    }
}

data.sort(compare('age'));
alert(data);   //按年龄排序

   4.函数内部属性

  函数内部有两个特殊的对象:arguments和this。

  arguments对象保存的是参数的数组,但是它还有一个名叫callee的属性,该属性是一个指针,指向拥有arguments对象的函数。

这对于解除函数内部代码和函数名的耦合状态很有效果:

function factorial(num) {
    if (num<=1) {
        return 1;
    }else {
        return arguments.callee(num-1);
    }
}

  this引用的是函数执行的环境对象。

caller属性保存调用当前函数的函数的引用。

function outer() {
    inner();
}

function inner() {
    alert(arguments.callee.caller);
}

outer();  //弹出outer函数源代码

  5.函数属性和方法

  length属性:命名参数个数。

  prototype属性:不可枚举,for-in发现不了。

apply()和call():在特定的函数作用域中调用函数和传递参数。

function sum(num1,num2) {
    return num1 + num2;
}

function callNum(num1,num2) {
    return sum.apply(this,arguments);
}

 

它们真正强大的用法是扩充函数的作用域。

window.color = 'red';

var o = { color:'blue' };

function sayColor() {
    alert(this.color);
}

sayColor.apply(this);  //'red'
sayColor.call(o);    //'blue'

  ECMAScript5还定义了一个方法:bind()

  它会创建一个实例,并将其this值绑定到传给bind()的值。比如:在上面的例子中

var newSayColor = sayColor.bind(o);
newSayColor();

  6.基本包装类型

  3个特殊的引用类型,Boolean、Number、String。

  在我们读取这三种基本类型的时候,后台会创建一个其对应的基本包装类型的对象,从而让我们能调用方法操作这些数据。

  注:自动创建的基本包装类型只存在一行代码的执行瞬间,然后被立销毁。但是可以显式的调用来创建基本包装类型,且性质和对象实例一样。

  Boolean类型:不要使用

  Number类型

  valueOf():返回数值  

  toString(基数):返回字符串   

  toFixed(小数位):返回舍入小数值  

  toExponential(小数位):返回指数表示法

  toPrecision(数字位): 返回最合适的表示

  String类型

  字符方法

  charAt()

  charCodeAt()

  value[]   通过方括号直接访问

  字符串操作方法

  concat()   拼接字符串,但是加号操作符(+)更为常用

  slice()

  substr()

  substring()

  字符串位置方法:第一个参数是搜索的字符串,第二个参数是搜索的起点,其中第二个参数可选。

    indexOf()

    lastIndexOf()

使用第二个参数的情况下,可以循环使用方法来找到所有匹配的字符串:

var stringValue = 'Lorem ipsum dolor sit amet, consectetur adipisicing elit';
var position = new Array();
var pos = stringValue.indexOf('e');

while(pos > -1) {
    position.push(pos);
    pos = stringValue.indexOf('e',pos + 1);
}

alert(position);

    trim() 方法

    trim()  trimLeft()  trimRight()

  大小写转换方法

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

  字符串的模式匹配方法

  text.match(pattern)   与exec()返回的数组形式相同

  text.search(pattern)  返回第一个匹配项的索引,没有则返回-1

  replace()  接受两个参数,第一个参数是匹配的内容(可以是字符串或者RegExp对象),第二个参数是要替换的内容(可以是字符串或函数)

当第二个参数是函数的时候,可以实现更加精细的替换操作:

function htmlEscape(text) {
    return text.replace(/[<>"&]/g,function(match,pos,originalText) {
        switch(match) {
            case '<':
                return '&lt;';
            case '>':
                return '&gt;';
            case '\"':
                return '&quot;';
            case '&':
                return '&amp;';
        }
    });
}

    split() 分割字符串,并以数组的形式返回。

    localeCompare()   比较字符串,返回-1,0,1

    fromCharCode()      与charCodeAt()相反

单体内置对象

      1.Global对象

    URI编码方法:encodeURI()  和encodeURIComponent()  

        对应的解码方法:decodeURI()     decodeURICompoment()

    eval()方法

    将传入的参数当作ECMAScript语句来执行,并且把执行结果插入到原来的位置。

    注:在eval()中创建的任何变量或函数都不会被提升,因为代码解析的时候它们被包含在字符串中,只有eval()执行的才会被创建。    

    Global对象的属性

    window对象

    2.Math对象

    Math对象的属性:略

    min()   max()

    舍入方法

    Math.ceil()

    Math.floor()

    Math.round()

    random()方法

    其他方法:略