iT邦幫忙

2021 iThome 鐵人賽

DAY 2
0
Modern Web

30天學 React.js 系列 第 2

[Day2][筆記] React.js 常用 的 ES6 語法(1)

前言

React.js 是一套 JavaScript 函式庫,而其寫法也的確如同其字面上意思,寫起來最有 JavaScript 味道。
因此在開始介紹 React.js 之前,就必須先來認識一下常用 JavaScript ES6 語法,如此一來開發才會更加順利。

Template literal

組字串重點在於起手式,兩個反斜線。 變數必須使用${},將變數填入,如下範例:

<ul class="list"> </ul>
const list = document.querySelector('.list');
const picture = 'http://';
const title = "疫苗"
list.innerHTML = `<li>
    <p>${title}</p> <img src="${picture}">
</li>`

補充:${ } 不只可以填入變數也可以加入JS原始碼 如下範例

搭配JS函式寫法

// 搭配陣列方法map,會回傳一個新的陣列

let jsUrl = `<ul>  
   ${people.map( (person) => {
    `<li>我叫做${ person.name }</li>`
}).join('')}
</ul>`
console.log(jsUrl,teacher);

撰寫小技巧

1.建議一定要使用emmet功能,加速開發效率 若遇到在html檔案中,想要撰寫javascript時無法用emmet快速產出,則可以參考這篇文章教學。調整emmet.includeLanguages 文章連結

箭頭函式

箭頭函式就是把一般的函式寫法更精簡。只是箭頭函式在使用上有些特性,例如 this、沒有 arguments 等問題都是在撰寫箭頭函式需要注意的地方。但這不是今天討論重點,今天主要介紹箭頭函式如何撰寫而已。其餘注意事項可以再自行搜尋摟~

// #1 改寫傳統函式
var callSomeone = function(someone) {
  return someone + '吃飯了'
}
console.log(callSomeone('小明')) //小明吃飯了

// 將以下改寫成 Arrow Function,並嘗試縮寫形式
// 寫法1:目前最常使用的箭頭函式形式
var callSomeone = (someone) => {
  return someone + '吃飯了'
}
console.log(callSomeone('小明')) //小明吃飯了

// 寫法2:若程式碼為表達式則可以省略return和 {}
// 表達式簡單來說就會是回傳值
var callSomeone = someone => someone + '吃飯了';
console.log(callSomeone('小明')) //小明吃飯了

// 寫法3:單行情況會自動return,若沒有傳入參數則可以使用下面寫法
var callSomeone = () => '小明' + '吃飯了'
console.log(callSomeone()) //小明吃飯了

// 寫法4:若傳入參數數量為複數則不可以省略()
var callSomeone = (a,b) => a+b
console.log(callSomeone(1,2)) //3

物件縮寫

重點:如果物件屬性物件相同則可以簡寫如下

const Demo = 'Demo';

// 原本寫法
const data = {
  Demo: Demo
}

// 簡寫
const Temp = {
  Demo
}

物件函式縮寫

如果 function 詞彙是在物件內,則可以省略 :function

// 原本寫法
const object ={
  function: function(){
    console.log('方程式')
  }
}

// 簡寫
const object ={
  function(){
    console.log('方程式')
  }
}

小結

今天就簡單介紹幾種常用語法,我們明天再繼續吧!


上一篇
[Day1][筆記] 主題規劃
下一篇
[Day3][筆記] React.js 常用 的 ES6 語法(2)
系列文
30天學 React.js 14

尚未有邦友留言

立即登入留言