ECMAScript 6 - syntax

最新推荐文章于 2023-07-19 12:26:33 发布

howlowl

最新推荐文章于 2023-07-19 12:26:33 发布

阅读量191

点赞数

分类专栏： WebDev

WebDev 专栏收录该内容

71 篇文章 0 订阅

订阅专栏

Let and alternative solution (nice example)

<!DOCTYPE html>
<html>
<head>
	<style>
		section > div {
			height: 100px;
			width: 100px;
			background-color: red;
			float: left;
			margin: 3px;
			cursor: pointer;
		}
	</style>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.29/browser.js"></script>
	<script type="text/babel">
	// for(let i=0; i<50; ++i) {
	// 	let div = document.createElement('div');
	// 	div.addEventListener('click', () => {
	// 		alert(`You click on NO.${i+1} div`);
	// 	})
	// 	document.querySelector('section').appendChild(div);
	// }
	for(var i=0; i<50; ++i) {
		var div = document.createElement('div');
		((number) => {
			div.addEventListener('click', () => {
				alert(`You clicked on ${number+1} div`);
			})
		})(i);
		document.querySelector('section').appendChild(div);
	}
	</script>
	<title>Let Keyword</title>
</head>
<body>
<header>
	<h1>Click on a box</h1>
</header>
<section>

</section>
</body>	
</html>

spread operator

<!DOCTYPE html>
<html>
<head>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.29/browser.js"></script>
	<script type="text/babel">
	var cats = ["Tabby", "Siamese", "Persian"];
	var dogs = ["Golden Retriever", "Pug", "Schnauzer"];
	var animals = ["Whale", "Giraffe", ...cats, "Snake", ...dogs, "Coyote"];
	console.log(animals);
	</script>
	<title>Spread Operators</title>
</head>
<body>
</body>	
</html>

Map

<!DOCTYPE html>
<html>
<head>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.29/browser.js"></script>
	<script type="text/babel">
		let course = new Map();
		course.set('react', {description: 'ui'});
		course.set('jest', {description: 'testing'});
		console.log(course);
		// console.log(course.react);
		console.log(course.get('react'));

		var details = new Map([
			[new Date(), 'today'],
			['items', [1, 2]]
		]);
		console.log(details.size);
		details.forEach(function(item) {
			console.log(item);
		})
	</script>
	<title>Maps</title>
</head>
<body>
</body>	
</html>

Set

<!DOCTYPE html>
<html>
<head>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.29/browser.js"></script>
	<script type="text/babel">
		var books = new Set();
		books.add('Pride and Prejudice');
		books.add('War and Peace')
			 .add('Oliver Twist');

		console.log(books);
		console.log('how many books?', books.size);
		console.log('has Oliver Twist?', books.has('Oliver Twist'));
		books.delete('Oliver Twist');
		console.log('has Oliver Twist still?', books.has('Oliver Twist'));

		var number = [4, 7, 7, 7, 8, 4];
		var numberSet = new Set(number);
		console.log(number.length);
		console.log(numberSet.size);
	</script>
	<title>Sets</title>
</head>
<body>
</body>	
</html>

for... of loop

<!DOCTYPE html>
<html>
<head>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.29/browser.js"></script>
	<script type="text/babel">
		// for(let letter of 'Javascript') {
		// 	console.log(letter);
		// }
		// let topics = ['Javascript', 'Node', 'React'];
		// for(let topic of topics) {
		// 	console.log(topic);
		// }
		var coursePath = new Map([
			['HTML', 'class/html'],
			['CSS', 'class/css'],
			['Javascript', 'class/js'],
			['Node', 'class/node']
		])
		for(let course of coursePath) {
			console.log(course);
		}
		console.log('\n');
		for(let course of coursePath.entries()) {
			console.log(course);
		}
		console.log('\n');
		for(let name of coursePath.keys()) {
			console.log(name);
		}
		console.log('\n');
		for(let path of coursePath.values()) {
			console.log(path);
		}
		console.log('\n');
	</script>
	<title>For / Of</title>
</head>
<body>	
</body>	
</html>

arrow func and this

Generator

howlowl

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ECMAScript 6 - syntax

Let and alternative solution (nice example)<!DOCTYPE html><html><head> <style> section > div { height: 100px; width: 100px; background-color: red; float:...
复制链接

扫一扫