es6箭頭函式以及模板字串的拼接
阿新 • • 發佈:2018-11-09
es6箭頭函式:
//1.具有一個簡單引數的函式 var single=a=>a console.log(single('hello word')); //2.沒有引數的需要在箭頭前加上小括號 var logs=()=>{ console.log('這個是沒有引數的函式'); } //3.多個引數需要用到小括號,引數間用逗號隔開 var add=(a,b)=>a+b console.log(add(2,5));//7 //4.函式體多條語句需要用到大括號 var adds=(a,b)=>{ if(typeof a=='number' && typeof b=='number'){ return a+b }else{ return 0 } } console.log(add(1,5));//6 //5.作為陣列排序回撥 var arr=[2,1,7,3,6,4].sort((a,b)=>{ if(a-b>0){ return 1 }else{ return -1 } }); console.log(arr);//1,2,3, 4,6 ,7 //注意點:1.tyoeof操作符和普通的function一樣 2.instanceof也返回true,表明也是function的例項 3. this固定,不再善變 var fun=a=>a console.log(typeof fun); console.log(fun instanceof Function); obj={ data:['mack','Tom'], init:function(){ document.onclick=ev=>{ console.log(this.data);//mack,Tom } } } obj.init();
箭頭函式: 總結
1.之前我們也可以使用JavaScript輸出模版字串,通常是下面這樣的:(使用$.each方法來迴圈商品列表)
//--------------普通字串拼接------------ var html=""; $.each(con, function(k,v) { html+='<li class="shopBox">'+ '<div class="shopImg"><img src='+con[k].image1+' /></div>'+ '<div class="shopListName">'+con[k].shopName+'</div>'+ '<div class="shopPrice">'+ '<span class="price">¥'+con[k].price+'</span>'+ '<span class="marketPrice">¥'+con[k].markPrice+'</span>'+ '</div>'+ '</li>' }); $(".shop_box").append(html);
但是我們可以看到:這樣的傳統做法需要使用大量的“”(雙引號)和 + 來拼接才能得到我們需要的模版。但是這樣是十分不方便的。
於是ES6中提供了模版字串,用`(反引號)標識,用${}將變數括起來。如下:(es6來迴圈一個商品列表)
//------------es6模板字串--------- var ht=""; con.forEach((intem,index)=>{ ht+=`<li class="shopBox"><div class="shopImg"><img src=${intem.image1} /></div><div class="shopListName">${intem.shopName}</div> <div class="shopPrice"><span class="price">¥${intem.price}</span><span class="marketPrice">¥${intem.markPrice}</span></div></li>` }); $(".shop_box").append(ht);
這樣的做法就簡潔了很多,我們不需要再使用大量的""和+來拼接字串和變數。
整體程式碼如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>商品列表</title>
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes"><meta name="format-detection" content="telephone=no" />
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" type="text/css" href="css/common.css"/>
<link rel="stylesheet" type="text/css" href="css/index.css"/>
</head>
<body>
<div id="active">
<ul class="shop_box"></ul>
</div>
</body>
</html>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
var con=[
{
"image1":"img/1524880084962.jpg",
"shopName":"黑花生(100g*15袋/盒)",
"price":190,
"markPrice":200
},
{
"image1":"img/1524879960117.jpg",
"shopName":"黑花生(100g*15袋/盒)",
"price":190,
"markPrice":200
}
];
//------------es6模板字串---------
var ht="";
con.forEach((intem,index)=>{
ht+=`<li class="shopBox"><div class="shopImg"><img src=${intem.image1} /></div><div class="shopListName">${intem.shopName}</div>
<div class="shopPrice"><span class="price">¥${intem.price}</span><span class="marketPrice">¥${intem.markPrice}</span></div></li>`
});
$(".shop_box").append(ht);
//--------------普通字串拼接------------
var html="";
$.each(con, function(k,v) {
html+='<li class="shopBox">'+
'<div class="shopImg"><img src='+con[k].image1+' /></div>'+
'<div class="shopListName">'+con[k].shopName+'</div>'+
'<div class="shopPrice">'+
'<span class="price">¥'+con[k].price+'</span>'+
'<span class="marketPrice">¥'+con[k].markPrice+'</span>'+
'</div>'+
'</li>'
});
$(".shop_box").append(html);
})
</script>