JavaScript基本總結

一：基本背景
　　01：注：ES6就是指ECMAScript 6。（2015 ECMAScript6 添加類和模塊）

ECMAScript和JavaScript的關系 1996年11月，JavaScript的創造者--Netscape公司，決定將JavaScript提交給國際標準化組織ECMA，希望這門語言能夠成為國際標準。次年，ECMA 發布262號標準文件（ECMA-262）的第一版，規定了瀏覽器腳本語言的標準，并將這種語言稱為ECMAScript，這個版本就是1.0版。 該標準一開始就是針對JavaScript語言制定的，但是沒有稱其為JavaScript，有兩個方面的原因。一是商標，JavaScript本身已被Netscape注冊為商標。 二是想體現這門語言的制定者是ECMA，而不是Netscape，這樣有利于保證這門語言的開發性和中立性。 因此ECMAScript和JavaScript的關系是，前者是后者的規格，后者是前者的一種實現。

　　02：一個完整的JavaScript的實現由三個部分實現

?

01：核心：ECMAScript 02：文檔對象模型：（DOM） Document object model (整合js，css，html) 03：瀏覽器對象模型：（BOM） Broswer object model（整合js和瀏覽器）

?

ECMAScrip描述了JavaScript語言的本身的相關的內容 JavaScript 是腳本語言 JavaScript 是一種輕量級的編程語言。后來出現了node.js，可以作為后端語言來開發項目，js是一個既能做前端又能做后端的語言， 但是js這個作者用了10天就開發了這么個語言，所以寫的不是很完善，這個語言有很多的槽點，后面學習起來大家就知道啦。 JavaScript 是可插入 HTML 頁面的編程代碼。 JavaScript 插入 HTML 頁面后，可由所有的現代瀏覽器執行。

二：JavaScript引入方式

　　01：scrip標簽內寫代碼

可以在head標簽內寫，也可以在body標簽內寫， 放在兩個區域的的區別： <script> console.log("測試") //#f12鍵打開瀏覽器調試窗口，在console調試臺就能看到此內容 alter('測試語句') //#這個是瀏覽器窗口打開文件就會彈出一個窗口 </script>

?

　　02：引入額外的js文件

?

<script src="myscript.js"></script>

?

三：JavaScript語言規范

JavaScript注視 001：// 單行注視002： /* 多行注釋 */02：結束符 JavaScript中的語句以分號 （;）為結束符，也就是和縮進無關了

四：JavaScript語言基礎

　　01：變量聲明

1：JavaScript的變量名可以使用 數字，字母，下劃線，$ 組成，不能以數字開頭 2：聲明變量使用方式： var 變量名

?

　　02：聲明方式

var name="Tom"; var age="18";也可以分兩步寫：var name; 然后 name="Tom"

　　03:注意事項：

001：變量名是區分大小寫的。 002：推薦使用駝峰式命名規則。首字母大寫 003：保留字不能用做變量名。ES6新增let命令，用于聲明變量，用法類似var，但是let只在let命令所在的代碼塊有效， 例如for循環： for (let i=0;i<arr.length;i++){...}

04:申明常量：

const PI=3.14159; PI //3.14159PI=3; 報錯// TypeError: "PI" is read-only

五：保留字列表

abstract 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

六：JavaScript數據類型

　　01：JavaScript擁有動態類型（python也是動態的）

var x; #此時x是undefined的，并不知道x的類型 var x=1; //此時x是數字 var x="Tom" //此時x是字符串

?

　　02：數值（Number）

001：JavaScript不區分整型數據和浮點型，就只有一種數字類型var a=12.34 //a=12.34var b=20 // a=20var c=123e5 //12300000 （123*10的無次方）var d=123e-5 //0.00123 (123*10的負5次方)002：NaN（not a number ） 表示不是一個數字使用方法：parseInt("123") //返回123parseInt("ABc") // NaN

03：字符串(String)

?

一般使用字符串拼接用 “+”

?

　　001:var a="hello";

var b="world"; var c=a+b; //"helloworld"

　　002:字符串的常用方法：

方法 說明 .length #不加括號的是屬性 返回長度 .trim() #得到一個新值 移除空白 .trimLeft() 移除左邊的空白 .trimRight() 移除右邊的空白 .charAt(n) #n類似索引，從0開始，超過最大值返回''空字符串 返回第n個字符 .concat(value, ...) #s1='hello';s.concat('xx'); 得到helloxx 拼接 .indexOf(substring, start) #這個start是從索引幾開始找，沒有返回-1 子序列位置 .substring(from, to) #不支持復數，所以一般都不用它，了解一下就行了 根據索引獲取子序列 .slice(start, end) #var s1='helloworld';s1.slice(0,-5)看結果，就用它 切片 .toLowerCase() #全部變小寫 小寫 .toUpperCase() #全部變大寫 大寫 .split(delimiter, limit)#分隔,s1.splite(' '),后面還可以加參數s1.split(' '，2),返回切割后的元素個數 分割

　　003：slice和substring的區別：

string.slice(start, stop)和string.substring(start, stop)：兩者的相同點： 如果start等于end，返回空字符串 如果stop參數省略，則取到字符串末 如果某個參數超過string的長度，這個參數會被替換為string的長度substirng()的特點： 如果 start > stop ，start和stop將被交換 如果參數是負數或者不是數字，將會被0替換silce()的特點： 如果 start > stop 不會交換兩者 如果start小于0，則切割從字符串末尾往前數的第abs(start)個的字符開始(包括該位置的字符) 如果stop小于0，則切割在從字符串末尾往前數的第abs(stop)個字符結束(不包含該位置字符)ps:ES6中引入了模板字符串。模板字符串（template string）是增強版的字符串，用反引號（`）標識，ESC鍵下面那個鍵就是反引號。 它可以當做普通字符串使用，也可以用來定義多行字符串，或者在字符串中嵌入變量。你使用chorme瀏覽器就行，chorme瀏覽器支持ES6小技巧： 在chorme瀏覽器中的console控制臺中實現多行輸入：先按住shift鍵再按center鍵 就能實現多行輸入一行內容 例子： 普通字符： `普通字符串` 多行文本： ` 多行文本`

04：布爾值（Boolean）

和python區別在于，Boolean的true和false都是小寫,如果寫大寫則會報錯 var a=true; var b=false; ""(空字符串)、0、null、undefined、NaN都是false。 ps： null和undefined null表示值是空，一般在需要指定或清空一個變量時才會使用，如 name=null; undefined表示當聲明一個變量但未初始化時，該變量的默認值是undefined。還有就是函數無明確的返回值時，返回的也是undefined。null表示變量的值是空，undefined則表示只聲明了變量，但還沒有賦值。

七：對象（Object）

　　01：對象說明

JavaScript 中的所有事物都是對象：字符串、數值、數組、函數...此外，JavaScript 允許自定義對象。
JavaScript 提供多個內建對象，比如 String、Date、Array 等等。
對象只是帶有屬性和方法的特殊數據類型。

?

　　02：數組

作用：用單一的變量名來存儲一系列的值（和python的列表一樣）var a=[123,"ABC"] console.log(a[1]) //得到ABC

　　數組常用方法：

var a=[12,78,'ab','t3d','pk']01: .length 數組的大小 a.length() -->5 02: .push(ele) 尾部追加元素 a.push('aa'); -->(5) [78, "ab", "t3d", "pk", "aa"]03: .pop() 獲取尾部的元素 a.pop(); -->"aa"04: .unshift(ele) 頭部插入元素 a.unshift(); -->(5) ["toubu", 78, "ab", "t3d", "pk"]05: .shift() 頭部移除元素 a -->(5) ["toubu", 78, "ab", "t3d", "pk"] a.shift(); -->"toubu" a -->(4) [78, "ab", "t3d", "pk"] #拿到的值 06： .slice(start, end) 切片 a -->(4) [78, "ab", "t3d", "pk"] a.slice(1,3); //從索引為1的開始取到3，不包含索引為3的值（取頭不取尾） -->(2) ["ab", "t3d"] //得到的值07： .reverse() #在原數組上改的 反轉 a -->(4) [78, "ab", "t3d", "pk"] a.reverse(); -->(4) ["pk", "t3d", "ab", 78] //得到的值08： .join(seq) #a1.join('+')， seq是連接符 將數組元素連接成字符串 a -->(4) ["pk", "t3d", "ab", 78] a.join("&"); -->"pk&t3d&ab&78"09: .concat(val, ...) #連個數組合并 連接數組 a -->(4) ["pk", "t3d", "ab", 78] b -->(4) ["11", "22", "6", "fgs"] a.concat(b); -->(8) ["pk", "t3d", "ab", 78, "11", "22", "6", "fgs"] //得到的數據10： .sort() 排序(javascriptde 排序是按照第一個元素的ascill碼值的大小排序的 第一個相等則比較第二個） a -->(4) ["pk", "t3d", "ab", 78] a.sort(); -->(4) [78, "ab", "pk", "t3d"] ####比較時，它會將每項變成字符串，然后一個字符的一個字符的去比較 　　　　　如果調用該方法時沒有使用參數，將按字母順序對數組中的元素進行排序，說得更精確點，是按照字符編碼的順序進行排序。要實現這一點， 首先應把數組的元素都轉換成字符串（如有必要），以便進行比較。ps: .sort()方法的特別說明：如果想按照其他標準進行排序，就需要提供比較函數，也就是自己提供一個函數提供排序規則，該函數要比較兩個值，然后返回一個用于說明這兩個值 的相對順序的數字。比較函數應該具有兩個參數 a 和 b，其返回值如下：若 a 小于 b，在排序后的數組中 a 應該出現在 b 之前，則返回一個小于 0 的值。若 a 等于 b，則返回 0。若 a 大于 b，則返回一個大于 0 的值。 示例：（冒泡排序） function sortNumber(a,b){ return a - b } var arr1 = [11, 100, 22, 55, 33, 44] arr1.sort(sortNumber)關于遍歷數組中的元素，可以使用下面的方式： var a = [10, 20, 30, 40]; for (var i=0;i<a.length;i++) { console.log(a[i]); }11： .forEach() #將數組的每個元素傳遞給回調函數(待定總結......)12: .splice() 刪除元素，并向數組添加新元素。 a -->(4) [78, "ab", "pk", "t3d"] //原始數據 //1 代表從索引為1的數據開始刪除，2，代表刪除2個元素，后面的是需要添加的數據，從索引為1的位置開始添加 a.splice(1,2,33,55,"kl"); -->(2) ["ab", "pk"]ps：.splice()方法的說明： 語法：splice(index,howmany,item1,.....,itemX) 參數 描述 index 必需。規定從何處添加/刪除元素。該參數是開始插入和（或）刪除的數組元素的下標，必須是數字。 howmany 必需。規定應該刪除多少元素。必須是數字，但可以是 "0"。如果未規定此參數，則刪除從 index 開始到原數組結尾的所有元素。 item1, ..., itemX 可選。要添加到數組的新元素

13： .map() 返回一個數組元素調用函數處理后的值的新數組（待定總結......）

八：自定義對象

//方法的取值用 名字.xx var t1={'name':'TOM','age':12} undefined t1; -->{name: "TOM", age: 12} var t2={name:"Jerry",age:12}; undefined t2; -->{name: "Jerry", age: 12} t2.name; -->"Jerry" t1.age; -->12

九：類型查詢

-->typeof ("abd"); "string" -->typeof 'abc'; "string" -->typeof null; "object" -->typeof true; "boolean" -->typeof 123; "number" -->typeof NaN; "number" -->typeof undefined; "undefined" typeof是一個一元運算符（就像++，--，！，- 等一元運算符），不是一個函數，也不是一個語句。 對變量或值調用 typeof 運算符將返回下列值之一：undefined - 如果變量是 Undefined 類型的 boolean - 如果變量是 Boolean 類型的 number - 如果變量是 Number 類型的 string - 如果變量是 String 類型的 object - 如果變量是一種引用類型或 Null 類型的

十：運算符

　　01：算數運算符

+ - * / % ++ -- i++,是i自加1，i--是i自減1ps特別說明：i++ 是先執行語句，i再自加1，同理i-- ++1是i先自加1，再執行后面的執行語句

?

　　02：比較運算符

?

> >= < <= != == === !==特別注意：1 == “1” // true #弱等于，將1轉換為字符串'1',在=號兩個數據類型不同的時候，會自動給你變成相同的， 具體怎么一個變換規則，先不用理他，因為這種比較不好，因為以后咱們就盡量用===。 1 === "1" // false #強等于，比較類型也比較值

　　03：邏輯運算符：

?

&& || ! #and，or，非（取反）!null返回true

04：賦值運算符

?

= += -= *= /= #n += 1其實就是n = n + 1

十一：流程控制

　　01：if-else

例子： var a=10; undefined if (a>5){ console.log("YES")}else{ console.log("NO")} -->YES

　　02：if-else if-else #多條件

var a=10; undefined if (a>5){ console.log("A>5");}else if ("A<5"){ console.log("A<5");}else{ console.log("A=5");} -->A>5

　　03:switch 切換

var a=10; switch(a){ case 0:console.log("11");break; case 1:console.log("22");break; case 5:console.log("55");break; case 10:console.log("10啊");break; default: console.log("沒有任何天驕滿足就執行default"); } -->10啊

　　04:for循環

var i=0; while (i<10){ console.log(i); i++; } --> 0,1,2,3,4,5,6,7,8,9,9

　　05:三元運算（三目運算）

?

var a=1; var b=2; var c=a>b ? a:b; //如果a大于b，則將a的值賦值給c，否則將b的值賦值給c c //取值 -->2 //得到值

?

?

?

轉載于:https://www.cnblogs.com/one-tom/p/10138726.html

總結

以上是生活随笔為你收集整理的Day45--js基本小结的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。