史上最全、JavaScript基礎篇

来源:http://www.cnblogs.com/suoning/archive/2016/07/07/5648867.html
-Advertisement-
Play Games

本章內容： 簡介 變數 運算符 算術運算符 比較運算符 邏輯運算符 數據類型 語句 簡介 定義 javascript是一門動態的、弱類型的解釋型編程語言，增強頁面動態效果，實現頁面與用戶之間的實時、動態交互。 javascript由三部分組成：ECMAScript、DOM和BOM ECMAScrip ...


 

本章內容：

  • 簡介
    1. 定義
    2. 註釋
    3. 引入文件
  • 變數
  • 運算符
    1. 算術運算符
    2. 比較運算符
    3. 邏輯運算符
  • 數據類型
    1. 數字
    2. 字元串
    3. 布爾類型
    4. 數組
    5. Math
  • 語句
    1. 條件語句（if、switch）
    2. 迴圈語句（for、for in、while）

 

簡介

定義

　　javascript是一門動態的、弱類型的解釋型編程語言，增強頁面動態效果，實現頁面與用戶之間的實時、動態交互。

　　javascript由三部分組成：ECMAScript、DOM和BOM

  • ECMAScript由ECMA-262定義，提供核心語言功能（ECMA是歐洲電腦製造商協會）
  • DOM(Document Object Model)文檔對象模型，提供訪問和操作網頁內容的方法和介面
  • BOM(Browser Object Model)瀏覽器對象模型，提供與瀏覽器交互的方法和介面

 

註釋

JavaScript中代碼註釋：

  • 單行 //
  • 多行 /*  */

 

引入文件

1. 引入外部文件

<script type"text/javascript" src="JS文件"></script>

 

2. 存放在HTML的<head>或<body>中

<script type"text/javascript">
    Js代碼內容
</script>　
  • HTML的head中
  • HTML的body代碼塊底部(推薦)

 

3. 為什麼要放在<body>代碼塊底部？

  • HTML代碼從上到下執行，先載入CSS，避免html出現無樣式狀態；
  • 將JavaScript代碼塊放在<body>最後，可以讓網頁儘快的呈現給用戶，減少瀏覽者的等待時間，避免因為JS代碼塊阻塞網頁的呈現。

 

變數

需要註意的是：局部變數必須以 var 開頭申明，如果不寫 var 則為全局變數

<script type="text/javascript">
 
    // 全局變數
    name = 'nick';
 
    function func(){
        // 局部變數
        var age = 18;
 
        // 全局變數
        gender = "man"
    }
</script>

　　

運算符

1. 算術運算符

一元算術
    +  一元加，數值不會產生影響 對非數值應用一元加運算時，會調用Number()轉型函數對這個值進行轉換
    -  一元減，轉換為負數 ~
    ++  遞增1 通過Number()轉型為數字，再加1，再重新賦值給操作數值
    -- 遞減1 ~
二元算術
    +  加法  
    -  減法  
    *  乘法  
    /  除法  
    %  除法  

 

1> 如果其中一個操作數是對象，則對象會轉換為原始值：日期對象通過toString()方法執行轉換，其他對象通過valueOf()方法執行轉換。如果結果還不是原始值，則再使用toString()方法轉換
2> 在進行了對象到原始值的轉換後，如果其中一個操作數是字元串的話，另一個操作數也會轉換成字元串，進行字元串拼接
3> 兩個操作數都將轉換成數字或NaN，進行加法操作
二元運算過程

 

2. 比較運算符

  ===  嚴格運算符 比較過程沒有任何類型轉換
  !==  嚴格運算符 ===的結果取反
  ==  相等運算符 如果兩個操作值不是同一類型，相等運算符會嘗試進行一些類型轉換，然後再進行比較
  !=  不相等運算符 ==的結果取反
  >  大於運算符  
  >=  大於等於運算符  
  <  小於運算符  
  <=  小於等於運算符  

 

1> 如果兩個值類型不同則返回false
2> 如果兩個值類型相同，值相同，則返回true，否則返回false
3> 如果兩個值引用同一個對象，則返回true，否則，返回false
console.log([] === []);//false
console.log({} === {});//false
var a = {};
b = a;
console.log(a === b);//true
嚴格運算符比較過程 
對象類型和原始類型比較：
1> 對象類型會先使用valueOf()轉換成原始值，如果結果還不是原始值，則再使用toString()方法轉換，再進行比較（日期類只允許使用toString()方法轉換為字元串）
2> 在對象轉換為原始值之後，如果兩個操作數都是字元串，則進行字元串的比較
3> 在對象轉換為原始值之後，如果至少有一個操作數不是字元串，則兩個操作數都將通過Number()轉型函數轉換成數字進行數值比較

註：如果一個值是null，另一個值是undefined，則返回true;
console.log(null == undefined);//true
如果一個值是null，另一個值是0，則返回tfalse;
console.log(null == 0);//false
空字元串或空格字元串會轉成0
console.log(null == []);//false
console.log(null == '');//false
console.log([] == ' ');//false，相當於'' == ' '
console.log([] == '');//true，相當於'' == ''
console.log(0 == '');//true
相等運算符比較過程 
數字和字元串比較：
1> 如果操作值是對象，則這個對象將先使用valueOf()轉換成原始值，如果結果還不是原始值，則再使用toString()方法轉換
2> 在對象轉換為原始值之後，如果兩個操作數都是字元串，則按照unicode字元的索引順序對兩個字元串進行比較
3> 在對象轉換為原始值之後，如果至少有一個操作數不是字元串，則兩個操作數都轉換成數字進行比較
console.log('B' > 'a');//false
console.log('b' > 'a');//true
console.log(9 > '2');//true
大於小於運算符比較過程

 

3. 邏輯運算符

    !  非（兩個!!表示Boolean()轉型函數）

 返回一個布爾值
    &&  與 兩個操作都為true時返回true，否則返回false（返回值不一定是布爾值），可以多個連用（..&&..&&..）
    ||  或 兩個操作都是false時返回false，否則返回true（返回值不一定是布爾值），可以多個連用（..||..||..）

 

//七個假值：
console.log(!!undefined);//false
console.log(!!null);//false
console.log(!!0);//false
console.log(!!-0);//false
console.log(!!NaN);//false
console.log(!!'');//false
console.log(!!false);//false

console.log(!!{});//true
console.log(!![]);//true

1> 取代if語句
//前麵條件成立則運行後面操作
(a == b) && dosomething();

2> 用於回調函數
//若沒有給參數a傳值，則a預設為undefined假值，所以不執行a()。
function fn(a){
    a && a();
}
&& 常用操作 
1> 變數設置為預設值
//如果沒有向參數a傳入任何參數，則將該參數設置為空對象
function func(a){
    a = a || {};
}
|| 常用操作

　　

數據類型

JavaScript 中的數據類型分為原始類型和對象類型：

  • 原始類型
    • 數字
    • 字元串
    • 布爾值
  • 對象類型
    • 數組
    • “字典”
    • ...

特殊值：

  • null　　　　　表示一個空對象指針，常用來描述"空值"；
  • undefined　　表示變數未定義。

 

1、數字（Number）

JavaScript中不區分整數值和浮點數值，JavaScript中所有數字均用浮點數值表示。

轉換：

  • parseInt(..)    將某值轉換成數字，不成功則NaN
  • parseFloat(..) 將某值轉換成浮點數，不成功則NaN

特殊值：

  •  NaN，非數字。可使用 isNaN(num) 來判斷。
  • Infinity，無窮大。可使用 isFinite(num) 來判斷。
Number 對數字的支持
Number.MAX_VALUE 最大數值
Number.MIN_VALUE 最小數值
Number.NaN 特殊的非數字值
Number.NEGATIVE_INFINITY 負無窮大
Number.POSITIVE_INFINITY 正無窮大
Number.toExponential( ) 用指數計數法格式化數字
Number.toFixed( ) 採用定點計數法格式化數字
Number.toLocaleString( ) 把數字轉換成本地格式的字元串
Number.toPrecision( ) 格式化數字的有效位
Number.toString( ) 將—個數字轉換成字元串
Number.valueOf( ) 返回原始數值

 

2、字元串（String）

字元串是由字元組成的數組，但在JavaScript中字元串是不可變的：可以訪問字元串任意位置的文本，但是JavaScript並未提供修改已知字元串內容的方法。

String.length 字元串的長度
String.trim() 移除空白
String.trimLeft() 移除左側空白
String.trimRight() 移除右側空白
String.concat(value, ...) 拼接
String.slice(start, end) 切片
String.split( ) 分割
String.search( ) 從頭開始匹配，返回匹配成功的第一個位置(g無效)
String.match( ) 全局搜索，如果正則中有g表示找到全部，否則只找到第一個
String.replace( ) 替換，正則中有g則替換所有，否則只替換第一個匹配項； $數字：匹配的第n個組內容； $&：當前匹配的內容； $`：位於匹配子串左側的文本； $'：位於匹配子串右側的文本 $$：直接量$符號
String.charAt( ) 返回字元串中的第n個字元
String.charCodeAt( ) 返回字元串中的第n個字元的代碼
String.fromCharCode( ) 從字元編碼創建—個字元串
String.indexOf( ) 查找子字元串位置
String.lastIndexOf( ) 查找子字元串位置
String.localeCompare( ) 用本地特定的順序來比較兩個字元串
String.substr( ) 抽取一個子串
String.substring( ) 返回字元串的一個子串
String.toLocaleLowerCase( ) 把字元串轉換小寫(針對地區，在不知道程式在哪個語言環境中運行時用)
String.toLocaleUpperCase( ) 將字元串轉換成大寫(針對地區)
String.toLowerCase( ) 小寫
String.toUpperCase( ) 大寫
String.toString( ) 返回原始字元串值
String.toString() 返回原始字元串值
String.valueOf( ) 返回原始字元串值

 

3、布爾類型（Boolean）

true（真）和false（假）

toString() 返回Boolean的字元串值('true'或'false')
toLocaleString() 返回Boolean的字元串值('true'或'false')
valueOf() 返回Boolean的原始布爾值(true或false)

 

4、數組（Array）

Array.length 數組的大小
Array.push() 尾部添加元素
Array.pop() 刪除並返回數組的最後一個元素
Array.unshift() 在數組頭部插入一個元素
Array.shift( ) 在數組頭部移除一個元素
Array.slice( ) 切片
Array.reverse( ) 反轉
Array.join( ) 將數組元素連接起來以構建一個字元串
Array.concat( ) 拼接
Array.sort( ) 排序
Array 對數組的內部支持
Array.splice( start, deleteCount, value, ...)

插入、刪除或替換數組的元素

obj.splice(n,0,val) 指定位置插入元素 obj.splice(n,1,val) 指定位置替換元素 obj.splice(n,1)    指定位置刪除元素
Array.toLocaleString( ) 把數組轉換成局部字元串
Array.toString( ) 將數組轉換成一個字元串

 

5. Math

 和其他對象不同，Math對象是一個靜態對象，而不是構造函數。實際上，Math只是一個由Javascript設置的對象命名空間，用於存儲數學函數

常量

Math.E
常量e，自然對數的底數。

Math.LN10
10的自然對數。

Math.LN2
2的自然對數。

Math.LOG10E
以10為底的e的對數。

Math.LOG2E
以2為底的e的對數。

Math.PI
常量figs/U03C0.gif。

Math.SQRT1_2
2的平方根除以1。

Math.SQRT2
2的平方根。

靜態函數

Math.abs( )
計算絕對值。

Math.acos( )
計算反餘弦值。

Math.asin( )
計算反正弦值。

Math.atan( )
計算反正切值。

Math.atan2( )
計算從X軸到一個點的角度。

Math.ceil( )
對一個數上舍入。

Math.cos( )
計算餘弦值。

Math.exp( )
計算e的指數。

Math.floor( )
對一個數下舍人。

Math.log( )
計算自然對數。

Math.max( )
返回兩個數中較大的一個。

Math.min( )
返回兩個數中較小的一個。

Math.pow( )
計算xy。

Math.random( )
計算一個隨機數。

Math.round( )
舍入為最接近的整數。

Math.sin( )
計算正弦值。

Math.sqrt( )
計算平方根。

Math.tan( )
計算正切值。
Math 方法

 

 

語句

 

1、條件語句

JavaScript中支持兩個條件語句，分別是：if 和 switch。

 if 語句：

//if語句

if(條件){
 
    }else if(條件){
         
    }else{
 
    }

Switch 語句：

//switch語句

switch(name){
        case 'nick':
            age = 18;
            break;
        case 'jenny':
            age = 21;
            break;
        default :
            age = 0;
    }

　　

 2、迴圈語句

JavaScript中支持三種迴圈語句，分別是：for、for in、while

for 迴圈：

var names = ["nick", "jenny"];
 
for(var i=0;i<names.length;i++){
    console.log(i);    //索引
    console.log(names[i]);
}

for in 迴圈：

var names = ["nick", "jenny"];

for(var index in names){
    console.log(index);
    console.log(names[index]);
}

while 迴圈：　

while(條件){
    // break;
    // continue;
}

　　

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • Command（命令）-對象行為型模式
    1.意圖 將一個請求封裝為一個對象，從而使你可用不同的請求對客戶進行參數化；對請求排隊或記錄請求日誌，以及支持可撤銷的操作。 2.別名 動作（Action），事務（Transaction） 3.動機 命令模式通過將請求本身變成一個對象來使請求可向未指定的應用對象提出請求。這個對象可被存儲並像其他的對 ...
  • springmvc+mybatis+spring 整合 bootstrap
    獲取【下載地址】 【免費支持更新】三大資料庫 mysql oracle sqlsever 更專業、更強悍、適合不同用戶群體【新錄針對本系統的視頻教程，手把手教開發一個模塊，快速掌握本系統】 A集成代碼生成器 [正反雙向(單表、主表、明細表、樹形表，開發利器)+快速構建表單;freemaker模版技術 ...
  • Sigleton 單例模式 的簡單應用
    需求：一個簡單的後臺java程式，收集信息，並將信息發送到遠端伺服器。 實現：實現一個後臺線程，實時處理髮送過來的信息，並將信息發送到伺服器。 技術要點： 1、單例模式 2、隊列 並沒有實現全部代碼，簡單把技術要點寫出來： 此程式只是做信息收集，併為後期數據統計做準備，通過單線程隊列實現，避免申請過 ...
  • [Effective JavaScript 筆記]第59條：避免過度的強制轉換
    js是弱類型語言。許多標準的操作符和代碼庫會把輸入參數強制轉換為期望的類型而不是拋出錯誤。如果未提供額外的邏輯，使用內置操作符的程式會繼承這樣的強制轉換行為。functin square(x){ return x*x; } square("3");//9 強制轉換 強制轉換可以帶來方便性，但也會帶來... ...
  • Node.js 文件夾目錄結構創建
    第一次接觸NodeJS的文件系統就被它的非同步的響應給搞暈了，後來發現NodeJS判斷文件夾是否存在和創建文件夾是還有同步方法的，但是還是想嘗試使用非同步的方法去實現。 使用的方法：fs.exists(path, callback);fs.mkdir(path, [mode], callback);實現 ...
  • 前端移動App開發環境搭建
    IONIC 是目前最有潛力的一款 HTML5 手機應用開發框架。通過 SASS 構建應用程式，它提供了很多 UI 組件來幫助開發者開發強大的應用。 它使用 JavaScript MVVM 框架和 AngularJS 來增強應用。提供數據的雙向綁定，使用它成為 Web 和移動開發者的共同選擇。Ioni... ...
  • 那些說自己邏輯好的，過來切磋下啊
    今天在微信朋友圈裡看到了這樣一條信息： 100只狗排成一行，分別以1、2、3……編號，從這些狗中選出偶數號的殺掉，剩下的狗重新從1開始編號，然後再選偶數殺掉……如此迴圈直到只剩下1只狗為止。 請問這隻狗要站在哪個位置才能保證存活時間最長（除了1號）？ 起初，覺得這個很簡單，在本子上隨便傻瓜式的排列下 ...
  • Canvas坐標系轉換
    預設坐標系與當前坐標系 canvas中的坐標是從左上角開始的，x軸沿著水平方向（按像素）向右延伸，y軸沿垂直方向向下延伸。左上角坐標為x=0，y=0的點稱作原點。在預設坐標系中，每一個點的坐標都是直接映射到一個CSS像素上。 但是如果圖像的每次繪製都參考一個固定點將缺少靈活性，於是在canvas中引 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類