阿嬷都看得懂的 JavaScript 怎麽写

昨天我们提及程序语言的 4 个重要特徵：

1. 变数
2. 型别
3. 条件判断
4. 回圈

那麽，今天就让我们开始学习 JavaScript 怎麽表达这 4 个特徵吧！

1. 变数
   昨天我们提到变数宣告是这样的：

有个变数  十月五号的钱钱 = 1000
有个变数  十月五号的待购商品 = {品项："珍珠奶茶"，价钱：40}
有个变数 十月五号的待购商品清单 = [ {品项："珍珠奶茶"，价钱：40},  {品项："椰果奶茶"，价钱：35},  {品项："珍珠红茶"，价钱：35}, ...,  {品项："椰果红茶"，价钱：25}]

在 JavaScript 这个神灯精灵语的方言中，我们是这样说的

let budgetOct5 = 1000
let itemOct5 = {category: "bubble tea", price: 40}
let itemListOct5 = [{category: "bubble tea", price: 40}, {category: "coconut jelly milktea", price: 35}, {category: "bubble black tea", price: 35}, ..., {category: "coconut jelly black tea", price: 25}]

可以发现，我们在给予变数这个名字的时候，会尽量使用清楚明晰的单字组合；毕竟，我们之後可能还会回来改写这些指令。当我们把这些单字组合在一起的时候，我们通常会将单字的第一个字母大写，或者在单字间用底线连结。

有些时候，在比较老派的说法中，你也会看到

var budgetOct5 = 1000

这两种说法在多数情境下都通用，但是现在更推荐使用 let 为主。

另外，你也可能看见

const budgetOct5 = 1000

这表示 budgetOct5 这个变数指到的内容是固定不动的。一旦我们跟神灯精灵这麽说了以後，budgetOct5 的内容就无法再被更动。阿嬷们可能会很狐疑，这样不是很不方便吗？不，有些时候，我们就是希望那个变数储存的资料，是不会被不小心改动到的。例如，圆周率 pi 就是 3.1415926，我们不会希望 pi 这个变数，竟然会在执行某些功能以後，被覆写或变更掉。

另外，我们昨天也需要告诉神灯精灵，我们需要让它执行些功能：

有个功能 买东西(钱钱, 待购商品){
    有个变数  阿嬷主人要的计算结果 = 钱钱 - 待购商品.价钱
    回覆  阿嬷主人要的计算结果
}

使用 JavaScript 这个方言的时候，我们会这样说：

function buyAnItem(budget, item){
	let result = budget - item.price
	return result
}

2. 型别
   令人庆幸的是，JavaScript 是个弱型别的方言，也会在执行功能的时候，尽可能脑补型别转换。因此，除非在比较特殊的情况下，否则我们不是那麽需要担心型别的问题。另外，JavaScript 的型别区分相对简单。例如，於 JavaScript 中，所有数字都属於 number 这个型别；不像在 C 语言中，还必须以数字大小或是否带小数点，区分为 int, double, float ...... 等等不同型别。

对於数字这个型别而言，JavaScript 使用

• +, -, *, / 表示加减乘除；
• % 表示余数；
• 许多时候，我们会看见 num++ 这样的写法；这是 num = num+1 的缩写。同理，num-- 就表示 num=num-1，以此类推。

对於文字串这个型别而言，方便解释起见，让我们先

let str1 = "Log"
let str2 = "os"

JavaScript 使用

• • 来表示字串合并；例如，str1 + str2 的结果会是 "Logos"。
• 文字串.slice(数字, 数字) 来表示字串切分，前个数字表示从哪边开始切，後个数字表示切出几个字；例如，str1.slice(1, 2) 的结果会是 "og"，因为是从 "Log" 这个字串的第 1 个字 (也就是 "o") 开始切，切出 2 个字得到 "og"。另外，也可以使用
• 文字串[数字] 作为 文字串.slice(数字, 1) 的简写，也就是只拿出字串中某个位置的字；例如 str2[1] 的结果就是 "s"，因为 "s" 出现在 "os" 这个文字串的第 1 个位置。
• 文字串.indexOf(文字串) 来表示字串搜寻，用来找到圆括弧中的文字串在前面那个文字串中的位置，都找不到的时候则回覆 -1；例如，str1.("o") 的结果会是 1。

对於布林值而言，JavaScript 使用

• && 表示 and；例如， True && False 会得到 False，而 True && True 会得到 True。
• || 表示 or；例如，True || False 会得到 True，而 False || False 会得到 False。

3. 条件判断
   昨天我们提到的条件判断是这样的：

	如果(待购商品清单[跳号]>30){
		钱钱 = 钱钱 - 30
	} 否则 {
		钱钱 = 买东西(钱钱, 待购商品清单[跳号])
	}

在 JavaScript 中，我们则会写成这样：

	if(itemList[num]>30){
		budget = budget - 30
	} else {
		budget = buyItem(budget, itemList[num])
	}

另外，值得注意的是，清单 (list) 在 JavaScript，以及其他神灯精灵方言中，叫作「阵列」(array)。在某些神灯精灵方言，例如 C# 中，阵列和清单有着细微的不同，不过在大多数的方言中，清单和阵列是类似的。

4. 回圈
   昨天我们还提到了回圈：

	重复做(有个变数 跳号 = 0; 跳号<清单.长度; 跳号 = 跳号 +1){
		钱钱 = 买东西(钱钱, 待购商品清单[跳号])
	}

使用 JavaScript 会这麽说：

	for(let num = 0; number<list.length; number = number +1){
		budget = buyAnItem(budget, itemList[num])
	}

那麽，就让我们来看看，该怎麽使用 JavaScript 叫神灯精灵帮阿嬷们做事吧！我们先来玩个游戏，看看我们是否能够顺利驱动神灯精灵吧！

写一个功能，让我们可以把任何文字串中所有字的顺序颠倒过来。例如 "Logos" 变成 "sogoL"。

既然是需要写一个功能，我们就会先写出这样的结构：

function reverseString(告诉神灯精灵的文字串){
	神灯精灵要执行的事情：把这文字串颠倒过来，然後存进结果的变数中
	return 结果
}

那麽，就让我们想想，神灯精灵要怎麽把文字串颠倒过来吧！让我们想想，什麽叫作「颠倒过来」呢？其实就是把最後 1 个文字放到第 1 个位置，然後把倒数第 2 个文字放到第二个位置，以此类推。

聪明的阿嬷应该会有感觉：这个「以此类推」，其实就是按照某个模式重复做某件事情的意思。既然是要重复做，我们第一个想到的指令，应该就会是回圈。说到回圈，我们就会思考回圈的起点、终点、以及跳号。既然我们是从最後 1 个文字开始处理，再处理倒数第 2 个文字，起点就是最後的文字，而跳号是每次减 1。那麽终点呢？我们会做到第 1 个文字为止，所以就是最开头的文字罗。

接着，让我们想想：我们要怎麽找到最後的文字呢？例如，"Logos" 这个文字串的最後一个字，是第几个字呢？其实就是第 5 个字。为什麽我们知道呢？因为这个文字串有 5 个字，或说它的长度是 5 。因此，我们是从位置为文字串长度的字开始，每次跳号减 1，然後到第 1 个字结束。不过，细心的阿嬷应该会记得，神灯精灵的文化中，会从位置 0 开始算。因此，我们会是从位置为文字串长度减 1 的字开始，每次跳号减 1 ，做到位置为 0 的字结束。写成神灯精灵语的结构会长这样：

	for(let num=文字串.length-1; num>0; num=num-1){
		神灯精灵在每次跳号要做的事情
	}

那麽，神灯精灵在每次跳号的时候，需要做些什麽呢？既然我们的结果，是要完全颠倒过来的文字串，我们就只要每次跳号都把那个文字记录下来，并且抄在前个文字後面就可以了。因为我们说过神灯精灵记性很差，所以它没办法直接纪录，我们必须给个变数来做这个纪录。这个变数最早会存放什麽东西呢？什麽都没有，不过因为之後需要储存的东西是文字串。所以我们会先给它一个空的文字串 ""。那麽，我们要怎麽把某个文字抄在另个文字之後，或说，怎麽把文字/ 文字串合并呢？在 JavaScript 当中非常简单，只需要使用加法符号 "+" 就可以了。因此，整个回圈我们会这样写：

	let result = ""
	for(let num=文字串.length-1; num>0; num=num-1){
		result = result + 文字串[num]
	}

因此，我们的整个函式会长这样：

function reverseString(str){
	let result = ""
	for(let num=str.length-1; num>0; num=num-1){
		result = result + str[num]
	}
	return result
}

这时候，我们输入

	reverseString("Logos")

就会得到 "sogoL" 这个结果罗。

等等，不对啊，我现在把上面这段程序码写在 CodePen 的 JavaScript 区，却什麽都没出现。是有什麽地方出问题吗？

其实原因很简单，我们只有告诉神灯精灵要做这个功能并且给出回覆，但是我们并没有告诉它，要把这个回覆的结果显示在萤幕上。因此，神灯精灵并没有把这个结果显示出来。想要神灯精灵在萤幕上显示些资讯，在 JavaScript 这个方言中，是使用

	console.log(资讯)

这个指令。

因此，既然我们需要的资讯是

	reverseString("Logos")

我们就需要告诉神灯精灵

	console.log(reverseString("Logos"))

那麽，这个资讯会显示在哪边呢？让我们点开发展者模式，就会在 Console 的标签下，看见讯息罗：

或者，在使用 CodePen 的时候，也可以点开左下方的 Console 标签，就会弹出 Console 面板罗～对於看 Console 讯息很方便喔！

这个颠倒文字串的程序码，我放在这边：
https://codepen.io/LogosChen/pen/RwZNyxL