Web前端入門到精通必會JS的屬性和常用方法，應同學留言要求，今天抽時間整理總結了Web前端實際開發中必會的變量、基本數據類型、表達式與操作符、流程控制語句、數組，核心知識點與常用方法，用不到可以直接不用學了，省的浪費時間 ！已經做成了網頁版，方便查缺補漏，建立屬於自己的知識庫！
對於web前端最難的JS部分，我們要做一次瘦身但又不失重點難點，不論是對於初學者還是已經工作的同學來說都能用得上，畢竟開發中不是時時刻刻都會用到所有的屬性和方法，很容易就忘記了 ！記得收藏起來!!
總結：JS語法與變量、基本數據類型、表達式與操作符、流程控制語句、數組，核心知識點與常用方法，經典版
JavaScript書寫位置
|
單詞 |
功能描述 |
|
script |
將JavaScript代碼寫在html文件中，例如： <body> <script> //此處寫JavaScript代碼 </script> </body> |
|
引入.js格式的文件，例如： <script src="此處寫js文件所在的路徑"></script> |
輸出語句
|
單詞 |
功能描述 |
|
alert() |
彈出警告框 |
|
console.log() |
控制檯輸出 |
變量
|
單詞 |
功能描述 |
|
var |
使用var可以聲明變量，例如：var num = 1;表示聲明一個名稱爲num，值爲1的變量 變量的合法命名： 1、只能由數字、字母、下劃線和$組成，但不能以數字開頭 2、不建議使用關鍵字和保留字 3、嚴格區分大小寫，A和a是兩個不同的變量 |
檢測數據類型
|
單詞 |
功能描述 |
|
typeof |
檢測值或者變量的數據類型 |
NaN相關知識
|
單詞 |
功能描述 |
|
NaN |
表示非數字，是一個特殊的數值 |
|
isNaN() |
用來檢測一個值是否爲NaN ，是的話返回true，否則返回false |
數據類型
|
單詞 |
功能描述 |
|
Number |
數值類型，所有的數字不分大小、不分正負、不分正負，都是數值類型 |
|
String |
字符串類型，使用雙引號或者單引號包裹的值 |
|
Boolean |
布爾類型，true表示真，false表示假 |
|
Undefined |
1、變量沒有賦值，默認爲undefined 2、變量聲明提升時，變量的值也爲undefined undefined的類型也爲undefined |
|
Null |
null表示空，用typeof檢測null，結果爲object |
字符串的常用屬性
|
單詞 |
功能描述 |
|
length |
表示字符串的長度 |
字符串的常用方法
|
單詞 |
功能描述 |
|
charAt() |
獲取指定位置的字符 |
|
substring() |
提取字符串中，介於兩個指定下標之間的字符 |
|
substr() |
在字符串中指定的位置處，提取指定數目的字符 |
|
slice() |
提取字符串的某個部分，類似於substring() ，不同之處： 1、substring() 可以自動交換參數的位置，而slice()不行。 2、slice()的第一個參數可以是負數，而substring()不行 |
|
toUpperCase() |
把字符串轉換爲大寫 |
|
toLowerCase() |
把字符串轉換爲小寫 |
|
indexOf |
返回字符串中指定字符首次出現的索引 |
數據類型轉換
|
單詞 |
功能描述 |
|
Number() |
將其他類型的值轉換爲數字 |
|
parseInt() |
可以將參數轉成整數 |
|
parseFloat() |
可以將參數轉成浮點數 |
|
String() |
將其他類型的值轉換成字符串，例如：String(123) |
|
toString() |
將其他類型的值轉換成字符串，例如：(6).toString() 和String()的區別： 1、toString()無法轉換null和undefined，String()可以轉換null和undefined 2、toString()可增加進制參數，將字符串進行進制轉換，String()不能轉換進制 3、寫法不同，可參考上述例子 |
|
Boolean() |
將其他類型的值轉換爲布爾值 |
window下的方法
|
單詞 |
功能描述 |
|
prompt() |
彈出輸入框 |
複雜數據類型
|
單詞 |
功能描述 |
|
Array、Object、Function |
數組、對象、函數 |
算術運算符
|
單詞 |
功能描述 |
|
+ |
加法運算符。加號有兩種作用，分別是加法和連字符 1、加號兩邊的操作數都是數字，則爲加法 2、有一個操作數爲字符串，則爲連字符 |
|
- |
減法運算符 |
|
* |
乘法運算符 |
|
/ |
除法運算符 |
|
% |
取餘運算符。例如：a%b代表a除以b的餘數，8 %5 = 3 |
Number下的方法
|
單詞 |
功能描述 |
|
toFixed() |
指定小數點後面的位數 |
Math方法
|
單詞 |
功能描述 |
|
Math.pow(x,y) |
返回x的y次冪（不常用，瞭解即可） |
|
Math.sqrt() |
返回一個數的平方根（不常用，瞭解即可） |
|
Math.ceil() |
向上取整 |
|
Math.floor() |
向下取整 |
關係運算符
|
單詞 |
功能描述 |
|
> |
大於 |
|
< |
小於 |
|
>= |
大於等於 |
|
<= |
小於等於 |
|
== |
等於 |
|
!= |
不等於 |
|
=== |
全等於 |
|
!== |
不全等於 |
邏輯運算符
|
單詞 |
功能描述 |
|
! |
非 |
|
&& |
與 |
|
|| |
或 |
賦值運算符
|
單詞 |
功能描述 |
|
= |
賦值 |
|
+= |
快捷賦值，例如： a+=1等價與a=a+1 |
|
-= |
快捷賦值，例如： a-=1等價與a=a-1 |
|
*= |
快捷賦值，例如： a*=1等價與a=a*1 |
|
/= |
快捷賦值，例如： a/=1等價與a=a/1 |
|
%= |
快捷賦值，例如： a%=1等價與a=a%1 |
|
++ |
自增運算 ，例如： var num1 = 3; num1++ console.log(num1)//num的值爲4 |
|
-- |
自減運算，例如： var num2 = 3; num2-- console.log(num2)//num2的值爲2 |
條件語句
|
單詞 |
功能描述 |
|
if |
當指定條件爲 true 時，執行if語句對應的代碼 |
|
if...else |
當條件爲 true 時，執行if語句對應的代碼 當條件爲 false 時，執行else語句對應的代碼 |
|
if...else if... |
滿足條件時，執行它所對應的代碼 |
|
case |
在switch中使用，表示要匹配的每一種情況 |
|
default |
在switch中使用，表示默認情況，當不滿足所有的case條件時，會執行默認情況 |
|
switch |
根據不同的條件來執行不同的動作。示例： switch (month) { case 1: alert("這個月有31天") break; case 4: alert("這個月有30天") break; default: alert("請輸入正確的月份！！") } |
|
boolean_expression ? true_value : false_value |
三元運算符，當條件表達式boolean_expression爲真，執行表達式true_value，爲假時執行表達式false_value |
循環語句
|
單詞 |
功能描述 |
|
for |
循環執行一段代碼 示例： for(var i = 0; i <10;i++) { console.log(i); } |
|
while |
條件爲真時循環執行代碼塊 |
|
do-while |
while 循環的變體，語法： do{ 循環體 }while(循環執行條件) 注意事項： 1、do-while循環在檢查條件之前一定會執行一次循環體 2、如果條件爲真，就會繼續執行循環體 3、如果條件爲假，則會終止循環 |
break和continue語句
|
單詞 |
功能描述 |
|
break |
用於退出循環 1、在switch中使用，用於跳出switch語句 2、在循環for、while中使用，直接跳出循環 |
|
continue |
跳出當前循環，繼續執行下一次循環 |
數組的定義
|
單詞 |
功能描述 |
|
Array |
數組， 用來存儲一組值 |
|
new |
與Array結合使用，創建數組，示例：new Array() （new是JavaScript中的一個關鍵字，用來實例化對象的，後面的面向對象章節中會有詳細的講解，目前瞭解即可） |
數組類型的判斷
|
單詞 |
功能描述 |
|
Array.isArray() |
檢測數據是否是一個數組，返回布爾值 |
數組常用的屬性
|
單詞 |
功能描述 |
|
length |
返回數組長度 |
數組的常用方法
|
單詞 |
功能描述 |
|
push() |
在尾部插入新項 |
|
pop() |
刪除數組的最後一項 |
|
unshift() |
在頭部插入新項 |
|
shift() |
刪除數組的第一項 |
|
splice() |
用於添加或刪除數組的元素 |
|
slice() |
從已有的數組中返回選定的元素 |
|
concat() |
合併多個數組 |
|
reverse() |
顛倒數組中元素的順序 |
|
indexOf() |
返回指定元素的索引值，如果不存在返回-1 |
|
includes() |
判斷一個數組是否包含指定的值，返回布爾值 |
|
用於數組排序（涉及到函數知識，在函數一節再進行詳細的講解） |
|
join() |
將數組轉成字符串 |
字符串的常用方法
|
單詞 |
功能描述 |
|
split() |
將字符串轉成數組 |
最好的高效學習方法之一，就是要不斷地實踐+總結+分享，到最後能夠融會貫通，運用自如 ，一起加油 ！
關注我下篇接着分享以下內容：
- JS函數（算法，遞歸與克隆，作用域和閉包）
- DOM（節點操作，事件，定時器，延時器，動畫），BOM 相關
- 面向對象（上下文規則，構造函數與類，原型原型鏈，內置對象，設計模式）
- 正則表達式相關
【有關HTML/HTML5，CSS/CSS3的總結已經在往期的筆記中已發】
- 趕緊收藏，頭條超詳細Web前端入門到精通必學的標籤及屬性大全
- Web前端入門到精通必會的CSS樣式和屬性大全
寵粉福利 做我的粉絲我寵你這期的是JS的基礎，下期筆記再總結 JS的高級部分的內容，一個個來梳理，喜歡記得點贊收藏關注了 ️️還需要總結什麼？
留言就好 ^_^ 看還能挖出點啥乾貨不
內容來自：arry 老師博客【艾編程博客】www.arryblog.com 還有更多教程以及新手 30 天免費訓練營學習！
