陣列相關方法2

Ref: JavaScript30

some()  確認有沒有人符合條件

給予條件→找出是否有一個人(或以上)符合條件。

//共用陣列資料
const people = [
 { name: 'Wes', year: 1988 },
 { name: 'Kait', year: 1986 },
 { name: 'Irv', year: 1970 },
 { name: 'Lux', year: 2015 }
];

確認是否有人已滿19歳

/*****【方法一】function*************/
const isAdult1=people.some(

function(person){
 //getFullYear?
 const currentYear=new Date().getFullYear();
 if(currentYear-person.year>=19){
 return true;
 }
}
 
);


/*****【方法二】arrow function*******/
const isAdult2=people.some(person => new Date().getFullYear()-person.year>=19);
console.log(isAdult2);//true

every()  確認是否全員符合條件

給予條件→找出是否所有人都符合條件。

確認是否全員都滿19歳

const everyAdult=people.every(person => new Date().getFullYear()-person.year>=19);

console.log(everyAdult);//false

find()  找出特定的項目

//共用陣列資料
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 }
];

找出id為【823423】的留言

const comment=comments.find(comment => comment.id===823423);

console.log(comment);
/**
Object {
  id: 823423,
  text: "Super good"
}
**/

findIndex 找出特定項目的陣列編號

【※注意】陣列編號由 0 開始算。編號 0 為第1項、編號 1 為第 2 項。

找出id為【823423】的陣列編號

const index=comments.findIndex(comment => comment.id===823423);

console.log(index);//1 ←comments[1];

splice 刪除特定編號的陣列

參考文章
【※注意】只能指定編號刪除。

comments.splice(1, 1);

//然後comments就會少一項了。但不保留沒刪除前的内容。

slice 摘取陣列

參考文章

也可以達到刪除特定項目陣列的效果。
但方法是擷取保留項目,像是指定列印頁數。

共5頁的資料→只列印【第1頁】、【第3-5頁】→最後印出來的資料就會少了第2頁

用slice可以同時保留刪除前的陣列與刪除後的陣列。

const newComments=[
 ...comments.slice(0, 1),//only return comments[0]
 ...comments.slice(2)//omit end value
 //保留slice[0], slice[2-4]→等於去掉slice[1]
]; 

console.log(newComments);
/**
const newC=[
 ...comments.slice(0, 1),//only return comments[0]
 ...comments.slice(2)//omit end value
];
**/

 

搜尋器

Reference: JavaScript 30

先備知識

範例

form.search-form
 input.search(type='text', placeholder='City or State')
 ul.suggestions
 li Filter for a city
 li or a state
html
 box-sizing: border-box
 background: #ffc600
 font-family: 'helvetica neue'
 font-size: 20px
 font-weight: 200

*
 box-sizing: inherit
 &:before, &:after
 box-sizing: inherit

input
 width: 100%
 padding: 20px

.search-form
 max-width: 400px
 margin: 50px auto

input.search
 margin: 0
 text-align: center
 outline: 0
 border: 10px solid #F7F7F7
 width: 120%
 left: -10%
 position: relative
 top: 10px
 z-index: 2
 border-radius: 5px
 font-size: 40px
 box-shadow: 0 0 5px rgba(0, 0, 0, 0.12), inset 0 0 2px rgba(0, 0, 0, 0.19)

.suggestions
 margin: 0
 padding: 0
 position: relative
 /*perspective:20px;
 li
 background: white
 list-style: none
 border-bottom: 1px solid #D8D8D8
 box-shadow: 0 0 10px rgba(0, 0, 0, 0.14)
 margin: 0
 padding: 20px
 transition: background 0.2s
 display: flex
 justify-content: space-between
 text-transform: capitalize
 &:nth-child(even)
 transform: perspective(100px) rotateX(3deg) translateY(2px) scale(1.001)
 background: linear-gradient(to bottom, #ffffff 0%, #EFEFEF 100%)
 &:nth-child(odd)
 transform: perspective(100px) rotateX(-3deg) translateY(3px)
 background: linear-gradient(to top, #ffffff 0%, #EFEFEF 100%)

span.population
 font-size: 15px

.details
 text-align: center
 font-size: 15px

.hl
 background: #ffc600

.love
 text-align: center

a
 color: black
 background: rgba(0, 0, 0, 0.1)
 text-decoration: none
const endpoint = 'https://gist.githubusercontent.com/Miserlou/c5cd8364bf9b2420bb29/raw/2bf258763cdddd704f8ffd3ea9a3e81d25e2c6f6/cities.json';

const cities=[];

//blob用來指稱原始資料
//轉換成JSON資料
fetch(endpoint)
 .then(blob => blob.json())
 .then(data => cities.push(...data))

function find(word, cities){
 
 return cities.filter(place => {
 const regex=new RegExp(word, "gi");
 return place.city.match(regex) || place.state.match(regex)
 })

}

function commas(x){
 return x.toString().replace(/B(?=(d{3})+(?!d))/g, ",");
}


function display(){
 const match=find(this.value, cities);
 const html=match.map(place => {
 const regex=new RegExp(this.value, "gi");
 const cityName=place.city.replace(regex, `<span class="hl">${this.value}</span>`);
 const stateName=place.state.replace(regex, `<span class="hl">${this.value}</span>`);
 
 return `
 <li>
 <span class="name">${cityName}, ${stateName}</span>
 <span class="population">${commas(place.population)}</span>
 </li>
 `
 }).join("");
 
 
 suggestions.innerHTML=html;
}

const search=document.querySelector(".search");
const suggestions=document.querySelector(".suggestions");


search.addEventListener("change", display);
search.addEventListener("keyup", display);

Display

CODEPEN

regex【i】不區別大小寫

功能

讓字串不區分大小寫,也能通過正規表達式檢査。
應用實例:搜尋不用區分大小寫,也能找到同樣的内容。

類似的東西:regex【g】找出所有

範例

方法一【/i】

i代表 insensitive ,對大小寫不敏感。

const regex=/apple/i;

const str1="APPLE";
const str2="Apple";
const str3="apple";

str1.match(regex);//["APPLE"]
str2.match(regex);//["Apple"]
str3.match(regex);//["apple"]
//不論大小寫(或混用)都能通過驗證

方法二【new RegExp】

使用時機:需要檢査的字串不是固定値,而是變數時(像是使用者鍵入的搜尋字詞)

寫法跟【/i】不同,但是效果相同。

const regex=new RegExp("apple", "i");

const str1="APPLE";
const str2="Apple";
const str3="apple";

str1.match(regex);//["APPLE"]
str2.match(regex);//["Apple"]
str3.match(regex);//["apple"]

fetch

介紹

fetch,是ajax之外取得外部資料的一種方式
使用promise物件架構

補充:ajax

範例

取得圖片

img#img
const moko="https://scontent-tpe1-1.xx.fbcdn.net/v/t1.0-9/15355572_1410266889006372_4764767806658769471_n.jpg?oh=39e4da3e9a9956f349b6c701556544ff&oe=593B04D9"


fetch(moko)
 .then(blob => blob.blob())
 .then(myb => img.src=URL.createObjectURL(myb))

//fetch發送請求
//使用blob獲得圖片的內容
//再從blob獲得URL,放到img的src之中

Display

取得JSON資料(有function的情況下)

button#btn click me
ul#ul
const endpoints="https://awiclass.monoame.com/api/command.php?type=get&name=tododata";

const tododata=[];

fetch(endpoints)
 .then(blob => blob.json())
 .then(data => tododata.push(...data))//要用spread把nodeList轉成array

function show (){
 ul.innerHTML=tododata.map(place => `<li>${place.name}</li>`).join("");//join("")把陣列轉換成字串,並且將分隔取代為無
}

btn.addEventListener("click", show)

Display

CODEPEN

取得JSON資料(無function的情況下)

沒有function的情況下,JS無法用內接陣列的方式,讀取外部URL的JSON。
因此,方法改寫如下,

ul#ul
const endpoints="https://awiclass.monoame.com/api/command.php?type=get&name=tododata";

// const tododata=[];

fetch(endpoints)
 .then(blob => blob.json())
 .then(data => {
 ul.innerHTML=data.map(place => `<li>${place.name}</li>`).join("");
})

Display

CODPEN

onclick

功能

onclick 是 HTML 的屬性,等於 JavaScript 的 click 事件

範例

button#btn(onclick="scale()") click me
/******
onclick="scale()"等於這個
btn.addEventListener("click", scale);
******/

function scale(){
 btn.style.transform="scale(2)";
 btn.style.transformOrigin="left top";
}

Display

jQuery AJAX

功能

不刷新頁面也能完成前後端的溝通。

  • HTML + PHP + MySQL :必須刷新頁面
  • HTMP + Ajax + PHP + MySQL:不必刷新頁面

以 Facebook 的按讚功能為例
使用者按讚→資料庫更新讚數→網頁顯示讚數+1

透過 Ajax 的輔助,這一連串的動作都可以不刷新網頁而達成。
使用者不必中斷滑到一半的閱讀體驗。

結構

  • form tag,使用 HTTP Method
  • 引入 jQuery
  • 準備處理資料庫溝通的 php 檔案,跟 HTML 放在同一個資料夾底下
  • 準備好 MySQL 資料表

範例

前端

//HTTP Method
form(method="POST")
 input(type="text" placeholder="email")
 input(type="password" placeholder="password")
 input(type="submit")
 p
const email=document.querySelectorAll("input")[0];
const password=document.querySelectorAll("input")[1];
const submit=document.querySelectorAll("input")[2];
const alert=document.querySelector("p");


submit.addEventListener("click", function(e){
 //clear submit default
 e.preventDefault();
 $.ajax({
 type: "POST",//對應 form 的 method
 url: "insert.php",//指定 php 檔案
 data: {
 //要傳送的值。php超全域變數: js變數
 email: email.value, 
 password: password.value
 },
 //若傳送成功
 success: function(re){
 //若php回應值=="success"
 if(re=="success"){
 alert.textContent="register successful"
 }else{
 alert.textContent="register fail"
 }
 }
 });
})

後端

+----------+------+-----+---------------+
| Field    | Type | Key | Extra         |
+----------+------+-----+---------------+
| ID       | int  | PRI | auto_increment|
| email    | text |     |               |
| password | text |     |               |
+----------+------+-----+---------------+
<?php

mysql_connect("localhost", "root", "");//MySQL連線
mysql_select_db("register");//選擇資料庫

//$_POST['email']與$_POST['password']是ajax定義好的超全域變數
//防止隱碼注入攻擊
$_POST['email']=mysql_escape_string($_POST['email']);
$_POST['password']=mysql_escape_string($_POST['password']);

//帳號與密碼寫入資料庫
$save=mysql_query("INSERT INTO member (email, password) VALUES('$_POST[email]','$_POST[password]')");


if(!$save){
 
 echo "fail";//若寫入失敗回傳fail

}else{
 
 echo "success";//成功則回傳success
}


?>