主頁 > 企業開發 > JavaScript進階篇-JS基礎語法

JavaScript進階篇-JS基礎語法

2020-09-25 05:50:28 企業開發

學習分享變數宣告、變數型別,如何對它們進行賦值、改變、計算等一系列操作,掌握不同運算子的使用方法,靈活運用算術運算子、比較運算子、邏輯運算子對變數和數值進行操作,
  • 2-1 什么是變數
  • 2-2 給變數取個名字(變數命名)
  • 2-3 確定你的存在(變數宣告)
  • 2-4 多樣化的我(變數賦值)
  • 2-5 表達出你的想法(運算式)
  • 2-6 我還有其它用途( +號運算子)
  • 2-7 自加一,自減一 ( ++和- -)
  • 2-8 較量較量(比較運算子)
  • 2-9 我與你同在(邏輯與運算子)
  • 2-10 我或你都可以 (邏輯或運算子)
  • 2-11 是非顛倒(邏輯非運算子)
  • 2-12 保持先后順序(運算子優先級)
  • 2-13 編程練習

什么是變數

什么是變數? 從字面上看,變數是可變的量;從編程角度講,變數是用于存盤某種/某些數值的存盤器,我們可以把變數看做一個盒子,盒子用來存放物品,物品可以是衣服、玩具、水果...等,

1 <script type="text/javascript"> 
2 var str='你好';
3 </script>

給變數取個名字(變數命名)

我們為了區分盒子,可以用BOX1,BOX2等名稱代表不同盒子,BOX1就是盒子的名字(也就是變數的名字)

 

變數命名規則:

1.必須以字母、下劃線或美元符號開頭,后面可以跟字母、下劃線、美元符號和數字,

1 正確:           
2     mysum            
3     _mychar         
4     $numa1    
1 錯誤:
2   6num  //開頭不能用數字
3   %sum //開頭不能用除(_ $)外特殊符號,如(%  + /等)
4   sum+num //開頭中間不能使用除(_ $)外特殊符號,如(%  + /等)

 2.變數名區分大小寫,如:A與a是兩個不同變數,

3.不允許使用JavaScript關鍵字和保留字做變數名,

 確定你的存在(變數宣告)

我們要使用盒子裝東西,是不是先要找到盒子,那在編程中,這個程序叫宣告變數,找盒子的動作,如何表示:

1 宣告變數語法: var 變數名;    

var就相當于找盒子的動作,在JavaScript中是關鍵字(即保留字),這個關鍵字的作用是宣告變數,并為"變數"準備位置(即記憶體),

1 var mynum ; //宣告一個變數mynum

當然,我們可以一次找一個盒子,也可以一次找多個盒子,所以Var還可以一次宣告多個變數,變數之間用","逗號隔開,

1 var num1,mun2 ; //宣告一個變數num1

變數也可以不宣告,直接使用,但為了規范,需要先宣告,后使用,

1 <script type="text/javascript">
2   var mya;
3   mya=5;
4   alert("mya的值是:"+mya);
5 </script>

多樣化的我(變數賦值)

我們可以把變數看做一個盒子,盒子用來存放物品,那如何在變數中存盤內容呢?我們使用"="號給變數存盤內容,看下面的陳述句:

1 var mynum = 5 ; //宣告變數mynum并賦值,

這個陳述句怎么讀呢? 給變數mynum賦值,值為5,我們也可以這樣寫:

1 var mynum; //宣告變數mynum
2 mynum = 5 ; //給變數mynum賦值

注:這里 "="號的作用是給變數賦值,不是等于號,

盒子可以裝衣服、玩具、水果...等,其實,變數是無所不能的容器,你可以把任何東西存盤在變數里,如數值、字串、布林值等,例如:

1 var num1 = 123;       // 123是數值
2 var num2 = "一二三";    //"一二三"是字串
3 var num3=true;    //布林值true(真),false(假)

其中,num1變數存盤的內容是數值;num2變數存盤的內容是字串,字串需要用一對引號""括起來,num3變數存盤的內容是布林值(true、false),

1 <script type="text/javascript">
2 var num1=10;
3 var num2="js";
4  document.write("num1的值是:"+num1);
5  document.write("num2的值是:"+num2);
6 </script>

表達出你的想法(運算式)

運算式與數學中的定義相似,運算式是指具有一定的值、用運算子把常數和變數連接起來的代數式,一個運算式可以包含常數或變數,

串運算式中mychar是變數

數值運算式中num是變數

布爾運算式中num是變數

我還有其它用途( +號運算子)

運算子是用于在JavaScript中指定一定動作的符

(1)運算子/看下面這段JavaScript代碼,

1 sum = numa + numb;

其中的"="和"+"都是運算子,JavaScript中還有很多這樣的運算子,例如,算術運算子(+、-、*、/等),比較運算子(<、>、>=、<=等),邏輯運算子(&&、||、!),“=” 運算子是賦值,不是等于,

(2) "+"運算子

算術運算子主要用來完成類似加減乘除的作業,在JavaScript中,“+”不只代表加法,還可以連接兩個字串,例如:

1 mystring = "Java" + "Script"; // mystring的值“JavaScript”這個字串

自加一,自減一 ( ++和- -)

算術運算子除了(+、-、*、/)外,還有兩個非常常用的運算子,自加一“++”;自減一“--”,首先來看一個例子:

mynum = 10;
mynum++; //mynum的值變為11
mynum--; //mynum的值又變回10

上面的例子中,mynum++使mynum值在原基礎上增加1,mynum--使mynum在原基礎上減去1,其實也可以寫成:

1 mynum = mynum + 1;//等同于mynum++
2 mynum = mynum - 1;//等同于mynum--

 較量較量(比較運算子)

通過比較運算子進行比較,得到值為真(true)和假(false),在JavaScript中,這樣的比較運算子有很多,這些運算子的含義如下:

1 var a = 5;//定義a變數,賦值為5
2 var b = 9; //定義b變數,賦值為9
3 document.write (a<b); //a小于b的值嗎? 結果是真(true)
4 document.write (a>=b); //a大于或等于b的值嗎? 結果是假(false)
5 document.write (a!=b); //a不等于b的值嗎? 結果是真(true)
6 document.write (a==b); //a等于b的值嗎? 結果是假(false)

我與你同在(邏輯與運算子)

 數學里面的“a>b”,在JavaScript中還表示為a>b;數學中的“b大于a,b小于c”是“a<b<c”,那么在JavaScript中可以用&&表示,如下:

1 b>a && b<c    //“&&”是并且的意思, 讀法"b大于a"并且" b小于c "

 “&&”是邏輯與運算子,只有“&&”兩邊值同時滿足(同時為真),整個運算式值才為真,

邏輯與運算子值表:

 注意: 如果A為假,A && B為假,不會在執行B; 反之,如果A為真,要由 B 的值來決定 A && B 的值,

我或你都可以 (邏輯或運算子)

"||"邏輯或運算子,相當于生活中的“或者”,當兩個條件中有任一個條件滿足,“邏輯或”的運算結果就為“真”,

1 var a=3;
2 var b=5;
3 var c;
4 c=b>a ||a>b;  //b>a是true,a>b是false,c是true

邏輯或運算子值表:

注意: 如果A為真,A || B為真,不會在執行B; 反之,如果A為假,要由 B 的值來決定 A || B 的值,

是非顛倒(邏輯非運算子)

"!"是邏輯非運算子,也就是"不是"的意思,非真即假,非假即真,好比小華今天買了一個杯子,小明說:"杯子是白色的",小亮說:“杯子是紅色的”,小華說:"小明說的不是真話,小亮說的不是假話",猜猜小華買的什么顏色的杯子,答案:紅色杯子,

邏輯非運算子值表:

1 var a=3;
2 var b=5;
3 var c;
4 c=!(b>a);  // b>a值是true,! (b>a)值是false
5 c=!(b<a);  // b<a值是false, ! (b<a)值是true

保持先后順序(運算子優先級)

 我們都知道,除法、乘法等運算子的優先級比加法和減法高,例如:

1 var numa=3;
2 var numb=6
3 jq= numa + 30 / 2 - numb * 3;  // 結果為0

 如果我們要改變運算順序,需添加括號的方法來改變優先級:

1 var numa=3;
2 var numb=6
3 jq= ((numa + 30) / (2 - numb)) * 3; //結果是-24.75

運算子之間的優先級(高到低):算術運算子 → 比較運算子 → 邏輯運算子 → "="賦值符號;如果同級的運算是按從左到右次序進行,多層括號由里向外,

1 var numa=3;
2 var numb=6;
3 jq= numa + 30 >10 && numb * 3<2;  //結果為false

編程練習

 1 <script type="text/javascript">
 2   var a,b,sum;
 3   var  a  = 5;
 4   var  b  = 100%7;  
 5   sum = a > b && a*b > 0 ;
 6   document.write( "我認為 a 的值是:" + 5  + " b的值是:" + 6 + "sum 的值是:" + false+"<br/>");
 7   document.write( "答案是,第一輪計算后,a 為:"+ 5 +";b為:"+6 +";第一次計算sum為:"+ false +"<br/>");
 8 
 9   sum = ( (++a) + 3 ) / (2 - (--b) ) * 3;  
10   document.write( "再一次計算后,我認為 a 的值是:" +  6  + " b的值是:" +  5 + "sum 的值是:" + '-9' +"<br/>"); 
11   document.write( "答案是,第二輪計算后,a 為:" + 7 + ";b為:" + 4 +";第二次計算sum為:"+ '-15' +",sum的型別也發生變化了,");
12 
13 </script>

轉載請註明出處,本文鏈接:https://www.uj5u.com/qiye/123518.html

標籤:JavaScript

上一篇:在 Array.filter 中正確使用 Async

下一篇:JavaScript 開發必須掌握技能(三)- 更好的使用for回圈方法

標籤雲
其他(157675) Python(38076) JavaScript(25376) Java(17977) C(15215) 區塊鏈(8255) C#(7972) AI(7469) 爪哇(7425) MySQL(7132) html(6777) 基礎類(6313) sql(6102) 熊猫(6058) PHP(5869) 数组(5741) R(5409) Linux(5327) 反应(5209) 腳本語言(PerlPython)(5129) 非技術區(4971) Android(4554) 数据框(4311) css(4259) 节点.js(4032) C語言(3288) json(3245) 列表(3129) 扑(3119) C++語言(3117) 安卓(2998) 打字稿(2995) VBA(2789) Java相關(2746) 疑難問題(2699) 细绳(2522) 單片機工控(2479) iOS(2429) ASP.NET(2402) MongoDB(2323) 麻木的(2285) 正则表达式(2254) 字典(2211) 循环(2198) 迅速(2185) 擅长(2169) 镖(2155) 功能(1967) .NET技术(1958) Web開發(1951) python-3.x(1918) HtmlCss(1915) 弹簧靴(1913) C++(1909) xml(1889) PostgreSQL(1872) .NETCore(1853) 谷歌表格(1846) Unity3D(1843) for循环(1842)

熱門瀏覽
  • IEEE1588PTP在數字化變電站時鐘同步方面的應用

    IEEE1588ptp在數字化變電站時鐘同步方面的應用 京準電子科技官微——ahjzsz 一、電力系統時間同步基本概況 隨著對IEC 61850標準研究的不斷深入,國內外學者提出基于IEC61850通信標準體系建設數字化變電站的發展思路。數字化變電站與常規變電站的顯著區別在于程序層傳統的電流/電壓互 ......

    uj5u.com 2020-09-10 03:51:52 more
  • HTTP request smuggling CL.TE

    CL.TE 簡介 前端通過Content-Length處理請求,通過反向代理或者負載均衡將請求轉發到后端,后端Transfer-Encoding優先級較高,以TE處理請求造成安全問題。 檢測 發送如下資料包 POST / HTTP/1.1 Host: ac391f7e1e9af821806e890 ......

    uj5u.com 2020-09-10 03:52:11 more
  • 網路滲透資料大全單——漏洞庫篇

    網路滲透資料大全單——漏洞庫篇漏洞庫 NVD ——美國國家漏洞庫 →http://nvd.nist.gov/。 CERT ——美國國家應急回應中心 →https://www.us-cert.gov/ OSVDB ——開源漏洞庫 →http://osvdb.org Bugtraq ——賽門鐵克 →ht ......

    uj5u.com 2020-09-10 03:52:15 more
  • 京準講述NTP時鐘服務器應用及原理

    京準講述NTP時鐘服務器應用及原理京準講述NTP時鐘服務器應用及原理 安徽京準電子科技官微——ahjzsz 北斗授時原理 授時是指接識訓通過某種方式獲得本地時間與北斗標準時間的鐘差,然后調整本地時鐘使時差控制在一定的精度范圍內。 衛星導航系統通常由三部分組成:導航授時衛星、地面檢測校正維護系統和用戶 ......

    uj5u.com 2020-09-10 03:52:25 more
  • 利用北斗衛星系統設計NTP網路時間服務器

    利用北斗衛星系統設計NTP網路時間服務器 利用北斗衛星系統設計NTP網路時間服務器 安徽京準電子科技官微——ahjzsz 概述 NTP網路時間服務器是一款支持NTP和SNTP網路時間同步協議,高精度、大容量、高品質的高科技時鐘產品。 NTP網路時間服務器設備采用冗余架構設計,高精度時鐘直接來源于北斗 ......

    uj5u.com 2020-09-10 03:52:35 more
  • 詳細解讀電力系統各種對時方式

    詳細解讀電力系統各種對時方式 詳細解讀電力系統各種對時方式 安徽京準電子科技官微——ahjzsz,更多資料請添加VX 衛星同步時鐘是我京準公司開發研制的應用衛星授時時技術的標準時間顯示和發送的裝置,該裝置以M國全球定位系統(GLOBAL POSITIONING SYSTEM,縮寫為GPS)或者我國北 ......

    uj5u.com 2020-09-10 03:52:45 more
  • 如何保證外包團隊接入企業內網安全

    不管企業規模的大小,只要企業想省錢,那么企業的某些服務就一定會采用外包的形式,然而看似美好又經濟的策略,其實也有不好的一面。下面我通過安全的角度來聊聊使用外包團的安全隱患問題。 先看看什么服務會使用外包的,最常見的就是話務/客服這種需要大量重復性、無技術性的服務,或者是一些銷售外包、特殊的職能外包等 ......

    uj5u.com 2020-09-10 03:52:57 more
  • PHP漏洞之【整型數字型SQL注入】

    0x01 什么是SQL注入 SQL是一種注入攻擊,通過前端帶入后端資料庫進行惡意的SQL陳述句查詢。 0x02 SQL整型注入原理 SQL注入一般發生在動態網站URL地址里,當然也會發生在其它地發,如登錄框等等也會存在注入,只要是和資料庫打交道的地方都有可能存在。 如這里http://192.168. ......

    uj5u.com 2020-09-10 03:55:40 more
  • [GXYCTF2019]禁止套娃

    git泄露獲取原始碼 使用GET傳參,引數為exp 經過三層過濾執行 第一層過濾偽協議,第二層過濾帶引數的函式,第三層過濾一些函式 preg_replace('/[a-z,_]+\((?R)?\)/', NULL, $_GET['exp'] (?R)參考當前正則運算式,相當于匹配函式里的引數 因此傳遞 ......

    uj5u.com 2020-09-10 03:56:07 more
  • 等保2.0實施流程

    流程 結論 ......

    uj5u.com 2020-09-10 03:56:16 more
最新发布
  • 使用Django Rest framework搭建Blog

    在前面的Blog例子中我們使用的是GraphQL, 雖然GraphQL的使用處于上升趨勢,但是Rest API還是使用的更廣泛一些. 所以還是決定回到傳統的rest api framework上來, Django rest framework的官網上給了一個很好用的QuickStart, 我參考Qu ......

    uj5u.com 2023-04-20 08:17:54 more
  • 記錄-new Date() 我忍你很久了!

    這里給大家分享我在網上總結出來的一些知識,希望對大家有所幫助 大家平時在開發的時候有沒被new Date()折磨過?就是它的諸多怪異的設定讓你每每用的時候,都可能不小心踩坑。造成程式意外出錯,卻一下子找不到問題出處,那叫一個煩透了…… 下面,我就列舉它的“四宗罪”及應用思考 可惡的四宗罪 1. Sa ......

    uj5u.com 2023-04-20 08:17:47 more
  • 使用Vue.js實作文字跑馬燈效果

    實作文字跑馬燈效果,首先用到 substring()截取 和 setInterval計時器 clearInterval()清除計時器 效果如下: 實作代碼如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta ......

    uj5u.com 2023-04-20 08:12:31 more
  • JavaScript 運算子

    JavaScript 運算子/運算子 在 JavaScript 中,有一些運算子可以使代碼更簡潔、易讀和高效。以下是一些常見的運算子: 1、可選鏈運算子(optional chaining operator) ?.是可選鏈運算子(optional chaining operator)。?. 可選鏈操 ......

    uj5u.com 2023-04-20 08:02:25 more
  • CSS—相對單位rem

    一、概述 rem是一個相對長度單位,它的單位長度取決于根標簽html的字體尺寸。rem即root em的意思,中文翻譯為根em。瀏覽器的文本尺寸一般默認為16px,即默認情況下: 1rem = 16px rem布局原理:根據CSS媒體查詢功能,更改根標簽的字體尺寸,實作rem單位隨螢屏尺寸的變化,如 ......

    uj5u.com 2023-04-20 08:02:21 more
  • 我的第一個NPM包:panghu-planebattle-esm(胖虎飛機大戰)使用說明

    好家伙,我的包終于開發完啦 歡迎使用胖虎的飛機大戰包!! 為你的主頁添加色彩 這是一個有趣的網頁小游戲包,使用canvas和js開發 使用ES6模塊化開發 效果圖如下: (覺得圖片太sb的可以自己改) 代碼已開源!! Git: https://gitee.com/tang-and-han-dynas ......

    uj5u.com 2023-04-20 08:01:50 more
  • 如何在 vue3 中使用 jsx/tsx?

    我們都知道,通常情況下我們使用 vue 大多都是用的 SFC(Signle File Component)單檔案組件模式,即一個組件就是一個檔案,但其實 Vue 也是支持使用 JSX 來撰寫組件的。這里不討論 SFC 和 JSX 的好壞,這個仁者見仁智者見智。本篇文章旨在帶領大家快速了解和使用 Vu ......

    uj5u.com 2023-04-20 08:01:37 more
  • 【Vue2.x原始碼系列06】計算屬性computed原理

    本章目標:計算屬性是如何實作的?計算屬性快取原理以及洋蔥模型的應用?在初始化Vue實體時,我們會給每個計算屬性都創建一個對應watcher,我們稱之為計算屬性watcher ......

    uj5u.com 2023-04-20 08:01:31 more
  • http1.1與http2.0

    一、http是什么 通俗來講,http就是計算機通過網路進行通信的規則,是一個基于請求與回應,無狀態的,應用層協議。常用于TCP/IP協議傳輸資料。目前任何終端之間任何一種通信方式都必須按Http協議進行,否則無法連接。tcp(三次握手,四次揮手)。 請求與回應:客戶端請求、服務端回應資料。 無狀態 ......

    uj5u.com 2023-04-20 08:01:10 more
  • http1.1與http2.0

    一、http是什么 通俗來講,http就是計算機通過網路進行通信的規則,是一個基于請求與回應,無狀態的,應用層協議。常用于TCP/IP協議傳輸資料。目前任何終端之間任何一種通信方式都必須按Http協議進行,否則無法連接。tcp(三次握手,四次揮手)。 請求與回應:客戶端請求、服務端回應資料。 無狀態 ......

    uj5u.com 2023-04-20 08:00:32 more