標籤彙整:arrow function

搜尋器

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

箭頭函數

目的

簡化function的形式,只保留參數與函式

//ES5
function(參數){
  函式
}

//ES6
(參數) => {函式}

範例

var names=["Ian", "Moko", "Afro"];

//ES5
//names的毎筆資料會丟進function的參數
//變成全名
//陣列.map(),修改原陣列,變成新的陣列
var fullNames=names.map(
 function(name){
 return `${name} CHEN`;
 }
);
console.log(fullNames);//["Ian CHEN", "Moko CHEN", "Afro CHEN"]

//ES6
//(參數) => {函式}
var fullNames2=names.map(
 (name) => 
 {return `${name} CHEN`;});
console.log(fullNames2);//["Ian CHEN", "Moko CHEN", "Afro CHEN"]


//只有一個參數的話可以不用()
//也可以省略return,順便拿掉{}
var fullNames3=names.map(name => `${name} CHEN`);
console.log(fullNames3);//["Ian CHEN", "Moko CHEN", "Afro CHEN"]

進階:指定參數初始値

const numbers=[5,2,7,10,50];

//ES5
var total=0;
for(i=0;i<numbers.length;i++){
 total += numbers[i];
}

console.log(total) //74

//ES6
//reduce,陣列累加用法
const total2=numbers.reduce((total, number) => {
 return total += number;
},0)//←這邊的0等同於宣告total初始値=0,total從0開始累加

console.log(total2) //74

進階:多個述句(statement)

加分號結束後直接寫

button.btns click
button.btns click
button.btns click
#btnstatus
const btns=document.querySelectorAll(".btns");
btns.forEach((btn, n) => {
  btn.addEventListener("click", function(){
  btnstatus.textContent=`you clicked btn ${n+1}`;
 });
  btn.addEventListener("mousemove", function(){
  btnstatus.textContent=`you touched btn ${n+1}`;
 })
})

Display