云開發(fā) JavaScript入門

JavaScript是目前世界上最流行的編程語(yǔ)言之一，它也是小程序開發(fā)最重要的基礎(chǔ)語(yǔ)言。要做出一個(gè)功能復(fù)雜的小程序，除了需要掌握J(rèn)avaScript的基本語(yǔ)法，還要了解如何使用JavaScript來(lái)操作小程序（通過(guò)API接口）。

控制臺(tái)Console

打開微信開發(fā)者工具，在調(diào)試器里可以看到Console、Sources、Network、Appdata、Wxml等標(biāo)簽，這些都是調(diào)試器的功能模塊。 而控制臺(tái)Console除了可以顯示小程序的錯(cuò)誤信息外，還可以用于輸入和調(diào)試代碼。

數(shù)學(xué)運(yùn)算

JavaScript的算數(shù)運(yùn)算符和我們常見(jiàn)的數(shù)學(xué)運(yùn)算符沒(méi)有太大區(qū)別，+加、-減、乘*、除/、指數(shù)**，我們可以在控制臺(tái)Console的>后面逐行輸入并按Enter執(zhí)行以下代碼：

136+384; //加法
(110/0.5+537-100)*2; //加減乘除
2**5; //指數(shù)運(yùn)算符

//為JavaScript的注釋，可以不用輸入，輸入也不會(huì)有影響；JavaScript的語(yǔ)句之間用英文字符的分號(hào);分隔。

Console.log打印日志

在控制臺(tái)輸入四則運(yùn)算可以直接得到結(jié)果，是因?yàn)檎{(diào)用了console.log()函數(shù)，我們可以把上面的四則運(yùn)算在控制臺(tái)里使用 console.log(321*3)打印出來(lái)，除了四則運(yùn)算，console.log()還可以打印字符串String，比如：

console.log("童鞋，歡迎開始JavaScript的學(xué)習(xí)~\nJavaScript是一門非常流行的編程語(yǔ)言，只要是有瀏覽器的地方就少不了JavaScript；\n網(wǎng)頁(yè)、小程序、甚至App、桌面應(yīng)用等都少不了JavaScript；\nJavaScript玩得溜的人我們可以稱其為前端開發(fā)工程師；\n前端開發(fā)工程師是需求量極大的崗位\n");
console.log('%c歡迎關(guān)注小程序的云開發(fā)：https://www.zhihu.com/org/teng-xun-yun-kai-fa-tcb （用云開發(fā)可以更快速學(xué)好前端開發(fā)）','color: red' );

在實(shí)際應(yīng)用中，總有一些具有特殊含義的字符無(wú)法直接輸入，比如換行\n、Tab鍵 \t、回車 \r、反斜杠 \\，這些我們稱之為轉(zhuǎn)義字符。JavaScript中單引號(hào)和雙引號(hào)都表示字符串。如果字符串中存在雙引號(hào)，建議最外層用單引號(hào)；如果字符串中存在單引號(hào)，建議最外層用雙引號(hào)。如何在控制臺(tái)給打印的字體添加顏色等，大家可以自行去研究。

console.log打印數(shù)組Array

我們可以在控制臺(tái)使用console.log()打印數(shù)組，打印出來(lái)之后，結(jié)果的前面會(huì)有數(shù)字顯示數(shù)組的長(zhǎng)度length，以及可以展開。

console.log(["肖申克的救贖","霸王別姬","這個(gè)殺手不太冷","阿甘正傳","美麗人生"])

在展開的結(jié)果里，我們可以看到數(shù)組的索引index，以及索引index對(duì)應(yīng)的值（比如： 1: "霸王別姬"）、該數(shù)組的長(zhǎng)度length，以及數(shù)組的方法(在proto里可以看到，比如concat、push、shift、slice、toString等)。

我們也可以通過(guò)索引值打印數(shù)組里的單一數(shù)據(jù)，也就是通過(guò)指定數(shù)組名以及索引值，來(lái)訪問(wèn)某個(gè)特定的元素：

console.log(["肖申克的救贖","霸王別姬","這個(gè)殺手不太冷","阿甘正傳","美麗人生"])

console.log打印對(duì)象Object

在控制臺(tái)里使用console.log()函數(shù)打印一個(gè)對(duì)象Object，對(duì)象的結(jié)果仍然可以通過(guò)左側(cè)的三角展開可以看到對(duì)象的屬性以及屬性對(duì)應(yīng)的值。

console.log({name: "霸王別姬",img: "https://img3.doubanio.com/view/photo/s_ratio_poster/public/p1910813120.webp",desc: "風(fēng)華絕代。"})

我們可以通過(guò)點(diǎn)表示法來(lái)訪問(wèn)該屬性獲取屬性對(duì)應(yīng)的值：

console.log({name: "霸王別姬",img: "https://img3.doubanio.com/view/photo/s_ratio_poster/public/p1910813120.webp",desc: "風(fēng)華絕代。"}.desc)

當(dāng)我們打印數(shù)組的某一項(xiàng)和通過(guò)點(diǎn)表示法獲取對(duì)象某個(gè)屬性對(duì)應(yīng)的值的時(shí)候，有沒(méi)有覺(jué)得打印的內(nèi)容太長(zhǎng)？這個(gè)時(shí)候我們可以把數(shù)組、對(duì)象賦值給一個(gè)變量，類似于數(shù)學(xué)里的y=ax+b，就可以大大簡(jiǎn)化代碼了。

變量與賦值

JavaScript可以使用let語(yǔ)句聲明變量，使用等號(hào)=可以給變量賦值，等號(hào)=左側(cè)為變量名，右側(cè)為給該變量賦的值，變量的值可以是任何數(shù)據(jù)類型。JavaScript常見(jiàn)的數(shù)據(jù)類型有：數(shù)值（Number）、字符串（String）、布爾值（Boolean）、對(duì)象（Object）、函數(shù)（Function）等。

將數(shù)據(jù)賦值給變量

比如我們可以在控制臺(tái)里，將上面的數(shù)組和對(duì)象賦值給一個(gè)變量，然后打印該變量，先來(lái)打印數(shù)組：

let movielist=["肖申克的救贖","霸王別姬","這個(gè)殺手不太冷","阿甘正傳","美麗人生"]
console.log(movielist)
console.log(movielist[2])

再來(lái)看打印對(duì)象的情況：

let movie={name: "霸王別姬",img: "https://img3.doubanio.com/view/photo/s_ratio_poster/public/p1910813120.webp",desc: "風(fēng)華絕代。"}
console.log(movie)
console.log(movie.name)

通過(guò)將復(fù)雜的數(shù)據(jù)信息（數(shù)組、對(duì)象）賦值給一個(gè)變量，代碼得到了大大的簡(jiǎn)化，可以深刻了解到變量是用于存儲(chǔ)信息的”容器”。

變量的沖突與覆蓋

比如我們?cè)诳刂婆_(tái)Console里使用let聲明一個(gè)變量username，然后將username打印出來(lái)：

let username="小明"
console.log(username)

但是如果再次使用let聲明username，并給username賦值時(shí)就會(huì)出現(xiàn)變量名沖突的報(bào)錯(cuò)，比如再在控制臺(tái)里輸入以下代碼并按Enter執(zhí)行，看會(huì)報(bào)什么錯(cuò)？

let username="小丸子"

也就是說(shuō)聲明了一個(gè)變量名之后，就不能再次聲明這個(gè)變量名啦。但是我們卻可以給該變量重新賦值，比如：

username="小軍"
console.log(username)

我們發(fā)現(xiàn)給該變量重新賦值之后，變量的值就被覆蓋了。所以let 變量名=值，相當(dāng)于進(jìn)行了兩步操作，第一步是聲明變量名，第二步是給變量賦值，具體可以通過(guò)控制臺(tái)執(zhí)行下面的代碼來(lái)理解。

let school  //聲明變量
school="清華"   //將字符串String"清華"賦值給變量
console.log(school)  //打印變量
school=["清華","北大","上交","復(fù)旦","浙大","南大","中科大"] //給變量賦值新的數(shù)據(jù)類型新的數(shù)據(jù)
console.log(school)  //打印變量

通過(guò)使用控制臺(tái)實(shí)戰(zhàn)打印具體的信息，我們就會(huì)對(duì)聲明變量、賦值、覆蓋（修改變量的值）有了更深的了解。

這個(gè)undefined是console.log()這個(gè)函數(shù)的返回值，每個(gè)函數(shù)都有返回值，如果函數(shù)沒(méi)有提供返回值，會(huì)返回 undefined。

小任務(wù)：那我們是否可以給一個(gè)沒(méi)有聲明過(guò)的變量名直接賦值呢？你知道應(yīng)該如何在控制臺(tái)打印測(cè)試結(jié)果嗎？你的實(shí)驗(yàn)結(jié)果是？

操作數(shù)組

在前面我們已經(jīng)說(shuō)過(guò)，數(shù)組是一個(gè)有序的列表。下面這個(gè)數(shù)組是豆瓣電影的top5：

["肖申克的救贖","霸王別姬","這個(gè)殺手不太冷","阿甘正傳","美麗人生"]

但是有時(shí)候我們需要操作一下該數(shù)組，比如想增加5項(xiàng)數(shù)據(jù)，變成top10，比如數(shù)據(jù)太多，只想要top3等等，這個(gè)時(shí)候就需要對(duì)數(shù)組進(jìn)行操作了。要對(duì)數(shù)組進(jìn)行操作，就有操作的方法。前面我們已經(jīng)將給數(shù)組賦值給了movielist，下面我們可以直接使用該變量。也可以先在控制臺(tái)再賦值一下。

movielist=["肖申克的救贖","霸王別姬","這個(gè)殺手不太冷","阿甘正傳","美麗人生"]

分隔符join方法

join方法將數(shù)組元素拼接為字符串,以分隔符分割，默認(rèn)是逗號(hào),分割。

console.log(movielist.join("、"))

添加數(shù)組push方法

push()方法向數(shù)組的末尾添加一個(gè)或更多元素，并返回新數(shù)組的長(zhǎng)度。

console.log(movielist.push("千與千尋","泰坦尼克號(hào)","辛德勒的名單","盜夢(mèng)空間","忠犬八公的故事"))

這里返回的是新數(shù)組的長(zhǎng)度，那我們打印一下新數(shù)組看具體包含了哪些值，push方法在原來(lái)的數(shù)組后面（不是前面）新增了5個(gè)值（不是覆蓋，重新賦值）。

console.log(movielist)

移除最后一項(xiàng)pop方法

pop() 從數(shù)組末尾移除最后一項(xiàng)，并返回移除的項(xiàng)的值：

console.log(movielist.pop())

返回的是數(shù)組的最后一項(xiàng)，我們?cè)賮?lái)打印movielist，看看有什么變化：

console.log(movielist)

以上通過(guò)一些實(shí)際的案例讓大家了解如何使用控制臺(tái)打印這種實(shí)戰(zhàn)方式來(lái)了解了一些數(shù)組具體的操作方法，數(shù)組的操作方法還有很多，大家可以去查閱技術(shù)文檔。

技術(shù)文檔：數(shù)組Array

如果說(shuō)小程序的開發(fā)離不開小程序的官方技術(shù)文檔，那MDN則是每一個(gè)前端開發(fā)工程師都必須經(jīng)常去翻閱的技術(shù)文檔。打上MDN數(shù)組Array，在頁(yè)面的左側(cè)菜單里，我們可以看到Array有著數(shù)十種方法，而這些方法，都是我們之前打印了數(shù)組之后在proto里看到的方法。關(guān)于數(shù)組的prototype，學(xué)有余力的人可以去閱讀MDN Array.Prototype

小任務(wù)：通過(guò)實(shí)戰(zhàn)的方式了解一下數(shù)組的concat()、reverse()、shift()、slice()、sort()、splice()、unshift()方法

操作對(duì)象

我們可以用點(diǎn)表示法訪問(wèn)對(duì)象的屬性，通過(guò)給該屬性賦值就能夠添加和修改對(duì)象的屬性的值了。在之前我們聲明過(guò)一個(gè)對(duì)象movie：

movie={name: "霸王別姬",img: "https://img3.doubanio.com/view/photo/s_ratio_poster/public/p1910813120.webp",desc: "風(fēng)華絕代。"}

給對(duì)象添加屬性

比如我們給霸王別姬增加英文名的屬性，直接在控制臺(tái)里輸入以下代碼：

movie.englishname="Farewell My Concubine"

然后再在控制臺(tái)打印movie看看movie是否有了englishname的屬性

console.log(movie)

刪除對(duì)象的某個(gè)屬性

比如我們想刪除movie的img屬性，可以通過(guò)delete 方法來(lái)刪除

delete movie.img

然后再在控制臺(tái)打印movie看看movie的img屬性是否被刪除了。

console.log(movie)

更新對(duì)象的某個(gè)屬性

比如我們想更新movie的desc屬性，可以通過(guò)重新賦值的方式來(lái)更新

movie.desc="人生如戲。"

然后再在控制臺(tái)打印movie看看movie的desc屬性是否有了變化。

console.log(movie)

常量

在前面我們知道變量的值可以通過(guò)重新賦值的方式來(lái)改變，但是有些數(shù)據(jù)我們希望是固定的（寫死，不會(huì)經(jīng)常改變），這個(gè)時(shí)候可以使用const聲明創(chuàng)建一個(gè)值的只讀引用。const聲明和let聲明挺像的。

比如開發(fā)小程序的時(shí)候，我們會(huì)確定小程序的色系、顏色等，使用const聲明，以后直接調(diào)用這個(gè)常量，這樣就不用記那么多復(fù)雜的參數(shù)，以后想全網(wǎng)改樣式，直接改const的內(nèi)容即可。比如：

const defaultStyle = {
  color: '#7A7E83',
  selectedColor: '#3cc51f',
  backgroundColor: '#ffffff',
}

字符串的操作

前面我們已經(jīng)知道字符串是JavaScript的數(shù)據(jù)類型之一，那我們可以怎么來(lái)操作字符串呢？下面我們就來(lái)結(jié)合MDN技術(shù)文檔來(lái)學(xué)習(xí)。MDN文檔是前端最為依賴的技術(shù)文檔，我們要像查詞典一樣來(lái)學(xué)習(xí)如何使用它。

技術(shù)文檔：技術(shù)文檔之JavaScript標(biāo)準(zhǔn)庫(kù)之String

首先我們?cè)趍ain.js里輸入以下代碼，然后執(zhí)行，在Console控制臺(tái)查看效果：

let lesson="云開發(fā)技術(shù)訓(xùn)練營(yíng)";
let enname="CloudBase Camp"
console.log(lesson.length);  //返回字符串的長(zhǎng)度
console.log(lesson[4]);  //返回在指定位置的字符
console.log(lesson.charAt(4));   //返回在指定位置的字符
console.log(lesson.substring(3,6));  //從索引3開始到6（不包括6）
console.log(lesson.substring(4));  //從索引4開始到結(jié)束
console.log(enname.toLowerCase()); //把一個(gè)字符串全部變?yōu)樾懀?console.log(enname.toUpperCase());  //把一個(gè)字符串全部變?yōu)榇髮懀?console.log(enname.indexOf('oud')); //搜索指定字符串出現(xiàn)的位置：
console.log(enname.concat(lesson)); //連接兩個(gè)字符串
console.log(lesson.slice(4)); //提取字符串的某個(gè)部分，并以新的字符串返回被提取的部分

然后打開技術(shù)文檔，在技術(shù)文檔左側(cè)菜單的屬性和方法里，找到操作字符串用了哪些屬性和方法，通過(guò)翻閱技術(shù)文檔既加深對(duì)字符串的每個(gè)操作的理解，也知道該如何查閱技術(shù)文檔。

字符串怎么有這么多屬性和方法？多就對(duì)了，正是因?yàn)槎啵晕覀儾荒苡脗鹘y(tǒng)的死記硬背來(lái)學(xué)習(xí)技術(shù)。技術(shù)文檔怎么有這么多新詞匯我見(jiàn)都沒(méi)有見(jiàn)過(guò)，完全看不懂？你不需要全部都懂，就像我們不需要懂詞典里的所有單詞和語(yǔ)法一樣。即使是GRE滿分高手也不能認(rèn)全所有單詞，而通常6級(jí)單詞就已經(jīng)夠用了，技術(shù)也是一樣的道理。

Math對(duì)象

Math是一個(gè)內(nèi)置對(duì)象， 它具有數(shù)學(xué)常數(shù)和函數(shù)的屬性和方法，但它不是一個(gè)函數(shù)對(duì)象。大家可以先在控制臺(tái)實(shí)戰(zhàn)然后再來(lái)了解這句話啊含義。

技術(shù)文檔： Math對(duì)象文檔

在開發(fā)者工具的控制臺(tái)console里輸入以下代碼，根據(jù)得到的結(jié)果來(lái)弄清楚每個(gè)函數(shù)的意思。

let x=3,y=4,z=5.001,a=-3,b=-4,c=-5;
console.log(Math.abs(b)); //返回b的絕對(duì)值
console.log(Math.round(z));//返回z四舍五入后的整數(shù)
console.log(Math.pow(x,y)) //返回x的y次冪
console.log(Math.max(x,y,z,a,b,c)); //返回x,y,z,a,b,c的最大值
console.log(Math.min(x,y,z,a,b,c));//返回x,y,z,a,b,c的最小值
console.log(Math.sign(a));  //返回a是正數(shù)還是負(fù)數(shù)
console.log(Math.hypot(x,y));  //返回所有x,y的平方和的平方根 
console.log(Math.PI);  //返回一個(gè)圓的周長(zhǎng)與直徑的比例，約3.1415

我們打開技術(shù)文檔，在左側(cè)菜單找一下Math對(duì)象的屬性有哪些，Math對(duì)象的方法又有哪些？大致感受一下屬性和方法到底是什么意思。

注意，在別的開發(fā)語(yǔ)言里面，我們想獲取一個(gè)數(shù)的絕對(duì)值可以直接調(diào)用abs(x)函數(shù)即可，而JavaScript卻是Math.abs(x)，這是因?yàn)榍懊嬲f(shuō)的Math不是函數(shù)(函數(shù)對(duì)象)，而是一個(gè)對(duì)象。

Date對(duì)象

Date 對(duì)象用于處理日期和時(shí)間。時(shí)間有年、月、日、星期、小時(shí)、分鐘、秒、毫秒以及時(shí)區(qū)的概念，因此Date對(duì)象屬性和方法也顯得比較多。

技術(shù)文檔：Date對(duì)象文檔

let now = new Date();  //返回當(dāng)日的日期和時(shí)間。
console.log(now); 
console.log(now.getFullYear()); //從 Date 對(duì)象以四位數(shù)字返回年份。
console.log(now.getMonth());  //從 Date 對(duì)象返回月份 (0 ~ 11)。
console.log(now.getDate());  //從 Date 對(duì)象返回一個(gè)月中的某一天 (1 ~ 31)。
console.log(now.getDay());  //從 Date 對(duì)象返回一周中的某一天 (0 ~ 6)。
console.log(now.getHours());  //返回 Date 對(duì)象的小時(shí) (0 ~ 23)。
console.log(now.getMinutes());  //返回 Date 對(duì)象的分鐘 (0 ~ 59)。
console.log(now.getSeconds());  //返回 Date 對(duì)象的秒數(shù) (0 ~ 59)。
console.log(now.getMilliseconds());  //返回 Date 對(duì)象的毫秒(0 ~ 999)。
console.log(now.getTime());  //返回 1970 年 1 月 1 日至今的毫秒數(shù)。

全局對(duì)象wx

wx是小程序的全局對(duì)象，用于承載小程序能力相關(guān) API。小程序開發(fā)框架提供豐富的微信原生 API，可以方便的調(diào)起微信提供的能力，如獲取用戶信息，了解網(wǎng)絡(luò)狀態(tài)等。大家可以在微信開發(fā)者工具的控制臺(tái)Console里了解一下這個(gè)wx這個(gè)對(duì)象。

wx

可以看到wx的所有屬性和方法，如果你對(duì)wx的哪個(gè)屬性和方法不了解，你可以查閱技術(shù)文檔。

技術(shù)文檔：API技術(shù)文檔

了解網(wǎng)絡(luò)狀態(tài)

獲取網(wǎng)絡(luò)類型技術(shù)文檔：wx.getNetworkType()

大家可以切換一下開發(fā)者工具的模擬器的網(wǎng)絡(luò)，然后多次在控制臺(tái)console輸入以下代碼查看有什么不同：

wx.getNetworkType({
      success(res) {
        console.log(res)
      }
    });

了解用戶信息

獲取用戶信息技術(shù)文檔：wx.getUserInfo()

登錄開發(fā)者工具之后（大家應(yīng)該已經(jīng)處于登錄狀態(tài)），在控制臺(tái)console里輸入以下代碼，看得到什么信息：

wx.getUserInfo({
  success(res) {
      console.log(res);
  }
});

然后退出開發(fā)者工具，再輸入以上代碼，看看是什么令人興奮的結(jié)果？

獲取設(shè)備信息

獲取設(shè)備信息技術(shù)文檔：wx.getSystemInfo()

wx.getSystemInfo({
  success (res) {
    console.log(res.model)
    console.log(res.pixelRatio)
    console.log(res.windowWidth)
    console.log(res.windowHeight)
    console.log(res.language)
    console.log(res.version)
    console.log(res.platform)
  }
})

頁(yè)面鏈接跳轉(zhuǎn)

頁(yè)面跳轉(zhuǎn)技術(shù)文檔：wx.navigateTo()

除了可以獲取到用戶、設(shè)備、網(wǎng)絡(luò)等的信息，使用控制臺(tái)來(lái)調(diào)用對(duì)象的方法也可以執(zhí)行一些動(dòng)作，比如頁(yè)面跳轉(zhuǎn)。在控制臺(tái)Console里輸入：

wx.navigateTo({
  url: '/pages/home/imgshow/imgshow'
})

還可以返回頁(yè)面的上一層，在控制臺(tái)里輸入

頁(yè)面返回技術(shù)文檔：wx.navigateBack()

wx.navigateBack({
  delta: 1
})

顯示消息提示框

顯示消息提示框技術(shù)文檔：wx.showToast()

  wx.showToast({
    title: '彈出成功',
    icon: 'success',
    duration: 1000
  })

設(shè)置當(dāng)前頁(yè)面的標(biāo)題

設(shè)置標(biāo)題技術(shù)文檔：wx.setNavigationBarTitle()

wx.setNavigationBarTitle({
  title: '控制臺(tái)更新的標(biāo)題'
})

打開文件選擇

打開文件選擇技術(shù)文檔：wx.chooseImage()

wx.chooseImage({
  count: 1,
  sizeType: ['original', 'compressed'],
  sourceType: ['album', 'camera'],
  success (res) {
    const tempFilePaths = res.tempFilePaths
  }
})

這一部分主要是讓大家明白控制臺(tái)Console的強(qiáng)大之處，以及通過(guò)控制臺(tái)實(shí)戰(zhàn)的方法對(duì)小程序API的運(yùn)行機(jī)制有一個(gè)初步的了解。