邊撸鐵健身邊學Code的Dhal

動呲動呲

0%

Posted on In ,

廢話前言

想要架設部落格作為記錄自己生活或相關筆記嗎?

會想架設部落格的主要原因是自己正在上Javascript課程，課程有提到要開個部落格來作為自己的技術筆記、心得、或一些自己想記錄的東西作為備忘，畢竟學海無涯，有很多東西學會後久久不使用真的會忘記。

後來使用了一些大眾市面上的blog，但終究覺得不合用，一方面更想要有自己的風格，一方面對於自己來說希望更加方便撰寫紀錄及發布。而我這個初心者才知道，原來可以在Github撰寫靜態網頁(蠢)，所以就開始研究到底該如何在Github上架設一個簡易的靜態blog之旅。

Read more »

Posted on In ,

練習完成檔案連結

　　之前一直沒有寫相關的作業心得筆記，一方面是覺得難度不高，一方面覺得操作幾次就很熟練了，所以就很懶惰…但進入到學期2-2後，光是S2的製作電影清單，突然感覺難度一下提升超級多，很多內容不是一次兩次就能夠記起來且熟悉，而且函式的拆解跟邏輯複雜度上也提升相當多，演算法也來到了百行之多，這時才發現真的很難一下吸收，所以決定開始來寫學習、作業、技術相關筆記來加深自己的記憶及熟練度。

Read more »

Posted on In ,

陣列操作方式

.map

.map 會把原本的物件，會依造函式內容將每一個物件做操作後重新創造出一個新物件

1
2
3
4
5
6
7
8
const array1 = [1, 4, 9, 16];

// pass a function to map
const map1 = array1.map(x => x * 2);

console.log(map1);
// expected output: Array [2, 8, 18, 32]

.filter

.filter(設定條件函示) 是把一個陣列物件裡面符合條件的選出來，不符合的剃除，然後產生一個新的陣列物件，不影響原本陣列物件

.find

.find(設定條件函示) 是把一個陣列物件裡面，第一個符合條件的物件選出來，就停止了

.some

.some(設定條件函示) 是把一個陣列物件裡面，查找是否有相符的，並不回傳整筆符合資料，只回傳true或false，布林值

.findIndex

.findIndex(設定條件函示) 回傳項目Index，找不到則回傳-1)

.every

.every(設定條件含是) 是對所有的物件做條件比對，最後統一回傳一個true or false，簡而言之不是零分，就是一百分。

Array.prototype.push()

當用常數宣告了一個陣列容器的時候，若要加入物件或其他東西要使用Array.prototype.push()

1
2
3
4
5
6
7
8
9
const movies = []

axios
  .get(INDEX_URL)
  .then((response) => {
    movies.push(...response.data.results)
    renderMovieList(movies)
  })
  .catch((err) => console.log(err))

Array.prototype.join()

join() 方法會將陣列（或一個類陣列（array-like）物件）中所有的元素連接、合併成一個字串，並回傳此字串。

1
2
3
4
5
6
7
8
9
10
11
const elements = ['Fire', 'Air', 'Water'];

console.log(elements.join());
// expected output: "Fire,Air,Water"

console.log(elements.join(''));
// expected output: "FireAirWater"

console.log(elements.join('-'));
// expected output: "Fire-Air-Water"

…展開運算子

…response.data.results 前面的… 是展開運算子，會將陣列內容展開

1
2
3
4
5
6
7
8
9
10
11
12
13
const movies = []; //空陣列，空容器

//目標：用 push 方法把 movies 從空陣列變成 [1,2,3]

//方法一
movies.push(1, 2, 3); //傳入 3 個參數：1,2,3

//方法二
movies.push(...[1, 2, 3]); //把陣列用展開運算子打開，打開後就和方法一一模一樣

//方法三
const numbers = [1, 2, 3]; //做一個陣列
movies.push(...numbers); //和方法二同樣意思

Posted on In ,

利用toggle來新增或移除元素標籤的class名稱

toggle

範例

1
element.classList.toggle('sample')

element ：某元素，使用document.querySelecrot選出
.classList ：某元素的class屬性
.toggle(‘.sample’) ：

如果class屬性裡面沒有sample則加上sample，
如果class屬性裡面有sample則刪除sample，