寫在前面

我們學習JavaScript不僅可以用于web網站開發，也可以用于小程序，uniapp項目的開發，所以我們學習JavaScript很重要。

準備工作

我們這里學習JavaScript用的是小程序開發者工具或者uniapp開發者工具，所以需要你先裝好這兩個中的一個。

當然了，如果學習js的同時還想學習下小程序石頭哥建議使用小程序開發者工具
如果你只是學習uniapp不想學習小程序，直接去下載uniapp開發者工具即可

• 小程序入門和開發者工具的下載
• uniapp入門和開發者工具的下載

根據自己需要去下載對應的開發者工具，如果上面兩個點不進去，可以去石頭哥的個人博客找小程序入門或者uniapp入門對應的文章即可

一，函數和事件的學習

1-1，注釋的學習

我們在學習后面課程之前，先來學習下注釋。注釋是在代碼里給予提示使用的，主要是讓別人更快的熟悉你的代碼，也方便后期自己看自己的代碼，快速回憶起來使用的。
— 注釋有快捷鍵的 —

• window電腦：Ctrl+/
• mac電腦：command+/

1-1-1，小程序里的注釋

wxml里的注釋如下

wxss里的注釋

js里的注釋

1-1-2，uniapp里的注釋

我們在學習后面課程之前，先來學習下注釋。注釋是在代碼里給予提示使用的，主要是讓別人更快的熟悉你的代碼，也方便后期自己看自己的代碼，快速回憶起來使用的。 注釋有快捷鍵的，正好我們上面一節有講常用的快捷鍵。

• window電腦：Ctrl+/
• mac電腦：command+/

可以看到我們常用的三種注釋如下，正好和我們前面學的三劍客對應起來。

• 布局的注釋是：<!-- -->
• js邏輯代碼的注釋是： //
• css樣式的注釋是：/* */
  
  我們這里沒有必要記每種注釋的寫法，只需要記住快捷鍵，可以快速生成注釋即可。這就是快捷鍵的好處。

1-2，日志打印的學習

1-2-1,小程序里的日志打印

我們在學習點擊事件之前，需要先學習日志(log)的打印，因為我們開發過程中會經常用到日志打印。日志打印的語法如下

console.log("我的打印出來的日志內容")

1-2-2，uniapp里的日志打印

1-3，函數的學習

函數的兩種使用方式如下圖：

函數的定義小程序和uniapp里是一樣的
函數的兩種使用方式如下圖：

我們的函數一般是寫在js邏輯區域的methods里，比如我們定義一個getname函數，有下面兩種寫法。

石頭哥這里推薦第一種方式定義函數，這也更簡單

1-4，點擊事件的學習

1-4-1，小程序里的點擊事件

我們如果想給一個組件定義點擊事件，就要用到bindtap，我們給一個組件綁定點擊事件的語法如下。

我們給一個組件定義點擊事件，主要是給組件定義一個 bindtap=“事件名”，然后再js頁面里定義和事件名一樣的函數即可。視頻里會作詳細講解

1-4-2，uniapp里的點擊事件

接下來我們學習事件，我們常用的事件如下，這里我們先重點講解下@click點擊事件和
@input獲取輸入值的事件

我們如果想給一個組件定義點擊事件，就要用到uni的事件處理，由于uni是基于vue語法的額，所以我們給uni里的組件定義點擊事件，就要用到vue的語法。
我們給一個組件綁定點擊事件的語法如下：

我們可以使用 v-on 指令來監聽點擊事件，從而執行 JavaScript 代碼。
v-on 指令可以縮寫為 @ 符號。

語法格式：

v-on:click="methodName" 或 @click="methodName"

methodName就是函數名，如下所示

可以看出我們使用v-on和@都可以定義點擊事件，我這里推薦大家用@簡寫的方式

1-5，獲取用戶輸入信息

1-5-1，小程序里獲取用戶輸入

我們獲取用戶輸入會用到bindinput事件，其實我們在學習input組件時，官方有給出這個屬性的。https://developers.weixin.qq.com/miniprogram/dev/component/input.html

看官方的文檔，可以知道bindinput主要是為了獲取用戶的輸入內容。
bindinput的定義如下圖。

在wxml里定義好bindinput事件以后，在js頁面再定義一個和事件名一樣的函數即可。視頻里會作詳細講解。如果你有買老師的課程，或者購買老師的年卡，可以獲取對應的學習視頻。

1-5-2，uniapp里獲取用戶輸入

在uniapp里獲取input輸入框里用戶輸入的內容有兩種方式

• @input結合函數
• v-model數據綁定獲取輸入內容(推薦)

我們獲取用戶輸入會用到@input事件，其實我們在學習input組件時，官方有給出這個屬性的。

看官方的文檔，可以知道@input主要是為了獲取用戶的輸入內容。
@input的定義如下圖，其中的getname就是我們定義的函數，用來接收用戶輸入的。

在布局里定義好bindinput事件以后，在js頁面再定義一個和事件名一樣的函數即可。

然后就可以監聽用戶輸入了

視頻里會作詳細講解。如果你有買老師的課程，或者購買老師的年卡，可以獲取對應的學習視頻。

二，變量的學習

2-1，什么是變量

用大白話講：變量就是一個裝東西的盒子
再通俗些講：變量就是用于存放數據的容器，我們通過變量名獲取對應的數據。

如上圖所示，我們的盒子(變量)可以裝名字，布爾類型的true，還可以用來裝數字。
變量的本質：就是在程序的內存中申請一塊用來存放數據的空間。

2-2，變量的組成

變量由變量名和存儲的值組成，語法如下

var x = 7; var y = 8; var z = x + y; 從上例中，您可知道x,y,z是三個不同的變量名： x 存儲值 7 y 存儲值 8 z 存儲值 15

變量有點類似我們的酒店房間。一個房間就可以看作是一個變量。例如我們的808號房間是情侶間。那么808這個房號就相當于我們的變量名，情侶間就是這個變量存儲的值。

2-3，變量的使用

變量在使用時分兩個步驟：

• 1，聲明變量

來看下具體代碼

//聲明變量 var age

這段代碼的意思是聲明一個叫age的變量
var是一個JavaScript關鍵字，用來聲明變量，使用該關鍵字聲明變量以后，計算機會自動為變量分配一個內存空間，用來存儲數據。
age就是我們的變量名，我們要通過變量名來訪問到計算機內存里分配的空間。

• 2，賦值

還是拿我們的酒店房間來舉例，聲明變量就相當于在前臺辦理入住，確定要住那個房間，也就是確定房間號(變量名)，然后確定房間號對應的房型，比如單人間，雙人間，情侶間。而確定房型就相當于是給變量賦值。

//給age賦值 age=10

這段代碼的意思，就是給age變量賦值為10
上面的 = 用來把右邊的值賦給左邊的變量名，也就是把我們的變量名age指向數值10，就可以用age來操作我們的數值了。賦值的目的就是為了后面使用數值。

2-4，變量的初始化

我們上面變量的使用可以直接寫到一行

var age=10

聲明變量同時給變量賦值，我們稱之為變量的初始化。

2-5，變量的重新賦值

一個變量可以被重新賦值，新的賦值會覆蓋掉前面的賦值，變量值將以最后一次賦的值為準。

var age=10 age=18

如上面的代碼，我們的變量age先被賦值10，后又被賦值18，那么最后我們的age就是18
這就好比，酒店的房間，808屋一開始住的是石頭哥，后面石頭哥走了，劉德華住進去了，那這個時候你再去808找人，找到的就是劉德華了。

2-6.變量的命名規范

• 名稱可包含字母、數字、下劃線和美元符號
• 名稱必須以字母開頭
• 名稱對大小寫敏感（y 和 Y 是不同的變量）
• 不能是關鍵字，保留字（比如 JavaScript 的關鍵詞）
• 遵守駝峰命名法，首字母小寫，后面的單詞的首字母大寫。如userName

2-7,變量的小案例

還記得我們的6-5這節學習了如何獲取用戶輸入的信息嗎？我們是不是可以用變量來存儲我們獲取到的用戶輸入信息呢。

講解視頻里會做詳細講解：《零基礎入門小程序開發》

2-8，全局變量和局部變量

局部變量：變量在函數內聲明，只能在函數內部訪問。
全局變量：變量在函數外定義，整個代碼都可以調用的變量。

如上圖所示的局部變量和全局變量的定義。

三，數據類型

3-1，認識數據類型

上一節變量的學習，我們知道變量是用來裝數據的盒子，可是數據有很多，有各種各樣的類型。不同類型的數據占用的計算器內存也不一樣。就好比胖子睡大床，瘦子睡小床就行。
在計算機中不同的數據占用的存儲空間是不同的，為了便于區分，充分利用存儲空間，于是就定義了不同的數據類型。
簡單來說，數據類型就是數據的類別型號，比如“張三”是個人名，18是個數字

3-2，常見的數據類型

我們的數據類型可以分成下面兩大類

• 簡單數據類型(Number String Boolean Undefined Null)
• 復雜數據類型(Object)

簡單數據類型

簡單數據類型描述默認值

Number	數字型，包含整數和小數，如 18，18.8	0
String	字符串型，如“小石頭”。注意js里字符串都要帶引號	“”
Boolean	布爾值類型，就true和false兩個值，代表正確和錯誤	false
Undefined	Undefined 這個值表示變量不含有值,如var a;聲明了變量a，但是沒有賦值，就是undefined	undefined
Null	空值，如var a=null,聲明了變量a為空值	null

3-3，數字型Number

js數字類型的數據，既可以是整數，也可以是小數(浮點數)

var age=21 //整數 var PI=3.1415 //小數

3-4，字符串String

用引號或者雙引號包起來的都是字符串類型，如 “編程小石頭”，‘石頭哥’都是字符串。字符串和羊肉串有點像，羊肉串是用竹簽把羊肉一串串的串起來。字符串就是把字符串起來。

var name="編程小石頭" //字符串 var age1="18" //字符串 var age2=18 //數字型

上面代碼的age1和age2是有區別的，age1的18被雙引號包裹著，所以是字符串，age2就是一個數字18，所以是數字型。這也進一步說明了，只要是被單引號或者雙引號包裹著的都是字符串類型。

字符串長度

字符串是由若干字符組成的，這些字符的數量就是字符串的長度，通過字符串的length屬性可以獲取整個字符串的長度。
還是拿羊肉串來類比，比如你一個羊肉串上串了5塊羊肉，那么這個羊肉串的長度就是5。
使用的語法如下

var name="編程小石頭"console.log(name.length) //這里的輸出結果是5

字符串的拼接

多個字符串之間可以使用 + 進行拼接，其拼接方式為 字符串+字符串=拼接之后的新字符串。
語法如下：

var name="編程小石頭"var weixin=2501902696var test=name+weixinconsole.log(test) //輸出結果："編程小石頭2501902696"console.log(12+12)//輸出結果：24console.log("12"+12)//輸出結果：1212

上面的12+12=24，“12”+12=“1212” 這就告訴我們字符串加任何類型的數據，拼接后的結果都是字符串。

3-5，布爾型Boolean

布爾類型有兩個值：true和false，其中true表示真，false表示假。

var flag=true

3-6,Undefined和Null

一個聲明后沒有賦值的變量會有一個默認值 undefined
一個聲明變量，并且賦值null，就代表這個變量是空值(學習object對象時，我們會繼續研究null)
null 和 undefined 的值相等，但類型不同，下面的8-7會有代碼演示

3-7，typeof 操作符

typeof 操作符用來檢測變量的數據類型

typeof "John" // 返回 string typeof 3.14 // 返回 number typeof false // 返回 boolean

打印null和undefined的數據類型如下

var aaa=undefinedvar bbb=nullconsole.log(aaa==bbb)//輸出結果：trueconsole.log(typeof aaa)//輸出結果：undefinedconsole.log(typeof bbb)//輸出結果：object

注意：這里的 == 用來判斷值是否相等，后面會講。
上面的代碼可以看出：null 和 undefined 的值相等，但類型不同

3-8， 數據類型的轉換

就是把一種數據類型的變量轉換成另外一種數據類型，比如把字符串的 “18”轉換為數字類型的18
常用的數據類型轉換

• 把其他類型轉為字符串型
• 把其他類型轉為數字型

轉換為字符串

方式說明案例

toString()	轉為字符串	var num=1 num.toString()
String()	轉為字符串	var num=1 String(num)
用加號拼接字符串	轉為字符串	var num=1 “”+num

轉換為數字型（重點）

方式說明案例

Number()	將字符串轉換為數字	Number(“3.14”) // 返回 3.14
parseFloat()	解析一個字符串并返回一個浮點數	parseFloat(“3.12”) //返回3.12
parseInt()	解析一個字符串并返回一個整數	parseInt(“3.12”) //返回3

轉為數字的幾個特殊情況

console.log(Number(""))//空字符串轉換為 0 console.log(Number(true))//true轉換為1 console.log(Number(false))//false轉換為0 console.log(Number("編程小石頭"))//其他的字符串會轉換為 NaN (不是個數字)

四,綜合小案例~開發簡單的計算器

我們這里以小程序為例來寫個小案例，其實uniapp里原理也是一樣的。大家可以去石頭哥uniapp的筆記里看下：https://blog.csdn.net/qiushi_1990/article/details/127675537

4-1,數據綁定

在學習這個綜合案例之前，我們需要先學習下小程序的動態數據綁定。數據綁定的語法如下

<!--wxml--> <view> {{message}} </view>// js里如下 Page({data: {message: '我是動態綁定的數據'} })

4-2，效果圖預覽

上一節和大家講解了小程序的一些常用組件，這節就帶大家寫出自己的第一個簡單計算器。做一個綜合性的練習。由于是入門，這里先教大家簡單的加法運算。效果圖如下
實現起來特別簡單，代碼也特別少，就下面三個

• index.wxml：上圖的布局視圖頁
• index.js：實現加法邏輯的頁面
• app.json：一些全局的配置?；臼嵌际悄J的這里不用管
  [外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-n1U75mfw-1597396869759)(https://upload-images.jianshu.io/upload_images/6273713-2b8639cf9f1fc8ea.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)]
  下面就帶帶大家敲出屬于自己的計算器小程序代碼。

4-3，先看index.wxml

<!--index.wxml --> <input placeholder="請輸入數字a" bindinput="inputa" /> <text>+</text> <input placeholder="請輸入數字b" bindinput="inputb" /> <button bindtap='sum'>計算</button> <text>結果為：{{result}}</text>

代碼雖然少，但是作為剛入門的你，看起來可能很茫然，下面詳細給大家講下。

<input placeholder="請輸入數字a" bindinput="inputa" /> <input placeholder="請輸入數字b" bindinput="inputb" />

就是我們輸入數字a的輸入框，這里input就是我們認識的第一個小程序組件。
input的官方簡介如下：https://developers.weixin.qq.com/miniprogram/dev/component/input.html
placeholder：設置默認顯示文字（當我們輸入文字時，默認的就沒有了）
bindinput=“inputa”：定義一個inputa方法來獲取input的輸入內容。在index.js中會用到

• +
  這里的組件是用來顯示文本的這里我們只是為了顯示一個 + 號

<button bindtap='sum'>計算</button>

這里是個按鈕就是我們的計算按鈕
bindtap=‘sum’：定義個叫sum的方法，用來計算結果在index.js中會用到

• 結果為：{{result}}
  {{result}} 這種寫法，是小程序用來綁定數據用的，這里用來顯示我們的計算結果用的，

上面代碼和對應的顯示如下：

4-4，再來看index.js，我們加法的邏輯實現

可以看到我們在index.wxml里定義的bindinput=“inputa”，bindtap='sum’在下面有用到

Page({/*** 頁面的初始數據* 初始化兩個輸入值*/data: {input1: 0,input2: 0},//獲取用戶輸入的值ainputa: function (e) {this.setData({input1: e.detail.value})},//獲取用戶輸入的值binputb: function (e) {this.setData({input2: e.detail.value})},// 拿到兩個輸入值以后求和sum: function (e) {var a = parseInt(this.data.input1);var b = parseInt(this.data.input2);// 求和var sumResult = a + bthis.setData({// 把結果賦值到sum標簽上result: sumResult})} })

index.js的代碼不多，大家可以先照著敲一下。學小程序前期不需要你理解，但是一定要多敲多練。
這里的邏輯用文字寫出來，估計大家新入門時還是不太好理解，我會錄視頻來給大家講解。

4-5，作業，自己寫一個減法計算器

五，運算符

運算符也被稱為操作符，是用于實現賦值，比較和運算等功能的符號。

5-1，算數運算符

運算符描述例子x 運算結果

• |加法| x=5+2 |7

• |減法| x=5-2 |3

• |乘法|x=5*2| 10
  / |除法| x=5/2 |2.5
  %|取模（余數）| x=5%2| 1

5-2，表達式和返回值

表達式：是由數字，運算符，變量等以能求得結果的有意義的操作組成的式子。
表達式最終都會有一個結果返回給我們，這個返回結果我們稱之為返回值

• 如 let x=1+1
  這里的1+1就是由數字和加號組成的表達式，然會返回結果2賦值給x，那么x的值就是2。通俗的講就是先把右邊的表達式計算完畢然后把值返回給左邊的x。

5-3，比較運算符

比較運算符是兩個數據進行比較時所使用的運算符，比較運算以后會返回一個布爾值的結果，就是返回對或者錯(true或false)

運算符描述案例結果

<	小于號	1<2	true

|大于號|1>2|false
=|大于等于號(大于或等于)|1>=2|false
<=|小于等于號(小于或等于)|1<=2|true
|判等號(判斷是否相等)|11|true
=|絕對等于（值和類型均相等）|1=‘1’|false
!=|不等于|1!=1|false

5-4，賦值運算符

賦值運算符向 JavaScript 變量賦值。

運算符例子等同于

=	x = y	x = y
+=	x += y	x = x + y
-=	x -= y	x = x - y
*=	x *= y	x = x * y
/=	x /= y	x = x / y
%=	x %= y	x = x % y

=的小結

• =：賦值，把右邊賦值給左邊 如a=b
• ==:判斷，判斷兩邊的值是否相等 如 a ==b
• === :全等，判斷兩邊的值和數據類型是否完全相等 如 a === b

5-5，邏輯運算符

用于多個條件的判斷,其返回值是布爾值。

• && 邏輯與，兩個條件都要滿足,兩側都是true結果才為true
• || 邏輯或,兩個條件只需要滿足一個即可，有一側是真結果就真
• ! 邏輯非 not，邏輯取反，如true的相反值是false

比如你要充話費

• && 你想用微信充：必須你有微信并且使用微信支付才可以充
• || 你去營業廳充：微信或者支付寶支付都可以
• ! 如果只有支付寶和微信兩種方式：你不想用微信那就只能用支付寶了

5-6，遞增和遞減運算符

遞增和遞減運算符概述：如果需要反復的給數字變量加或減去1，可以使用遞增(++) 和遞減(–)運算符來完成。
在js里遞增(++) 和遞減(–)既可以放在變量前面，也可以放在變量后面，放在前面時稱為前置遞增或遞減運算符，放在后面時稱為后置遞增或遞減運算符。
注意：遞增或者遞減只能操作變量，不能直接操作數字。

5-6-1，前置遞增遞減運算符

注意：前置遞增或遞減時，是先自加或自減，然后返回值
我們之前想要一個變量加1寫法如下

var num=1 num=num+1 //這里就是給num加1

我們有沒有方便的寫法呢，上面的num=num+1，可以直接寫成 ++num，這樣是不是更簡潔。

5-6-2，后置遞增遞減運算符

注意：后置遞增或遞減時，先返回值，然后自加或自減

5-6-3，前置和后置的區別

• 前置和后置如果單獨使用，效果是一樣的
• 前置是先自加或自減，然后返回值；后置先返回值，然后自加或自減

var num=10 console.log(++num +10)//結果是21 console.log(num++ +10)//結果是20

我們通過下面幾個小例子來強化理解下

var a=10 ++a console.log(b)//這里b的結果是幾var c=10 c++ var d=c++ +2 console.log(d)//這里d的結果是幾var e=10 var f=e++ + ++e console.log(f)//這里f的結果是幾

5-6-4,前置和后置遞增遞減的小結

• 前置和后置的主要目的是為了簡化代碼編寫
• 單獨使用遞增或遞減時，前置和后置效果一樣
• 與其他運算連用時，執行結果會不同
  后置：先返回原值，后自加（先人后己）
  前置：先自加，后返回值(先己后人)
  可以總結為：前置自私，后置無私
• 開發時，大多使用后置遞增/減。例如 num++或num- -

六，條件語句和循環語句

6-1，流程控制

在學習條件語句河循環語句之前，我們要先知道什么是流程控制，
**流程控制：**流程控制就是來控制我們的代碼按照什么順序來執行的語句。
流程控制主要有三種結構

• 順序結構
• 分支結構
• 循環結構
  
  順序結構是程序中最簡單，最基礎的流程控制，就是代碼按照先后順序依次執行。我們重點是講解分支結構和循環結構。

6-2，分支結構

我們上面講的分支結構，就是代碼在從上到下的執行過程中，根據不同的條件，執行不同的代碼，從而得到不同的結果。分支結構常用的語句就是條件語句.
我們常用的分支結構的語句:

• if語句
• switch語句

條件語句: 用于基于不同條件執行不同的動作,通常在寫代碼時，您總是需要為不同的決定來執行不同的動作。您可以在代碼中使用條件語句來完成該任務。

舉個最簡單的例子：你滿18歲就可以去網吧，不滿18歲就不允許進網吧。這里的判斷條件就是你的年紀。
我們這里常用的就是if條件語句，所以接下來我們會重點講解下if條件語句。

6-3，if條件語句

在 JavaScript 中，我們可使用以下條件語句：

• if 語句 - 只有當指定條件為 true 時，使用該語句來執行代碼
• if…else 語句 - 當條件為 true 時執行代碼，當條件為 false 時執行其他代碼
• if…else if…else 語句- 使用該語句來選擇多個代碼塊之一來執行

6-3-1，if 語句

使用 if 語句來規定假如條件為 true 時被執行的 JavaScript 代碼塊。

• 語法

if (條件) {如果條件為 true 時執行的代碼 }

• 實例

if (age< 18) {console.log("未成年") }

如果年齡小于18歲，就輸出未成年

6-3-2，if else 雙分支語句

使用 else 語句來規定假如條件為 false 時的代碼塊。

if (條件) {條件為 true 時執行的代碼塊 } else { 條件為 false 時執行的代碼塊 }

• 實例

if (age < 18) {console.log("未成年")} else {console.log("成年")}

如果年齡小于18歲，就輸出未成年，否則就輸出成年

6-3-3，if else if 多分支語句

使用 else if 來規定當首個條件為 false 時的新條件。

語法 if (條件 1) {條件 1 為 true 時執行的代碼塊 } else if (條件 2) {條件 1 為 false 而條件 2 為 true 時執行的代碼塊} else {條件 1 和條件 2 同時為 false 時執行的代碼塊 }

• 實例

if (age < 18) {console.log("未成年")} else if(age<60) {console.log("成年")} else {console.log("老年")}

如果年齡小于18歲，就輸出未成年，年齡大于18歲小于60歲就輸出成年，年齡大于60歲就輸出老年。

6-4 wxml條件渲染

在wxml中，使用 wx:if=“” 來判斷是否需要渲染該代碼塊：

<view wx:if="{{condition}}"> 我是可以顯示的</view>

也可以用 wx:elif 和 wx:else 來添加一個 else 塊：

<view wx:if="{{length > 5}}"> 1 </view> <view wx:elif="{{length > 2}}"> 2 </view> <view wx:else> 3 </view>

可以看出wxml里的條件渲染和我們上面講的if條件語句類似，只是寫法上稍微有些區別。
wxml里的條件渲染主要用來做頁面展示和隱藏使用的。

6-5，for循環語句

如果您希望一遍又一遍地運行相同的代碼，并且每次的值都不同，那么使用循環是很方便的。
比如我們想輸出5編編程小石頭

• 一般寫法：
  console.log(“編程小石頭”)
  console.log(“編程小石頭”)
  console.log(“編程小石頭”)
  console.log(“編程小石頭”)
  console.log(“編程小石頭”)
• 使用for循環

for (var i=0;i<5;i++){ console.log("編程小石頭") }

for 循環的語法：

for (初始化變量; 條件表達式; 操作表達式){被執行的代碼塊 }

• 初始化變量：開始前第一個執行，通常用于初始化計數器變量，只執行一次。
• 條件表達式：就是用來決定每一次循環是否可以繼續執行， 定義運行循環的終止條件
• 操作表達式：在大括號里的代碼塊已被執行之后執行，通常用于對我們的計數器變量進行遞增或者遞減操作。

實例

for (var i=0;i<5;i++){ console.log("編程小石頭") }

上面實例中
語句1：var i=0 是在開始執行前初始化變量i
語句2:i<5 是用來判斷i是否小于5，如果小于5就繼續執行循環
語句3：i++ 是在每次循環執行一遍后對i進行加1的操作

6-6，wxml列表渲染

在wxml里我們使用wx:for來顯示列表數據。
在組件上使用 wx:for 控制屬性綁定一個數組，即可使用數組中各項的數據重復渲染該組件。
默認數組的當前項的下標變量名默認為 index，數組當前項的變量名默認為 item

<view wx:for="{{array}}">{{index}}: {{item.name}} </view>

在js里定義的列表數據如下

Page({data: {array: [{name: '編程小石頭',}, {name: '邱石'}]} })

6-7,continue和break的學習

continue和break都是用來終止循環的，區別在于

• continue：是終止循環中的某一次，繼續執行后面的循環
• beak: 直接終止整個循環執行，整個循環不在執行

七，數組的學習

7-1，數組的概念

數組就是一組數據的集合，可以把更多的數據存儲在單個變量下。
數組里面可以存儲各種類型的數據。
如： var names=[‘編程小石頭’,16,true]

7-2，創建數組的兩種方式

• 1，使用new創建數組(不常用)

var names=new Array(); names[0]="編程小石頭"; names[1]="劉德華"; names[2]="周杰倫";

• 2，利用數組字面量創建數組(常用)

var names=['編程小石頭','劉德華','周杰倫']

明顯看到第二種創建數組的方式比第一種更簡潔，所以以后我們創建數組就用第二種方式

7-3，獲取數組元素

我們獲取數組元素是通過數組下標來獲取的，下標也叫做索引，數組的下標是從0開始的。如下圖
數組可以通過下標來訪問，設置，修改對應的元素值。我們可以通過
數組名[下標] 的方式來獲取數據中的元素。
如 names[0]就可以獲取names數組里的第一個元素‘編程小石頭’

7-4，計算數組的和以及平均值

前面我們已經學完如何遍歷數組了，如果我這里讓大家去求下數組里所有元素的和以及平均值，大家知道如何去求嗎。

• 作業
  已知數組 [1,2,3,4,5,6] 如果通過代碼計算這個數組的和以及平均值。

7-5，求數組中的最大值

var nums=[1,2,3,4] 這個數組我們很明顯就可以看出來4是數組里的最大值，但是如果我們數組里的元素有很多，這個時候你就未必能很快的找出來最大值了，所以我們要想求數組里的最大值，要讓代碼去實現，而不是你肉眼去看。

• 思路
  其實我們找數組中的最大值，有點類似于武術比賽打擂臺
  
  我們首先拿第一個和第二個比，勝出者在待定席位，然后第三個來挑戰勝出者，這樣又會產生新的勝出者，然后后面的元素都來逐個挑戰勝出者，直到最后一個勝出者，就是我們要找的最大值。而這樣一v一的對決，正好可以借助我們的循環來實現。

var nums = [1, 2, 3, 4, 5]var max = nums[0]for (var i = 1; i < nums.length; i++) {if (max < nums[i]) {max = nums[i]}}console.log('最大值', max) //可以得出最大值是5

7-5，給數組添加新元素

push() 方法可向數組的末尾添加一個或多個元素，所以我們一般給數組追加元素的時候，直接使用push方法就可以了。

var nums = [1, 2, 3, 4, 5]nums.push(6)nums.push(7, 8)console.log(nums) //追加新元素后的數組 [1, 2, 3, 4, 5, 6, 7, 8]

7-6,刪除數組中的指定元素

如我們想把數組中的指定元素刪除掉，可以用一個新的數組來接受符合要求的元素，不符合要求的元素不接收，這樣就可以實現刪除數組元素的效果

// 把元素5刪除var nums = [1, 2, 3, 4, 5]//1,定義一個新數組var newNums = []//2，遍歷舊數組for (var i = 0; i < nums.length; i++) {//3,把符合要求的元素添加到新的數組里if (nums[i] !== 5) {newNums.push(nums[i])}}console.log(newNums) //刪除成功 [1, 2, 3, 4]

八，對象的學習

8-1，什么是對象

對象只是一種特殊的數據。對象是一組無序的相關屬性和方法組成。這里重點要記住屬性和方法這兩個新概念

• 屬性：事物的特征，對象里的屬性就是用來表現該對象具備哪些特征
• 方法：事物的行為，對象里方法就是用來表示該對象具備哪些行為。

例如：
石頭哥具備姓名，年齡，身高，體重等屬性
石頭哥具備寫代碼，唱歌，騎車，跑步，吃飯等行為。

• 手機具備下面的屬性和方法
  

8-2，為什么需要對象

我們在保存一個數據時，可以用變量，保存多個數據時可以用數組。但是我如果想保存一個完整的立體的信息時呢。

• 比如保存石頭哥的完整信息。
  如果我們用數組來表示就是
  var shitouge=[‘編程小石頭’,‘男’,‘128’,‘180’]
  這樣我雖然把石頭哥的完整信息保存到了數組里，也可以大致猜出來哪些數據代表什么意思，但是后面的128和180是什么意思呢？？？

但是我們如果用對象來保存這些信息呢

{ 姓名:'編程小石頭', 性別:'男' 體重:128 身高:180 }

這樣我們是不是就可以立體的知道每個數據代表什么意思了呢。這也是我們使用對象的原因。上面的{}里包裹的就是我們對象的一些屬性。只不過我們的屬性名不提倡用漢字，應該用英文或者拼音，我這里方便大家理解才這樣寫的。

8-3，創建對象的三種方式

• 利用字面量創建對象
• 利用new Object創建對象
• 利用構造函數創建對象

8-3-1，利用字面量創建對象

語法如下
var 對象名={
屬性名：屬性值，
屬性名：屬性值，
方法名：function(){}
}

示例如下：

var Person = {name:'編程小石頭',age:18,code:function(){console.log('石頭哥會寫代碼')} }

8-3-2，利用new Object創建對象

語法：
var obj = new Object();
obj.name=‘編程小石頭’
obj.age=18
我們這里就是先用 new Object()創建一個空對象，然后通過.屬性名給這個空對象添加屬性和方法

8-3-3，利用構造函數創建對象

構造函數是一種特殊的函數，主要用來初始化對象，它總是和new運算符一起使用，我們可以把對象里的一些公共屬性和方法抽取出來，然后封裝到這個函數里，方便批量創建對象。

使用構造函數創建對象時要注意下面幾點

• 1，構造函數名字的首字母習慣大寫
• 2，構造函數里不需要return就可以返回結果
• 3，調用構造函數創建對象時，必須用new
• 4，我們的屬性和方法前面必須添加this

完整實例如下：

function Person(name, age) {//創建構造函數Personthis.name = name;this.age = age;this.action = function (jineng) {console.log(name + "具備" + jineng + '的技能')}}//創建對象1var obj1 = new Person('編程小石頭', 18)console.log(obj1.name)//編程小石頭obj1.action('寫代碼')//編程小石頭具備寫代碼的技能//創建對象2var obj2 = new Person('周杰倫', 41)console.log(obj2.name)//周杰倫obj2.action('唱歌')//周杰倫具備唱歌的技能

構造函數和對象

我們這里的構造函數就好比汽車的設計圖紙，汽車具備哪些屬性，擁有哪些方法，已經提前在圖紙上設計好了，我們只需要根據圖紙new出來一個對象，比如可以new出來一個寶馬車，也可以new出來一輛蘭博基尼。

8-3-4，new關鍵字執行過程

如上面我們通過構造函數new一個對象

function Person(name, age) {//創建構造函數Personthis.name = name;this.age = age;this.action = function (jineng) {console.log(name + "具備" + jineng + '的技能')}}//創建對象1var obj1 = new Person('編程小石頭', 18)

這里在new一個對象出來時會執行下面四件事

• 1，在電腦內存中創建一個空對象
• 2，讓this指向這個新的對象
• 3，執行構造函數里的代碼，給這個新對象添加屬性和方法
• 4，返回這個新對象如上面的obj1就是我們創建的新對象

8-3-5，變量，屬性，函數，方法總結

屬性和變量:

• 相同點：
  都是用來存儲數據的。
• 不同點：
  變量單獨聲明并賦值，使用的時候直接使用變量名就可以；
  屬性在對象里面的，不需要聲明，使用的時候要用：對象.屬性名。

var dog = {//屬性name:'可可'，age：'12' } //變量 var num = 12;//調用變量：(直接使用變量名進行調用) console.log(num); //調用屬性：(對象名.屬性名) console.log(dog.name);

函數和方法：

• 相同點：
  都是實現某種功能。
• 不同點：
  函數是單獨聲明并且調用的，調用方法：函數名()
  方法存在于對象里面。調用方法：對象名.方法()

var dog = {name:'可可'，age：'12'，//方法skill：function(){console.log('汪汪汪');} }//函數 function skillDemo(){console.log("睡覺"); }//調用函數：(直接使用:函數名(),進行調用) skillDemo(); //調用方法：(--對象名.方法名()--) console.log(dog.skill());

8-4，對象的使用

8-4-1，訪問對象的屬性

對象屬性的調用語法有兩種

• 對象名.屬性名
• 對象名[‘屬性名’]

如我們對象如下

var obj = {name:'編程小石頭',age:18,code:function(){console.log('石頭哥會寫代碼')} }

調用name屬性就是 obj.name
這里obj就是我們的對象，name就是我們的對象的屬性，obj.name里的.就相當于 的 翻譯過來就是obj的name
另外一種調用屬性的方式就是 obj[‘name’]

8-4-2，訪問對象的方法

對象中方法的調用就一種方式：對象名.方法名() 這里的這對小括號是必不可少的。
如我們對象如下

var obj = {name:'編程小石頭',age:18,code:function(){console.log('石頭哥會寫代碼')} }

obj.code() 就是直接調用obj里的code方法

九，內置對象的學習

9-1，什么是內置對象

內置對象就是指Javascript自帶的一些對象，供開發者使用，這些對象提供了一些常用的的功能。開發者可以很方便的使用這些內置對象，而不用關心這些內置對象的實現原理。
就好比我們使用手機內置的發短信，打電話功能，我們用的時候可以很方便的快速使用，而不用關心打電話的實現原理。這就是我們使用內置對象的原因，主要就是為了快速方便的使用內置對象的

常見的內置對象有Math、Array、Date等

9-2，查閱文檔的學習

因為內置對象的方法太多了，我們不可能把所有的方法都記下來，所以我門就需要時不時的查閱文檔，就好比我們查字典一樣。
常用的學習文檔有下面幾個

• MDN
  官方地址：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript
• W3cschool
  https://www.w3school.com.cn/js/index.asp
• 菜鳥教程
  https://www.runoob.com/js/js-tutorial.html

這里建議大家使用MDN文檔。因為這個文檔比較全，可以快速檢索

9-3，Math對象的學習

與其他內置對象不同的是，Math 不是一個構造器對象。Math 的所有屬性與方法都是靜態的。引用圓周率的寫法是 Math.PI，調用正余弦函數的寫法是 Math.sin(x)，x 是要傳入的參數。也就是說我們的Math可以直接通過Math. 來調用他的屬性和方法

由于Math對象的方法比較多，我這里只把開發過程中常用的一些方法做下講解

9-3-1，Math常用的屬性

• Math.PI
  圓周率，一個圓的周長和直徑之比，約等于 3.14159

9-3-2，Math常用的方法

• Math.abs(x) 返回一個數的絕對值

Math.abs('-1'); // 1 Math.abs(-2); // 2 Math.abs(null); // 0 Math.abs("string"); // NaN Math.abs(); // NaN

• Math.max() 返回多個數值的最大值

console.log(Math.max(1, 2, 3)) //3

• Math.min() 返回多個數值的最小值

console.log(Math.min(1, 2, 3)) //1

9-3-3，Math中取整數的三個方法

• Math.ceil(x) 向上取整，往大了取

console.log(Math.ceil(1.2))//2console.log(Math.ceil(1.5))//2console.log(Math.ceil(1.7))//2console.log(Math.ceil(1.9))//2

• Math.floor(x) 向下取整，往小了取

console.log(Math.floor(1.2))//1console.log(Math.floor(1.5))//1console.log(Math.floor(1.7))//1console.log(Math.floor(1.9))//1

• Math.round(x) 四舍五入取整

console.log(Math.round(1.2))//1console.log(Math.round(1.5))//2console.log(Math.round(1.7))//2console.log(Math.round(1.9))//2

9-3-4，隨機數的學習

Math.random() 得到一個大于等于0，小于1之間的隨機數
使用。

使用場景：一般我們做抽獎時會用到隨機數

• 獲取兩數之間的隨機數（大于等于min小于max）

//這個隨機數可能是整數，也可能是小數 Math.random() * (max - min) + min

• 得到兩數之間的隨機整數（大于等于min，小于max）

// 這個隨機數是min和max之間的隨機整數 function getRandomInt(min, max) {min = Math.ceil(min);max = Math.floor(max);//不含最大值，含最小值return Math.floor(Math.random() * (max - min)) + min; }

• 得到兩數之間的隨機整數，包括兩個數在內（大于等于min，小于等于max）

// 這個隨機數是min和max之間的隨機整數 function getRandomIntInclusive(min, max) {min = Math.ceil(min);max = Math.floor(max);//含最大值，含最小值 return Math.floor(Math.random() * (max - min + 1)) + min; }

9-4，Date日期對象的學習

我們的Date對象是一個構造函數對象，必須使用new 對象，來創建我們要使用的對象以后才可以使用。

創建一個新Date對象的唯一方法是通過new 操作符，
例如：let now = new Date()

使用場景 比如我們的秒殺倒計時，顯示的日期都需要借助Date日期對象

9-4-1，創建Date對象

有 4 種方法創建新的日期對象：

new Date() new Date(year, month, day, hours, minutes, seconds, milliseconds) new Date(dateString) new Date(milliseconds)

• new Date()創建Date對象

var d = new Date()console.log(d)//Mon Dec 21 2020 20:02:54 GMT+0800 (中國標準時間)

這樣直接創建的返回的是當前的時間如上面的注釋所示，我當前是2020年12月21日20時02分54，你打印的應該是你當前自己的時間。

• new Date(year, month, …)
  new Date(year, month, …) 用指定日期和時間創建新的日期對象。
  7個數字分別指定年、月、日、小時、分鐘、秒和毫秒（按此順序）：

var d = new Date(2018, 11, 24, 10, 33, 30, 0); console.log(d) //Mon Dec 24 2018 10:33:30 GMT+0800 (中國標準時間)

這里有一點需要注意：JavaScript 從 0 到 11 計算月份。一月是 0。十二月是11。
4個數字指定年、月、日和小時：

var d = new Date(2018, 11, 24, 10);

3 個數字指定年、月和日：

var d = new Date(2018, 11, 24);

• new Date(dateString)
  new Date(dateString) 從日期字符串創建一個新的日期對象
  我們可以通過 年-月-日 或者年/月/日 獲取Date對象

//如我們用兩種方式來創建2020年12月21日var d1 = new Date(2020,11,21);//月份是從0開始的 11代表12月console.log(d1) //Mon Dec 21 2020 00:00:00 GMT+0800 (中國標準時間)var d2 = new Date('2020-12-21');console.log(d2) //Mon Dec 21 2020 08:00:00 GMT+0800 (中國標準時間)var d3 = new Date('2020/12/21');console.log(d3) //Mon Dec 21 2020 08:00:00 GMT+0800 (中國標準時間)

• new Date(milliseconds)
  new Date(milliseconds) 創建一個零時加毫秒的新日期對象
  JavaScript 將日期存儲為自 1970 年 1 月 1 日 00:00:00 UTC（協調世界時）以來的毫秒數。
  零時間是 1970 年 1 月 1 日 00:00:00 UTC。
  現在的時間是：1970 年 1 月 1 日之后的 1608553621233毫秒
  如下

var d1 = new Date(0);console.log(d1) //Thu Jan 01 1970 08:00:00 GMT+0800 (中國標準時間)

r如果我們想獲取當前時間距離1970 年 1 月 1 日之間的毫秒值可以

var d1 = new Date();console.log(d1.getTime()) //1608553621233var d2 = new Date();console.log(d2) //Mon Dec 21 2020 20:27:01 GMT+0800 (中國標準時間)

可以看出當前時間距離1970 年 1 月 1 日之間的毫秒值是1608553621233
那么我們直接new Date(1608553621233)獲取的日期如下

var d1 = new Date(1608553621233);console.log(d1) //Mon Dec 21 2020 20:27:01 GMT+0800 (中國標準時間)

所以當前的日期和通過new Date(當前日期距離1970年1月1日的毫秒值)都可以獲取當前時間。兩者可以相互轉換。

9-4-2,日期獲取方法

獲取方法用于獲取日期的某個部分（來自日期對象的信息）。下面是最常用的方法

方法描述

getDate()	以數值返回天（1-31）
getDay()	以數值獲取周名（0-6）
getFullYear()	獲取四位的年（yyyy）
getHours()	獲取小時（0-23）
getMilliseconds()	獲取毫秒（0-999）
getMinutes()	獲取分（0-59）
getMonth()	獲取月（0-11）
getSeconds()	獲取秒（0-59）
getTime()	獲取時間（從 1970 年 1 月 1 日至今）

9-4-3，日期設置方法

設置方法用于設置日期的某個部分

方法描述

setDate()	以數值（1-31）設置日
setFullYear()	設置年（可選月和日）
setHours()	設置小時（0-23）
setMilliseconds()	設置毫秒（0-999）
setMinutes()	設置分（0-59）
setMonth()	設置月（0-11）
setSeconds()	設置秒（0-59）
setTime()	設置時間（從 1970 年 1 月 1 日至今的毫秒數）

9-4-4，倒計時（綜合案例）

我們這里帶大家實現一個倒計時的案例，比如我們知道一個活動結束的時間，然后去計算活動還有多久結束。我會在視頻里帶著大家寫一個綜合的案例。大家跟著視頻課來學習這個綜合案例即可。

9-5,Array數組對象的學習

數組對象的作用是：使用單獨的變量名來存儲一系列的值。
如我之前學習數組時，數組的一種創建方式

var mycars = new Array(); mycars[0] = "Saab"; mycars[1] = "Volvo"; mycars[2] = "BMW";

9-5-1,判斷是不是數組

判斷一個對象是不是數組有兩種方式

• 1，通過instanceof Array
• 2，通過Array.isArray(）方法

var arr = new Array()console.log(arr instanceof Array) //trueconsole.log(Array.isArray(arr))//true

9-5-2，添加和刪除數組元素

其實我們在講解數組的那一節有教大家如何添加和刪除數組，今天再來帶大家系統的來學習下數組的添加和刪除

• push方法添加
  在數組的末尾添加一個或者多個元素
• unshift方法添加
  在數組的開頭添加一個或者多個元素
• pop方法刪除
  刪除數組尾部的元素，一次只能刪除一個
• shift方法刪除
  刪除數組最前面（頭部）的元素

9-5-3，配套練習（篩選數組）

給你一組數據 [20,59,40,80,99,98] 篩選出所有小于60的數組，可以理解為找到所有不及格的學生的成績，你會怎么做呢？ 可以結合我們上面學過的知識，自己思考下。我會在視頻里帶著你寫一遍?？匆曨l之前，建議你自己先思考下。

9-5-4，reverse方法翻轉數組

reverse() 方法將數組中元素的位置顛倒，并返回該數組。數組的第一個元素會變成最后一個，數組的最后一個元素變成第一個。該方法會改變原數組。

var arr = [1, 2, 3, 4, 5]console.log(arr.reverse())//[5, 4, 3, 2, 1]

9-5-5，sort方法對數組進行排序

用sort方法進行排序，默認是升序排列的，如下

var arr = [1, 3, 2, 5, 4]console.log(arr.sort())//[1, 2, 3, 4, 5]

但是直接用sort方法會有問題

var arr = [11, 3, 22, 55, 44]console.log(arr.sort())//[11, 22, 3, 44, 55]

為什么會出現3在11和22后面的問題呢，因為我們sort默認排序順序是在將元素轉換為字符串，然后對字符串進行比較，再排序的，所以我們要想用sort來排序，就要用到另外一個寫法了

var arr = [11, 3, 22, 55, 44]//按照升序排序arr.sort(function (a, b) {return a - b})//按照降序排序arr.sort(function (a, b) {return b - a})

上面的 寫法是固定的，大家只需要記住就行了。 a-b時是升序，b-a時是降序

function (a, b) {return a - b }

9-5-6，數組的索引方法

• indexOf()方法
  返回在數組中可以找到一個給定元素的第一個索引，如果不存在，則返回-1。
• lastIndexOf() 方法
  返回指定元素在數組中的最后一個的索引，如果不存在則返回 -1

9-5-7，課程作業，對數組進行去重

給出一個數組 [1,3,5,2,4,5,6,4],現要求把數組里重復的元素給刪除掉，我會在視頻里帶著大家寫一遍，在看視頻之前，建議大家先自己仔細思考下，最好自己先實現一下。

9-5-7，把數組轉換為字符串

我們把數組轉換為字符串有下面兩種方法

• toString()
  將數組通過逗號連接成一個字符串。
• join(分隔符)
  將數組通過分隔符連接成一個字符串。join里分隔符如果不寫的話，默認用逗號來連接數組元素組成一個字符串

var arr = [1, 3, 2, 5, 4]console.log(arr.toString())//1,3,2,5,4console.log(arr.join('-'))//1-3-2-5-4

這里希望大家重點掌握，因為我們實際開發中，會把數組轉換為字符串傳給后臺開發人員。

9-5-8，數組的其他常用方法

• concat() 方法
  用于合并兩個或多個數組。此方法不會更改現有數組，而是返回一個新數組
• slice() 方法
  截取數組的一部分返回一個新的數組對象，這一對象是一個由 begin 和 end 決定的原數組的淺拷貝（包括 begin，不包括end）。原始數組不會被改變
• splice() 方法
  通過刪除或替換現有元素或者原地添加新的元素來修改或者刪除數組
  splice(從第幾個開始，刪除幾個)

var arr = [1, 2, 3, 4, 5]arr.splice(0, 2)// 從索引為0的地方開始，刪除2個元素。console.log(arr) //[3, 4, 5]

• splice(從第幾個開始，替換幾個，要替換的值)

var arr = ['a', 'b', 'c', 'd', 'e']arr.splice(0, 2,'A','B')// 從索引為0的地方開始，替換2個元素，替換為 A和Bconsole.log(arr) //["A", "B", "c", "d", "e"]

到這里我們JavaScript的知識點就差不多學完了，不論是在小程序里還是uniapp里，js部分的代碼基本上都是一樣的。所以，大家學好js，就可以走遍天下都不怕了。

總結

以上是生活随笔為你收集整理的最新最全的JavaScript入门视频，包含小程序和uniapp相关的JavaScript知识学习的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。