ES6解构赋值和模板字符串

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<script type="text/javascript">
	/*let
	 申明变量
	不能重复申明
	常量(const):声明一个只读的常量。一旦声明，常量的值就不能改变
	*/
	let arr = [1,2,3,4]
	//数组赋值原始写法
	//let a = arr[0]
	//let b = arr[1]
	//let c = arr[2]
	//let d = arr[3]
	
	//数组解构赋值
	var  [a,b,c,d,e='默认值',f] = [1,2,3,4];
	console.log(a)//1
	console.log(e)//默认值
	console.log(f)//undefine

	//对象原始写法赋值
	var mv = {
		fn:function(){},
		add:function(){},
		isFunction:function(){}
	}
	// mv.add();

	//对象解构赋值写法
	let {add,fn,isArray=function(){}} = mv;
	console.log(add)
	console.log(fn)//function(){}
	console.log(isArray)

	//函数原始写法赋值
	function fn2(opt){
		console.log(opt.a)
		console.log(opt.b)
		console.log(opt.c)
	}
	//函数解构赋值写法
	function fn2({a,b,c,d='get'}){//默认，可选参数
		console.log(a)
		console.log(b)
		console.log(c)
		console.log(d)
	}
	fn2({
		a:1,
		b:2,
		c:3,
		d:'post'
	})
	//1,2,3
	
	//模板(template string)是增强版字符串(拼接),用反引号(`)标识
	//在占位符${}中写入表达式 (变量)

	</script>
	<ul>
		<li>1</li>
		<li>1</li>
		<li>1</li>
		<li>1</li>
	</ul>
	<script type="text/javascript">
	let name = 'name';
	//js版拼接
	let str = '<ul>\
		<li>'+name+'</li>\
		<li>1</li>\
		<li>1</li>\
		<li>1</li>\
	</ul>'
	//模板字符串拼接(采用反引号)
	let str2 = `<ul>
		<li>${name}</li>
		<li>${1+1}</li>
		<li>${true? 1:2}</li>
		<li>${[1,2,3].push(10)}</li>
	</ul>`
	console.log(str)
	console.log(str2)
	</script>
</body>
</html>
ES6解构赋值和模板字符串

相关推荐
