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


Posted by Christy on 2020-07-05

看影片:「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)









Related Posts

[筆記] 網路交換資料方式

[筆記] 網路交換資料方式

From Nand To Tetris:想理解電腦運作,就先做出一台吧!

From Nand To Tetris:想理解電腦運作,就先做出一台吧!

PHP 和 MySQL 的互動 1 : 連線

PHP 和 MySQL 的互動 1 : 連線


Comments