es6箭头函数以及模板字符串的拼接

60 阅读 0 评论 40 点赞

我是靠谱客的博主精明手机，最近开发中收集的这篇文章主要介绍es6箭头函数以及模板字符串的拼接，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

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>