<td id="ms32e"></td>

    <sub id="ms32e"></sub>

        對高端網站的追求從未停止
        當前位置: 首頁 > 新聞資訊 > 技術文章

        JavaScript 10分鐘入門

        發布: 2021年01月04日 瀏覽:

        JavaScript是一門面向對象的動態語言,他一般用來處理以下任務:

        1、修飾網頁

        生成HTML和CSS

        生成動態HTML內容

        生成一些特效

        2、提供用戶交互接口

        生成用戶交互組件

        驗證用戶輸入

        自動填充表單

        3、能夠讀取本地或者遠程數據的前端應用程序

        4、通過Nodejs實現像JAVA,C#,C++一樣的服務端程序

        5、實現分布式WEB程序,包括前端和服務端

        當前瀏覽器所支持的JavaScript的版本被稱為“ECMAScript的5.1”,或簡單的“ES5”,但接下來的兩個版本,稱為“ES6”和“ES7”(或“ES2015”和“ES2016”,新版以本年命名),有很多的附加功能和改進的語法,是非常值得期待的(并已部分被當前的瀏覽器和后端JS的環境支持)。


        JavaScript類型和常量

        JS有3個值類型:string,number和boolean,我們可以用一個變量v保存不同類型的值用來和typeof(v)比較, typeof(v)===”number”。

        JS有5個引用類型:Object, Array, Function, Date 和 RegExp。數組,函數,日期和正則表達式是特殊類型的對象,但在概念上,日期和正則表達式是值類型,被包裝成對象形式體現。

        變量,數組,函數的參數和返回值都可以不聲明,它們通常不會被JavaScript引擎檢查,會被自動進行類型轉換。

        變量值可能為:

        1、數據,如string,number,boolean

        2、對象的引用:如普通對象,數組,函數,日期,正則表達式

        3、特殊值null,其通常用作用于初始化的對象變量的默認值

        4、特殊值undefined,已經聲明但沒有初始化的初始值

        string是Unicode字符序列。字符串常量會被單引號或雙引號包裹著,如“Hello world!”,“A3F0′,或者空字符串”"。兩個字符串表達式可以用+操作符連接,并可通過全等于比較:

        if (firstName + lastName === "James Bond")

        字符串的字符數量可以通過length屬性獲得:

        console.log( "Hello world!".length);  // 12

        所有的數字值都是在64位浮點數字。整數和浮點數之間沒有明確的類型區別。如果一個數字常量不是數字,可以將其值設置為NaN(“not a number”),它可以用isNaN方法來判斷。

        不幸的是,直到ES6才有Number.isInteger方法,用于測試一個數是不是一個整數。因此在還不支持它的瀏覽器中,為確保一個數字值是一個整數,或者一個數字的字符串被轉換為一個整數,就必須使用parseInt函數。類似地,包含小數的字符串可用與parseFloat方法轉換。將一個數子n轉換成字符串,常用的方法是使用String(n)。

        就像Java,我們也有兩個預先定義好的布爾型值,true與false,以及布爾運算符符號: ! (非),&&(與),||(或)。當非布爾型值與布爾型值比較時,非布爾型值會被隱式轉換??兆址?,數字0,以及undefined和null,會被轉換為false,其他所有值會轉換為true。

        通常我們需要使用全等符號符號(===和!==)而不是==和!=。否則,數字2是等于的字符串“2”的, (2 == “2″) is true

        VAR= [] 和var a = new Array() 都可以定義一個空數組。(二胡:推薦前者)

        VAR O ={} 和 var o = new Obejct() 都可以定義個空對象(二胡:還是推薦前者)。注意,一個空對象{}不是真的空的,因為它包含的Object.prototype繼承屬性。所以,一個真正的空對象必須以Null為原型, var o = Object.create(null)。

        表1 類型測試和轉換

        JavaScript 10分鐘入門(圖1)

        變量作用域

        在JavaScript的當前版本ES5,有兩種范圍變量:全局作用域和函數作用域,沒有塊作用域。因此,應該避免聲明在塊內聲明變量。

        function foo() {

          for (var i=0; i < 10; i++) {

            ...  // do something with i

          }

        }

        我們應該這樣寫

        function foo() {

          var i=0;

          for (i=0; i < 10; i++) {

            ...  // do something with i

          }

        }

        所有變量應在函數的開始聲明。只有在JavaScript的下一個版本ES6中,我們可以用let關鍵詞聲明一個塊級變量。

        嚴格模式

        從ES5開始,我們可以使用嚴格模式,獲得更多的運行時錯誤檢查。例如,在嚴格模式下,所有變量都必須進行聲明。給未聲明的變量賦值拋出異常。

        我們可以通過鍵入下面的語句作為一個JavaScript文件或script元素中的第一行開啟嚴格模式:’use strict’;

        通常建議您使用嚴格模式,除非你的代碼依賴于與嚴格的模式不兼容的庫。

        不同類型的對象

        JS對象與傳統的OO/UML對象不同。它們可以不通過類實例化而來。它們有屬性、方法、鍵值對三種擴展。

        JS對象可以直接通過JSON產生,而不用實例化一個類。

        var person1 = { lastName:"Smith", firstName:"Tom"};

        var o1 = Object.create( null);  // an empty object with no slots

        對象屬性可以以兩種方式獲得:

        1、使用點符號(如在C ++/ Java的):person1.lastName = “Smith”

        2、使用MAP方式person1["lastName"] = “Smith”

        JS對象有不同的使用方式。這里有五個例子:

        1、記錄,例如,

        var myRecord = {firstName:”Tom”, lastName:”Smith”, age:26}

        2、MAP(也稱為“關聯數組”,“詞典”或其他語言的“哈希表”)v

        ar numeral2number = {“one”:”1″, “two”:”2″, “three”:”3″}

        3、非類型化對象

        var person1 = { lastName: "Smith", firstName: "Tom", getFullName: function () { return this.firstName +" "+ this.lastName; } };

        4、命名空間

        var myApp = { model:{}, view:{}, ctrl:{} };

        可以由一個全局變量形式來定義,它的名稱代表一個命名空間前綴。例如,上面的對象變量提供了基于模型 – 視圖 – 控制器(MVC)架構模式,我們有相應的MVC應用程序的三個部分。

        正常的類

        數組

        可以用一個JavaScript數組文本進行初始化變量:

        var a = [1,2,3];

        因為它們是數組列表,JS數組可動態增長:我們可以使用比數組的長度更大的索引。例如,上面的數組變量初始化后,數組長度為3,但我們仍然可以操作第5個元素 a[4] = 7;

        我們可以通過數組的length屬性得到數組長度:

        for (i=0; i < a.length; i++) { console.log(a[i]);} //1 2 3 undefined 7 `

        我們可以通過 Array.isArray(a) 來檢測一個變量是不是數組。

        通過push方法給數組追加元素:a.push( newElement);

        通過splice方法,刪除指定位置的元素:a.splice( i, 1);

        通過indexOf查找數組,返回位置或者-1:if (a.indexOf(v) > -1) …

        通過for或者forEach(性能弱)遍歷數組:

        var i=0;

        for (i=0; i < a.length; i++) {

          console.log( a[i]);

        }

        a.forEach(function (elem) {

          console.log( elem);

        })

        通過slice復制數組:var clone = a.slice(0);

        Maps

        map(也稱為“散列映射”或“關聯數組’)提供了從鍵及其相關值的映射。一個JS map的鍵是可以包含空格的字符串:

        var myTranslation = { 

        "my house": "mein Haus", 

        "my boat": "mein Boot", 

        "my horse": "mein Pferd"

        }

        通過Object.keys(m)可以獲得map中所有的鍵:

        var i=0, key="", keys=[];

        keys = Object.keys( myTranslation);

        for (i=0; i < keys.length; i++) {

          key = keys[i];

          alert('The translation of '+ key +' is '+ myTranslation[key]);

        }

        通過直接給不存在的鍵賦值來新增元素:

        myTranslation["my car"] = "mein Auto";

        通過delete刪除元素:

        delete myTranslation["my boat"];

        通過in搜索map:

        `if ("my bike" in myTranslation)  ...`

        通過for或者forEach(性能弱)和Object.keys()遍歷map:

        var i=0, key="", keys=[];

        keys = Object.keys( m);

        for (i=0; i < keys.length; i++) {

          key = keys[i];

          console.log( m[key]);

        }

        Object.keys( m).forEach( function (key) {

          console.log( m[key]);

        })

        通過 JSON.stringify 將map序列化為JSON字符串,再JSON.parse將其反序列化為MAP對象 來實現復制:

        var clone = JSON.parse( JSON.stringify( m))

        請注意,如果map上只包含簡單數據類型或(可能嵌套)數組/map,這種方法效果很好。在其他情況下,如果map包含Date對象,我們必須寫我們自己的clone方法。

        Functions

        JS函數是特殊的JS的對象,它具有一個可選的名字屬性和一個長度屬性(參數的數目)。我們可以這樣知道一個變量是不是一個函數:

        if (typeof( v) === "function") {...}

        JS函數可以保存在變量里、被當作參數傳給其他函數,也可以被其他函數作為返回值返回。JS可以被看成一個函數式語言,函數在里面可以說是一等公民。

        正常的定義函數方法是用一個函數表達式給一個變量賦值:

        var myFunction = function theNameOfMyFunction () {...}

        function theNameOfMyFunction () {...}

        其中函數名(theNameOfMyFunction)是可選的。如果省略它,其就是一個匿名函數。函數可以通過引用其的變量調用。在上述情況下,這意味著該函數通過myFunction()被調用,而不是通過theNameOfMyFunction()調用。

        JS函數,可以嵌套內部函數。閉包機制允許在函數外部訪問函數內部變量,并且創建閉包的函數會記住它們。

        當執行一個函數時,我們可以通過使用內置的arguments參數,它類似一個參數數組,我們可以遍歷它們,但由于它不是常規數組,forEach無法遍歷它。arguments參數包含所有傳遞給函數的參數。我們可以這樣定義一個不帶參數的函數,并用任意數量的參數調用它,就像這樣:

        var sum = function () {

          var result = 0, i=0;

          for (i=0; i < arguments.length; i++) {

            result = result + arguments[i];

          }

          return result;

        };

        console.log( sum(0,1,1,2,3,5,8));  // 20

        prototype原型鏈可以訪問函數中的每一個元素,如Array.prototype.forEach(其中Array代表原型鏈中的數組的構造函數)。

        var numbers = [1,2,3];  // create an instance of Array

        numbers.forEach( function (n) {

          console.log( n);

        });

        我們還可以通過原型鏈中的prototype.call方法來處理:

        var sum = function () {

          var result = 0;

          Array.prototype.forEach.call( arguments, function (n) {

            result = result + n;

          });

          return result;

        };

        Function.prototype.apply是Function.prototype.call的一個變種,其只能接受一個參數數組。

        立即調用的JS函數表達式優于使用純命名對象,它可以獲得一個命名空間對象,并可以控制其變量和方法哪些可以外部訪問,哪些不是。這種機制也是JS模塊概念的基礎。在下面的例子中,我們定義了一個應用程序,它對外暴露了指定的元素和方法:

        myApp.model = function () {

          var appName = "My app's name";

          var someNonExposedVariable = ...;

          function ModelClass1 () {...}

          function ModelClass2 () {...}

          function someNonExposedMethod (...) {...}

          return {

            appName: appName,

            ModelClass1: ModelClass1,

            ModelClass2: ModelClass2

          }

        }();  // immediately invoked

        定義和使用類

        類是在面向對象編程的基礎概念。對象由類實例化而來。一個類定義了與它創建的對象的屬性和方法。

        目前在JavaScript中沒有明確的類的概念。JavaScript中定義類有很多不同的模式被提出,并在不同的框架中被使用。用于定義類的兩個常用的方法是:

        構造函數法,它通過原型鏈方法來實現繼承,通過new創建新對象。這是Mozilla的JavaScript指南中推薦的經典方法。

        工廠方法:使用預定義的Object.create方法創建類的新實例。在這種方法中,基于構造函數繼承必須通過另一種機制來代替。

        當構建一個應用程序時,我們可以使用這兩種方法創建類,這取決于應用程序的需求 。mODELcLASSjs是一個比較成熟的庫用來實現工廠方法,它有許多優點。(基于構造的方法有一定的性能優勢)

        ES6中構造函數法創建類

        在ES6,用于定義基于構造函數的類的語法已推出(新的關鍵字類的構造函數,靜態類和超類)。這種新的語法可以在三個步驟定義一個簡單的類。

        基類Person 定義了兩個屬性firstName 和lastName,以及實例方法toString和靜態方法checkLastName:

        class Person {

          constructor( first, last) {

            this.firstName = first;

            this.lastName = last;

          }

          toString() {

            return this.firstName + " " +

                this.lastName;

          }

          static checkLastName( ln) {

            if (typeof(ln)!=="string" || 

                ln.trim()==="") {

              console.log("Error: " +

                  "invalid last name!");

            }

          }

        }

        類的靜態屬性如下定義:

        Person.instances = {};

        一個子類定義的附加屬性和可能會覆蓋超類的方法:

        class Student extends Person {

          constructor( first, last, studNo) {

            super.constructor( first, last);

            this.studNo = studNo; 

          }

          // method overrides superclass method

          toString() {

            return super.toString() + "(" +

                this.studNo +")";

          }

        }

        ES5中構造函數法創建類

        在ES5,我們可以以構造函數的形式定義一個基于構造函數的類結構,下面是Mozilla的JavaScript指南中推薦的編碼模式。此模式需要七個步驟來定義一個簡單的類結構。由于這種復雜的模式可能很難記住,我們可能需要使用cLASSjs之類的庫來幫助我們。

        首先定義構造函數是隱式創建一個新的對象,并賦予它相應的值:

        function Person( first, last) {

          this.firstName = first; 

          this.lastName = last; 

        }

        這里的this指向新創建的對象。

        在原型中定義實例方法:

        Person.prototype.toString = function () {

          return this.firstName + " " + this.lastName;

        }

        可以在構造函數中定義靜態方法,也可以用.直接定義:

        Person.checkLastName = function (ln) {

          if (typeof(ln)!=="string" || ln.trim()==="") {

            console.log("Error: invalid last name!");

          }

        }

        定義靜態屬性:

        Person.instances = {};

        定義子類并增加屬性:

        function Student( first, last, studNo) {

          // invoke superclass constructor

          Person.call( this, first, last);

          // define and assign additional properties

          this.studNo = studNo;  

        }

        通過Person.call( this, …) 來調用基類的構造函數。

        將子類的原型鏈改為基類的原型鏈,以實現實例方法的繼承(構造函數得改回來):

        // Student inherits from Person

        Student.prototype = Object.create( 

            Person.prototype);

        // adjust the subtype's constructor property

        Student.prototype.constructor = Student;

        通過Object.create( Person.prototype) 我們基于 Person.prototype創建了一個新的對象原型。

        定義覆蓋基類方法的子類方法:

        Student.prototype.toString = function () {

          return Person.prototype.toString.call( this) +

              "(" + this.studNo + ")";

        };

        然后通過new關鍵字來實例化一個類

        var pers1 = new Person("Tom","Smith");

        JavaScript的prototype

        prototype是函數的一個屬性(每個函數都有一個prototype屬性),這個屬性是一個指針,指向一個對象。它是顯示修改對象的原型的屬性。

        __proto__是一個對象擁有的內置屬性(prototype是函數的內置屬性。__proto__是對象的內置屬性),是JS內部使用尋找原型鏈的屬性。

        每個對象都有個constructor屬性,其指向的是創建當前對象的構造函數。

        您準備好了嗎?
        稱呼: 手機:
        或撥打:1500-1888-798
      1. 上海小程序制作

        微信公眾號

      2. 網站制作

        客服微信號

      3. 業務咨詢 1500-1888-798

        (7*24) 小時貼心服務

        在線咨詢
        關于宿橙 COPYRIGHT ? 2008-2020 上海宿橙網絡技術有限公司 ALL RIGHTS RESERVED滬ICP備14017448號-10

        地址:上海市嘉定區鶴旋路58號816室(江橋萬達廣場8號寫字樓)

        售前咨詢1500-1888-798
        通過微信掃碼聯系客服
        Top 免费观看院线电影app欧美_成年AV漫画在线观看_国内大学生自拍在线播放_日韩国产欧美AV

        <td id="ms32e"></td>

          <sub id="ms32e"></sub>