JavaScript之内置对象

古城微笑少年丶 2022-05-16 05:11 265阅读 0赞

## 一、前言 ##

JavaScript 中的所有事物都是对象：字符串、数值、数组、函数。  
此外，JavaScript 允许自定义对象。  
**所有事物都是对象：**  
JavaScript 提供多个内建对象，比如 String、Date、Array 等等。  
对象只是带有属性和方法的特殊数据类型。  
像布尔型、数字型、字符串、日期、数学和正则表达式、数组，甚至函数也可以是对象。

## 一、JavaScript对象 ##

对象只是一种特殊的数据。对象拥有属性和方法。

### 1.1 JS对象概述 ###

#### 1.1.1 访问对象的属性 ####

属性是与对象相关的值。访问对象属性的语法是：

objectName.propertyName

这个例子使用了 String 对象的 length 属性来获得字符串的长度：

var message="Hello World!";
     var x=message.length;

在以上代码执行后，x 的值将是：12

#### 1.1.2 访问对象的方法 ####

方法是能够在对象上执行的动作。您可以通过以下语法来调用方法：

objectName.methodName()

这个例子使用了 String 对象的 toUpperCase() 方法来将文本转换为大写：

var message="Hello world!";
     var x=message.toUpperCase();

在以上代码执行后，x 的值将是： HELLO WORLD!

### 1.2 创建 JavaScript 对象 ###

通过 JavaScript，您能够定义并创建自己的对象。  
创建新对象有两种不同的方法：

*  定义并创建对象的实例
 *  使用函数来定义对象，然后创建新的对象实例

#### 1.2.1 创建直接的实例 ####

这个例子创建了对象的一个新实例，并向其添加了四个属性：

person=new Object();
    person.firstname="John";
    person.lastname="Doe";
    person.age=50;
    person.eyecolor="blue";

替代语法（使用对象 literals）：

person={firstname:"John",lastname:"Doe",age:50,eyecolor:"blue"};

#### 1.2.2 使用对象构造器 ####

function person(firstname,lastname,age,eyecolor){
        
        this.firstname=firstname;
        this.lastname=lastname;
        this.age=age;
        this.eyecolor=eyecolor;
    }

在JavaScript中，this通常指向的是我们正在执行的函数本身，或者是指向该函数  
所属的对象（运行时)  
**创建 JavaScript 对象实例**  
一旦您有了对象构造器，就可以创建新的对象实例，就像这样:

var myFather=new person("John","Doe",50,"blue");

**把方法添加到 JavaScript 对象**  
方法只不过是附加在对象上的函数。在构造器函数内部定义对象的方法：

function person(firstname,lastname,age,eyecolor)
     {
        
         this.firstname=firstname;
         this.lastname=lastname;
         this.age=age;
         this.eyecolor=eyecolor;
    
         this.changeName=changeName;
         function changeName(name)
         {
        
               this.lastname=name;
         }
     }

changeName() 函数 name 的值赋给 person 的 lastname 属性。

### 1.3 JavaScript 类 \#\#\# ###

JavaScript for…in 语句循环遍历对象的属性。

for (variable in object)
     {
       code to be executed
     }

注意： for…in 循环中的代码块将针对每个属性执行一次。  
举例：

<p>点击下面的按钮，循环遍历对象 "person" 的属性。</p>
    <button onclick="myFunction()">点击这里</button>
    <p id="demo"></p>
    <script>
    function myFunction(){
         
        var x;
        var txt="";
        var person={fname:"Bill",lname:"Gates",age:56}; 
        for (x in person){
            txt=txt + person[x];
        }
        document.getElementById("demo").innerHTML=txt;
    }
    </script>

## 二、JS Number对象 ##

### 2.1 概述 ###

*  JavaScript 的 Number 对象是经过封装的能让你处理数字值的对象。
 *  JavaScript 的 Number 对象由 Number() 构造器创建。
 *  JavaScript 只有一种数字类型。
 *  可以使用也可以不使用小数点来书写数字。

### 2.2 JavaScript 数字 ###

1）2、8、16进制转换  
默认情况下，JavaScript 数字为十进制显示。  
但是你可以使用 toString() 方法 输出16进制、8进制、2进制。

var myNumber=128; 
    myNumber.toString(16);   // returns 80 
    myNumber.toString(8);    // returns 200 
    myNumber.toString(2);    // returns 10000000

2)无穷大（Infinity）  
当数字运算结果超过了JavaScript所能表示的数字上限（溢出），结果为一个特殊的  
无穷大（infinity）值，在JavaScript中以Infinity表示。同样地，当负数的值超  
过了JavaScript所能表示的负数范围，结果为负无穷大，在JavaScript中以-Infinity  
表示。无穷大值的行为特性和我们所期望的是一致的：基于它们的加、减、乘和除运算结果  
还是无穷大（当然还保留它们的正负号）。

myNumber=2; 
    while (myNumber!=Infinity) 
    { 
    myNumber=myNumber*myNumber; // Calculate until Infinity 
    }
    返回的记过就是Infinity

3）NaN - 非数字值  
NaN 属性是代表非数字值的特殊值。该属性用于指示某个值不是数字。  
可以把 Number 对象设置为该值，来指示其不是数字值。  
你可以使用 isNaN() 全局函数来判断一个值是否是 NaN 值。

//一个数字除以一个字符串结果不是一个数字
    //一个数字除以一个字符串数字结果是一个数字
    var x = 1000 / "Apple";  //true
    var y = 1000 / "1000";  //false

除以0是无穷大，无穷大是一个数字:  
提示：在 JavaScript 中，如果参数无法被转换为数字，则返回 NaN。

### 2.3 Number 对象属性 ###

<table> 
 <thead> 
  <tr> 
   <th align="center">属性</th> 
   <th align="center">描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="center">constructor</td> 
   <td align="center">返回对创建此对象的 Number 函数的引用。</td> 
  </tr> 
  <tr> 
   <td align="center">MAX_VALUE</td> 
   <td align="center">可表示的最大的数。</td> 
  </tr> 
  <tr> 
   <td align="center">MIN_VALUE</td> 
   <td align="center">可表示的最小的数.</td> 
  </tr> 
  <tr> 
   <td align="center">NEGATIVE_INFINITY</td> 
   <td align="center">负无穷大，溢出时返回该值。</td> 
  </tr> 
  <tr> 
   <td align="center">NaN</td> 
   <td align="center">非数字值。</td> 
  </tr> 
  <tr> 
   <td align="center">POSITIVE_INFINITY</td> 
   <td align="center">正无穷大，溢出时返回该值。</td> 
  </tr> 
  <tr> 
   <td align="center">prototype</td> 
   <td align="center">允许您有能力向对象添加属性和方法。</td> 
  </tr> 
 </tbody> 
</table>

### 2.4 Number 对象方法 ###

<table> 
 <thead> 
  <tr> 
   <th align="center">方法</th> 
   <th align="center">描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="center">toExponential(x)</td> 
   <td align="center">把对象的值转换为指数计数法。</td> 
  </tr> 
  <tr> 
   <td align="center">toFixed(x)</td> 
   <td align="center">把数字转换为字符串，结果的小数点后有指定位数的数字。</td> 
  </tr> 
  <tr> 
   <td align="center">toPrecision(x)</td> 
   <td align="center">把数字格式化为指定的长度。</td> 
  </tr> 
  <tr> 
   <td align="center">toString()</td> 
   <td align="center">把数字转换为字符串，使用指定的基数。</td> 
  </tr> 
  <tr> 
   <td align="center">valueOf()</td> 
   <td align="center">返回一个 Number 对象的基本数字值。</td> 
  </tr> 
 </tbody> 
</table>

## 三、JS String ##

一个字符串用于存储一系列字符，一个字符串可以使用单引号或双引号。  
你使用位置（索引）可以访问字符串中任何的字符：

var str = 'hello world';
    var character = str[4];  //o

### 3.1 length(字符串长度) ###

字符串（String）使用长度属性length来计算字符串的长度

var txt="Hello World!"; 
    document.write(txt.length);

### 3.2 indexOf()、lastIndexOf() 在字符串中查找字符串 ###

字符串使用 indexOf() 来定位字符串中某一个指定的字符首次出现的位置。

var str = 'hello world, this is sie';
    str.indexof('sie');

如果没找到对应的字符函数返回-1  
lastIndexOf() 方法在字符串末尾开始查找字符串出现的位置。

### 3.3 match() 内容匹配 ###

match()函数用来查找字符串中特定的字符，并且如果找到的话，则返回这个字符。

var str="Hello world!";
    document.write(str.match("world") + "<br>");  //world
    document.write(str.match("World") + "<br>");  //null 
    document.write(str.match("world!")  //world!

### 3.4 replace() 替换内容 ###

replace() 方法在字符串中用某些字符替换另一些字符

str="Please visit sie!" 
    var n=str.replace("sie","lance");

### 3.5 toUpperCase() / toLowerCase() 字符串大小写转换 ###

字符串大小写转换使用函数 toUpperCase() / toLowerCase()

var txt="Hello World!";       // String 
    var txt1=txt.toUpperCase();   // txt1 is txt converted to upper 
    var txt2=txt.toLowerCase();   // txt2 is txt converted to lower

### 3.6 split() 分割字符串 ###

字符串使用string>split()函数转为数组

txt="a,b,c,d,e"   // String 
    txt.split(",");   // Split on commas 
    txt.split(" ");   // Split on spaces

### 3.7 substr()和substring() 提取字符 ###

1）substr() 方法  
可在字符串中抽取从 start 下标开始的指定数目的字符

var str="Hello world!"
    document.write(str.substr(3,7)  //lo worl

提取从第三个字符后的7个字符  
2）substring() 方法  
用于提取字符串中介于两个指定下标之间的字符。

### 3.8 charAt() 返回指定位置的字符 ###

字符串中第一个字符的下标是 0。如果参数 index 不在 0 与 string.length 之间，  
该方法将返回一个空字符串。

var str="Hello world!"
    document.write(str.charAt(1))  //e

## 四、JS Math ##

Math中的常用方法：

<table> 
 <thead> 
  <tr> 
   <th align="center">方法</th> 
   <th align="center">属性</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="center">abs(x)</td> 
   <td align="center">返回数的绝对值。</td> 
  </tr> 
  <tr> 
   <td align="center">ceil(x)</td> 
   <td align="center">对数进行上舍入。</td> 
  </tr> 
  <tr> 
   <td align="center">max(x,y)</td> 
   <td align="center">返回 x 和 y 中的最高值</td> 
  </tr> 
  <tr> 
   <td align="center">min(x,y)</td> 
   <td align="center">返回 x 和 y 中的最低值。</td> 
  </tr> 
  <tr> 
   <td align="center">pow(x,y)</td> 
   <td align="center">返回 x 的 y 次幂</td> 
  </tr> 
  <tr> 
   <td align="center">random()</td> 
   <td align="center">返回 0 ~ 1 之间的随机数。</td> 
  </tr> 
  <tr> 
   <td align="center">round(x)</td> 
   <td align="center">把数四舍五入为最接近的整数.</td> 
  </tr> 
  <tr> 
   <td align="center">sqrt(x)</td> 
   <td align="center">返回数的平方根</td> 
  </tr> 
  <tr> 
   <td align="center">valueOf()</td> 
   <td align="center">返回 Math 对象的原始值。</td> 
  </tr> 
 </tbody> 
</table>

## 五、JS Array ##

![uDha5u9.png][]

[uDha5u9.png]: https://i.imgur.com/uDha5u9.png