[鼠年全马铁人挑战] Week08 - JavaScript基础学习心得 part2

阵列与物件

上一次提到的都是单一值的变数, 也就是变数内只会放一个值
接着要来说明阵列(Array)及物件(Object)
很多时候会需要用到多个值, 就可以使用阵列或是物件来存放
换句话说, 阵列与物件可以理解为 「可一次存放多个资料的容器」

阵列

阵列是用中括号[]来包住内容的写法, 且内容不限定型别, 以逗号区隔, 例如:

var myArray = ['我是', '大', '帅哥', 1, '号', function(){ console.log('Hi~') }];

注: 虽然可以什么都塞进去, 但实务上几乎不会这么使用
阵列的索引是从0开始计算, 以myArray来说, "我是"就是第0个值, "大"就是第1个, "帅哥"就是第2个, 依此类推
假设如果要取出值并组合成"我是帅哥1号", 可以这样取:

var thisistrue = myArray[0] + myArray[2] + myArray[3] + myArray[4]console.log(thisistrue); // '我是帅哥1号'

必须再强调一次, 阵列比较适合存放相同型态的值, 且实务上并不会这么使用, 所以只能现在在这边愉悦自己一下

物件

物件是用大括号{}来包住内容, 内容写法是一个key对应一个value为一组, 以逗号区隔, 例如:

var myObject = {    myId: 'A123456789',    myName: '王小明',    myAge: 20,    getMyAge: function() {        console.log(this.myName + '今年' + this.myAge + '岁');    }};

物件写法非常直觉, 取出的方法也是, 只要抓到物件内的key就能对应到值:

console.log(myObject.myName); // '王小明'console.log(myObject.myId); // 'A123456789'console.log(myObject.myAge); // 20console.log(myObject.getMyAge()); // '王小明今年20岁'

相较阵列来说, 物件比较杂食性, 适合存放不同型态的内容

此时聪明如我马上就想到**「是不是可以将阵列与物件两者合併?」**
答案当然是可以的, 且实务上经常使用到

假设今天做一个游戏, 游戏中会出现许多道具, 每个道具有自己的详细资料, 在包包内的道具就可以这样写:

var myBag = [{    id: 'item001',    name: '暴风神弓',    rank: '稀有',    number: 1},{    id: 'item306',    name: '敏捷手套',    rank: '史诗',    number: 1},{    id: 'item078',    name: '精灵之木',    rank: '一般',    number: 76},...];

假设我想把物品篮第一格的暴风神弓拿去丢掉, 就这样写:

var myItem = myBag[0]; // 注意 第一格索引是0function goToTrashCan(item){    console.log('成功将 ' + item.rank + item.name + ' 丢到垃圾桶'); //}goToTrashCan(myItem); // '成功将 稀有暴风神弓 丢到垃圾桶'

---

控制判断

接着来纪录控制判断内容
很多时候甚至是日常生活中, 都会做到流程控制与判断, 例如今天我口渴了, 就会去喝水, 我饿了, 就去吃东西, 手痒了, 就来打程式(疯了?)
在javascript的世界, 上面的例子就可以转换成:

if(口渴) {    喝水} else if(饿了){    吃东西} else {    睡觉}

从上面的例子可以发现, 不是在吃就是在睡, 猪阿?
if ... else if ... else ...就是控制判断的其中一种方式
另外switch也是控制判断的一种方式, 不是Nintendo Switch喔, 不要偏心我也写一个switch的版本:

switch(大脑的想法){    case 口渴:        去喝水吧        break;    case 饿了:        去吃X吧        break;    default:        睡觉        break;}

---

if、else if、else

知道控制判断的概念之后, 来详细探讨它的内容吧
if顾名思义是指「如果达成条件，就做什么事」

if判断的写法为: if(条件){要做的内容}else if写法跟if一样: else if(条件){要做的内容}但else就不需要条件，且要放在最后，如果上面条件都没达成，就会跑else: else{要做的内容}
把他们合起来, 会长这样:

if(条件1) {    // 达成条件1之后要做的内容} else if(条件2) {    // 达成条件2之后要做的内容} else {    // 条件1和条件2都没达成就做这边的内容}

注: else if与else都是不一定需要的, 一个if判断式中可以只写if就好

比较运算子

前面说到条件, 到底条件长什么样子?
条件是以true或是false来判断是否达成
但是通常不会直接写 if(true) { //dosomething }, 这样写等于没写
这时候就会在条件内用到 比较运算子

比较运算子有以下几种:

等于: ==不等于: !=大于: >小于: <大于等于: >=小于等于: <=严格等于: ===严格不等于: !==

在符合条件时会返回true, 不符合条件时返回false
举几个简单的範例:

console.log('1<2 的结果为:' + (1<2)); // 1<2 的结果为:true// 1 确实小于 2console.log('1+1==2 的结果为:' + (1+1==2)); // 1+1==2 的结果为:true// 1+1 确实等于 2// 不过这边要注意不是用1个等于, 1个等于是变数赋予值的意思, 要用2个等于才是比较运算子console.log('"王小明"=="王小明" 的结果为:' + ("王小明"=="王小明")); // "王小明"=="王小明" 的结果为:true// 字串比较当然也是可以的console.log('"王小明"!="王小明" 的结果为:' + ("王小明"!="王小明")); // "王小明"!="王小明" 的结果为:false

再来, 前面有提到 严格等于 和 严格不等于 , 与 等于 和 不等于 有什么差异呢?
在正常使用下是没有差的, 例如:

console.log(1+1==2); // trueconsole.log(1+1===2); // trueconsole.log("王小明"=="王小明"); // trueconsole.log("王小明"==="王小明"); // true

那什么是不正常的使用呢? 像是这样:

console.log(1+1 == '2'); // trueconsole.log(false == 0); // trueconsole.log(true == 1); // true

1+1等于2没错, 但为什么也等于字串的'2'呢?
且为什么false等于数字0? true又等于数字1?
颠覆世界颠覆常理阿!

自动转型

之所以在刚才比较的结果会很奇怪的原因是因为「在一般的等于(==)比较下, 两侧型别不同时, 它会帮忙做「自动转型」的动作

如果是字串跟数字比较, 会先尝试把字串转为数字, 再去做比较如果其中一边为布林值, 则会将布林值转为数字0或1

所以在刚才的情况下, 字串与布林都被转型, 比较结果就会与一般所想的不太一样

那我们一般人在使用时, 逻辑没有那么强的情况下很容易就会出错
这时就可以用严格的写法来避免掉(JavaScript真是贴心), 例如:

console.log(1+1 === '2'); // false

---

逻辑运算子

逻辑运算子也是常用在判断式内的运算子, 但他不会单独出现在判断式条件内, 而是会跟条件搭配使用
逻辑运算子有以下3种:

AND(&&): 放于两个条件中间, 如果左右条件都为true则返回true, 但其中一个为false则返回false

console.log(1<2 && 5>3); // true// 左边条件: 1<2为true ,右边条件: 5>3为true, 结果为trueconsole.log(1>2 && 5>3); // false// 左边条件: 1<2为false ,右边条件: 5>3为true, 结果为false

OR(||): 放于两个条件中间, 只要左右条件其中一个为true则返回true, 都为false时才返回false

console.log(1>2 || 5>3); // true// 左边条件: 1>2为false ,右边条件: 5>3为true, 结果为trueconsole.log(1>2 || 5<3); // false// 左边条件: 1>2为false ,右边条件: 5<3为false, 结果为false

NOT(!): 放于条件左侧, 当条件为true时返回false, 为false时返回true

console.log(!(1>2)); // true

---

最后来写个饭粒, 假设我在游戏中的包包内的道具有这些:

var myBag = [{    id: 'item001',    name: '暴风神弓',    rank: '稀有',    number: 1},{    id: 'item306',    name: '敏捷手套',    rank: '史诗',    number: 1},{    id: 'item078',    name: '精灵之木',    rank: '一般',    number: 76}];

今天我想把稀有度为史诗以外的且数量为2个以上的道具丢掉(到底有多想丢东西), 就可以在goToTrashCan的function里面这样判断:

function goToTrashCan(item){    if(item.rank !== '史诗' && item.number >= 2) {            console.log('成功将 ' + item.rank + '-' + item.name + ' 丢到垃圾桶');    }else {        console.log(item.rank + '-' + item.name + ' 不符合条件');    }}

写好之后, 把每一个item都丢进去判断

goToTrashCan(myBag[0]); // '稀有-暴风神弓 不符合条件'goToTrashCan(myBag[1]); // '史诗-敏捷手套 不符合条件'goToTrashCan(myBag[2]); // '成功将 一般-精灵之木 丢到垃圾桶'

这样就完成了~

---

眼尖的朋友应该会有发现超没效率的写法吧?
连续写了三次几乎一样的程式码, 如果有100个道具要判断, 是否要写100行?
下週会来纪录可以用迴圈的方式来解决此问题~