[Day 10 - JS] 初探 Javascript 基本功能 — 函式、回圈 / 阵列、物件

在前一篇，我们提到了一些 Javascript 的语法和基本功能，包括宣告变数、资料型别、条件陈述式，接下来就继续来了解回圈、函式、物件、阵列的观念和用法。

流程控制 — 回圈

有时候希望可以自动重复执行某些动作，JavaScript 提供了各式各样的回圈机制，让我们能够用不同的方法来执行重复动作，比如 for、while、do...while ...等。

以 for 来说明，一个 for 陈述式通常会长成下面这个样子：

for (let i = 0; i < 10; i++){
//执行任务
}

分别讲解一下 for 的结构和作用流程，当回圈开始执行的时候：

• Step1：执行初始表达式 let i = 0，这个变数 i 通常会作为回圈计数器，用来控制回圈的重复执行。
• Step2：判断条件式 i < 10，如果结果为 true，则会继续第三步骤执行任务；如果结果为 false，回圈就会终止。
• Step3：执行区块内指定的重复动作
• Step4：更新回圈计数器 i++，让变数 i 加一以便执行下一次的动作，接下来回圈就会重复第二步骤~第四步骤，直到判断条件式的结果为 false 才终止回圈。

举例来说，要自动将数值 k 从零开始，每次加二重复十次：

let k = 0;
for (let i = 0; i < 10; i++){
    k = k + 2;
}

console.log(k)    //20

函式(Function)

函式(Function) 是用於执行某个任务的程序码区块，可以选择性的定义传入的参数（数据），让程序码模组化易於维护和修改。举例来说，一个基本的函式会长成这样：

function test(num) {
  let result = num * 20;
  return result;
}

• 函式名称 - test
• 参数 - num
• 函式执行的任务 - {...}：可用 return 在函式执行後回传数值

箭头函式(Arrow Function)

除了透过关键字 function 定义函式，还有另一种建立函式的方法 — 箭头函式(Arrow Function)：

let test = (num) => {
  let result = num * 20;
  return num * 20;
}

呼叫函式执行

定义出函式的参数和执行的任务後，就可以透过呼叫函式函式名称()来执行任务，如果有回传值会储存到所指定的变数中。

let answer = test(5);    //100

物件(Object)

在Javascript里，物件(Object) 拥有与自身相关的资料，包含属性(properties) 或函式(methods)，可以看做是资料模型，方便我们去建立、存取物件的数据。

宣告物件

物件的内容会由大括号 {} 包住；属性可以当作是用在物件内部的变数，只是在宣告物件时要用冒号 : 赋予其值。举例来说，一个物件可能会长成这样：

let obj = {
    name: "May",
    score: 80,
    introduction: function () {
        console.log("I'm a student")
    }
};

取得物件属性

取得物件属性的方法，可以在物件名称後使用点符号 . 或是 ['属性名称'] 来存取；函式的话记得要加上小括号 () 来呼叫；而要修改物件属性的值就会跟一般变数的用法一样，用等於 = 修改值：

obj.property_1 = "Bob";

obj.name                //'Bob'
obj['score']            //80
obj.introduction()      //"I'm a student"

阵列(Array)

阵列(Array)是一种似列表(list-like)的物件，可以将资料储存形成一连串的数组，没有固定的长度或是型别限制。

let fruits = ["apple", "banana", "orange"];

取得阵列元素

取得阵列中某个数值的方法，可以在阵列名称後使用 [索引值] 来存取，而所有阵列的元素索引值都是从 0 开始；若是要修改阵列元素的值也是用等於 = 来修改：

fruits[0] = 'watermelon'

fruits[0]    //"watermelon"
fruits[1]    //"banana"
fruits[2]    //"orange"

阵列方法

因为阵列是一种物件，本身原型(Prototype)拥有各种预设的方法(Methods)，可以用来针对阵列执行一些操作，比如新增删除元素的 push / pop、遍历阵列内每个元素的 forEach / map...等等。

• push：加入新的项目至阵列末端

  fruits.push('peach')
  // ["watermelon", "banana", "orange", "peach"]
  

• pop：移除阵列末端项目

  fruits.pop()
  // ["watermelon", "banana", "orange"]
  

• forEach：遍历阵阵列内的每个元素，传入指定的函式并执行。

  fruits.forEach(function(item, index) {
    console.log(item, index);
  });
  
  // "watermelon" 0
  // "banana" 1
  // "orange" 2
  

• map：遍历阵阵列内的每个元素，依据经由函式运算後所回传的结果，建立一个新的阵列。

  const newArray = fruits.map((item,index) => item + index );
  
  console.log(newArray);
  // ["watermelon0","banana1","orange2"]
  

小结

跟上一篇一样直接利用一个小范例来当作结尾，复习今天提到的一些观念。现在想要计算几个学生的平均成绩，我们将所有资料储存在一个物件中，分别有每个学生的姓名、三项成绩：

let data = [
  { name: "May", score: [90, 80, 40]},
  { name: "Bob", score: [77, 88, 66]},
];

接着定义函式，要根据传入的学生资料，将所有成绩加总，计算出平均成绩储存到物件当中：

function Average(student) {
  let total = 0;
  student.score.forEach((item) => {
    total += item;
  });

  return total / student.score.length;
}

最後使用 Array.forEach，呼叫函式计算每个学生的平均成绩，并且印出结果，这样就完成了今天的内容罗！

data.forEach((item) => {
  item.average = Average(item);
  console.log(`${item.name}的平均成绩是${item.average}`);
});

// "May的平均成绩是70"
// "Bob的平均成绩是77"

如果文章中有错误的地方，要麻烦各位大大不吝赐教；喜欢的话，也要记得帮我按赞订阅喔❤️

参考资料

• MDN - Javascript