文章目錄

一、輸入和輸出內容

1.1 輸出

1.1.1 在瀏覽器的控制臺輸出打印

 console.log("I love JS")

1.1.2 直接在瀏覽器的頁面上輸出內容

document.write(111)

1.1.3 頁面彈出警告對話框

alert("出錯啦")

1.2 輸入

prompt("請輸入你的姓名")

顯示一個對話框，對話框中包含一條信息，用來提示用戶輸入文字

二、變量

2.1 變量是什么

變量是一個容器，用來存儲數據的。舉一些生活中的例子，就比如比較熟悉的HTML標簽、教室、宿舍等等

2.2 變量的聲明和賦值

? 使用關鍵字let 聲明

let age = 20let arr = [10, 20, 30, 40, 50, 60, 70, 80, 90]let name = "張三"

案例： 交換兩個變量

    <script>let a = 10let b = 20let tt = aa = bb = tdocument.write(a+"</br>" + b)</script>

2.3 變量的命名規范和規范

規則

1. 不能使用關鍵字：有特殊含義的字符，比如JavaScript內置的一些英語詞匯：var, let, const, for, if...

2. 只能用數字、字母、下劃線、$組成， 不能以數字開頭

3. 嚴格區分大小寫： 比如name和Name是兩個不同的變量

規范：

1. 起名要有意義：比如商品，你可以使用goods, 這樣別人看到就可以很快理解了

2. 可以采用小駝峰命名：比如用戶姓名： userName

三、變量擴展（數組）

3.1 數組的聲明

let arr = [1,2,3,4, "xx"]

3.2 數組的使用

數組是有序的，如果需要使用數組中的元素，可以使用索引號(下標)來查找，索引號從0開始

->? 數組名[下標]

console.log(arr[0])   // ->> 1console.log(arr[2])   // ->> 3

3.3 數組的長度

console.log(arr.length)  // -> 5

四、常量

4.1 常量的聲明和賦值

使用 const 聲明

const PI = 3.14  
//常量聲明時，必須賦值
//常量賦值后，不能修改
console.log(PI)

注意：常量不能夠被重新賦值，常量在聲明的時候必須賦值（初始化）

五、數據類型

JS的數據類型分為兩大類：基本數據類型和引用數據類型

1. 基本數據類型： 數字類型number、字符串類型string、布爾類型boolean、空類型null、未定義型undefined

2. 引用數據類型：對象object

在JS中可以使用type of 來查看變量是什么數據類型?

5.1 數字數據類型

let num = 20
console.log(type of num)   // -> number

5.2 字符串類型

let name = "張三"
console.log(type of name)  // -> string

?1. 字符串的拼接 （使用 + 進行拼接）

console.log("我的同學叫" + name + ",他很帥")

2. 模板字符串?

 </script>let str = `xx`let str1 = 'xx1'let str2 = ''// 模板字符串// 1. 模板字符串用反引號標識// 2. 模板字符串中可以出現變量，變量用${變量名}標識// 3. 模板字符串中可以出現表達式，表達式用${表達式}標識// 4. 模板字符串中可以出現函數調用，函數調用用${函數名()}標識// 5. 模板字符串中可以出現多行文本，用\n標識let age = 20console.log(`我今年${age}歲了`);</script>

5.3 布爾類型

let isClick = true
console.log(type of isClick)   // -> trueconsole.log(3 > 4)  // -> false

5.4 null 類型

let obj = null

5.5 未定義類型

聲明了變量，但是未賦值，那么這個變量就是未定義類型

let num
console.log(num)   // -> undefined

六、隱式轉換和顯示轉換

6.1 使用 + 進行隱式轉換

只要加號一側有引號，就會將另一側的數字型轉換為字符串類型

console.log(1 + 1)   // -> 2 
console.log("xx" + 1)  // -> xx1

6.2 顯示轉換

1. 轉為數字類型

let s = "1"
let num = Number(s)
console.log(num)   // -> 1

注意：（1）其實除了 + 外，? 其他運算符 -， *， /，都有同樣的作用

? ? ? ? ? ?（2）但是利用NUmber()進行強制轉換時，所需轉換的變量，去掉引號后，必須是數字，不然會變成NaN?

除了Number以外，還有兩種方法可以轉換為數字類型

1. parseInt()? ? >>? ?只保留整數

2.parseFloat()? ?>> 可以保留小數

?2.轉為字符串類型

let num = 1
let str = String(num)
console.log(str)  ->  "1"

七、運算符

7.1 算數運算符

算數運算符我們應該已經很熟悉了： +， -， *， / , % ...

7.2 賦值運算符

1.? ?=

2. += ， -=， *= ，/= ,......

let num = 10
num += 10    // -> 相當于 num = num + 10  

?7.3自增自減運算符

++

--

let num = 1
num = num + 1
console.log(num)  //  -> 2// same
num++
console.log(num)   ->  2

更多解釋：

后置自增 i++ 和 前置自增 ++i? 的區別：

let i = 1console.log(++i + 1);   // 結果是3// 注意： i是2// i先自加 1 ，變成2之后，再和后面的2相加

let i = 1
console.log(i++ + 1) // -> 2// i后加1，參與運算的i值仍是1

7.4 比較運算符

等于==（值相同），? 全等===? （值和數據類型都相同）?，不等!=,? 不全等!==，>, <, >=, <=

結果是布爾類型?

7.5 邏輯運算符?

邏輯與 &&? （一假則假）， 邏輯或 || （一真則真）， 邏輯非 ！（假變真，真變假）

7.6 三元運算符

console.log(3 > 5 ? 3 : 5)

分析：如果3>5為true, 則結果為3， 否則結果為5?

案例：數字補零，， 也涉及到了+，字符串的拼接

// 1. 用戶輸入
let num = +prompt("請輸入一個數字")alert(num < 10 ? '0' + num : num)

?7.7 運算符的優先級

這里面分的比較細！?

八、分支語句

8.1 單分支語句

if (i === 10) {document.write("猜對了！")
}

8.2 雙分支語句

if (i === 10) {document.write("猜對了！")
} else {document.write("猜錯了！")
}

案例：判斷閏年?

let year = +prompt("請輸入年份：")
if (year % 4 === 0 && year % 100 !== 0 || year % 400 === 0) {alert(`${year}是閏年`)
} else {alert(`${year}不是閏年`)
}

?8.3 多分支語句

if() {} else if () {} else if () {} ... else {}

?直接上案例：成績判斷

let score = +prompt("請輸入分數：")
if(score >= 90) {alert("A")
} else if (score >= 80) {alert("B")
} else if (score >= 70) {alert("C")
} else if (score >= 60) {alert("D")
} else {alert("不及格！")
}

?8.4 switch分支語句

語法格式！！

        switch (key) {case value:break;case value:break;...default:break;}

案例：還是上面成績案例?

        let score = +prompt("請輸入你的成績：")score /= 10switch (score) {case 10:alert("A")break;case 9:alert("B")break;case 8:alert("C")break;case 7:alert("D")break;case 6:alert("E")break;default:alert("不及格")break;}

九、循環語句

9.1 while循環

// 循環三要素:  變量起始值;  終止條件;  變量變化量(用自增或者自減)let i = 0  // 變量起始值while(i <= 5) {  //終止條件document.write("我愛學習!")i++  //變量變化量}

案例：無限循環 -> 只要不滿足退出的條件，就會無限執行：你愛我嗎

        while(1) {let text = prompt("你愛我嗎?")if (text === '愛') {break}}

9.2 for 循環

語法格式

for (變量初始值; 終止條件; 變量變化量) {// 循環體
}

案例演示：

        for (let k=0; k<3; k++) {document.write("好好學習！")}

?

?9.3 for循環的嵌套

直接上案例：九九乘法表

        let i, jfor (i = 1; i <= 9; i++) {for (j = 1; j <= i; j++) {document.write(`${j} * ${i} = ${i * j} `)}document.write("<br>")}

補充：那么什么時候使用for循環，什么時候使用while循環？

當循環次數確定時，使用for循環。循環次數不確定時，使用while循環?

十、數組的使用?

10.1 數組的聲明（可以放任意的數據類型，不只是數字，這里）

let arr = [2, 6, 1, 7, 4]  //（可以放任意的數據類型，不只是數字，這里以數字舉例）

10.2 取值

通過下標或索引號取值，從0開始

arr[0]    // -> 2
arr[1]   // -> 6

?10.3 數組的長度表示

arr.length    // -> 5

10.4 數組的基本使用

直接上案例：使用for循環遍歷數組 , 求數組元素之和和平均值

        let arr = [2, 6, 1, 7, 4]let ilet sum = 0let average = 0.0for (i = 0; i < arr.length; i++) {sum += arr[i];}average = sum / arr.length * 1.0document.write(`和為${sum}, 平均值為${average}`)

案例：求數組中的最大值?

默認最大值和最小值的初始值為數組中的第一個元素arr[0]

        let arr = [2 ,6, 1, 77, 52, 225, 7]let max = arr[0]let min = arr[0]for (let i = 1; i < arr.length; i++) {if (arr[i] > max) {max = arr[i]}if (arr[i] < min) {min = arr[i]}}document.write(`最大值為${max}`)document.write(`最小值為${min}`)

10.5 數組的相關操作

修改：

        // 改let arr = []arr[0] = 1console.log(arr)let arr1 = ['藍', '紅', '黃']arr1[1] = '綠'console.log(arr1)

新增 ：

        // 增// 1. push 末尾新增let arr2 = ['小明', '小強', '小剛']arr2.push('小華')console.log(arr2)console.log(arr2.push('小華'))  // 可以直接返回數組的長度// 2. unshift 開頭新增let arr3 = [1, 2, 3, 4]console.log(arr3.unshift(6))   // 也可以直接返回數組的長度console.log(arr3)

刪除 ：

        // 刪除// 1. pop()   可以刪除數組中的最后一個元素,并且返回該元素的值let arr4 = [1, 3, 5, 7, 8, 9]console.log(arr4.pop())console.log(arr4)// 2. shfit()  刪除第一個元素, 并且返回該元素的值console.log(arr4.shift())console.log(arr4)// 3. splice()  刪除指定的元素// 語法:  arr.splice(起始位置->索引號, 刪除幾個元素)let arr5 = [9, 10, 87, 99, 76]console.log(arr5.splice(1,2))console.log(arr5)

?

十一、函數的使用

11.1 封裝函數

函數: 可以實現代碼復用,提高開發效率

? ? ? function 是執行特定任務的代碼塊

? ? ? ??

? ? ?1. 聲明語法:

? ? ? ? ? ? ? ? function 函數名() {

? ? ? ? ? ? ? ? ? ? 函數體

? ? ? ? ? ? ? ? }

? ? ? 2. 調用語法:

? ? ? ? ? ? ? ? 函數名()

// 聲明
function fn() {document.write("好好學習")
}// 調用
fn()

?11.2 函數參數以及默認參數

直接上案例：?封裝一個函數,計算兩個數的和?

// let a,b function sum(a, b) {console.log(a + b)}sum(4,3)   // ->  7

?基于上述代碼如果調用函數時，沒有傳參，相當于a 和 b 都未定義，為undefined, 所以返回結果時NaN, 為了優化代碼，我們可以設定默認參數

?

?

11.3 函數的返回值?

函數返回值的優點是便于得到數據，并對數據進行相應的處理和使用

關鍵字： return

        function sum(a=0, b=0) {return a + b}let sum1 = sum(4,3)console.log(sum1)

?11.4 作用域

11.4.1 全局作用域

作用于所有代碼的執行環境（整個script標簽內部）

在下述代碼中定義了一個變量num , 它既可以在函數外部使用，也可以在函數內部使用?

?

11.4.2 局部作用域

作用域函數內的代碼環境，因為跟函數有關，所以也叫函數作用域?

在下述代碼中，在函數內部定義了一個變量 str, 在函數外部使用時，會報錯

?

11.5 匿名函數 （沒有名字的函數）

11.5.1 函數表達式

語法格式：

let fn = function() {// 函數體
}

?這里面 fn 就相當于函數的名字， 調用函數時， 直接用 fn() 即可

        // 1.函數表達式let fn = function () {console.log('函數表達式')}fn()

?

11.5.2 立即執行函數

立即執行函數就是，不用調用，直接就可以執行

語法格式：?

(function() {})()

        // 立即執行函數: 避免全局變量之間的污染// 多個立即執行函數,之間需要用 分號 隔開(function () {let num1 = 9console.log(11)})();(function () {let num2 = 10console.log(11)})()

?

十二、對象

對象是一種無序的數據集合，用來描述一個人或物

12.1 對象的基本使用?

語法格式：

let obj = {屬性名: 屬性值，...
}

比如描述一個人

let obj = {name: 'xx',age: 20,gender: '男'
}

?

?12.2 對象的相關操作

查找：

語法：對象名.屬性

?

還有一種查的方法：

對象名['屬性名']?? ? ? ? console.log(obj['name'])

修改：對象名.屬性 = 新值

        let obj = {name: 'xx',age: 20,gender: '男'}obj.name = 'yy'console.log(obj.name);

新增：對象名.屬性 = 新值?

新增和修改的語法格式相同，只不過增的是對象中沒有的屬性?

?

?

?

?刪除：delete 對象名.屬性

?

?

?

12.3 對象的方法

?

?

12.4 遍歷對象

        let obj = {name: 'xx',age: 20,gender: '男'}for (let k in obj) {console.log(k)  // k 是屬性名, k字符串類型console.log(obj[k])  }

上述字符串的查找方式，上文有介紹過?

?

12.5 內置對象

?

?

?

十三、隨機數函數

let num = Math.random()  // 返回一個 0-1 之間的隨機小數, 包括0 ，不包括 1
console.log(num)

?生成0-10的隨機數：

// 生成0-10的隨機數：
Math.floor(Math.random() * (10+1))  // 向下取整

?同理：

// 生成5-10的隨機數Math.floor(Math.random() * (5+1)) + 5// 生成N-M的隨機數
Math.floor(Math.random() * (M-N+1)) + N

?案例：

let arr = [1, 2, 3]
let n = Math.floor(Math.random() * (arr.length))
console.log(arr[n]);

十四、總結

本片博客介紹了JavaScript的基礎知識的內容，是自己學完后的總結，希望也可以幫助正在學習的你，后續也會繼續更新js高級的相關知識。