`
项志鹏同學
  • 浏览: 12723 次
  • 性别: Icon_minigender_1
  • 来自: 合肥
社区版块
存档分类
最新评论

初步学习ecmaScript6

阅读更多
<!DOCTYPE HTML>
<html>
	<head>
		<title>测试es6</title>
	</head>
	<body>
		<h2>欢迎来到es6</h2>
	</body>
	<script type="text/javascript">
		//1.变量 let const
		var a = 1;
		{
			let a = 3;
			console.info('let a',a); //3
		}
		console.info('var a',a); //1

		let b = 3;
		//let b = 4; //Identifier 'b' has already been declared (在let定义的块级作用域内,不能对同一个变量名重复定义)

		const A = 3;//变量一般大写,表示常量
		//A = 4; //Assignment to constant variable.(const定义的常量不允许修改)
		//const A  = 4;//Identifier 'A' has already been declared (与let一样,作用域内是不允许重复定义的)

		//2.for of  forEach循环
		{
			let b = 'welcome use EcmaScript6';
			b = b.split(' ');
			for(var i of b){
				console.log(i);//welcome use EcmaScript6
			}

			b.forEach(function(r){
				console.log('forEach',r);
			});

			b.forEach(r => console.log('forEach => ',r));
		}
		
		//3.关于箭头函数
		//函数的简写形式  (参数)=>函数体
		var arrowFunction1 = function(){ //es5写法
			return 'I`m a arrow function';
		}

		var arrowFunction2 = () => 'I`m a arrow function';//es6写法

		console.info('arrowFunction:',arrowFunction1());
		console.info('arrowFunction:',arrowFunction2());

		let arr =  ['a','b','c'];
		arr.map((vari) => console.info('arrow return ',vari));

		let getFinalPrice = (price, tax=0.7) => console.info(price + price * tax);
		getFinalPrice(500); // 850

		//解构
		var [arrA,arrB,arrC] = arr; //按照顺序将数组的值赋给[]中的变量
		console.log(arrA,arrB,arrC); //a,b,c
		var [arrC,arrA] = arr;
		console.log(arrA,arrC); //b,a

		var a = 1,bb = 4;
		[a,bb] = [bb,a];
		console.log([a,bb])//4,1 可以用来交换数组,不用定义中间临时参数

		//...操作符
		//Spread操作 扩展
		console.info(...[1,2,3,4]) //1 2 3 4

		function foo(x,y,z){
			console.log(x,y,z);
		}
		foo(...[1,2,3,4]);// 1 2 3
		foo(...[{1:4},{2:3}]);//{1:4} {2:3}
		//Rest操作 剩余
		function boo(...args){
			console.info(args);
		}
		boo(1,2,3,4,5,6)//[1, 2, 3, 4, 5, 6]

		//`来组装一堆变量和字符串 ${}来替换变量
		var str1 = 'XiaoMing';
		console.info(`my name is ${str1}`);

		//类 构造函数 继承(基于原型链)
		class Car {
			constructor() {
				console.info('this is car');
			}
			move(){
				console.info('moving');
			}
		}
		var car1 = new Car();
		car1.move();
		class AutoCar extends Car{
			constructor() {
				super();
				console.info('this is auto Car');
			}
		}
		var autoCar = new AutoCar();
		autoCar.move();
	</script>
</html>
0
0
分享到:
评论

相关推荐

    ECMAScript-notes:ECMAScript中文笔记

    此笔记主要记录学习ECMAScript过程,所以章节次序和源文档基本一致 正值js红宝书第四版上市,出于兴趣我便从基础重新学习了这门语言,对于很多原理性的问题都不很了解,所以我觉得是有必要完整阅读一下ECMAScript...

    flex 初步认识 初学者的必读

    本篇文章将带你初步了解Flex,并为初学者提供一些必要的学习指南。 Flex的主要目标是简化用户界面的开发,使开发者能够创建具有丰富交互性和动态视觉效果的Web应用。它提供了强大的组件库,可以用来快速构建常见的...

    JavaScript学习(一)

    以上是JavaScript学习的初步内容,通过深入理解和实践这些知识点,开发者可以为后续进阶学习打下坚实基础。在学习过程中,结合实际项目练习,阅读文档和教程,参与社区讨论,将有助于快速提升JavaScript技能。

    提案:跟踪ECMAScript提案

    1. **Stage 0 - Strawman**: 这是提案的初步阶段,通常是个人或者小组提出一个想法,尚未正式进入委员会讨论。 2. **Stage 1 - Proposal**: 如果一个想法被认为有潜力,它会被转化为一个正式的提案,描述新特性的...

    Flex3学习指南-是初学者学习Flex必备资料,这是第一套

    总的来说,这份Flex3学习指南提供了全面的学习路径,无论是对Flex的初步探索还是深入实践,都能提供宝贵的指导。通过系统地学习和实践,初学者可以迅速成长为熟练的Flex开发者,创造出富有创新性和用户体验优秀的RIA...

    Flex学习第一章

    标题中的“Flex学习第一章”指的是Adobe Flex这一技术的入门学习内容。Flex是基于ActionScript和MXML的开源框架,主要用于构建富...通过这些内容的学习,初学者可以建立起对Flex开发的基本认识,并具备初步的开发能力。

    JavaScript\JavaScript初步(第2版)

    此外,ES6(ECMAScript 2015)的新特性,如箭头函数、模板字符串、解构赋值等,也会被详细介绍,这些新特性使得JavaScript的代码更加简洁和易读。 《JavaScript初步(第2版)》不仅涵盖理论知识,还包含大量的实例和...

    学习前端的第三天复习.rar

    在学习前端开发的过程中,第三天的复习至关重要,因为这标志着你已经初步接触并理解了一些基础概念。前端开发是构建互联网应用程序的重要部分,它涉及到用户在浏览器中直接可见和交互的所有内容。下面,我们将深入...

    ES6构建工具ES6gulpwebpackbabel学习笔记

    在现代JavaScript开发中,ES6(ECMAScript 2015)的引入带来了许多语法上的改进,使得代码更加简洁、易读。然而,浏览器对ES6的支持并不完全,因此在实际部署时需要将ES6代码转换为浏览器可理解的ES5或更低版本的...

    五日学会js教程(很不错)

    8. **ES6新特性**:了解ECMAScript 6引入的新语法,如箭头函数、解构赋值、模板字符串、类和模块系统。 9. **DOM遍历与选择器API**:掌握querySelector、querySelectorAll等DOM遍历和选择器方法,有效定位和操作DOM...

    vue基础学习代码342234

    在这个"vue基础学习代码342234"的压缩包中,我们可以预期找到一系列与Vue.js基础概念和实践相关的代码示例。 首先,Vue.js的核心概念之一是**虚拟DOM(Virtual DOM)**。它是一种优化机制,使得UI更新更加高效,...

    JavaScript 教程

    - **数据验证**:在数据被提交至服务器之前,可以通过 JavaScript 进行初步的数据验证,确保数据格式正确无误。这种方式可以有效减少服务器端的压力,并提高数据处理的效率。 - **浏览器检测**:JavaScript 还可...

    flash as 教程.rar

    Flash ActionScript(简称AS)是Adobe Flash开发中不可或缺的一部分,它是一种基于ECMAScript的脚本语言,用于控制Flash动画、交互性和多媒体元素。本教程集合了多个章节,旨在帮助学习者掌握Flash AS的基础与进阶...

    JavaScript入门实例源码案例

    JavaScript入门实例源码案例 本文主要围绕JavaScript的基本概念、语法、数据类型、...通过对JavaScript的基本概念、语法、数据类型、变量生命周期、运算符等方面的学习,可以初步了解JavaScript的基本原理和应用场景。

    《卡通语录》小学信息技术flash课件(附源码)

    6. **编程与脚本**:Flash课件通常使用ActionScript编写交互逻辑,这是一种基于ECMAScript的脚本语言。通过源码,教师可以了解到如何使用ActionScript控制动画流程、响应用户输入,甚至添加更复杂的逻辑。 7. **...

    学习ASP的理由 分析小结

    同时,ASP的简单性使得对于编程有初步了解的人快速入门,通过实际编程来巩固和加深理解。此外,ASP的源码和相关资源丰富,有利于开发者参考和学习。尽管ASP存在诸多不足,但只要结合合适的技术和规范,它仍然能发挥...

    html5+css2.0+css3.0+javascript手册

    随着ECMAScript 6(ES6)及后续版本的发布,JavaScript引入了类、模块、箭头函数、模板字符串等新特性,提高了代码的可读性和可维护性。 这些手册将详细讲解各个技术的语法、属性、方法和最佳实践。JavaScript参考...

    知乎网站的登录前端源码

    JavaScript ES6(ECMAScript 6)的更新,如let/const、箭头函数、模板字符串等,提高了代码的可读性和效率。 在实际开发过程中,前端开发者可能会使用框架或库来提高开发效率,例如React、Vue或Angular。虽然"zhihu...

    商务公司flash片头源码.rar

    这个源码很可能是由ActionScript编写,这是一种基于ECMAScript的编程语言,专门用于控制Adobe Flash Player或Adobe AIR中的交互性、动画和多媒体内容。 【描述】中提到,这个源码是一个Flash引导动画,这意味着它...

Global site tag (gtag.js) - Google Analytics