一、關于變量
(1) 什么是變量
變量 Variable ,描述了程序中臨時存儲數(shù)據(jù)的容器

(2) 變量的聲明
原生
JavaScript中,有兩種方式可以創(chuàng)建變量:
- 可以直接通過一個自定義名稱創(chuàng)建一個變量;
- 使用
var關鍵字創(chuàng)建變量(推薦)
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// 聲明了一個變量【盡管可以使用,但是項目規(guī)范中嚴禁使用】
// 如果沒有變量的聲明關鍵字,當js中出現(xiàn)大量代碼時,我們無法定位這個變量什么位置被第一次聲明
// 缺點:降低了代碼的可讀性
name = "大牧"
// 聲明了另一個變量【推薦的操作方式】
var age = 18
console.log("name:", name)
console.log("age:" , age)
</script>
</body>
</html>
備注:關于es6中聲明變量的操作
ES6語法標準中,提供了let、const用來聲明變量和常量,主要用于補充原生JavaScript中的var關鍵字功能,相當于對變量的聲明語法,提供了更多的功能擴展注意:關于
ES6語法標準,關注我,后面會單獨講解!
(3) 命名規(guī)則
原生 JavaScript 作為一種編程語言,內部可以通過一些符號表示一些數(shù)據(jù),。樣的符號稱為標識符.
標識符中包含了關鍵字、變量
標識符命名規(guī)則:描述數(shù)據(jù)的符號由字母、數(shù)字、下劃線、 $ 符號組成,其中
數(shù)字不能開頭
① 關鍵字
編程語言本身已經(jīng)內置使用了很多的英文單詞,這些內置的單詞都稱為關鍵字,如 var
可以參考一下都有哪些關鍵字,沒有必要去記憶,使用的過程中可以根據(jù)程
序是否報錯直接進行代碼調整
下圖中是一些常見關鍵字

② 變量
代碼開發(fā)過程中,開發(fā)人員為了存儲數(shù)據(jù)自定義的符號;注意不能使用關鍵字
變量的命名,遵循標識符的命名規(guī)則、不能使用關鍵字
var height = 175 // √
var shenGao = 180 // √
var w = 80 // √
var 1 = 80 // X
var this = 80 // X
var gender = '男' // √
var &gender = '女' // X ? √
var address = '河南省鄭州市' // √
var _addr = '河南省開封市' // √
var $addr = '河南省焦作市' // X ? √
var 2addr = '河南省濮陽市' // X
var %intro = '個人介紹' // X ? √
var intro% = '個人介紹' // X ? √
var intro_personal = '個人介紹' // √
(4)命名規(guī)范
大量的項目實踐中,為了提高代碼的閱讀性/可讀性,以及提高查看代碼的效率;對變量名稱的命名有一定的開發(fā)規(guī)范
- 見名知意
- 駝峰命名法:一個或者多個單詞(拼音)組成,第一個單詞(拼音)全部小寫,后面每個單詞(拼音)首字母大寫
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// 這四個變量,分別表示了什么意思?
var a = 12
var b = 80
var c = 180
var d = 1
// 這四個變量,分別表示了什么意思?
var shenGao = 178
var tiZhong = 80
var xingBie = 1
var nianLing = 16 // ninaLing(【小】駝峰命名法) NianLing(大駝峰命名法 | 帕斯卡命名法)
// 這四個變量,分別表示了什么意思?
var height = 180
var weight = 75
var gender = 0
var age = 20
// 下面兩個變量,那個變量語法更加人性化/更容易閱讀
var xian = "xxxx"
var xiAn = "xxxxx"
var xian = "xxxxx"
var gerenjieshao = "........"
var geRenJieShao = "xxxxxxxx"
var personalIntroduce = "......"
var personalintroduce = "xxxxxx"
</script>
</body>
</html>
(5) 變量的賦值
變量作為一個存儲數(shù)據(jù)的容器,需要添加數(shù)據(jù)之后才能正常訪問,數(shù)據(jù)訪問方式主要有:存儲數(shù)據(jù)、查詢數(shù)據(jù)、修改數(shù)據(jù)以及刪除數(shù)據(jù)
變量中存儲數(shù)據(jù)的方式就是變量的賦值操作,需要使用 賦值運算符:=
<script>
// 1、賦值方式(默認)
// 使用賦值語句,給單個變量中存儲數(shù)據(jù)
var version = "V1.0.0"
console.log("version:", version)
// 2、連續(xù)賦值
// 項目開發(fā)中使用到多個變量,初始數(shù)據(jù)都是一致的
// 1 1 2 3 5 8... 斐波那契數(shù)列
// 基本賦值
var n1 = 1
var n2 = 1
console.log("n1:", n1, ",n2:", n2)
var n3 = n4 = 1
console.log("n3: ", n3, ", n4:", n4)
// 3、項目中某些場景下,多個變量初始數(shù)據(jù)不一致
var name = '大牧', age = 20, gender = '男'
console.log('name:', name, ", age:", age, ", gender:", gender)
// 4、注意的問題:關于變量的交叉賦值
// var name, age = '大牧', 28
// 期望 name="大牧" age=28; js語法中不支持
</script>
(6) 變量的使用
項目中的數(shù)據(jù)操作,根據(jù)操作方式主要區(qū)分為兩種
- 數(shù)據(jù)的操作:數(shù)據(jù)作為一個獨立的整體,可以執(zhí)行存儲、查詢、修改、刪除,簡稱增刪改查
- 增刪改查:簡稱
CRUD C:Create 增加、R:Retrieve 查詢、U:Update 修改、D:Delete 刪除
- 增刪改查:簡稱
- 數(shù)據(jù)的運算:數(shù)據(jù)和數(shù)據(jù)之間,通過運算符執(zhí)行運算,一般都是基礎的加減乘除...
變量的使用,區(qū)分增加、修改、查詢和刪除的操作 - 增加:聲明變量賦值的過程
- 查詢:通過變量名稱,獲取變量中數(shù)據(jù)的過程
- 修改:給指定的變量重新賦值的過程
- 刪除:
- 業(yè)務刪除:項目開發(fā)中,約定變量中存儲一個無效數(shù)據(jù),表示該數(shù)據(jù)被刪除;變量依然存在
- 真實刪除:項目代碼中,使用
delete關鍵字針對變量進行物理刪除,很容易造成代碼穩(wěn)定性問題,語法上受到一定的限制,如不能直接刪除var聲明的變量
<script>
// 聲明變量
// 聲明變量的同時可以賦值;也可以聲明變量以后再進行賦值
var myName; // 等價于:var myName = undefined(未定義)
console.log("myName:", myName)
// 賦值:增加數(shù)據(jù)
myName = "damu"
console.log("myName:", myName)
// 修改數(shù)據(jù):給變量中存儲新的數(shù)據(jù),覆蓋舊的數(shù)據(jù)
myName = "大牧"
console.log("myName:", myName)
// 刪除數(shù)據(jù):對于已經(jīng)不再使用的變量,需要刪除變量釋放占用的系統(tǒng)資源
// 業(yè)務中的刪除,并不建議直接刪除變量,而是給變量賦值一個(開發(fā)規(guī)范)約定的空值
// 1- 約定空字符串,表示刪除了數(shù)據(jù)
// 2- 約定undefined,表示刪除了數(shù)據(jù)
myName = ""
console.log("myName: ", myName)
// 只有在特殊的情況下,才會真實刪除變量
// 直接刪除變量的操作是一種敏感并且危險的操作: 變量一旦真實刪除,代碼中再次使用很容易出現(xiàn)問題
// delete語句對于var聲明的變量,目前語法上不支持刪除DontDelete
// delete myName
// console.log("myName delete:", myName)
</script>
(7) 變量預解析
// 練習1
// 項目中我想使用班級的名稱
console.log("班級名稱:", className)
// Uncaught Reference Error: className is not defined
// 未捕獲的 引用 錯誤:className變量 沒有 定義
// 一旦程序報錯,后面的代碼不會執(zhí)行(程序崩潰退出)
// 練習2
// 項目中變量的使用規(guī)則:先聲明后使用
var className = "精品班"
console.log("班級名稱:", className)
// 練習3
// 變量的預解析
console.log("班級名稱:", className) // undefined,沒有報錯?!
var className = "精品班"
console.log("班級名稱:", className) // "精品班"
// 練習4
// 為什么沒有報錯?var關鍵字聲明的變量,存在預解析功能
// 預解析:也稱為變量提升,將變量的聲明語句提升最前面,賦值還在原來的位置
// 上面的代碼,等價于:
var className; // 變量預解析:提升了變量的聲明,保障當前程序代碼運行正確性(容錯性)
console.log("班級名稱:", className) // undefined,沒有報錯?!
className = "精品班"
console.log("班級名稱:", className) // "精品班"
二、數(shù)據(jù)類型
(1) 認識數(shù)據(jù)類型
可以表示各種數(shù)據(jù)的類型的概念編程語言中,通過具體的代碼,描述對應的數(shù)據(jù)類型!
(2) 基本數(shù)據(jù)類型(掌握)
原生JavaScript中提供了6種基本數(shù)據(jù)類型:
- 數(shù)值:
Number - 字符串:
String - 布爾:
Boolean - 空值:
Null - 未定義:
Undefined - 對象(一切皆對象):
Object
// String 字符串類型,可以使用雙引號、單引號包含起來的一串字符
// 開發(fā)規(guī)范中:一般推薦或者要求使用單引號包含的語法
// 描述一個人的姓名
var name = "廉頗" // var name = '廉頗'
console.log('姓名:',name)
// Number 數(shù)值類型,包含整數(shù)和小數(shù)(浮點數(shù))
// 描述一個人的身高
var height = 1.75
// 描述一個人的體重
var weight = 80
console.log('height身高:',height)
console.log('weight體重:',weight)
// Boolean 類型,布爾類型,只有兩種取值:true / false
// 描述一個人是否存活|該用戶賬號是否可用
var status = true // false
console.log('status可用:',status)
// undefined:表示無效數(shù)據(jù),未定義數(shù)據(jù)
// 描述一個無效數(shù)據(jù)
var jobs; // var jobs = undefined
console.log('jobs工作:',jobs)
// null:表示空值,表示一種沒有任何數(shù)據(jù)的狀態(tài)
// 描述一個空數(shù)據(jù)
var address = null
console.log('address地址:',address)
(3) 復雜數(shù)據(jù)類型(了解)
原生JavaScript中也提供了一些復雜數(shù)據(jù)類型,用于描述一些較為復雜的事物,如:常見的復雜類型
-
Array:數(shù)組 -
Function:函數(shù) -
Object:對象 -
Math:處理數(shù)學運算的類型 -
Date:處理日期時間的類型 -
RegExp:處理正則表達式的類型 -
UUID:處理唯一數(shù)據(jù)的類型
// 復雜類型的基本使用
// 1、數(shù)組
var names = ["老王", "小李", "大黃", "小灰"]
console.log(names)
// 2、日期
var date = new Date()
console.log("今年是:", date.getFullYear(), ",月份:", date.getMonth() + 1)
// 3、隨機數(shù):得到一個驗證碼
var rcode = Math.random().toString(36).substr(2, 6)
console.log("隨機驗證碼:", rcode)
(4) 查看類型
-
typeof(dat):簡易的數(shù)據(jù)類型查看方式,適用于大部分場景 -
Object.prototype.toString.call(dat):數(shù)據(jù)類型原型查看方式
// 定義基本類型
var name = "耀"
console.log(name, typeof name) // 耀 string
var hero = "娜可露露"
console.log(hero, typeof(hero)) // 娜可露露 string
var height = 20
console.log(height, typeof(height)) // 20 'number'
var pi = 3.1415
console.log(pi, typeof(pi)) // 3.1415 'number'
// status 單詞,和前面用過的name一樣,瀏覽器軟件里面已經(jīng)使用過這個變量
var sts = true
console.log(sts, typeof(sts)) // true 'boolean'
var address = undefined;
console.log(address, typeof(address)) // undefined 'undefined'
var intro = null
console.log(intro, typeof(intro)) // null 'object'
// 基本類型中存在Null類型,為什么這里打印object類型?有爭議的類型
console.log(intro, Object.prototype.toString.call(intro)) // null '[object Null]'
// 復雜類型
var names = ["李信", "呂布"]
console.log(names, typeof(names)) // ['李信', '呂布'] 'object'
console.log(names, Object.prototype.toString.call(names)) // ['李信', '呂布'] '[object Array]'
var date = new Date()
console.log(date, typeof(date)) //
console.log(date, Object.prototype.toString.call(date)) //
(5) 類型轉換
項目中原生JavaScript數(shù)據(jù)的表示方式,同一個數(shù)據(jù)可能會以不同類型的形式表示出來;進行數(shù)據(jù)運算(加減乘除)的時候很容易出現(xiàn)錯誤運算結果;需要掌握類型的轉換技術
- 轉換成字符串
- 字符串拼接
String(dat)dat.toString()
- 轉換成數(shù)值
Number(dat)parseInt(dat)parseFloat(dat)
- 轉換成布爾(字符串、數(shù)值、
null/undefined)Boolean(dat)
// 同一個數(shù)據(jù),可以是不同的類型
// var n1 = 3.14 // number
// var n2 = '3.14' // string
// var b1 = true // boolean
// var b2 = 'false' // string
// 需要進行類型轉換(大部分類型轉換都是基本類型的轉換)
// 練習1、將其他類型轉換成字符串類型
var x = 12
console.log(x, typeof(x))
var x1 = x + ''
console.log(x1, typeof(x1))
var x2 = String(x)
console.log(x2, typeof(x2))
var x3 = x.toString()
console.log(x3, typeof(x3))
var b = true
var b1 = String(b)
console.log(b1, typeof(b1)) // 'true' string
var n = null
var n1 = String(null)
console.log(n1, typeof(n1)) // 'null' string
var u = undefined
var u1 = String(u)
console.log(u1, typeof(u1)) // 'undefined' string
// 練習2、轉換成數(shù)值
var age = '20.01'
console.log(age, typeof(age)) // '20' string
// 轉換成數(shù)值
var a1 = Number(age)
console.log(a1, typeof(a1)) // 20.01 number
// 轉換成整數(shù)
var a2 = parseInt(age)
console.log(a2, typeof(a2)) // 20 number
// 轉化成浮點數(shù)
var a3 = parseFloat(age)
console.log(a3, typeof(a3)) // 20.01 number
// 特殊轉換
var money = "200元"
var m1 = parseInt(money)
console.log(m1, typeof(m1)) // 200 number
money = "¥200元"
m1 = parseInt(money)
// NaN(具體數(shù)據(jù)): not a number不是一個數(shù)值;屬于數(shù)值類型
console.log(m1, typeof(m1)) // NaN number
// 其他類型
// 布爾類型,true -> 1;false -> 0
var b = true
var b1 = Number(b)
console.log(b1, typeof(b1)) // 1 number
// null 和 undefined
var n = null
var n1 = Number(n)
console.log(n1, typeof(n1), "Number") // 0 number
var n2 = parseInt(n)
console.log(n2, typeof(n2), "parseInt") // NaN number
var u = undefined
var u1 = Number(u)
console.log(u1, typeof(u1)) // NaN number
var u2 = parseInt(u)
console.log(u2, typeof(u2)) // NaN number
// 練習3、布爾類型
// 字符串轉換布爾類型
// 空字符串-> false,非空字符串->true
var s = "" // 空字符串
var s2 = " " // 包含空白字符的字符串
var s3 = "helloworld" // 非空字符串
var s01 = Boolean(s)
console.log(s01, typeof(s01)) // false boolean
var s02 = Boolean(s2)
console.log(s02, typeof(s02)) // true boolean
var s03 = Boolean(s3)
console.log(s03, typeof(s03)) // true boolean
// 數(shù)值轉換成布爾類型
// 0-> false, 非0-> true
var n1 = -10
var n2 = 0
var n3= 10
var n01 = Boolean(n1)
console.log(n01, typeof(n01)) // true, boolean
var n02 = Boolean(n2)
console.log(n02, typeof(n02)) // false booelean
var n03 = Boolean(n3)
console.log(n03, typeof(n03)) // true boolean
// null和undefined
var n = null
var n01 = Boolean(n)
console.log(n01, typeof(n01)) // false 'boolean'
var u = undefined
var u01 = Boolean(u)
console.log(u01, typeof(u01)) // false 'boolean'
(6) 顯式/隱式轉換
// 加法運算:參與運算的數(shù)據(jù),無法執(zhí)行隱式轉換,所以得到錯誤結果
// 通過固定語法,將類型進行轉換后完成數(shù)據(jù)運算:顯示類型轉換
// 1.
var price = '20'
var total = price + price
var totalx = parseInt(price) + pasreInt(price) // 顯式轉換
console.log('total:', total) // total: 2020 期望以外的錯誤結果(代碼沒有報錯)
// 數(shù)據(jù)的隱式類型轉換:數(shù)據(jù)參與運算時,類型在運算過程中進行了自動匹配轉換
// 2. 字符串和數(shù)值執(zhí)行乘法運算時,出現(xiàn)了類型自動轉換(字符串-> 數(shù)值-> 參與運算)
var price2 = '30'
var cnt = 2
var total2 = price2 * 2 // 字符串 乘以 數(shù)值
console.log('total2:', total2) // total2: 60
// 3. 字符串和字符串執(zhí)行減法運算時,出現(xiàn)類型自動轉換(字符串-> 數(shù)值-> 參與運算)
var pay = '180'
var money = '200'
var balance = money - pay // 字符串 減法 字符串
console.log("找零:", balance) // 找零: 20
// 4. 數(shù)值執(zhí)行保留小數(shù)位數(shù)操作時,出現(xiàn)類型自動轉換(數(shù)值-> 字符串)
var pi = 3.1415926
var pi2 = pi.toFixed(2) // 保留兩位小數(shù)位數(shù)
console.log(pi2, typeof(pi2)) // 3.14 string
三、運算符
(1) 關于數(shù)據(jù)的表示
編程語言中,一般處理數(shù)值數(shù)據(jù),會有不同的進制表示方式:
- 二進制(逢二進一):
0, 1, 10, 11, 100, 101, 110, 111... - 八進制(逢八進一):
0,1,2,3,4,5,6,7,10,11,12,13,14,15,16,17,20.... - 十進制(逢十進一):
0,1,2,3,4,5,6,7,8,9,10,11,12,... - 十六進制(逢十六進一):
0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f,10,11,12,....
(2) 賦值運算符
| 符號 | 描述 |
|---|---|
= |
將等號右側的數(shù)據(jù),賦值給左側的變量 |
// 賦值操作
var name = "damu"
(3) 算術運算符
| 符號 | 描述 |
|---|---|
+ |
加法運算 |
- |
減法運算 |
* |
乘法運算 |
/ |
除法運算 |
% |
取余數(shù)運算 |
++ |
自增運算 |
-- |
自減運算 |
++在后,是先賦值后自增 j=i j=i+1; 變量賦予的是舊值,也就是1
++在前:先自增后賦值 i=1+i j=i 變量賦予的是新值 也就是2.
--同上。
// 2、算術運算符
var n1 = 12
var n2 = 5
console.log(n1 + n2) // 17
console.log(n1 - n2) // 7
console.log(n1 * n2) // 60
console.log(n1 / n2) // 2.4
console.log(n1 % n2) // 2(整除的情況下得到的余數(shù))
// 自增運算
n1++ // 獨立出來的,++符號放在前面和后面沒有區(qū)別
console.log('n1',n1) // 13
++n1
console.log('n1',n1) // 14
// 自增賦值
var x1 = n1++ // 先賦值,后加加
console.log(x1,',x1, ', n1, ",n1") // 14 ',x1, ' 15 ',n1'
var x2 = ++n1 // 先加加,后賦值
console.log(x2, ',x2, ', n1, ",n1") // 16 ',x2, ' 16 ',n1'
注意事項:算術運算符可以和賦值運算符進行混合使用
| 符號 | 描述 |
|---|---|
+= |
a += 1<br />等價于<br /> |
// 2.1、混合運算符
var num = 12
// num += 10
num = num + 10
console.log(num, ": num")
(4) 比較運算符
項目中經(jīng)常做一些數(shù)據(jù)的比較操作,通過返回的數(shù)據(jù)(布爾類型的)體現(xiàn)比較的結果(true | false)
| 符號 | 描述 |
|---|---|
> |
大于 |
>= |
大于等于 |
< |
小于 |
<= |
小于等于 |
== |
等于 |
!= |
不等于 !=
|
=== |
全等于= = =
|
!== |
不全等于!==
|
// 3、比較運算符
var age = 17 // 真實年齡
var verify = 20 // 限制年齡
console.log(age > verify) // false:age不大于verify
console.log(age >= verify) // false
console.log(age < verify) // true:age數(shù)據(jù)小于verify數(shù)據(jù)
console.log(age <= verify) // true
age = 20
console.log(age == verify) // true 相等
console.log(age != verify) // false
age = '20'
console.log(age == verify) // true age中的數(shù)值和verify數(shù)值相等
console.log(age === verify) // false: age和verify,數(shù)據(jù)類型或者數(shù)值不相同
console.log(age !== verify) // true
// 字符串,通過ascii碼(整數(shù))表示
// 字符串進行比較運算時,自動通過ascii碼進行判斷
var c1 = "a" // 字母a ascii: 97
var c2 = "b" // 字母b ascii:98
console.log(c1 > c2) // false,"a"不大于"b"
// 字符串中包含多個字符時,逐位比較
var c3 = "ab"
var c4 = "abc"
console.log(c3 > c4) // false
(5) 邏輯運算符
| 符號 | 描述 |
|---|---|
&& |
并且關系,多個條件同時為true返回true
|
! |
取反 |
|| 或者關系,多個條件只要有一個為true返回true
// 4、邏輯運算符
// 賬號+密碼,同時正確,表示登錄成功
var uname = "admin"
var upass = "123"
// 判斷賬號密碼是否正確
console.log("admin" === uname && "1234" === upass)
// true:賬號密碼正確
// false:提示賬號或者密碼有誤
// 用戶可以使用賬號或者手機號碼登錄
var uname = "admin"
var uphone = "15899990000"
var upass = "123"
console.log(
('admin' === uname || '15899990000' === uphone)
&&
"123" === upass
) // true: 賬號|手機號碼 + 密碼輸入正確
// false:賬號|手機號碼 或者 密碼有誤
// 注冊一個賬號,判斷賬號是否合法
var account = "admin" // 模擬用戶輸入
console.log(Boolean(account)) // false,提示-注冊賬號不能為空
// true,用戶輸入了賬號,可以繼續(xù)注冊
console.log(!Boolean(account)) // 和上一行代碼的結果剛好相反,為了方便明天要學的合法性if判斷
(6) 三元運算符
| 符號 | 描述 |
|---|---|
| 條件 ? 結果1 : 結果2 | 執(zhí)行表達式中的?符號前面的條件運算<br />條件為true執(zhí)行結果1中的代碼<br />條件為false執(zhí)行結果2中的代碼 |
// 5、三元運算符
var uname = "admin"
var upass = "123"
var name = prompt("請輸入賬號:")
var pass = prompt("請輸入密碼:")
name === uname && pass === upass ? alert("用戶登錄成功"): alert("賬號或者密碼有誤")
(7) 位運算符(了解)
| 符號 | 描述 |
|---|---|
& |
與運算,1 - 1 -> 1、1 - 0 -> 0 、0 - 0 -> 0<br />eg: 1 & 2 => ?<br />eg: 01 & 10 => 00
|
^ |
異或運算:1-1-> 0、0-0-> 0、1-0-> 1
|
>> |
右移運算,100 -> >> -> 010<br /> 4 4>>1 2 |
<< |
左移運算,010 -> << -> 100<br /> 2 -> 2<<1 -> 4 |
| | | 或運算:1 - 1 -> 1、1- 0-> 1、0 - 0 -> 0<br />eg: 1 | 2 => ?<br />eg: 01 | 10 => 11 |