JavaScript学习笔记（六）：JavaScript 对象

ゞ浴缸里的玫瑰 2022-04-23 02:24 257阅读 0赞

别怀疑，JavaScript是面向对象语言，但它是基于 prototype，而不是基于类，所以不会建类，也不会通过类来创建对象。下面介绍 JavaScript 创建对象的方法。

## 创建 JavaScript 对象 ##

创建新对象有两种不同的方法：

*  定义并创建对象的实例（直接创建实例，不演示）
 *  使用函数来定义对象，然后创建新的对象实例

### 小案例1：把方法添加到 JavaScript 对象 ###

1.使用函数来构造对象 person(firstname,lastname,age,eyecolor);

2.在构造器函数内部定义对象的方法 changeName(name);

3.创建 JavaScript 对象实例 person("Sally","Rally",48,"green");

4.把属性添加到 JavaScript 对象；

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

注：4和5，这里 this 通常指向正在执行的函数本身，或者是指向该函数所属的对象（运行时）

## JavaScript Number 对象 ##

JavaScript 只有一种数字类型，数字可以使用也可以不使用小数点来书写。

数字不分为整数类型和浮点型类型，所有的数字都是由 浮点型类型且均为64位。

整数的精度（忽略计数法）最多为 15 位，小数的精度最大位数是 17。

前缀为 0 （0666），数值常量解释为八进制数，前缀为 0 和 "x"（0xFF），则解释为十六进制数。

### 小案例2：使用 toString() 方法 输出16进制、8进制、2进制 ###

## ##

## JavaScript 字符串（String） 对象 ##

1.使用长度属性 **length** 来计算字符串的长度（str.length）。

2.使用 **indexOf("")** 来定位字符串中某一个指定的字符首次出现的位置，如果没找到对应的字符函数返回-1（str.indexOf("")）。

3.使用 **lastIndexOf("")** 方法在字符串末尾开始查找字符串出现的位置（str.lastIndexOf("")）。

4.使用 **match("")** 函数用来查找字符串中特定的字符（str.match("")）。

5.使用 **replace()** 方法在字符串中用某些字符替换另一些字符（str.replace("1","2")，1替换为2）。

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

txt.toUpperCase();   // txt 文本会转换为大写

txt.toLowerCase();   // txt 文本会转换为小写

7.字符串使用 **split()** 函数转为数组。

function myFunction(){
        var str="a,b,c,d,e,f";
        var n = str.split(",");   // 使用逗号分隔
        // str.split(" ");   // 使用空格分隔
        // str.split("|");   // 使用竖线分隔  
        document.getElementById("demo").innerHTML=n[0];
    }

8.特殊字符

# #

## JavaScript Date（日期） 对象 ##

日期对象用于处理日期和时间。

### 小案例3：获取具体日期的各种方法 ###

*  使用 **Date()** 获得当日的日期。

*  使用 **getFullYear()** 获取年份。
 *  使用 **getTime()** 返回从 1970 年 1 月 1 日至今的毫秒数。
 *  使用 **toUTCString()** 将当日的日期（根据 UTC）转换为字符串。

<p id="demo">点击按钮获取今年的年份。</p>
    <button onclick="myFunction()">点我</button>
    <script>
    function myFunction(){
        var d = new Date();
        var x = document.getElementById("demo");
        x.innerHTML = d.getFullYear();
        // x.innerHTML=d.getTime();
        // x.innerHTML=d.toUTCString();
    }
    </script>

*  使用 **setFullYear()** 设置具体的日期。（注：JavaScript 月数是从0至11。0是1月。）

<p id="demo">单击按钮显示修改后的年月日。</p>
    <button onclick="myFunction()">点我</button>
    <script>
    function myFunction(){
        var d = new Date();
        d.setFullYear(2020,1 - 1,3);
        var x = document.getElementById("demo");
        x.innerHTML=d;
    }
    </script>

*  使用 **getDay()** 和数组来显示星期，而不仅仅是数字。

<p id="demo">单击按钮显示今天周几</p>
    <button onclick="myFunction()">点我</button>
    <script>
    function myFunction(){
    	var d = new Date();
    	var weekday=new Array(7);
    	weekday[0]="周日";
    	weekday[1]="周一";
    	weekday[2]="周二";
    	weekday[3]="周三";
    	weekday[4]="周四";
    	weekday[5]="周五";
    	weekday[6]="周六";
    	var x = document.getElementById("demo");
    	x.innerHTML=weekday[d.getDay()];
    }
    </script>

## ##

### 小案例4：在网页上显示一个钟表 ###

** setTimeout(code,millisec)**  
 code 要调用的函数后要执行的 JavaScript 代码串。  
 millisec 在执行代码前需等待的毫秒数。

< script type = "text/javascript" >
        function starTime() {
            var day = new Date();
            var h = day.getHours();
            var m = day.getMinutes();
            var s = day.getSeconds();
    
            // 在小于10的数字前加一个‘0’
            m = checkTime(m);
            s = checkTime(s);
    
            var x = document.getElementById("date").innerHTML = h + ":" + m + ":" + s;
    
            // 重复调用 starTime()
            var t = setTimeout(function() {starTime()}, 500);
        }
        function checkTime(i) {
            if (i < 10) {
                i = "0" + i;
            }
            return i;
        }
    < /script>

## JavaScript Array（数组） 对象 ##

### 小案例5：数组的各种操作 ###

*  删除数组最后一个元素 pop()
 *  删除数组第一个元素 shift()
 *  在数组末尾添加元素 push("")
 *  在数组头部添加元素 unshift("","")
 *  在数组任一位置添加元素 splice(index, howmany, item1, ..., itemX)

<table> 
 <tbody> 
  <tr> 
   <td style="text-align:left;vertical-align:middle;">index</td> 
   <td style="text-align:left;vertical-align:middle;">必需。整数，规定添加/删除项目的位置，使用负数可从数组结尾处规定位置。</td> 
  </tr> 
  <tr> 
   <td style="text-align:left;vertical-align:middle;">howmany</td> 
   <td style="text-align:left;vertical-align:middle;">必需。要删除的项目数量。如果设置为 0，则不会删除项目。</td> 
  </tr> 
  <tr> 
   <td style="text-align:left;vertical-align:middle;">item1, ..., itemX</td> 
   <td style="text-align:left;vertical-align:middle;">可选。向数组添加的新项目。</td> 
  </tr> 
 </tbody> 
</table>

*  合并两个数组

*  按字母升序排列数组 sort()
 *  按数字降序排列数组 sort(function(a,b)\{return b-a\})
 *  按数字升序排列数组 sort(function(a,b)\{return a-b\})

# #

## JavaScript Boolean（布尔） 对象 ##

### 小案例6：检查布尔对象是 true 还是 false。 ###

# #

## JavaScript Math（算数） 对象 ##

Math 对象的作用是：执行普通的算数任务。

Math 对象提供多种算数值类型和函数。

注意： Math对象无需在使用这个对象之前对它进行定义。

### 小案例7：Math 算数的各种小操作 ###

*  使用 round 方法对一个数进行四舍五入。
 *  使用 random() 方法来返回一个介于 0 和 1 之间的随机数。
 *  使用  floor() 方法和 random() 来返回一个介于 0 和 11 之间的随机数。
 *  使用 max( , ) 返回两个给定的数中的较大的值。
 *  使用 min( , ) 返回两个给定的数中的较小的数。

###      ###

## ##