[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('方程序')
  }
}

小结

今天就简单介绍几种常用语法,我们明天再继续吧!


<<:  Day 17. Hashicorp Vault: Server configuration for production

>>:  铁人赛 Day17 -- 搞了这麽多天,来试着做会员登入介面吧

Day 0x3 - 阅读API文件

0x1 API规格文件 是的,终於来到阅读文件的这一天了 忘记是什麽时候建立的习惯,拿到一个文件我都...

在Windows 10中更改Windows应用商店下载的位置

大多数应用程序都可以安装在非系统磁碟机上。但是,某些应用程序无法安装或移至系统磁碟机以外的磁碟机。因...

Day17 Elastic APM (一)

接下来将要来介绍如何运用APM(Application Performance Monitoring...

Day 23 -资料库应用小程序 资料库设计(系统需求分析)

完善的资料库能够有效地存储数据,提供最新、最精确的资讯,满足使用者的应用需求,因此正确的资料库结构设...

[Day 02] 建立开发环境,做好行前准备

老套说:「工欲善其事,必先利其器」— 要写网页,就不能没有好用的开发环境。在开始认识各种前端技能之前...