JavaScript学习笔记(六):JavaScript 对象

 

别怀疑,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 通常指向正在执行的函数本身,或者是指向该函数所属的对象(运行时)

<script>
// 使用函数来构造对象
function person(firstname,lastname,age,eyecolor){
    // 把属性添加到 JavaScript 对象
    this.firstname=firstname;
    this.lastname=lastname;
    this.age=age;
    this.eyecolor=eyecolor;
    this.changeName=changeName;

    // 在构造器函数内部定义对象的方法
    function changeName(name){
	this.lastname=name;
    }
}
// 创建 JavaScript 对象实例
myMother=new person("Sally","Rally",48,"green");
// changeName() 函数 name 的值赋给 person 的 lastname 属性
myMother.changeName("Doe");
document.write(myMother.lastname);
</script>

 

JavaScript Number 对象

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

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

整数的精度(忽略计数法)最多为 15 位,小数的精度最大位数是 17。

前缀为 0 (0666),数值常量解释为八进制数,前缀为 0 和 "x"(0xFF),则解释为十六进制数。

 

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

<script>
var myNumber = 128;
document.write(myNumber + ' 十进制<br>');
document.write(myNumber.toString(16) + ' 十六进制<br>');
document.write(myNumber.toString(8) + ' 八进制<br>');
document.write(myNumber.toString(2) + ' 二进制<br>');
</script>

 

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.特殊字符

 

代码输出
\'单引号
\"双引号
\\斜杆
\n换行
\r回车
\ttab
\b空格
\f换页

 

 

JavaScript Date(日期) 对象

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

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

  • 使用 Date() 获得当日的日期。
<script>
var d = new Date();
document.write(d);
</script>
  • 使用 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)
index必需。整数,规定添加/删除项目的位置,使用负数可从数组结尾处规定位置。
howmany必需。要删除的项目数量。如果设置为 0,则不会删除项目。
item1, ..., itemX可选。向数组添加的新项目。
<script>
var fruits = ["Banana", "Orange", "Apple", "Mango"];
function myFunction(){
    fruits.pop();
    // fruits.shift();
    // fruits.push("Kiwi")
    // fruits.unshift("Lemon","Pineapple");
    // fruits.splice(2,0,"Lemon","Kiwi");
    var x=document.getElementById("demo");
    x.innerHTML=fruits;
}
</script>
  • 合并两个数组
<script>
    var hege = ["Cecilie", "Lone"];
    var stale = ["Emil", "Tobias", "Linus"];
    var children = hege.concat(stale);
    document.write(children);
</script>
  • 按字母升序排列数组 sort()
  • 按数字降序排列数组 sort(function(a,b){return b-a})
  • 按数字升序排列数组 sort(function(a,b){return a-b})
<script>
function myFunction(){
    var fruits = ["Banana", "Orange", "Apple", "Mango"];
    var points = [40,100,1,5,25,10];

    fruits.sort();
    points.sort(function(a,b){return a-b});
    // points.sort(function(a,b){return b-a});


    document.getElementById("fruits").innerHTML=fruits;
    document.getElementById("points").innerHTML=points;

}
</script>

 

JavaScript Boolean(布尔) 对象

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

<script>
    var b1=new Boolean(0);
    var b2=new Boolean(1);
    var b3=new Boolean("");
    var b4=new Boolean(null);
    var b5=new Boolean(NaN);
    var b6=new Boolean("false");

    document.write("0 为布尔值 "+ b1 +"<br>");
    document.write("1 为布尔值 "+ b2 +"<br>");
    document.write("空字符串是布尔值 "+ b3 + "<br>");
    document.write("null 是布尔值 "+ b4+ "<br>");
    document.write("NaN 是布尔值 "+ b5 +"<br>");
    document.write("字符串'false' 是布尔值"+ b6 +"<br>");
</script>

 

JavaScript Math(算数) 对象

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

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

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

 

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

  • 使用 round 方法对一个数进行四舍五入。
  • 使用 random() 方法来返回一个介于 0 和 1 之间的随机数。
  • 使用  floor() 方法和 random() 来返回一个介于 0 和 11 之间的随机数。
  • 使用 max( , ) 返回两个给定的数中的较大的值。
  • 使用 min( , ) 返回两个给定的数中的较小的数。
<script>
function myFunction(){
    document.getElementById("demo").innerHTML=Math.round(2.5);
    // document.getElementById("demo").innerHTML=Math.random();
    // document.getElementById("demo").innerHTML = Math.floor(Math.random()*11);
    // document.getElementById("demo").innerHTML=Math.max(5,10);
    // document.getElementById("demo").innerHTML=Math.min(5,10);
}
</script>

 

 

 


 

 

©️2020 CSDN 皮肤主题: 技术黑板 设计师:CSDN官方博客 返回首页