云開發(fā) JavaScript入門

2020-07-20 11:21 更新

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

控制臺Console

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

數(shù)學運算

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

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

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

Console.log打印日志

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

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

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

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

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

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

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

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

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

console.log打印對象Object

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

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

我們可以通過點表示法來訪問該屬性獲取屬性對應的值：

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

當我們打印數(shù)組的某一項和通過點表示法獲取對象某個屬性對應的值的時候，有沒有覺得打印的內容太長？這個時候我們可以把數(shù)組、對象賦值給一個變量，類似于數(shù)學里的y=ax+b，就可以大大簡化代碼了。

變量與賦值

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

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

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

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

再來看打印對象的情況：

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

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

變量的沖突與覆蓋

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

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

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

  1. let username="小丸子"

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

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

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

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

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

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

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

操作數(shù)組

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

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

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

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

分隔符join方法

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

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

添加數(shù)組push方法

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

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

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

  1. console.log(movielist)

移除最后一項pop方法

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

  1. console.log(movielist.pop())

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

  1. console.log(movielist)

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

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

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

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

操作對象

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

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

給對象添加屬性

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

  1. movie.englishname="Farewell My Concubine"

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

  1. console.log(movie)

刪除對象的某個屬性

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

  1. delete movie.img

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

  1. console.log(movie)

更新對象的某個屬性

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

  1. movie.desc="人生如戲。"

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

  1. console.log(movie)

常量

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

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

  1. const defaultStyle = {
  2.   color: '#7A7E83',
  3.   selectedColor: '#3cc51f',
  4.   backgroundColor: '#ffffff',
  5. }

字符串的操作

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

技術文檔：技術文檔之JavaScript標準庫之String

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

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

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

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

Math對象

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

技術文檔： Math對象文檔

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

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

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

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

Date對象

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

技術文檔：Date對象文檔

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

全局對象wx

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

  1. wx

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

技術文檔：API技術文檔

了解網絡狀態(tài)

獲取網絡類型技術文檔：wx.getNetworkType()

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

  1. wx.getNetworkType({
  2.       success(res) {
  3.         console.log(res)
  4.       }
  5.     });

了解用戶信息

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

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

  1. wx.getUserInfo({
  2.   success(res) {
  3.       console.log(res);
  4.   }
  5. });

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

獲取設備信息

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

  1. wx.getSystemInfo({
  2.   success (res) {
  3.     console.log(res.model)
  4.     console.log(res.pixelRatio)
  5.     console.log(res.windowWidth)
  6.     console.log(res.windowHeight)
  7.     console.log(res.language)
  8.     console.log(res.version)
  9.     console.log(res.platform)
  10.   }
  11. })

頁面鏈接跳轉

頁面跳轉技術文檔：wx.navigateTo()

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

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

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

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

  1. wx.navigateBack({
  2.   delta: 1
  3. })

顯示消息提示框

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

  1.   wx.showToast({
  2.     title: '彈出成功',
  3.     icon: 'success',
  4.     duration: 1000
  5.   })

設置當前頁面的標題

設置標題技術文檔：wx.setNavigationBarTitle()

  1. wx.setNavigationBarTitle({
  2.   title: '控制臺更新的標題'
  3. })

打開文件選擇

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

  1. wx.chooseImage({
  2.   count: 1,
  3.   sizeType: ['original', 'compressed'],
  4.   sourceType: ['album', 'camera'],
  5.   success (res) {
  6.     const tempFilePaths = res.tempFilePaths
  7.   }
  8. })

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

以上內容是否對您有幫助：
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號