JavaScript基礎(chǔ)

1. 本文是在學(xué)習(xí)廖雪峰先生的JavaScrip教程 后的歸納
2. 本文是第一次采用markdown進(jìn)行書寫
  1. JavaScript簡介
    • 網(wǎng)景公司 Brendan Eich 10天內(nèi)設(shè)計(jì)出了JavaSrcipt
    • JavaScript 和 Java沒有任何關(guān)系，當(dāng)時(shí)，借Java名聲而已
    • ECMAScript是一個(gè)語言標(biāo)準(zhǔn)
    • 最新版ECMAScript 6標(biāo)準(zhǔn)發(fā)布于2015年6月
    • 核心語法為沒有多大變化，ES6增加部分新特性
  2. JavaScript的引用和調(diào)試
    • 引用
      • 常嵌入<head>里,在Html文件中直接寫<script>...</script>
      • JavaScript放入一個(gè)單獨(dú)的.js文件,然后在HTML中通過<script src="..."></script>
    • 調(diào)試
      • Chrome F12 Chrome自帶調(diào)試工具，不錯(cuò)的調(diào)試工具
      • FireBug FireFox 強(qiáng)大的調(diào)試插件，有點(diǎn)卡
    • 開發(fā)工具
      • 文本工具: Sublime Text, NotePad++,Vim等
      • IDE: WebStorm,Eclipse
  3. 基本語法
    • 每個(gè)語句以;結(jié)尾，語句塊以{..}，另;可以省略但不建議省略
    • "Hello World!" 這樣寫仍然可以視為一個(gè)完整語句
    • var x=1; var y=2; 不建議一行多語句
    • {...}可以嵌套,大括號內(nèi)語句具有縮進(jìn),通常為4個(gè)空格，有助于理解代碼層次
    • 單號注釋 // 塊注釋 /**/
    • JavaScript 嚴(yán)格區(qū)分大小寫
  4. 數(shù)據(jù)類型、運(yùn)算符、變量
    • Number類型
      • JavaScript不區(qū)分整數(shù)和浮點(diǎn)數(shù)
        123; 整數(shù) 0.456;小數(shù) 1.234e3;科學(xué)計(jì)數(shù)法 -99; 負(fù)數(shù) NaN; 不是Number Infinity; 無限大
      • 運(yùn)算符: +、-、*、/、% (求余)
    • 字符串
      • '' 或 "" 表示字符串
    • 布爾值
      • true false
      • 用表達(dá)式表示布爾值,如1>2
      • && || !
    • 比較運(yùn)算符
      • 常見運(yùn)算符: >、>=、==、<=
      • JavaScript 允許對任意數(shù)據(jù)類型進(jìn)行比較
      • 兩種相等運(yùn)算符:
        使用==時(shí)，會(huì)自動(dòng)轉(zhuǎn)換數(shù)據(jù)類型再比較
        使用===時(shí)，它不會(huì)自動(dòng)轉(zhuǎn)換數(shù)據(jù)類型，如果數(shù)據(jù)類型不一致，返回false，如果一致，再比較。
      • 由于JavaScript這設(shè)計(jì)形式,建議使用===比較
      • 特例：NaN 與所有其他值都不相等，包括他自己:即NaN===NaN;(false)
      • 唯一判斷NaN的方法是通過isNaN()函數(shù) isNaN(NaN)
      • 浮點(diǎn)數(shù)比較,由于浮點(diǎn)數(shù)在運(yùn)算過程中會(huì)產(chǎn)生誤差,計(jì)算機(jī)無法精確表示無限循環(huán)小數(shù),要比較兩個(gè)浮點(diǎn)數(shù)是否相等,只能計(jì)算它們之差的絕對值，看是否小于某個(gè)閾值，如Math.abs(1 / 3 - (1 - 2 / 3)) < 0.0000001; // true
    • null 和 undefined
      • null 表示一個(gè)空的值,它和0以及空字符串''不同，0是一個(gè)數(shù)值，''表示長度為0的字符串，而null表示“空”。與Java等語言的null值類似
      • JavaScript的設(shè)計(jì)者希望用null表示一個(gè)空的值，而undefined表示值未定義。大多數(shù)情況下，應(yīng)該使用null
      • 詳細(xì)區(qū)別可以參照：阮一峰 undefined與null的區(qū)別
    • 數(shù)組
      • 數(shù)組是一組按順序排列的集合，集合的每個(gè)值稱為元素。JavaScript的數(shù)組可以包括任意數(shù)據(jù)類型。
      • 數(shù)組用[]表示，元素之間用,分隔。
      • 創(chuàng)建數(shù)組的方法： 通過Array()函數(shù)實(shí)現(xiàn)或直接使用
      • 數(shù)組的元素可以通過索引來訪問，索引起始值為0
    • 對象
      • JavaScript的對象是一組由key-value組成的無序集合,例如:
        var person = { name: 'Bob', age: 20, tags: ['js', 'web', 'mobile'], city: 'Beijing', zipcode: null };
      • JavaScript對象的鍵都是字符串類型，值可以是任意數(shù)據(jù)類型。
      • 通過對象變量.屬性名獲取對象的值
    • 變量
      • 變量名： a-z,A-Z,0-9,$,_來組成，且數(shù)字不能開頭
      • 變量名：不能是JavaScript的關(guān)鍵字
      • 變量名可以是中文，但盡量不要這樣做
      • = 為變量賦值
      • 可以把任意數(shù)據(jù)類型賦值給變量，同一個(gè)變量可以反復(fù)賦值，而且可以是不同類型的變量，但是要注意只能用var申明一次
      • 變量本身類型不固定的語言稱之為動(dòng)態(tài)語言，與之對應(yīng)的是靜態(tài)語言。靜態(tài)語言在定義變量時(shí)必須指定變量類型，如果賦值的時(shí)候類型不匹配，就會(huì)報(bào)錯(cuò)。Java即為靜態(tài)語言。動(dòng)態(tài)語言更靈活即基于此
      • 把賦值語句的等號等同于數(shù)學(xué)的等號
    • strict模式
      • 引入strict 模式的原因： 如果一個(gè)變量沒有通過var申明就被使用，那么該變量就自動(dòng)被申明為全局變量
      • 使用var聲明的變量，則被限制在聲明變量的函數(shù)體內(nèi)
      • 后續(xù)的ECMAScript標(biāo)準(zhǔn)推出了strict模式，即強(qiáng)制通過var聲明變量，為聲明則報(bào)錯(cuò)
      • 啟用strict模式，在javascript的第一行加入'use strict';
      • 建議采用strict模式
  5. 字符串
    • 字符串表示形式
      • 采用''或""表示字符串
      • 轉(zhuǎn)義字符:\ 例如:'I\'m OK!',\n,\t,\\
      • ASCII字符可以用\x##形式表示,如\x41 //等同于'A'
      • \u####表示一個(gè)Unicode字符
      • 多行字符串用...表示,如
        `這是一個(gè)
        多行字
        符串`
    • 常用字符串操作
      var s ="Hello, World!"; s.length;//13
      • length 獲取字符串的長度
      • 字符串可以通過指定的下標(biāo)來獲取相關(guān)的字符值,如s[n] 例如:s[0];//'H'
      • 字符串是固定的，不可通過某個(gè)索引賦值,雖不會(huì)有錯(cuò)，但不會(huì)改變值
      • JavaScript為字符串提供了很多方法,調(diào)用這些方法不會(huì)改變原有的字符串的值，而是生成一個(gè)新字符串
      • toUpperCase()　字符串變成大寫
      • toLowerCase() 字符串變成小寫
      • indexOf() 返回第一個(gè)指定字符串的所在的索引值,沒有返回-1
      • substring() 返回指定的索引區(qū)間的子串
      • 字符串方法匯總
方法 說明
charAt() 返回指定索引位置的字符
charCodeAt() 返回指定索引位置字符的Unicode值
concat() 連接兩個(gè)或多個(gè)字符串，返回連接后的字符串
fromCharCode() 將字符轉(zhuǎn)換為Unicode值
indexOf() 返回字符串中檢索指定字符第一次出現(xiàn)的位置
lastIndexOf() 返回字符串中檢索指定字符最后一次出現(xiàn)的位置
localeCompare() 用本地特定的順序來比較兩個(gè)字符串
match() 找到一個(gè)或多個(gè)正則表達(dá)式的匹配
replace() 替換與正則表達(dá)式匹配的子串
search() 檢索與正則表達(dá)式相匹配的值
slice() 提取字符串的片斷，并在新的字符串中返回被提取的部分
split() 把字符串分割為子字符串?dāng)?shù)組 例如["hello".split("")可以直接將字符串轉(zhuǎn)變成Char數(shù)組]
substr() 從起始索引號提取字符串中指定數(shù)目的字符
substring() 提取字符串中兩個(gè)指定的索引號之間的字符
toLocaleLowerCase() 根據(jù)主機(jī)的語言環(huán)境把字符串轉(zhuǎn)換為小寫，只有幾種語言（如土耳其語）具有地方特有的大小寫映射
toLocaleUpperCase() 根據(jù)主機(jī)的語言環(huán)境把字符串轉(zhuǎn)換為大寫，只有幾種語言（如土耳其語）具有地方特有的大小寫映射
toLowerCase() 把字符串轉(zhuǎn)換為小寫
toString() 返回字符串對象值
toUpperCase() 把字符串轉(zhuǎn)換為大寫
trim() 移除字符串首尾空白
valueOf() 返回某個(gè)字符串對象的原始值
  1. 數(shù)組
    • Array 簡介
      • JavaScript的Array可以包含任意數(shù)據(jù)類型,并通過索引來訪問每個(gè)元素
      • Array 通過屬性length獲取Array的長度,直接給Array的length賦值會(huì)導(dǎo)致Array大小的變化
      • Array 可以通過索引把對應(yīng)的元素修改為新值,如果通過索引賦值超過了范圍,同樣會(huì)引起Array大小的變化
        var arr=[1,2,3]; arr[5]='x'; arr;//arr變成[1,2,3,undefined,undefined,'x']
      • 大多數(shù)的編程語言不允許直接改變數(shù)組的大小,越界會(huì)報(bào)錯(cuò),而JavaScript的Array卻不會(huì)報(bào)錯(cuò),但不建議直接修改Array的大小,訪問索引時(shí),要確保索引不越界
    • Array的常用方法
      • indexOf Array也可以通過indexOf()來搜索一個(gè)指定元素的位置
      • slice() 對應(yīng)字符串的substring()版本,截取Array的部分元素,然后返回一個(gè)新的Array,例:arr.slice(0,3) 從索引0到2,不包括索引3,arr.slice(3),從索引3到結(jié)束
      • slice()的起止參數(shù)包括索引,不包括結(jié)束索引,無參數(shù)時(shí),從頭截到尾,利用此點(diǎn)可以復(fù)制一個(gè)Array
      • push()向Array的末尾添加若干元素
      • pop() 則把Array的最后一元素刪除掉,并返回移除的元素,空數(shù)組pop后,返回undefined
      • unshift()向頭部添加若干元素,shift()方法則把Array的第一個(gè)元素刪除掉，返回Array的長度,空數(shù)組shift(),則返回undefined
      • sort() 對Array排序,直接修改當(dāng)前Array的元素位置,直接調(diào)用時(shí),按照默認(rèn)順序排序
      • reverse() 把整個(gè)Array元素反轉(zhuǎn)
      • splice() 修改Array的萬能方法
        var arr = ['Microsoft', 'Apple', 'Yahoo', 'AOL', 'Excite', 'Oracle']; // 從索引2開始刪除3個(gè)元素,然后再添加兩個(gè)元素: arr.splice(2, 3, 'Google', 'Facebook'); // 返回刪除的元素 ['Yahoo', 'AOL', 'Excite'] arr; // ['Microsoft', 'Apple', 'Google', 'Facebook', 'Oracle'] // 只刪除,不添加: arr.splice(2, 2); // ['Google', 'Facebook'] arr; // ['Microsoft', 'Apple', 'Oracle'] // 只添加,不刪除: arr.splice(2, 0, 'Google', 'Facebook'); // 返回[],因?yàn)闆]有刪除任何元素 arr; // ['Microsoft', 'Apple', 'Google', 'Facebook', 'Oracle']
      • concat() 方法把當(dāng)前的Array和另一個(gè)Array連接到一起,并返回一個(gè)新的Array,concat方法可以接受任意個(gè)元素和Array,并自動(dòng)Array拆開,然后全部添加到新的Array里,如:arr.concat(1,2,[3,4])
      • join方法是一個(gè)非常實(shí)用的方法,它把當(dāng)前的Array的每個(gè)元素都用指定的字符串連接起來,然后返回連接后的字符串,若Array元素不是字符串,也將自動(dòng)轉(zhuǎn)換為字符串后再連接
        var arr=['A','B','C',1]; arr.join('~');//'A~B~C~1'
      • 多維數(shù)組
        var arr=[[1,2,3],[400,500,600],'-'];
  2. 對象
    • 對象的定義及屬性訪問
      • 對象定義:JavaScript的對象是一種無序的集合數(shù)據(jù)類型,它由若干鍵值組成,例如:
        var xiaoming={ name:'test', birth:1980 }
      • JavaScript用一個(gè){...}表示一個(gè)對象,鍵值對以xxx:xxx形式聲明,用,隔開,最后一個(gè)鍵值對末尾不需要,
      • 屬性訪問: a) 通過.操作符來訪問,但要求屬性名必須是一個(gè)有效的變量名 b) 通過xiaoming['xx']來得到變量 c)特殊的形式: 如果含有特殊字符,定義時(shí)必須'middle-school':'No.1 Middle Schoole',訪問時(shí),只能通過['xx']來訪問 d) 屬性名盡量使用標(biāo)準(zhǔn)的變量名,這樣可以直接通過object.prop的形式訪問一個(gè)屬性
      • JavaScript對象的所有屬性都是字符串,不過屬性對應(yīng)的值可以是任意數(shù)據(jù)類型
      • JavaScript規(guī)定:訪問不存在的屬性不報(bào)錯(cuò),而是返回undefined
    • 屬性的各種操作
      • JavaScript的對象是動(dòng)態(tài)類型,你可以自由地給一個(gè)對象添加或刪除順序:
        xiaoming.age=18;//新增一個(gè)屬性 delete xiaoming.age;//刪除一個(gè)屬性
      • 檢測是否擁有某一屬性,可以用in操作符
        in 判斷一個(gè)屬性存在,這個(gè)屬性不一定是xiaoming的,可能是它繼承得到的
        'name' in xiaoming;//true 'toString' in xiaoming;//true
      • 要判斷一屬性是否xiaoming自身擁有的,而不是繼承的,可以用hasOwnProperty()方法
  3. 條件判斷
    • if() {...} else{...}
    • else 是可選的
    • 僅包含一條語句時(shí),可以省略{},但不建議省略
    • 多重判斷 if(){...} else if {...} else{..}
    • 判斷條件不是true或false時(shí),JavaScript把null,undefined,0,NaN和空字符串視為fasle,其他的一律視為true
  4. 循環(huán)
    • JavaScript的循環(huán)有兩種,一種for循環(huán),通過初始條件、結(jié)束條件和遞增條件來循環(huán)執(zhí)行語句塊
    • for 循環(huán)最常用的地方是利用索引來遍歷數(shù)組
    • for循環(huán)的3個(gè)條件都可以省略,當(dāng)沒有退出循環(huán)的判讀條件,必須使用break退出，否則死循環(huán)
    • for...in 可以將一個(gè)對象的所有屬性依次循環(huán)出來,需過濾對象繼承的屬性，則需要要用hasOwnProperty()實(shí)現(xiàn)
    • 由于Array也是對象,每個(gè)元素的索引都被視為對象的屬性,因此,for...in循環(huán)可以直接循環(huán)出Array的索引
    • for...in對Array的循環(huán)得到的是String而不是Number
    • while循環(huán),for循環(huán)在已知循環(huán)的初始和結(jié)束條件時(shí)很有用,而while循環(huán)更適合只有一個(gè)判斷條件的情況
    • do...while 與while循環(huán)的唯一區(qū)別在于,不是在開始判斷條件,而是在結(jié)束時(shí)判斷條件
    • do...while 循環(huán)至少循環(huán)一次,而for和while可能一次也不執(zhí)行
    • 編寫循環(huán)代碼時(shí),要注意初始條件和判斷條件,尤其邊界值,避免陷入死循環(huán)
  5. Map和Set
    • 類似Java中的Map,即一組鍵值對
    • ES6引入Map的目的為了解決對象的鍵只能為字符串，不能為Number等類型的問題
    • Map是一組鍵值對的結(jié)構(gòu),具有極快的查找速度
      var m = new Map(['Micha',94],['Box',12],['Nu',23]); m.get('Micha');
    • 初始化Map需要一個(gè)二維數(shù)組,或者直接初始化一個(gè)空的Map。
    • Map常見方法:
      var m=new Map(); m.set('Adam',3); m.set('Bob',4); m.has('Adam');//true m.get('Adam');//取得Value m.delete('Adam');//刪除
    • 一個(gè)Key對應(yīng)一個(gè)Value,所有,多次對一個(gè)key放入value,后面的值會(huì)沖掉前面的
    • Set和Map類似,是一組key的集合,不存儲value,沒有重復(fù)的key
    • 創(chuàng)建Set需要提供一個(gè)Array作為輸入,或者直接創(chuàng)建一個(gè)空Set
      var a1 = new Set(); var a2 = new Set([1,2,3]);
    • 重復(fù)元素在Set中自動(dòng)過濾
    • 添加和刪除方法a1.add(1); a1.delete(1);
  6. iterable

    • 為了遍歷Map和Set,ES6引入iterable類型

    • Array,Map,Set都屬于iterable類型

    • 具有iterable類型的集合可以通過新的for...of循環(huán)遍歷

    • for...in和for...of區(qū)別: for...in是變量對象的屬性名稱,一個(gè)Array數(shù)組實(shí)際上也是一個(gè)對象,它的每個(gè)元素的索引被視為一個(gè)屬性,當(dāng)手動(dòng)添加額外屬性后，for...in循環(huán)將帶來一些意外效果
      var a = ['A', 'B', 'C']; a.name = 'Hello'; for (var x in a) { alert(x); // '0', '1', '2', 'name',卻沒有'length' }
      for...of則修復(fù)了上述問題,其僅循環(huán)集合本身的元素

    • 更好的方式是直接使用iterable內(nèi)置對象forEach方法,它接受一個(gè)函數(shù),每次迭代就自動(dòng)回調(diào)該函數(shù)
      Array
      var a = ['A', 'B', 'C']; a.forEach(function (element, index, array) { // element: 指向當(dāng)前元素的值 // index: 指向當(dāng)前索引 // array: 指向Array對象本身 alert(element); });

      Map
      var a =new Map([[1,'A'], [2,'B'], [3,'C']]); a.forEach(function (value, key, map) { // value: 指向當(dāng)前元素的值 // key: 指向當(dāng)前key // map: 指向Array對象本身 alert(value); });

      Set
      var a = new Set(['A', 'B', 'C']); a.forEach(function (element,set) { // element: 指向當(dāng)前元素的值 // set: 指向set對象本身 alert(element); });

    • JavaScript函數(shù)不要求參數(shù)必須一致,參數(shù)可以沒有,也可以多(多出的參數(shù)會(huì)變成undefined),對應(yīng)順序必須一致,其余可以忽略

注釋:
1. 本文摘自廖雪峰JavaScript教程 廖雪峰網(wǎng)站地址:http://www.liaoxuefeng.com
2. 此筆記僅做個(gè)人日后查找使用,如有錯(cuò)誤,煩請指正！
3. 歡迎轉(zhuǎn)載哦O(∩_∩)O

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容