<nav id="camkq"><strong id="camkq"></strong></nav>
  • <xmp id="camkq"><menu id="camkq"></menu>
  • <nav id="camkq"></nav><nav id="camkq"></nav>

    JS基本語法

    文章熱詞:JS,JavaScript

    日期:2019-03-01 15:12 by Mr. Yang 3383 0 收藏
    我要分享

    摘要:JavaScript一種直譯式腳本語言,是一種動態類型、弱類型、基于原型的語言,內置支持類型。廣泛用于客戶端的腳本語言,最早是在HTML(標準通用標記語言下的一個應用)網頁上使用,用來給HTML網頁增加動態功能。

    1.基礎

    1.1.變量聲明????1.1.1?關鍵字var?儲存數據的內存空間1.2.數據類型????1.2.1?基本數據類型?;?number?string?boolean?null?undefined
    ????1.2.2?復雜數據類型?object?function1.3.類型檢測
    ????1.3.1?typeof?檢測基本數據類型??(語法:typeof?變量||字面量)
    ????????數字類型返回?"number"?字符串返回"string"?boolean返回"boolean"
    ????????復雜數據類型統一返回object?
    ????????特殊?null返回object??function返回function
    ????1.3.2?instancof?判斷對象的實例?
    ????????語法:實例對象?instancof?構造函數
    ????????返回值?true?||?false
    ????1.3.3?constructor??返回對象的構造函數
    ????????語法:obj.constructor?
    ????????返回構造函數名
    ????1.3.4?Object.prototype.toString.call();
    ????????字符串返回:"[object?String]"
    ????????數字返回:"[object?Number]"????????null返回:"[object?Null]"????????undefined返回:"[object?Undefined]"????????object返回:"[object?Object]"????????boolean返回:"[object?Boolean]"
    ????????數組返回:"[object?Array]"
    1.4?類型轉換
    ????1.4.1?轉換成number??方法:Number()、parseInt()?、parseFloat()?通過運算符轉換?轉換不成功返回NAN
    ????1.4.2?轉換成:string??方法:.toString()、String、通過字符串拼接?+
    ????1.4.3?boolean??Boolean()?、!!取反?
    ????????值得注意的是?:0?''?null?undefined?NaN?//會轉換成false??其它都會轉換成true1.5?操作符
    ????1.5.1?算術運算符?+-/*?
    ????1.5.2?一元運算符?++?--?!
    ????1.5.3?賦值運算符?=?+=?-+?/+?*+
    ????1.5.4?邏輯運算符?&&?||?
    ????1.5.5?關系運算符??>?<?>=??<=
    ????1.5.6?相等運算==?!=?!==?===
    ????1.5.7?優先級?()?>?一元>?算術?>?關系?>?邏輯(先&&后||)?>?賦值
    ????不同類型直接操作符號隱式轉換
    ????????轉換規則:
    ??????????????????有數字或者boolean?轉數字比較?(++?--?運算符相當于加一?減一所以是轉成數字)
    ???????????????????沒有數字和bool?有字符串?轉換成字符串
    ???????????????復雜數據類型比較地址
    ????????????其中值得注意是?等等?和?全等的比較轉換??????????????????????x????????????????????y????????????????????=?=???????=?=?=??
    
    ????????????????????0????????????????????false????????????????true?????false
    ????????????????????""???????????????????false????????????????true?????false
    ????????????????????""???????????????????0????????????????????true?????false
    ????????????????????"0"??????????????????0????????????????????true?????false
    ????????????????????"17"?????????????????17???????????????????true?????false
    
    ????????????????????null?????????????????undefined????????????true?????false
    ????????????????????null????????????????0????????????????????false????false
    ????????????????????null?????????????????false????????????????false????false
    ????????????????????undefined????????????false????????????????false????false
    ????????????????????0????????????????????NaN??????????????????false????false
    ????????????????????"foo"????????????????NaN??????????????????false????false
    ????????????????????NaN??????????????????NaN??????????????????false????false
    
    ????????????????????1.?null?==?undefined??返回的是true
    ????????????????????2.?null?和undefined?和其他類型判斷相等的時候,不轉換類型
    ????????????????????3.?一般只要有NaN參與的運算,返回都是NaN?NaN轉換成boolean?是false??.??NaN?!=?NaN?返回的是true;
    ????
    1.6?流程控制語句
    ????1.6.1?分支結構
    ??????????1:if(){...}else?{..}???????????2.switch?(){????????????case?value:?????????????break;?????????????default:??????????????break;
    ???????????}????1.6.2?三元運算?
    ????????語法:?條件??表達式1?:表達式2
    ????1.6.3?循環語句?????????for(var?i=0;i<10;i++){?循環體?}????????for(var?key?in?obj){}????????while(條件){循環體?}???????do{?循環體?}while?(?條件);??//至少執行一次
    ???????1.7?數組????1.7.1?創建數組??????????1、字面量var?arr?=?[];??????????2、構造函數?var?arr?=?new?Array();????1.7.2.數組操作
    ??????????通過下標??增刪改1.8?函數????1.8.1?函數三要素??函數名?參數?返回值????1.8.2.聲明????
    ????????1.字面量?var?fn?=?function(a,b,c){return}
    ????????2.函數聲明??function?fn(){}
    ????????3.函數調用????函數名()????????arguments對象??每個函數內部都有一個arguments對象與形參對象?成映射關系
    1.9.對象
    ????1.9.1.概念:一類事物的抽象,在編程語言中理解成無序的屬性和方法的結合
    ?????????創建對象
    ?????????????1.字面量?var?obj?=?{};?????????????2.內置構造函數?var?obj?=?new?Object();????????????3.工廠模式?
    ????????????????語法:function?createP(name,?age)?{????????????????????????var?o?=?new?Object();
    ????????????????????????o.name?=?name;
    ????????????????????????o.age?=?age;
    ????????????????????????o.sayUrl=?function()?{
    ???????????????????????????alert(this.age);
    ????????????????????????}????????????????????????return?o;
    ????????????????????????}????????????????????var?obj?=?createP("OTT","18");????????????4.自定義構造函數
    ????????????????語法:function?P(name?,age){????????????????????this.name?=?name;????????????????????this.age?=?age;
    ????????????????}
    ???????????行內約定:一般來說構造函數首字母大寫?
    ????1.9.2?屬性操作?????????1.通過?點語法?中括號語法操作????
    ????????????obj.name?或者?obj["name"]?????????2.delete?obj.key?刪除對象屬性1.10.內置對象????1.10.1?Array?數組的方法
    ????????array.push(value);//將一個或多個元素添加到數組的結尾,返回length
    ????????array.pop();//從數組中刪除最后一個元素?改變了數組的長度??返回被刪除的元素
    ????????array.unshift(value);//將一個或多個元素添加到數組的開頭?返回length
    ????????array.shift();//從數組中刪除第一個元素,改變了數組的長度?返回被刪除的元素
    ????????array.reverse();//翻轉數組,返回翻轉過的數組?原數組不變
    ????????array.sort();//默認排序順序是根據字符串Unicode碼點?可以傳函數.sort(function?(a,b){return?});返回值<=0?位置不變?返回值大于0?交換位置??原數組發生改變
    ????????concat:數組合并,不會影響原來的數組,會返回一個新數組
    ????????join(str);以str將數組連接成字符串?
    ????????slice(begin,?end):復制數組的一部分到一個新數組,并返回這個新數組
    ????????splice(begin,num,val);?在begin位置刪除num個元素?并將val填補到該位置??返回被踢除的元素?原數組發生改變
    ????????forEach(function(ele,i){?});遍歷數組的每一項?無返回值
    ????????map(function(ele,i){?});為數組的每項執行回調函數并將返回值存到數組?返回這個數組?原數組不變?(注意不會忽略數組的?空項(值為null?undefined...)?實際上數組的內置對象都不會忽略空項目)
    ????????filter(functiong(?ele?,i){});為數組的每項執行回調函數并將返回值為true的項目?存到數組?返回這個數組?原數組不變
    ????????reduce(functin(a,b){?return?a;},a);為數組的每項執行回調函數?并將a帶入到下次循環?最后返回a??如果不傳參數那么默認是前一項?原數組不變????1.10.2?String?對象
    ????????charAt("要查詢的字符")????????//獲取指定位置處字符
    ????????charCodeAt(index)??????//獲取指定位置處字符的ASCII碼
    ????????indexOf:獲取某個字符第一次出現的位置,如果沒有,返回-1
    ????????lastIndexOf:從后面開始查找第一次出現的位置。如果沒有,返回-1
    ????????trim();//去除字符串兩邊的空格,內部空格不會去除
    ????????toUpperCase()//全部轉換成大寫字母
    ????????toLowerCase()//全部轉換成小寫字母
    ????????concat字符串拼接返回新的字符串?一般都用?+?號
    ????????slice(start,end)包含頭不包含尾返回一個新的字符串,end為負值從后往前??原字符串不變?
    ????????substring(start,end)包含頭,不包含尾?返回一個新的字符串?原字符串不變
    ????????substr(從start開始,截取length個字符)(推薦)
    ????????split:將字符串分割成數組,原字符串不改變(很常用)
    ????????replace(searchValue,?replaceValue)//參數:searchValue:需要替換的值????replaceValue:用來替換的值
    ????1.10.3?Data?日期對象?創建:var?d?=?new?Data();或者?Data.now();
    ????????d.getTime()????????//?返回毫秒數和valueOf()結果一樣,valueOf()內部調用的getTime()
    ????????d.getMilliseconds()?
    ????????getSeconds()??//?返回0-59
    ????????getMinutes()??//?返回0-59
    ????????getHours()????//?返回0-23
    ????????getDay()??????//?返回星期幾?0周日???6周6
    ????????getDate()?????//?返回當前月的第幾天
    ????????getMonth()????//?返回月份,***從0開始***
    ????????getFullYear()?//返回4位的年份??如?2016
    ????1.10.4?Math?算術對象????????Math.PI????????//?圓周率
    ????????Math.random()//?生成隨機數
    ????????Math.floor()/Math.ceil()//?向下取整/向上取整
    ????????Math.round()//?取整,四舍五入
    ????????Math.abs()????//?絕對值
    ????????Math.max()/Math.min()//?求最大和最小值
    ????????Math.sin()/Math.cos()?//?正弦/余弦
    ????????Math.power()/Math.sqrt()?//?求指數次冪/求平方根
    ????內置對象中Math是對象?而其他的是構造函數?需要用new構建????
    1.11?值類型與引用類型?????1.值類型:簡單類型,變量在存儲的時候,存儲的是值本身????2.引用類型:復雜類型,變量在存儲的時候,存儲的是對象的地址

    2.面向對象編程

    3.1.基本概念????3.1.1.什么是對象?
    ????????我們常說萬物皆對象,很籠統,在計算機中最早在c語言中把具有特定長度的類型,稱作為對象類型;后來我們說內存中的一塊有效區域叫對象;
    ????????我把對象理解成具有某些屬性和方法的變量?而創造出這些變量的抽象叫做類????3.1.2.什么是面向對象?
    ????????面向對象是一種思想,通過調用對象的某種方法和屬性來完成某件事情,當然這個對象是我們創造出來的,我們把可能在多個地方會使用的到的功能賦給對象,在調用????3.1.3.特性????
    ????????1.封裝性??只需要關注對象提供的方法如何使用,而不需要關心對象對象的內部具體實現????????2.繼承??一個對象沒有的一些屬性和方法,另外一個對象有,拿過來用,就實現了繼承????????3.多態?指在一棵繼承樹中的類中可以有多個同名但不同方法體以及不同形參的方法。多態有兩種情況:覆蓋和重載3.2.創建的方式????3.2.1.內置構造函數Object
    ????????var?obj?=?new?Object();????3.2.2.對象字面量????????var?obj?=?{};????3.2.3.工廠函數
    ???????本質上就是函數內?返回對象????????function?p?(x,y){????????????retrun?{name?:?x,age?:?y}
    ????????}????3.2.4.自定義構造函數
    ????????行內通約:首字母大寫
    ????????構造函數一定要使用new關鍵字????????????1.new?的作用????
    ????????????????在內存中開辟空間(對象obj)
    ????????????????調用構造函數
    ????????????????讓構造函數的this指向新的對象??本質上就是在構造函數中var?this?=?obj;
    ????????????????返回?this3.3.原型????3.3.1.原型基本概念prototype????????1.prototype是一個對象????????2.所有函數自帶prototyoe屬性????????3.作用:存儲公共方法????3.3.2.構造函數、原型、實例的關系????????1.實例化對象能夠訪直接問構造函數的prototype????????2.構造函數的.prototype?==?實例的.__proto__???原型的constructor?指向構造函數????3.3.3.__proto__屬性?原型連????????1.所有對象都有?__proto__?指向構造函數的prototype????????2.構造函數的.prototype?==?實例的.__proto__??例Array.prototype?==?[].__proto__????3.3.4.屬性查找原則????????1先在自身尋找
    ????????????當實力具有某個屬性時自動屏蔽原型對應屬性?哪怕屬性值為null?通過delete操作符完全刪除屬性重新指向原型????????2.找不到再沿著__proto__一直往上找?找不到返回undefined
    ????3.3.5.constructor屬性????????1.原型對象prototype?包含constructor?指向構造函數3.4.原型鏈????3.4.1.原型鏈基本概念
    ????????對象的原型和原型的連接????????Object是頂層對象的構造函數?Object.prototype.__proto__?==null
    ????????3.4.2.Object.prototype成員????????1.constructor??指向了Object?構造函數????????2.對象.hasOwnProperty(屬性)??判斷某個屬性是否來自實例?????????????1.""屬性""in""對象""?in操作符只要通過對象能夠訪問的可枚舉的屬性就返回?true
    ????????3.構造函數.prototype.isPrototypeOf(對象)??確定原型和實例之間是否存在關系????????4.對象.propertyIsEnumerable(屬性名)?判斷對象的屬性是否可枚舉?
    ????????????注意:只能判斷自身屬性,原型上的需要用.__proto__.propertyIsEnumerable();
    ????????????設置不可枚舉屬性?Object.defineProperty(對象,屬性,{value?:?"",enumerable?:?false})???????????5.A.isPrototypeof(B),判斷A是否在B的原型鏈上???????????6.toString()??當對象需要隱式轉換時系統自動調用??返回值?[object?類型]
    ????????????常用Object.prototype.toString.call("");做類型判斷????????7.toLocaleString()?在沒重寫的情況下跟toString一樣?內置對象Date?String?..重新了次方法????????8.valueOf()?返回?將對象轉換成簡單類型?如果轉換不成功?再次調用toString????3.4.3.Object?內置方法(?函數也是對象也可以內置方法)????????1.Object.keys(對象)返回一個包含所有可枚舉屬性的字符串數組???????????2.Object.getOwnPropertyNames()返回實例的所有屬性?無論是否可以枚舉????????3.Object.getPrototypeOf(對象)?返回對象的原型????3.4.4.instanceof運算符??判斷對象是否是構造函數的實例

    3.函數

    6.1.定義函數的三種方式 ? ?6.1.1.字面量 var fn = function (){} ? ?6.1.2.表達式 function fn(){} ? ?6.1.3.構造函數式:(作用 執行字符串形式的代碼 ) ? ? ? ?//參數 (arg1,arg2....,函數體) 當只有一個參數式默認為函數體

    ????????//所有參數都必須是字符串
    ????var?fn?=?new?Function(""a"",""a"",""console.log(a+b)"");
    ????匿名函數自調用?原理將函數變成表達式
    ????(function?(){})();
    ????(function?(){}());
    ????!function?(){}();?//通過運算符將匿名行數變成表達式6.2.eval?的介紹????6.2.1?作用?
    ????????1.將字符串當代碼執行????????2.將json數據轉換成js代碼????6.2.2?利用eval?執行字符串的特性?將JSON數據轉換成js對象????????eval(""(""+json+"")"");????6.2.3.JSON介紹
    ????????概念:JSON是數據格式?用于多語言交換
    ????????對象轉換成JSON?JSON.stringify(對象)?返回json字符串????????JSON.parse(json)?返回js對象6.3.函數調用this指向????6.3.1?函數調用模式??當函數被調用this指向window
    ????????格式?:?函數名();????6.3.2?方法調用模式??當函數是某個對象的方法this指向該對象
    ????????格式?:?obj.fn();????6.3.3.?構造函數調用模式??this指向新對象
    ????????格式??var?obj?=?new?函數名();????6.3.4.?方法借調模式?call?apply?bind?????????1.?call?作用:?調用函數并指定this指向?
    ????????????????格式:fn.call(this,arg1,agr2...);?第一個參數如果沒有那就是指向window?后面的參數規則和函數一致?????????2.?偽數組?擴展
    ????????????????特點?1、有length屬性?
    ?????????????????????2、有下標屬性?0?1?2?3....??????????????????????3、不能用數組的方法
    ???????????????????借調數組push方法??????????????????????????Array.prototype.push.call(偽數組,“參數”);
    ??????????????????????????;[].join.call(偽數組,""-"");????????3.apply?
    ????????????參數:第一個參數是?this指向
    ??????????????第二個參數是實參數組?哪怕只有一個實參也必須實參????????4.bind?給函數綁定一個this指向?原函數this指向不變?返回一個指定this的新函數
    ????????????格式:var?newfn?=?fn.bing(obj);6.4?函數也是對象????1.Function.prototype?==?fn.__proto__;
    ????????fn.__proto__.__proto__==?Object.prototype;
    ????函數頂層?Funtion.__proto__?==?Funtion.prototype6.5?Function.prototype成員????1.arguments?實參列表?偽數組?
    ????2.length?函數形參的長度????3.name?函數名?函數定義以后不可更改????4.caller?返回函數?位于哪個函數中6.6?預解析????6.6.1?鋪墊??
    ????????1.?字面量:(直接量)?從字面能看出值和類型?55?“55”true?[]?{}????????2.變量:?必須要聲明才能使用的存數值的內存空間
    ????????????***瀏覽器可以直接字面量?而不需要提前聲明????6.6.2?作用?目的????????1.把變量和函數提升到作用域的頂端????????2.開辟存儲空間?存儲變量????6.7.3.規則?
    ????????????1.全局????????????????1、將變量聲明提升?賦值不提升?同名覆蓋????????????????2、將函數聲明?提升整個函數體?同名覆蓋????????????????3、執行代碼?執行過程中忽略所有聲明?直接賦值????????????2.函數?形成在函數執行前?執行結束釋放空間????????????????1、將變量聲明和形參提升?賦值不提升?同名覆蓋????????????????2、將形參數和實參值相統一????????????????3、將函數聲明?提升整個函數體?同名覆蓋????????????????4、執行代碼?執行過程中忽略所有聲明?直接賦值6.7?作用域與作用域鏈????6.7.1?鋪墊?:
    ????????全局變量?:定義在全局的變量?全局都可以訪問
    ????????局部變量:定義的函數體內部的變量?只有在函數體內可以訪問????6.7.2.作用域概念
    ????????????作用域是一條規則?決定變量定義存儲在哪里?
    ????????????查找變量時在自身作用域鏈上查找????6.7.3.作用域鏈????????1、多層嵌套函數形成的鏈式關系????????2、作用?存儲自身可訪問的變量范圍????????3、變量查找原則?現在自身作用域查找?查找不到在去自己是作用域鏈上查找????????4、當整個作用域鏈都沒有時候????????????1、如果是調用則報錯????????????2、如果是賦值操作?那么就在全局創建一個變量并賦值(隱式全局)6.8?詞法作用域????6.8.1?又叫?靜態作用域?
    ?????????在函數聲明時作用域已經確定?跟函數的調用無關6.9?遞歸函數????1.概念?:?函數內部直接或者間接調用自己叫遞歸????2.注意?:?遞歸一定要有出口[結束條件]?否則超出最大調用棧6.10?閉包????1.?概念?將函數A內部的函數B保存到A的外部形成閉包
    ????????格式?當一個函數被保存到外部時一定產生閉包????????function?fn1(){????????????var?num?=?1;????????????function?fn2(){
    ?????????????????num++;????
    ????????????????}????????????return?f2;
    ????????}????????var?temp?=?fn1();????2?作用?將函數內部的變量保存到函數外部使用????3?內存問題??垃圾回收
    ??????????引用計數?當一個引用類型有零個指針指向的時候?系統會自動回收
    ????????環境標記?進入環境是標記

    4.正則表達式

    7.1.正則創建 ? ?7.1.1.概念 : 用于匹配規則的表達式 ? ?7.1.2.作用 :字符串校驗 ? ?7.1.3.創建? ??

    ????????7.1.3.1?構造函數?var?reg?=?new?RegExp(/\d/,g);????????7.1.3.2?字面量?var?reg?=?/^\d/g;7.2.元字符????7.2.1?.?除了換行和回車以外的任意字符[^\n]????7.2.2?\.?匹配?.????7.2.3?\d?所有的數字字符[0-9]????7.2.4?\D?所有的非數字字符[^0-9]????7.2.5?\w?所有的單詞字符?[a-zA-Z0-9_]????7.2.6?\W?所有的非單詞字符[^a-zA-Z0-9_]????7.2.7?\s?空字符?[\t?\n?空格]????7.2.8?\S?非空字符[^\t\n]????7.2.9?|或優先級最低?()表達式優先級最高?[]一個字符的范圍????????7.2.10?[^]非?^開始??$結束????/^abc$/精確匹配?必須是同一個單詞????7.2.11.量詞
    ????????*??0次或0次以上?{0,}
    ???????????+??1次或1次以上?{1,}
    ???????????0次或者1次???{0,1}
    ????????{n,m}??出現n到m次
    ????????()?$1?$2?表示表達式匹配到的項7.3.正則匹配????7.3.1.reg.test(str);????7.3.2.參數
    ????????g?全局匹配?global
    ????????i忽略大小寫ignore7.4.字符串方法????7.4.1.str.replace(//g,"""");
    ????7.5.正則提取
    ????????????str.match(reg)?返回數組


    下一篇:常用的Meta標簽寫法和作用


    評論