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

柔光的暖阳◎ 2022-05-10 09:16 206阅读 0赞

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>