JS 引用类型

  • 引用类型的值(对象)是引用类型的一个实例。 在ECMAScript中,引用类型是一种数据结构。
  • 对象是某个特定引用类型的实例。

新对象使用new操作符后跟一个构造函数创建的:

var person=new Object();    
//创建了Object引用类型的一个新实例。并把该实例保存在变量person中
//使用的构造函数是Object,它只为新对象定义了默认的属性和方法。
//ECMAScript提供了很多原生引用类型(如Object)

一 Object类型

创建Object实例的方法:

  • 使用new操作符后跟Object构造函数
  1. var person=new Object();
    person.name="Nicholas";
    person.age=29;
  • 使用对象字面量表示法对象字面量也可向函数传递大量可选参数。
var people={
         name:"Nicholas",
         "age":29
         }

function displayInfo(args){
    var output="";
    if(typeof args.name=="string"){
         output+="Name:"+args["name"]+"\n";
    }
    if(typeof args.age=="number"){
         output+="Age:"+args.age+"\n";
    }
         alert(output);         
}
displayInfo({
    name:"Nicholas",
    age:29
});
displayInfo({
    name:"Greg"
});

//对象字面量也可向函数传递大量可选参数

访问对象属性的方法:①点表示法;②方括号表示法(优点:可以通过变量访问属性)

var property="name";
alert(people[property]);
//方括号表示法,使用变量访问属性

二 Array类型

  • ECMAScript数组的每一项可以保存任何类型的数据
  • 数组大小可以动态调整,可以随着数据的添加自动增长以容纳新增数据

创建数组的基本方式:

  • 使用Array构造函数
  • 数组字面量表示法
var colors=new Array("red","blue","green");
var colors1=["red","blue","green"];

Length属性:通过设置它,可以从数组的末尾移除项或向数组中添加新项

2.1 检测数组

  • instanceof操作符

2.2 转换方法

所有对象都具有:

  •  toLocaleString()
  • toString() 返回由数组中每个值的字符串形式拼接而成的一个以逗号分隔的字符串
var colors1=["red","blue","green"];
alert(colors);     //red,blue,green
//alert()要接收字符串参数,所以会在后台调用toString()方法
  •  valueOf() 返回数组本身
var person1={
    toLocalString:function(){
        return "Nicholas"
    },
    toString:function(){
        return "Nicholas"
    }
}
var person2={
    toLocalString:function(){
         return "Grigorios"
    },
    toString:function(){
         return "Greg"
    }
}
var people=[person1,person2];
alert(people);         //Nicholas,Greg
alert(people.toString());           //Nicholas,Greg
alert(people.toLocaleString());       //Nicholas,Grigorios
//与后两者不同,为了取得每一项的值,调用的是每一项的toLocalString(),而不是toString()方法
  • 默认三种方法都会以逗号分隔字符串,可通过join()方法使用不同分隔符

join()方法:接受一个参数,即指定的分隔符

var colors=["red","green","blue"];
alert(colors.join("|"));

2.3 栈方法

:一种LIFO(后进先出)的数据结构。

栈中项的插入和移除只发生在栈的顶部。ECMAScript为数组提供了push()和pop()方法,以实现类似栈的行为

  • push()方法:可以接受任意数量的参数,把他们逐个添加到末尾,并返回修改后数组的长度
  • pop()方法:从数组末尾移除最后一项,减少数组的length值,然后返回移除的项

2.4 队列方法

队列:一种FIFO先进先出)的数据结构

  • shift()方法:移除数组的第一个项并返回该项,同时将数组长度减一
  • unshift()方法:在数组前端添加任意个项数并返回新数组的长度

2.5重排序方法

  • reverse()方法:反转数组项的顺序
  • sort()方法:默认按

为实现排序,sort()方法会调用每个数组项的toString()方法以比较。因此即使数组中的每一项都是数值,sort()方法比较的也是字符串。

返回值:两个方法返回值都是经过排序之后的数组

sort()方法可以接收一个比较函数

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

//对于数值类型或其valueOf()方法会返回数值类型的对象类型,可使用该函数比较
function compare1(value1,value2){
    return value2-value1;
}
values.sort(compare1)
alert(values)

2.6操作方法

  • concat()方法

作用:concat()方法会先创建当前数组的一个副本,然后将接收到的参数添加到这个副本的末尾,最后返回新构建的数组。原来的数组保持不变

  • slice()方法

作用:可以接收一或两个参数,即要返回项的起始和结束位置。 如果只有一个参数,返回从改参数指定位置开始到当前数组末尾的所有项。两个参数,该方法返回起始和结束位置之间的项,但不包括结束位置的项。slice()方法不会影响原始数组

注意:如果参数中有一个负数,则用数组长度加上该数来确定相应的位置

  • splice()方法

用法

①删除:指定两个参数。要删除的第一项的位置和要删除的项数

②插入:指定三个参数。起始位置,0(要删除的项数),要插入的项

③替换:指定三个参数。起始位置,要删除的项数,要插入的任意数量的项 Splice()方法始终返回一个数组,该数组包含从原始数组中删除的项升序排列数组项。

2.7 位置方法

  • indexOf():从数组开头寻找
  • lastIndexOf():从数组结尾开始

注意:

  1. 都接收两个参数:要查找的项和表示查找起点位置的索引(可选)。 都返回要查找的项在数组中的位置。
  2. 没找到时返回-1。
  3. 在比较第一个参数与数组中的每一项时,会使用全等操作符

2.8 迭代方法

  • every()
  •  filter()
  • forEach() 无返回值
  • map()
  • some()

注意:

  1. 以上方法都不会修改数组中包含的值。
  2. 每个方法都接收两个参数:要在每一项运行的函数和运行该函数的作用域对象—影响this的值(可选)
  3. 传入这些方法中的函数会接收三个参数:数组项的值,该项在数组中的位置,数组对象本身

2.9 归并方法

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

注意:

  1. 两个方法都会迭代数组的所有项,然后构建一个最终返回的值
  2. 都接收两个参数:一个在每一项上调用的函数和作为归并基础的初始值(可选)
  3. 传给两个方法的函数接收4个参数:前一个值,当前值,项的索引,数组对象
  4. 这个函数返回的任何值都会作为第一个参数自动传给下一项

三 Date类型

方法:

  • Date.parse()
  • Date.UTC()
  • Date.now()

3.1继承的方法

  • toLocalString():会按照与浏览器设置的地区相适应的格式返回日期和时间
  • toString():返回带有时区信息的日期时间
  • valueOf():不返回字符串,返回日期的毫秒表示

3.2 日期格式化方法

  • toDateString:星期几,月,日,年
  • toTimeString():时,分,秒,时区
  • toLocalDateString():星期几,月,日,年
  • toLocalTimeString():时分秒
  • toUTCString():以特定于实现的格式完整的UTC日期

四 RegExp类型

语法:var expression = / pattern / flags

①pattern:模式部分可以是简单或复杂的正则表达式

②flags:标志。

  • g(全局模式global)
  • i(不分大小写模式)
  • m(多行模式)

创建正则表达式方法:

①以字面量形式来定义

②使用RegExp构造函数

Var pattern=new RegExp(“[bc]at”,”i”)
//传递给RegExp构造函数的两个参数都是字符串

4.1 RegExp实例属性

  • global 布尔值
  • ignoreCase 布尔值
  • lastIndex 整数,表示开始搜索下一个匹配项的字符位置
  • multiline 布尔值
  • sourxe 正则表达式的字符串表示

4.2 RegExp 实例方法

  • exec() 为捕获组而设计
  1. 接受一个参数:要应用模式的字符串。返回包含第一个匹配项信息的数组或null
  2. 返回的数组包含两个属性:index(匹配项在字符串中的位置)input(应用正则表达式的字符串)
  • test() 。接受一个字符串参数:返回值为true或false
  • toLocalString()。toString()

4.3 RegExp构造函数属性

  • RegExp.input 返回整个字符串
  • RegExp.lastMatch 返回最近一次的匹配项
  • RegExp.lastParen 返回最近一次的捕获组
  • RegExp.leftContext 返回匹配项之前的项
  • RegExp.rightContext 返回匹配项之前的项

五 Function类型

  • 函数名仅仅是指向函数的指针

定义函数方式:

  1. 使用函数声明语法
  2. 定义一个变量,并将其初始化为一个函数
  3. 使用Function构造函数。(Function构造函数可以接收任意数量的变量,但最后一个参数始终被看作函数体)
//  1
function sum(num1){

}
//  2
var sum1=function(){

};
//  3
var sum2=new Function("num1","num2","num1+num2");

5.1 没有重载

function addNumber(num){
    return num+100;
}
function addNumber(num){
    return num+200;
}
var result=addNumber(100);  //300
//声明了两个同名函数,但结果后者函数覆盖了前面的函数。
//可通过下边代码理解
var addNum=function(num){
    return num+100;
}
addNum=function(num){
    return num+100;
}
var result=addNum(100);  //300
//创建第二个函数时,实际上覆盖了引用第一个函数的变量addNum

5.2 函数声明与函数表达式

  • 解析器会先读取函数声明。而函数表达式,必需等到执行到它所在的代码行,才会真正被解释执行
alert(sum(10,10));
function sum(num1,num2){
    return num1+num2;
}          //正常运行

alert(num(10,10));
var sum=function(num1,num2){
    return num1+num2;
}     //错误

5.3 作为值的函数

  • 函数名本身是变量,所以函数可以作为值使用。 
  • 函数不仅可以作为参数传递,也可以作为另一个函数的返回值
//把函数当作参数传递
function callName(someFunction,someArgument){
    return someFunction(someArgument);
}
function add(num){
    return num+10;
}
var result=callName(add,10);
    alert(result);  //20
//从一个函数中返回另一个函数
function createComparison(propertyName){
    return function(object1,object2){
        var value1=object1[propertyName];
        var value2=object2[propertyName];
        if(value1<value2){
            return -1;
        }else if(value1>value2){
            return 1;
        }else{
            return 0;
        }
    }
}

5.4 函数内部属性

函数内部特殊对象:

  • arguments:类数组对象,包含传入函数的所有参数。有个callee属性,该属性是个指针,指向拥有这个arguments对象的函数
  • this:this引用的是函数执行的环境对象(当在网页中的全局作用域中调用函数时,this对象引用的就是window)
window.color="red";
    var o={
        color:"blue"
}
function sayColor(){
    alert(this.color);
}
sayColor();  //red
o.say=sayColor;
o.say();     //blue

函数对象的属性caller 保存了调用当前函数的函数的引用(如果在全局作用域中调用当前函数,值为null)

5.5 函数属性和方法

函数的属性

  • length:参数个数
  • prototype:保存了函数的所有实例方法

函数方法:(非继承)

  • apply():接收两个参数。在其中运行函数的作用域,参数数组(第二个参数可以是Array实例,也可以是arguments对象)
  • call():第一个参数同上,其余参数逐个列举 两个方法都可设置函数体内this对象的值。
//可扩充函数作用域
window.color="red";
    var o={
        color:"blue"
}
function sayColor(){
    alert(this.color)
}
sayColor();         //red
sayColor().call(this);    //red
sayColor().call(window);   //red
sayColor().call(o);   //blue
  • bind():bind()方法会创建一个函数实例,其this值会被绑定到传给bind()函数的值
window.color="red";
    var o={
        color:"blue"
}
function sayColor(){
    alert(this.color);
}
var objectColor=sayColor.bind(o);
objectColor();   //blue

六 基本包装类型

  • ES提供了三个特殊的引用类型:Boolean,Number,String
  • 每当读取一个基本类型值时,后台就会创建一个对应的基本包装类型的对象,从而能调用一些方法来操作这些数据 
var s1="some text";
var s2=s1.substring(2);  //访问s1.访问过程处于一种读取模式

在读取模式中访问字符串时,后台会完成以下处理 :

  1. 创建String类型的一个实例
  2. 在实例上调用指定的方法
  3. 销毁这个实例

相当于以下代码

var s1=new String("some text");
var s2=s1.subString(2);
s1=null;
  • 对基本包装类型的实例调用typeOf会返回"object"
  • 所有基本包装类型的对象在转换为布尔值类型时值都是true

6.1 Boolean类型

Boolean类型的实例重写了valueOf()和toString()方法。

valueOf():返回基本类型值true或false.

toString():返回字符串

6.2 Number类型值

Number类型也重写了valueOf(),toLocalString(),toString()方法。

valueOf():方法返回基本类型的数值。其他两个返回字符串

Number类型提供了一些用于将数值格式化为字符串的方法 :

  • toFixed():一个参数,指定返回数值的小数位。能自动舍入
  • toExponential():返回指数表示法。接收一个参数,该参数指定输出结果中的小数位数
  • toPrecision():返回合适格式

6.3 String类型

valueOf(),toLocalString(),toString()返回对象所表示的基本字符串值

属性length

String类型提供的方法

1.字符方法

  • charAt():以单字符字符串形式返回给定给定位置的字符
  • charCodeAt()方法:返回给定位置的字符编码
  • 都接收一个参数,即基于0的字符位置

2.字符串操作方法

  • concat():拼接
  • slice()
  • substring():前两个的第二个参数指定子字符串最后一个字符后面的位置
  • substr():第二个参数是返回的字符个数

注意:

  1. 都返回被操作字符串的一个子字符串。
  2. 两个参数:指定子字符串的开始位置,字符串在哪里结束(可选)
  3. 不会修改原字符串

3.字符串位置方法

  • indexOf()
  • lastIndexOf()
//通过循环调用indexOf()或lastIndexOf()找到所有匹配的字符串
var stringValue="helvhbjjvki hghsfdvy ghkjk";
var positions=new Array();
var pos=stringValue.indexOf("e");
while(pos>-1){
    positions.push(pos);
    pos=stringValue.indexOf("e",pos+1);
}
    alert(positions)

注意:

  1. 两个参数:给定的字符串,从哪个位置开始搜索。
  2. 返回子字符串的位置

4.trim()方法

  • trim()方法会创建一个字符串的副本,删除前置及后缀的所有空格
  • 不会修改原字符串

5.字符串大小写转换方法

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

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

  • match():参数:正则表达式或RegExp对象。返回一个数组
  • search():同上
  • replace():两个参数:RegExp对象或一个字符串,一个字符串或函数

7.localeCompare()方法

8.fromCharCode()方法

接收一个或多个字符编码,将他们转换为一个字符串。与charCodeAt()操作相反

七 单体内置对象

内置对象:由ES实现提供的,不依赖于宿主的环境,这些对象在ES程序执行之前就存在。(如Object,Array,String)

单体内置对象:Global,Math

7.1 Global对象

  • 所有在全局作用域中定义的属性和函数,都是Global对象的属性
  • Global对象方法isNaN(),isFinite(),parseInt()

1.eval()方法:只接收一个参数:要执行的ES字符串

var message="hello world"; eval("alert(message)");

2.Global对象的属性

  • 特殊的值undefined,NaN,Infinity都是Global对象的属性。
  • 所有原生引用类型的构造函数(Object,Function等)都是Global对象的属性

3.window对象

  • ES没指出如何直接访问Global对象,但Web浏览器将这个全局对象作为window对象的一部分加以实现。因此,在全局作用域中声明的所有变量和函数,就成为了window对象的属性

7.2 Math对象

1.Math对象的属性

2.min()和max()方法

  • 用于确定一组数值的最小值和最大值

3.舍入方法

  • Math.ceil():向上舍入
  • Math.floor():向下舍入
  • Math.round():四舍五入

4.random()方法

  • Math.random():返回大于0小于1的一个随机数

猜你喜欢

转载自blog.csdn.net/weixin_42069386/article/details/83035441
今日推荐