JavaScript小白教程6JS高級教程

時間 2019-12-09

標籤 javascript 教程 6js 高級欄目 JavaScript 简体版

原文原文鏈接

JavaScript 對象

全部事物都是對象正則表達式

JavaScript 提供多個內建對象，好比 String、Date、Array 等等。對象只是帶有屬性和方法的特殊數據類型。express

布爾型能夠是一個對象。
數字型能夠是一個對象。
字符串也能夠是一個對象
日期是一個對象
數學和正則表達式也是對象
數組是一個對象
甚至函數也能夠是對象

JavaScript 類

JavaScript 是面向對象的語言，但 JavaScript 不使用類。數組

在 JavaScript 中，不會建立類，也不會經過類來建立對象（就像在其餘面向對象的語言中那樣）。函數

JavaScript 基於 prototype，而不是基於類的。ui

<body>
<script>
//修改對象的屬性值
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;
    }
}
myMother=new person("Sally","Rally",48,"green");
myMother.changeName("Doe");
document.write(myMother.lastname);
</script>

</body>

<body>
    
<p>點擊下面的按鈕，循環遍歷對象 "person" 的屬性。</p>
<button onclick="myFunction()">點擊這裏</button>
<p id="demo"></p>
<p id="demo1"></p>
<p id="demo2"></p>
    
<script>
//for循環輸出對象全部的屬性值
function myFunction(){
    var y=0;
    var x;
    var txt="";
    var person={fname:"Bill",lname:"Gates",age:56}; 
    for (x in person){
        alert(x)
        alert(person[x])
        txt=txt + person[x];
    }
    
    document.getElementById("demo").innerHTML=txt;
}
</script>
    
</body>

JavaScript prototypethis

prototype 繼承

全部的 JavaScript 對象都會從一個 prototype（原型對象）中繼承屬性和方法：spa

Date 對象從 Date.prototype 繼承。
Array 對象從 Array.prototype 繼承。
Person 對象從 Person.prototype 繼承。

<body>

<h2>JavaScript 對象</h2>

<p id="demo"></p>
<p id="demo1"></p>

<script>
//類中添加屬性
function Person(first, last, age, eye) {
  this.firstName = first;
  this.lastName = last;
  this.age = age;
  this.eyeColor = eye;
}

Person.prototype.nationality = "English";

var myFather = new Person("John", "Doe", 50, "blue");
document.getElementById("demo").innerHTML =
"我父親對國籍是 " + myFather.nationality; 
    
var myFather1 = new Person("John", "Doe", 500, "blue");
document.getElementById("demo1").innerHTML =
"我父親對國籍是 " + myFather1.nationality + "我父親的年齡是" + myFather1.age; 
</script>

</body>

<body>

<h2>JavaScript 對象</h2>

<p id="demo"></p>

<script>

//類中添加方法

function Person(first, last, age, eye) { this.firstName = first; this.lastName = last; this.age = age; this.eyeColor = eye; } Person.prototype.name = function() { return this.firstName + " " + this.lastName }; var myFather = new Person("John", "Doe", 50, "blue"); document.getElementById("demo").innerHTML = "我對父親是 " + myFather.name(); </script> </body>

JavaScript Number 對象prototype

<body>

<script>
//無窮大（Infinity）
var x = 2/0;
var y = -2/0;
document.write(x + "<br>");
document.write(y + "<br>");
</script>

</body>

<body>
    
<p>一個數字除以一個字符串結果不是一個數字</p>
<p>一個數字除以一個字符串數字結果是一個數字</p>
<p id="demo"></p>
<script>
//NaN 屬性是表明非數字值的特殊值。該屬性用於指示某個值不是數字。能夠把 Number 對象設置爲該值，來指示其不是數字值。
var x = 1000 / "Apple";
var y = 1000 / "1000";
document.getElementById("demo").innerHTML = isNaN(x) + "<br>" + isNaN(y);
</script>

</body>

<body>
<p id="demo"></p>
<script>
//數字能夠是數字或者對象  typeof()判斷類型
var x = 123;              // x 是一個數字
var y = new Number(123);  // y 是一個對象
var txt = typeof(x) + " " + typeof(y);
document.getElementById("demo").innerHTML=txt;
</script>
</body>

JavaScript 字符串（String）對象code

1:字符串（String）使用長度屬性length來計算字符串的長度對象

2:字符串使用 indexOf() 來定位字符串中某一個指定的字符首次出現的位置

3:match()函數用來查找字符串中特定的字符，而且若是找到的話，則返回這個字符

4:replace() 方法在字符串中用某些字符替換另外一些字符

5:字符串大小寫轉換使用函數 toUpperCase() / toLowerCase():

6:字符串使用split()函數轉爲數組:

7:Javascript 中能夠使用反斜線（\）插入特殊符號，如：撇號,引號等其餘特殊符號

JavaScript Date（日期）對象

日期對象用於處理日期和時間

JavaScript Array（數組）對象

都是對象，會調用它的屬性和方法

<body>

<p id="demo">單擊按鈕建立一個數組,調用 ucase（）方法, 並顯示結果。</p>
<button onclick="myFunction()">點我</button>
<script>
Array.prototype.myUcase=function(){
    for (i=0;i<this.length;i++){
        this[i]=this[i].toUpperCase();
    }
}
function myFunction(){
    var fruits = ["Banana", "Orange", "Apple", "Mango"];
    fruits.myUcase();
    var x=document.getElementById("demo");
    x.innerHTML=fruits;
}
</script>

</body>