[MTR04] W2 D10 Array 內建函式及 console.log / return 的差異

看影片：「Array 類型的內建函式」到「綜合題目練習 Lv1」

常用的內建函式

Array 類型的內建函式開始

重點是要理解 ‘map’ 跟 ‘filter’，這兩個最常用到

• join: 把陣列裡面的字串用符號連在一起

var arr = [1, 2, 3]
console.log(arr.join('!')) //把每個陣列元素都用驚嘆號接在一起
//印出來會是 1!2!3，是在陣列空隙放入符號，頭尾不會有

• map: 後面可以接一個函式，把每個元素都帶到那個 function 去

var arr = [1, 2, 3]

function double(x){
 return x*2
}
console.log(arr.map(double))
// 印出來就會是[2, 4, 6]

• map 可以寫很多個

var arr = [1, 2, 3]

console.log(
 arr
 .map(function (x) {
  return x* -1
 })
  .map(function (x) {
  return x* 2
 })
)

• filter 篩選想要的結果

var arr = [1, 2, 3, -2, 3, -5]

console.log(
 arr
 .map(function (x) {
  return x* 2
 })
 .filter(fucntion (x) {
  return x>0
 })
)

• slice 只留下陣列的某個部份

var arr = [0, 1, 2, 3, 4, 5, 6]

console.log(arr.slice(3)) // 從 3 開始
//就會印出 [3, 4, 5, 6]

var arr = [0, 1, 2, 3, 4, 5, 6]

console.log(arr.slice(3, 5)) // 從第三位開始，切到第四位，第五位不要
//就會印出 [3, 4]

• splice 插入或者刪除元素，並且會改變原本的陣列

下面是參考資料的範例

const months = ['Jan', 'March', 'April', 'June'];
months.splice(1, 0, 'Feb');第一個數字是要插入的位置；第二個是取代零個元素
// inserts at index 1
console.log(months);
// expected output: Array ["Jan", "Feb", "March", "April", "June"]

months.splice(4, 1, 'May');第一個數字是要插入的位置；第二個是取代一個元素
// replaces 1 element at index 4
console.log(months);
// expected output: Array ["Jan", "Feb", "March", "April", "May"]

參考資料：Array.prototype.splice()

• sort: 排序，並且會改變原本的陣列

const months = ['March', 'Jan', 'Feb', 'Dec'];
months.sort();
console.log(months);
// expected output: Array ["Dec", "Feb", "Jan", "March"]
// 按照英文字母順序排列

const array1 = [1, 30, 4, 21, 100000];
array1.sort();
console.log(array1);
// expected output: Array [1, 100000, 21, 30, 4]
// 這個是按照字串的方式排的，看數字的左邊第一位，排序是 1, 2, 3, 4...

• 如果要按照數字大小來排（由小到大），範例如下：

var arr = [1, 30, 4, 213]
// a=1, b=4
arr.sort(function(a, b){ //用 fucntion 告訴 sort 想要怎麼排順序
  if a  === b return 0
  if (b > a) return -1  //不想要換順序的意思；負數就是不要的意思
  return 1              //正數就表示換順序的意思
})

console.log(arr)

• 可以排字串，也可以排物件，什麼都排，什麼都不奇怪

參考資料：Array.prototype.sort()

新手最會出錯的地方

「回傳」與「印出」的差異

• 最好的寫法是這樣

function add (a, b)  {  //寫這個函式是為了回傳值
 return a + b
}

console.log(add(1, 2)) //這裡是為了要看結果

超級無敵重要的 Immutable 觀念

Immutable: 不可變
要注意哪些是會改變，哪些是不會改變的
比如說，指定變數 a = 'hello'；再指定 a = 'yo'，a 是可以被改變的，但是 yo 跟 hello 則是存在記憶體位置裡面不變的東西

var a = 'hello'
a = a.toUpperCase() //要記得不要寫成 a.toUpperCase()
console.log(a)

因為字串 hello 是不可變的，所以回傳一個新的值，然後需要用 a= 來接收新的值

• 字串、數字都是不可變的，但陣列、物件是可變

拜託，請你愛用 console.log

• console.log 要加在 return 前面，不然沒有作用
• 用這個方式把所有的數值都印出來，看看到底錯在哪裡

綜合題目練習 Lv1

• 請你分別用 for loop 以及 while 迴圈，印出 1~9。

for loop

for (i = 1; i<=9; i++) {
 console.log(i)
}

while

var i = 1
while (i<=8) {
 console.log(i)
 i++ 
} 
console.log(i)