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

控制臺Console

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

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

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

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

//為JavaScript的注釋，可以不用輸入，輸入也不會有影響；JavaScript的語句之間用英文字符的分號;分隔。

Console.log打印日志

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

console.log("童鞋，歡迎開始JavaScript的學(xué)習(xí)~\nJavaScript是一門非常流行的編程語言，只要是有瀏覽器的地方就少不了JavaScript；\n網(wǎng)頁、小程序、甚至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' );

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

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

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

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

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

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

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

console.log打印對象Object

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

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

我們可以通過點表示法來訪問該屬性獲取屬性對應(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ù)組的某一項和通過點表示法獲取對象某個屬性對應(yīng)的值的時候，有沒有覺得打印的內(nèi)容太長？這個時候我們可以把數(shù)組、對象賦值給一個變量，類似于數(shù)學(xué)里的y=ax+b，就可以大大簡化代碼了。

變量與賦值

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

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

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

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

再來看打印對象的情況：

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)

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

變量的沖突與覆蓋

比如我們在控制臺Console里使用let聲明一個變量username，然后將username打印出來：

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

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

let username="小丸子"

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

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

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

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

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

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

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

操作數(shù)組

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

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

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

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

分隔符join方法

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

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

添加數(shù)組push方法

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

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

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

console.log(movielist)

移除最后一項pop方法

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

console.log(movielist.pop())

返回的是數(shù)組的最后一項，我們再來打印movielist，看看有什么變化：

console.log(movielist)

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

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

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

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

操作對象

我們可以用點表示法訪問對象的屬性，通過給該屬性賦值就能夠添加和修改對象的屬性的值了。在之前我們聲明過一個對象movie：

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

給對象添加屬性

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

movie.englishname="Farewell My Concubine"

然后再在控制臺打印movie看看movie是否有了englishname的屬性

console.log(movie)

刪除對象的某個屬性

比如我們想刪除movie的img屬性，可以通過delete 方法來刪除

delete movie.img

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

console.log(movie)

更新對象的某個屬性

比如我們想更新movie的desc屬性，可以通過重新賦值的方式來更新

movie.desc="人生如戲。"

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

console.log(movie)

常量

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

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

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

字符串的操作

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

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

首先我們在main.js里輸入以下代碼，然后執(zhí)行，在Console控制臺查看效果：

let lesson="云開發(fā)技術(shù)訓(xùn)練營";
let enname="CloudBase Camp"
console.log(lesson.length);  //返回字符串的長度
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()); //把一個字符串全部變?yōu)樾懀?console.log(enname.toUpperCase());  //把一個字符串全部變?yōu)榇髮懀?console.log(enname.indexOf('oud')); //搜索指定字符串出現(xiàn)的位置：
console.log(enname.concat(lesson)); //連接兩個字符串
console.log(lesson.slice(4)); //提取字符串的某個部分，并以新的字符串返回被提取的部分

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

字符串怎么有這么多屬性和方法？多就對了，正是因為多，所以我們不能用傳統(tǒng)的死記硬背來學(xué)習(xí)技術(shù)。技術(shù)文檔怎么有這么多新詞匯我見都沒有見過，完全看不懂？你不需要全部都懂，就像我們不需要懂詞典里的所有單詞和語法一樣。即使是GRE滿分高手也不能認(rèn)全所有單詞，而通常6級單詞就已經(jīng)夠用了，技術(shù)也是一樣的道理。

Math對象

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

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

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

let x=3,y=4,z=5.001,a=-3,b=-4,c=-5;
console.log(Math.abs(b)); //返回b的絕對值
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);  //返回一個圓的周長與直徑的比例，約3.1415

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

注意，在別的開發(fā)語言里面，我們想獲取一個數(shù)的絕對值可以直接調(diào)用abs(x)函數(shù)即可，而JavaScript卻是Math.abs(x)，這是因為前面說的Math不是函數(shù)(函數(shù)對象)，而是一個對象。

Date對象

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

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

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

全局對象wx

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

wx

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

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

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

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

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

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

了解用戶信息

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

登錄開發(fā)者工具之后（大家應(yīng)該已經(jīng)處于登錄狀態(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)
  }
})

頁面鏈接跳轉(zhuǎn)

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

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

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

還可以返回頁面的上一層，在控制臺里輸入

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

wx.navigateBack({
  delta: 1
})

顯示消息提示框

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

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

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

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

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

打開文件選擇

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

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

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