JS-ECMAScript 5.0

JS的引入方式
注釋
調試語句
變量的聲明
變量的命名規范
基本數據類型
復雜(引用)數據類型
運算符
數據類型轉換
流程控制
常用內置對象(復雜數據類型)（重點）
函數（重點）
偽數組arguments
對象Object(重點)
Date日期對象
JSON(重點)

js的引入方式：

前端常用的開發工具：sublime、visual Studio Code、HBuilder、Webstorm。

內接式：

<scrip tyoe="text/javascrip">
</scrip>

外接式：

<!--相當于引入一個模塊-->
<scrip type="text/javascrip" src="./index.js">
</scrip>

注釋：

# 調試語句
- alert(' ');彈出警告框
- console.log(' ');控制臺輸出

# 變量的聲明
在js中用var關鍵字進行變量的聲明，注意：分號作為一句代碼的結束符
var a=100； # 關鍵字var后面必須有一個空格

變量名：除了關鍵字意可以任意
變量使用：變量必須先聲明才能使用，不然控制臺會報錯

變量的命名規范：

只能由字母、數字、下劃線、美元符號￥構成，且不能以數字開頭，不能是js的保留字

# js的保留字

bstract、boolean、byte、char、class、const、debugger、double、enum、export、extends、final、float、goto
implements、import、int、interface、long、native、package、private、protected、public、short、static、super、synchronized、throws、transient、volatile

基本的數據類型

數值類型：number

如果一個變量的值為數字，那么這個變量就是數值型的

var a=888；
console.log(typof a);  # 使用typeof函數來判斷數據類型

var b=2/0；
console.log(typeof b);

# 結果均為number

注意：在js中無論是整數、浮點數、無論大小、正負都是number類型。

字符串類型：string

var a ="123";
var b="abc";
var c="本主萬歲";
var d=""; # 空字符串

連字符和“ + ”的區別：

符號“+”左右兩邊都是單獨的數據類型，那么此時“+”就是連字符；反而言之就是運算符“+”。

console.log(“勝多”+”負“+“少”); # 輸出為：“勝多負少”，此時為連字符
console.log(1+2+3);   # 輸入為：6，此時為 運算符“+”

布爾類型：boolean

    var sdfsd=false;
    console.log(typeof sdfsd); # 輸出為：Boolean

空對象：null

        var c=null;
    console.log(typeof c);   # 輸出為：object

未定義：undefined

    var c;
    console.log(typeof c);  # 輸出為：undefined

運算符

賦值運算符

算數運算符

var a = 5,b=2;

比較運算符

var x = 5;

數據類型轉換

將數字number轉為字符串string

隱式轉換

    var c=123;
    var d='123';
    var e=c+d;
    console.log(typeof e); # 輸出為：string

強制轉換

    var c=123;
    var str=String(c)
    console.log(typeof c);   # 輸出為：number
    console.log(c.toString()) # 輸出為：123

將字符串string轉為數字number

var str='1231.23sdfe';
console.log(str);
var num=number(str)        # 輸出：1231.23sdfe
console.log(typeof num);   # 會報錯，但其類型為number

# 使用函數parseInt、parseFloat可以從字符串中取出整數、浮點數
var n1=parseInt(str);
console.log(n1);             # 輸出：1231
console.log(typeof n1);   # 輸出：number

var n2=parseFloat(str);
console.log(n2);             # 輸出：1231.23
console.log(typeof n2);  # 輸出：number

任何數據類型都能轉為布爾類型Boolean

    var n1=12;
    console.log(Boolean(n1));  # 輸出： true

    var n2=null;
    console.log(Boolean(n2));  #  輸出： flase

    var n3='sdfasf';
    console.log(Boolean(n3));  # 輸出： true

    var n4;
    console.log(Boolean(n4));     #  輸出： flase

    var n5=Infinity;
    console.log(Boolean(n5));  # 輸出： true

流程控制

if語句

    var a =17;
    if(a>15){
        console.log('so yung')
    }           # {}相當于作用域
    alert("xxx");      # 此語句也會執行

if-else

    var a =17;
    if(a>18){
        console.log('so yung')
    }
    else{console.log("這個也可以")}
    alert("xxx");

if-else~if-else

    var a =17;
    if(a>18){
        console.log('so yung')
    }
    else if(age=20){console.log("這個也可以")}
    else{console.log("史蒂芬")}
    alert("xxx");

邏輯與&&、邏輯或||

#  與：&&  條件均滿足才會執行

if(sum>520 && match>90){        
console.log("恭喜你！落榜了!")};
alert('恭喜你，被xx大學錄取！');

# 或：||  條件滿足其一

if(sum>520 || match>90){
console.log("滿足條件其一就會執行")}
alert('均執行')

switch條件語句

和if類似

    var gamescore='best';
    switch (gamescore) {
        case 'good':
            console.log("不錯");
            break;
        case 'better':
            console.log("非常好");
            break;
        case 'best':
            console.log("棒極了");
            break;
        default:
            console.log("gameover")
    }
# case：表示一個條件，滿足條件是才會進入，遇到break則跳出循環。如果沒寫break，直到遇到下一個條件的break才會跳出

while循環語句

    var i=0;
    while (i<=9){
        console.log(i);
        i +=1;
    }

for循環

for循環是數據操作方面最常用的數據操作

# 輸出10以內的數
for (var i=0;i<=10;i++){
      console.log(i);      
}

練習：

100內的總和

        var sum =0;
        for(var n=1;n<100;n++){

            var sum=sum+n;
        }
         console.log(sum);

for 循環嵌套

document.write('');往瀏覽器文檔內寫內容

View Code

常用的內置對象

數組：array

字面量方式創建（推薦使用：簡單粗暴）

var colors =["red","green","yellow'];
輸出：Array(3) [ "red", "green", "yellow"

構建函數創建：

    var colors=new Array();
    colors[0]='red';
    colors[1]='green';
    colors[2]='yellow';
    console.log(colors);

結果：
Array(3) [ "red", "green", "yellow" ]

數組的常用方法：

數組的合并：concat（）

join():用指定的連接符連接目標元素

slice（）：返回一組數據的一段記錄,有頭無尾

pop():移除數組的最后一個元素

push():添加一個元素到末尾

reverse()：反轉數組

sort():對數組排序

Array.isArray():判斷是否為數組類型

字符串string

charAt():返回指定索引位置的元素

concat():返回多個字符串拼接

replace(a,b):將元素a替換為b

indexof()：返回目標字符的下標，如未找到返回-1，同search語法

slice(a,b):分割字符串，左閉右開

split('x',1):以‘x’為分隔符分割字符串，若第二個參數未寫，則返回全部

substr(a,b):分割字符串，左閉右開

toLowerCase():返回字符串小寫

toUpperCase():返回字符串大寫

其他：toString():將數字轉為字符串；toFixed():四舍五入

Mah內置對象

Math.floor() & Math.cell()：向下|上取整

Math.max() & Math.min():取a,b最大值/最小值

函數

函數：就是把一些語句進行封裝，通過調用的形式執行。

函數的作用：

解決大量重復代碼的問題
簡化編程，讓編程模塊化

// 定義函數
function add(x,y）{
    return x+y；
}

// 調用函數

console.log(add(2,3));

注意：

function：為關鍵字，意為：函數、功能
函數名和變量名命名規則相同，只能字母、數字、下劃線、美元￥組成，并且不能以數字開頭
參數：函數名后的小括號為放參數位置
語句：小括號后面的大括號為存放語句位置

偽數組 argument

argument代表的是實參，其只能在函數中使用

        function add(a,b,c) {
            var a='kylin';
            console.log(a);
            console.log(arguments);
            console.log(add.length);               # 獲取形參的個數
            console.log(arguments.length);      # 獲取實參的個數
   
        }
        console.log(add(2,4,6));

結果：

之所以說argument是偽數組，是因為argument僅可以修改元素，但不能改變數組的長短。

    <script type="text/javascript">
        add(1,2);
        add(2,4,5);
        add(6,8,9);
        function add(a,b,c) {
            arguments[0]=99;
            console.log(arguments);
            console.log(add.length);
            console.log(arguments.length);

        }

更改后的結果：

清空數組的幾組方式：

    var num=[1,2,3,4];
    num.splice(0); //刪除某個元素
    num.length=0;   // 指定數組長度
    num=[];   //  簡單粗暴，常用

對象object

創建對象的幾種方式：

使用object或對象字面量創建對象
使用構造函數創建對象
工廠模式創建對象
原型模式創建對象

使用object或對象字面量創建對象

JS中最基本的創建對象方式

var student=new object();
student.name='kylin';
student.age=18;
console.log(student);

結果：Object { name: "kylin", age: 18 }

這種方式看著封裝性不好，不簡潔，可以使用字面量方式創建對象

    var student={
        name:'kylin',
        age:18
    };
    console.log(student)

結果：Object { name: "kylin", age: 18 }

但是這種方式也有缺陷，如果我們要批量創建時，總不能一個個創建對象，這樣既浪費時間又浪費內存。解決方法可以使用工廠模式創建;

工廠模式創建對象

由于js中沒有類的概念，可以使用一種函數將對象創建的過程封裝起來以便于重復調用，還可以給出特定結構來初始化對象。

// 定義函數
    function createstudent(name,age){
        var obj=new Object();
        obj.name=name;
        obj.age=age;
        return obj;
    }

// 批量創建
    var student1=createstudent('kylin',18);
    var student2=createstudent('Jack',28);
    var student3=createstudent('Jone',21);

    console.log(student1);
    console.log(student2);
    console.log(student3);

結果：
Object { name: "kylin", age: 18 }

Object { name: "Jack", age: 28 }

Object { name: "Jone", age: 21 }

以上方法雖然解決了批量創建的問題，但是我們無法得知object的具體類型，比如：student1、student2都是student。我們可以使用構造函數的方式創建對象

構造函數模式創建對象

上述在創建object、Array時都使用了其構造函數

// 創建原生對象object

var obj=new Object();

// 創建原生數組Array

var arry=new Array(8);   //  構造一個長度為8的數組對象

在說構造函數創建對象之前，我們先了解一下構造函數和普通函數的區別：

對于任意函數：使用new操作符調用，那它就是構造函數；不使用new調用，那它就是普通函數
按照慣例，構造函數以首字母大寫開頭，普通函數以小寫開頭，這樣有利于顯性區分二者
使用new操作符調用構造函數時會經歷一下幾個過程：

創建新對象
將構造函數作用域賦予該對象（使this指向該對象）
執行構造函數代碼
返回新對象

現在以構造函數方式重寫：

    function Student(name,age){
        this.name=name;
        this.age=age;
        this.alertName=function () {
            alert(this.name)
        };
    }
    function Fruit(name,age){ 
　　　　this.name=name; 
　　　　this.color=color; 
　　　　this.alertName=function () { 
　　　　alert(this.name) }; }
    var student=new Student('Kylin',18);
　　 var fruit=new Fruit('banana','yellow');
    console.log(student);  // Object { name: "Kylin", age: 18, alertName: alertName() }
　　console.log(fruit);   // Object{name:'banana',color:'yellow',alertName:alterName()}
 // instanceof 操作符檢測對象類型
    alert(student instanceof Student);  //true
　　alert(fruit instanceof Fruit);    // tru

上述方式中，由于兩個函數有共同的方法，這樣在對函數調用時會造成內存的浪費。

所以我們可以這樣寫：將對象方法移動構造函數外

    function Student(name,age) {

        this.name = name;
        this.age = age;
        this.alertName = alertName;
    }
    function alertName() {
            alert(this.name)
    };
    var stu1=new Student('Kylin',18);
    var stu2=new Student('Jony',28);

這樣，在stu1調用alertName時，this對象才會綁定到stu1。

通過將alertName()定義為全局函數，這樣對象中的alertName屬性則被設置為指向該全局函數的指針。由此stu1和stu2共享該全局函數，解決了內存浪費問題。

但是，這種方式僅僅能臨時解決內存問題，當定義的全局函數多了，那將自定義對象封裝的意義就沒有了，更佳的解決方法是通過原型對象模式來解決

原型的模式創建對象

原型鏈甚至是原型繼承是整個js中最難理解的部分

    function Student(name,age) {

        this.name = 'Kylin';
        this.age = 18;

    }
    Student.prototype.alertName=function() {
            alert(this.name);
    };
    var stu1=new Student();
    var stu2=new Student();

    stu1.alertName();  // Kylin
    stu2.alertName();  // Kylin
　　alert(stu1.alertName=stu2.alertName); //  均指向：function() {alert(this.name);

Date日期對象

創建日期對象只有一種創建方式：使用關鍵字new

var mydate=new Date();

// 返回本地時間
console.log(myDate().toLocaString()); //2018/9/25

Json

Json（JavaScrip Object Notation）是一種輕量級的數據交換格式，采用完全獨立于語言的文本格式，是理想的數據交換格式。而且JSON是 js的原生格式，在js中處理json數據不需要其他的API或工具包。

在JSON中有兩種數據結構：對象和數組

對象:

objet={'key':'value'} 多個鍵值對以逗號分隔

var objJson={'name':'kylin','age':18};

數組：

數組是值的有序集合，多個值之間用逗號分隔

var arrayJson=[1,2,3,4];

JSON對象個JSON字符串轉換

在數據傳輸過程中，JSON是以字符串的形式傳遞的，而JS操作的是JSON對象，所以JSON對象和字符串直間的轉換是關鍵！

        // JSON對象
        var JsonObject={"name":"kylin","age":18};

        // JSON字符串
        var JsonString='{"name":"kylin","age":18}';

        // JSON字符串轉為對象
        var jsonobj= JSON.parse(JsonString);

        // JSON對象轉為字符串
        var jsonstr=JSON.stringify(JsonObject);

        console.log(jsonobj);
        console.log(typeof jsonobj);
        console.log(jsonstr);
        console.log(typeof jsonstr);

結果：

Object { name: "kylin", age: 18 }
object

{"name":"kylin","age":18}
string

遍歷JSON對象和JSON數組

遍歷對象代碼：

        var obj={"name":"kylin","age":18};
        for(var k in obj){   // 遍歷obj的每個鍵值對，k對應obj的key
            alert(k + " "+obj[k]);
        }

輸出：
    name kylin
    age 18

遍歷數組代碼：

        var arry=[{"name":"kylin","age":18},{"name":"legend","age":19}];
        for(var i in arry){ // 遍歷數組時，i為索引
            alert(arry[i].name+" "+arry[i].age);
        }

輸出：
    kylin 18
    legend 19

posted @ 2018-09-27 18:06 繁華無殤閱讀(373) 評論(0) 收藏舉報

刷新頁面返回頂部