JavaScript

JavaScript学习笔记(常用内置对象)

2019-12-09  本文已影响0人  moonfish1994

(最近刚来到简书平台,以前在CSDN上写的一些东西,也在逐渐的移到这儿来,有些篇幅是很早的时候写下的,因此可能会看到一些内容杂乱的文章,对此深感抱歉,以下为正文)


引子

JavaScript是一门基于对象的编程语言,至于什么是对象吗,额,只可意会不可言传,用大神的话就是万物皆对象,既然如此,那便少不了要讲述一下JavaScript是如何使用对象的了。

正文

那么JavaScript中对象是什么样子的呢,其实前面篇幅中我们已然使用过了,比如Date对象,比如Array对象。

创建对象时,需要用到new运算符,基本格式如下:

var myVariable = new ConstructorName(optional parameters);

一般创建了对象后,我们会使用其属性和方法,下面我们就用一个简单的例子来表现:

var myArray = new Array();
var length = myArray.lengh;//使用了数组的length属性
myArray.sort();//使用了数组的sort()方法

下面我们就要说说JavaScript中的一些常用的内置对象。
1.String对象
String对象的创建可以使用new String(param)的方法进行创建。当然也可以声明一个基本字符串,JavaScript会在后台为其自动转换。

var str1 = new String("Hello World");
var str2 = "Hello World";

这里要提的一点是当基本字符串与String对象相比较的时候,是比较其中的值是否一样,但两个String对象相比较的时候就是比较两个对象的引用了。

常用属性
length属性:返回字符串中的字符数.

常用方法
indexOf()/lastIndexOf():
该方法用来在一个字符串中查找另一个字符串,返回值是查找到的子串在字符串中的位置,以0为开始,如果没有找到,则返回-1。indexOf方法是从前往后找,lastIndexOf()是从后往前找。两个方法都有两个参数,第一个是需要查找的子串,第二个则是开始查找的字符位置(可选,不选默认从头/尾开始)。

下面将用一个小列子来展示该方法的使用:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>just a test</title>
</head>
<body>
    <script>
        var str = "Never teach a fish swim."
        var position = 0;
        var count = 0;
        while(position != -1){
            position = str.indexOf("fish",position);
            if(position != -1){
                count++;
                position++;
            }
        }
        document.write("There are "+count+" occurrences of the word fish");
    </script>
</body>
</html>

substr()/substring():
该方法用于复制字符串的一个子串.
substring方法有两个参数,第一个参数为开始复制的起点,第二个参数可选,是所要复制子串最后一个字符后面的字符位置,举例说明:

var str = "javascript";
var temp = str.substring(0,4);//temp为java

同substring方法功能类似的还有substr方法,它同样有有两个参数,第一个参数是开始复制的起点,第二个参数则是需要复制的长度。

toLowerCase()/toUpperCase():
该方法用于转换字符串的大小写,下面为使用案例:

var str = " i am a Student";
alert(str.toLowerCase());//i am a student
alert(str.toUpperCase());//l AM A STUDENT

charAt()/charCodeAt():
该方法用于在字符串中选取出一个字符。
charAt()方法可以接受一个参数,该参数表示所选字符在字符串中的索引位置,索引从0开始计算,返回值为选中的字符。
charCodeAt()方法功能类似,但是返回值不是字符,而是字符在Unicode字符集中所对应的十进制编码,下面举例说明

var str = "i am a boy";
var a = str.charAt(2);//a
var b = str.charCodeAt(2);//97

fromCharCode():
该方法用于将字符编码转换为字符串,与上面的charCodeAt()方法功能正好相反,值得注意的是该方法为静态方法,下面举例说明。

var str = String.fromCharCode(65,66,67);//ABC

trim():
该方法用于取出字符串首尾两端的空格,举例说明。

var str = "       i am a student.     ";
alert(str.trim());//i am a student.

2.Array对象
前面提到过数组的创建和使用,实际上数组就是一种对象。数组除了帮助我们存储数据之外,它还内置了很多属性和方法,可以帮我们更好地进行开发,下面就来说说这些。

常用属性
length属性:该属性返回数组中元素的个数,数组索引从0开始。

常用方法

push():
该方法用于向数组中添加元素,无需像以前一样那样通过索引来添加元素,push方法可以自动将所要添加的元素添加到数组的末尾,举例说明。

var array = [];
array[0] = "a";
array.push("b");               //数组中则有“a”,“b”两个元素

concat():
该方法用于将两个数组相连接,合并成一个大数组,下面举例说明。

var numbers = [1,2,3];
var letters = ["a","b","c"];
var temp = numbers.concat(letters);//数组中则有1,2,3,"a","b","c"6个元素,concat方法连接时,是将方法体左侧的数组置于合并后的数组的前面。

slice():
该方符用于复制数组的一部分,可以传入两个参数,第一个参数为开始复制的起点位置,第二个参数为结束复制的元素索引(复制时不包括结束位置的元素),第二个参数是可选参数,如果不使用,则默认复制从开始出到结尾的所有元素,下面举例说明:

var array = [1,2,3,4,5];
var temp = array.slice(0,3);   //1,2,3

join():
该方法用于将数组中的所有元素连接成一个完整的字符串,并且允许在连接处添加任意字符,下面举例说明。

var shopList = [“milk”,“bread”,“butter”,“banana”];
var str = shopList.join("<br />");//"milk<br />bread<br />butter<br />banana"

sort():
该方法用于为数组进行排序,排序顺序是基于Unicode编码。

reverse():
该方法用于反转数组中元素的顺序。

every()/some()/filter()/forEach()/map():
这五种方法都可以对数组进行迭代,并且不需要使用循环。这些方法在迭代数组的同时,会为数组中每个元素执行一个自定义的方法,不过这个方法必须遵循以下格式:

function functionName(value, index, array){
  //some code
}

第一个参数是迭代数组时元素的值,第二个参数为元素的索引,第三个是需要进行迭代操作的数组本身。

先来说说前三个方法,它们又可以叫做测试方法,下面一一介绍:

every方法用于检测数组中的所有元素是否都符合自定义函数中的要求,下面举例说明:

var numbers = [1,2,3,4,5];
function isLessThan3(value, index, array){
  var flag = false;
  if(value <3){
    flag = true;
  }
  return flag;
}

alert(number.every(isLessThan3));//flase,因为数组中存在大于3的元素

上述代码用于测试数组中是否每个元素都小于3,当符合时,返回true,一旦发现不符合的即为false。

some方法功能同every方法类似,只是它不需要数组中的所有元素都满足测试条件才返回true,这有点儿像逻辑运算中与和非的关系。如果上述例子使用some方法代替every方法,则返回true,因为数组中存在元素小于3。

filter方法与some方法功能类似,不过filter方法不是返回测试是否通过,它返回的是符合测试条件的数组,以上面的例子扩展:

var temp = numbers.filter(isLessThan3);//1,2

后两种方法虽然也要对数组进行迭代,但并非对数组中元素进行测试,而是让数组中的元素执行自定义的操作。

以forEach方法为例:

var numbers = [1,2,3,4,5];
function doubleAndAlert(value, index, array){
  var result = value * 2;
  alert(result);
}
numbers.forEach(doubleAndAlert);

上述方法将数组中的每个元素取出放大为本身的两倍,然后打印出来。

map方法与上述功能类似,但它对数组中每个元素执行的自定义操作函数会返回操作后的元素值,并将改变后的值赋值给一个新数组,最终返回,下面举例说明:

var numbers = [1,2,3,4,5];
function doubleAndReturn(value, index, array){
  var result = value * 2;
  return result;
}
var newNumbers = numbers.map(doubleAndReturn);   //2,4,6,8,10

3.Math对象

Math对象提供了大量的数学函数和数值操作方法,使用该对象可以帮助我们便捷的进行一些数学运算。
Math对象不需要我们创建,JavaScript会自动进行创建。Math对象中有一些数学常量,如PI属性(值为3.14159),可以直接使用对象名来访问这些属性,类似于java中静态属性。

常用方法
abs():
该方法对应数学运算中的取绝对值运算,下面举例说明:

var number = -1;
alert(Math.abs(number)); //1

min()/max():
min方法为查找最小值方法,max方法为查找最大值方法。两个方法都至少接收两个参数,且都为数字,下面举例说明:

var max = Math.max(12,4); //12
var min = Math.min(1.2,4.1); //1.2

ceil()/floor():
这两个方法都是舍入方法,但规则不一样。
ceil方法总是把数值向上取整,举例说明:

var a = Math.ceil(14.1); //15
var b = Math.ceil(-12.2); //-12

floor方法总是向下取整,举例说明:

var c = Math.floor(14.1); //14
var d = Math.floor(-12.2); //-13

round():
round方法也是舍入方法,但它不是单一的向上取整或是向下取整,而是四舍五入,当小数部分大于等于0.5时向上取整,否则向下取整,举例说明:

var e = Math.round(44.5); //46
var f = Math.round(44.49); //44

random():
该方法回产生一个0-1之间的随机浮点数,包含0但不包含1,常用语随机数的产生,比如我们想产生一个1-10之间的随机数,可以这么写:

var num = Math.random()*10+1;

pow():
该方法将对传入的参数进行指定的幂运算。如计算2的4次幂可以写成:

var num = Math.pow(2,4); //2*2*2*2=16

4.Number对象

\Number对象同String对象一样,可以用new关键字创建其对象,如:

Number myNumber = new Number('123');

也可以直接声明一个基本数值,javascript会在后台帮你自动转换。

常用方法
toFixed():
该方法用于在指定位置截取数字,比如一个数为3.13159,你想对其保留两位小数,则可以写成:

var number = 3.14159;
var number1 = number.toFixed(2); //3.14,会自动帮你四舍五入

该方法要注意的是只能修整小数位数为0-20的数字。

5.Date对象

Date对象用于处理日期和时间,其中内置了很多方法,这里先简单介绍一下,后面的篇幅中将会详细介绍。

先来说说Date对象常见的几种创建对象的方法:

  1. 直接使用new 关键字,并且不传入任何参数,如下:
var myDate1 = new Date(); //该方法创建出的Date对象中的日期和时间默认为当前计算机的当前日期和当前时间
  1. 使用new关键字,并且传入一个数值,该数值为从GMT开始至今经过的毫秒数,如下:
var myDate2 = new Date(111111);

虽然该种创建对象的方法不常用,但JavaScript中是按照该种方式计算和存储的。

  1. 使用new关键字,传入一个表示日期或时间的字符串,如下:
var myDate3 = new Date("14 August 2017");
  1. 使用new关键字,传入时间的初始化参数,分别为年,月,日,小时,分钟,秒,毫秒,如下:
var myDate4 = new Date(2017,7,14,20,0,0,0);

其中要注意的是月份是从0开始计数的,所以7表示的是8月。

常用方法

setDate():
该方法是将月中的某一天作为参数传入。

setMonth():
该方法是将年中的某一月作为参数传入,其中从0开始计算,即0表示1月。

setFullYear():
该方法将年份作为参数传入。

比如要创建一个日期为2017-8-14的Date对象,可以进行如下操作:

var myDate = new Date();
myDate.setFullYear(2017);
myDate.setDate(14);
Mydate.setMonth(7);

getHours()/setHours():
该方法用于获取/设置当前对象的小时。

getMinutes()/setMinutes():
该方法用于获取/设置当前对象的分钟。

getSeconds()/setSeconds():
该方法用于获取/设置当前对象的秒。

getMilliseconds()/setMilliseconds():
该方法用于获取/设置当前对象的毫秒。

toTimeString():
该方法用于返回一个表示时间的字符串。

下面说说日期的计算:

var myDate = new Date("1 January 2017");
myDate.setDate(32);

众所周知,1月并没有32天,如果这样写会得到什么呢?JavaScript会自动判断,会以1号为起点,往后算32天,即为2月1号。

该特性也适用于setMonth方法,如setMonth(13)表示为下一年的一月。

但要注意一点比如今天为1月15号,然后执行了setDate(currentDay+50),如果你传入的值大于当前月中最大天数,那么计算时是从这个月的1号开始往后加而不是从15号开始计算。这个原则对setMonth方法同样适用。

如果读者有面向对象编程的经验,那么对自定义对象肯定十分熟悉。下面就来讲述一下JavaScript中如何自定义对象。

javascript中创建对象只需要使用new关键字,然后接上Object的构造函数即可,如下所示:

var person = new Object();

我们也可以用花括号来代替Object的构造函数,如下所示:

var person = {};

然后可以为创建的对象添加属性,直接使用对象名称点上属性名即可,如下所示:

person.name = "john";
person.age = 19;

这种自由创建属性看上去十分方便,但有时候如果拼写出错的话,并不会报错,而是创建出新的属性,这点值得注意。

同样,我们可以用这样的方式为对象添加方法。

person.greet = function(){
  alert("My name is "+this.name+"and my age is "+this.age);
}

使用方法时直接用对象名点上对应的方法即可,如下所示:

person.greet();

除了这种定义方式我们还可以用字面量符号法来定义整个对象,对我而言,这更容易让人理解,如下所示:

var person = {
  
  name:"john",
  age:19,

  greet:function(){
    alert("My name is "+this.name+"and my age is "+this.age);
  }
}

是不是看上去更容易理解一些呢,注意属性,方法之间要用逗号隔开。下面将用一个完整的例子来复习自定义变量的创建。

<!DOCTYPE html>
<html lang="en">
<head>
    <title>just a test</title>
</head>
<body>
    <script>
        function createPerson(name,age){
            return {
                name:name,
                age:age,
                greet:function(person){
                    alert("Hello "+person.name+" i am "+this.name);
                }
            };
        }
        var john = createPerson("john",12);
        var tom = createPerson("tom",15);
        john.greet(tom);
    </script>
</body>
</html>

执行后可以看到如下页面:

运行结果

然后最后要说的就是创建对象的引用类型。这里可以看做是对象的模板,例如我们之前学习的String,Array,Date等,都是引用类型。

引用类型的创建必须有3个条件:

  1. 构造函数
  2. 方法定义
  3. 属性

以上面的例子为列,我们创建person的引用类型,操作如下:

function Person(name,age){
  this.name = name;
  this.age = age;
}

Person.prototype.greet = function(person){
  alert("Hello " +person.name+"  i am"+this.name);
}

以上就成功的创建了person引用类型我们就可以使用了,操作如下:

var john = new Person("john",19);
var tom = new Person("tom",22);
john.greet(tom);

在这里我们可以看到方法的前面使用了一个prototype属性,该属性是每个函数对象都包含的属性,但该属性只对构造函数有用。赋给该属性的任何方法或属性都可以被所有的对象所公用。

创建引用类型来创建对象相对而言可以节省一下内存消耗。

以上为本篇的全部内容。

上一篇下一篇

猜你喜欢

热点阅读