React.js
是一套 JavaScript
函式库,而其写法也的确如同其字面上意思,写起来最有 JavaScript
味道。
因此在开始介绍 React.js
之前,就必须先来认识一下常用 JavaScript ES6
语法,如此一来开发才会更加顺利。
组字串重点在於起手式,两个反斜线。 变数必须使用${}
,将变数填入,如下范例:
<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原始码 如下范例
// 搭配阵列方法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 -- 搞了这麽多天,来试着做会员登入介面吧
0x1 API规格文件 是的,终於来到阅读文件的这一天了 忘记是什麽时候建立的习惯,拿到一个文件我都...
大多数应用程序都可以安装在非系统磁碟机上。但是,某些应用程序无法安装或移至系统磁碟机以外的磁碟机。因...
接下来将要来介绍如何运用APM(Application Performance Monitoring...
完善的资料库能够有效地存储数据,提供最新、最精确的资讯,满足使用者的应用需求,因此正确的资料库结构设...
老套说:「工欲善其事,必先利其器」— 要写网页,就不能没有好用的开发环境。在开始认识各种前端技能之前...