---
tags: [javascript, JS30]
title: JS30
---
## JS30 Day 5 - Flex Panel Gallery
> 用CSS與JS來製作一個點擊後會動畫展開的圖片展示效果,
> 運用到了CSS的flex、transform、transition.. 這篇比較偏向css知識!
特別運動 `transitionend` event 來觸發 className ,讓動畫面更流暢
```javascript
// <div class="panels">
// <div class="panel panel1">
// ...
// </div>
// </div>
const panels = document.querySelectorAll('.panel');
panels.forEach((panel) => panel.addEventListener('click', toggleOpen));
panels.forEach((panel) =>
panel.addEventListener('transitionend', toggleActive)
);
```
[demo](https://stackblitz.com/edit/vitejs-vite-ggcehh?file=src%2FApp.vue)
## JS30 Day 6 - Type Ahead
> Request city 的資料後,實作前端搜尋結果
> input 所輸入的 keyword 還有在資料上 high-light 出來
step1: 拿回 ajax data,需要預備一個 render data 和 rawData (其實一個就可以了,應該要改用 complute 就可以)
```javascript
fetch(url).then(function (response) {
return response.json();
}).then(function (resData) {
list.value = resData;
rawList.value = resData;
});
```
step2: 判斷資料是否要顯示資料
```javascript
const regex = new RegExp(keyWord.value, 'gi');
const data = rawList.value
.filter((item) => {
return item.city.match(regex) || item.state.match(regex);
})
```
step3: 把資料作出 high-light 的效果,判斷找出來的值,直接用 html 來取代
```javascript
const cityValue = item.city.match(regex) && item.city.match(regex)[0];
const stateValue = item.state.match(regex) && item.state.match(regex)[0];
const cityHtml = item.city.replace(regex,`<span class='high-ligth'>${cityValue}</span>`);
const stateHtml = item.state.replace(regex,`<span class='high-ligth'>${stateValue}</span>`);
```
[demo](https://stackblitz.com/edit/vue-u1pqzt?file=src%2FApp.vue)
## JS30 Day 7 - Array Cardio Day 2
> 1. people是否有19歲以上的人
> 2. People是否每個人都19歲以上
> 3. 在comments中找到id是823423的資料
> 4. 在comments中找到id是823423的資料索引值, 並透過索引值刪除這筆資料
>
> 運用 `some` `every` `find` `findIndex` 的 function 完成此問題
```javascript
const people = [
{ name: 'Wes', year: 1988 },
{ name: 'Kait', year: 1986 },
{ name: 'Irv', year: 1970 },
{ name: 'Lux', year: 2015 },
];
const comments = [
{ text: 'Love this!', id: 523423 },
{ text: 'Super good', id: 823423 },
{ text: 'You are the best', id: 2039842 },
{ text: 'Ramen is my fav food ever', id: 123523 },
{ text: 'Nice Nice Nice!', id: 542328 },
];
```
有看網上此解,因為 slice 不會改變原本的 array 有淺拷貝的功能。
> **`slice()`** 方法會回傳一個新陣列物件,為原陣列選擇之 `begin` 至 `end`(不含 `end`)部分的淺拷貝(shallow copy)。而原本的陣列將不會被修改。
```javascript
const index = comments.findIndex(comment => comment.id === 823423);
const newComments = [
...comments.slice(0, index),
...comments.slice(index + 1)
];
```
不過可以用解構賦值的方式達到 copy 的功能,在直接用 splice() 的方式達到目地,這樣子更直覺一點
> **`splice()`** 方法可以藉由刪除既有元素並/或加入新元素來改變一個陣列的內容。
```javascript
const index = comments.findIndex(comment => comment.id === 823423);
const newArray = [...comments].splice(index, comments.length);
```
[demo](https://stackblitz.com/edit/js-wtrk2v?file=index.js)