【ES6】ES6的新特性[课堂笔记-一]

课堂笔记 胡成
文章标签: ES6 新特性

前言:

今天开始学习关于ES6的一些新特性我会以课堂笔记的记录方式分享出来给同学们,有兴趣的同学可以看看,喜欢的话顺便点个赞呗。


ECMAScript 6 简介

ECMAScript 6.0(以下简称 ES6)是 JavaScript 语言的下一代标准,已经在 2015 年 6 月正式发布了。它的目标,是使得 JavaScript 语言可以用来编写复杂的大型应用程序,成为企业级开发语言。

笔记如下:

<script type="text/javascript">
			//			var array = ['a','b']
			//			['a','b']=[3,2]
			//			console.log(array);//3,2

			//			var array = ['a','b','c']
			//			array = [1,,3]
			//			console.log(array[2])//3
			//变量声明并赋值时的解构
			//			var array = [1,2,3];
			//			var [a,b,c] = array;
			//			console.log(a,b,c);//1,2,3

			//变量先声明后赋值时的解构			
			//			var a,b;
			//			[a,b] = [3,1]
			//			console.log(b,a);//1,3
			//默认值
			//			var a,b;
			//			[a=1,b=3] = [10];
			//			console.log(a,b);//10,3
			//交换变量		
			//			var a = 10;
			//			var b = 1;
			//			[a,b] = [b,a];
			//			console.log(a);//1
			//			console.log(b);//10

			//解析一个从函数返回的数组
			//			function f() {
			//				return [1,3];
			//			}
			//			var a,b;
			//			[a,b]= f();
			//			console.log(a,b);//1,3
			//忽略某些返回值
			//			function f(){
			//				return [3,2,1]
			//			};
			//			var [a,,c] = f();
			//			console.log(a,c);//3,1
			//将剩余数组赋值给一个变量
			//			var [a,...c] =[5,2,3,6,7]
			//			console.log(a,c);//5,[2,3,6,7]

			//解构对象
			//基本赋值
			//			var o ={a:1,b:10};
			//			var {a,b}= o;
			//			console.log(a,b);//1,10
			//无声明赋值
			//			var a,b;
			//			({a,b} = {a:10,b:20});
			//			console.log(a,b);//10,20
			//给新的变量名赋值
			//			var x = {a:11,b:222};
			//			var {a:q,b:w}=x;
			//			console.log(q,w);//11,222
			//默认值
			//			var {a=10,b=5}={a:1};
			//			console.log(a,b);//1,5
			//For of 迭代和解构
			//			var x = [{
			//				name:"老李",
			//				family:{
			//					 mother: "老一",
			//				      father: "老二",
			//				      sister: "老三"
			//				},
			//				age:35
			//			},
			//			{
			//				name:"铁头",
			//				family: {
			//			      mother: "老四",
			//			      father: "老五",
			//			      brother: "老六"
			//			    },
			//			    age:25
			//			}];
			//			for(var{name:n,family:{father:f}} of x){
			//				console.log("姓名:"+n+",排名:"+f);
			//			}//老李,老二;铁头,老五;
			//从作为函数实参的对象中提取数据
			//			function x({id}){
			//				return id;
			//			}
			//			function w({myname,fullName:{firstName:name}}){
			//				console.log(myname+":"+name);
			//			}
			//			var a = {
			//				id:20,
			//				myname: "老李",
			//				fullName: { 
			//					      firstName: "铁头",
			//					      lastName: "阿刘"
			//					  }
			//			}
			//			console.log("id:"+x(a));
			//			w(a);			

			//			function userId({id}) {
			//				  return id;
			//				}
			//				function whois({displayName: displayName, fullName: {firstName: name}}){
			//				  console.log(displayName + " is " + name);
			//				} 
			//				var user = { 
			//				  id: 42, 
			//				  displayName: "jdoe",
			//				  fullName: { 
			//				      firstName: "John",
			//				      lastName: "Doe"
			//				  }
			//				}; 
			//				console.log("userId: " + userId(user)); // "userId: 42"
			//				whois(user); // "jdoe is John"

			//Symbol()函数
			//返回唯一的symbol类型的值,目的是作为对象属性的唯一标识符
			//			var sym1 = Symbol();
			//			var sym2 = Symbol('foo');
			//			var sym3 = Symbol('foo');
			//			 
			//			sym2 ===sym3 ;//false
			//			//描述相同,但对象不同

			//作为属性名的 Symbol 
			//			let mySymbol = Symbol();
			//第一种写法
			//			let a = {};
			//			a[mySymbol] = '你好';//你好是唯一的,描述相同,但对象类型不同。
			//			第二种写法
			//			let a = {
			//				[mySymbol]:'你好'
			//			}
			//			第三种写法
			//			let a = {};
			//			Object.defineProperty(a,mySymbol,{value:'你好!'});
			//			console.log(a[mySymbol]);//输出“你好”
			//属性名的遍历
			//			var obj ={};
			//			var a = Symbol('a');
			//			var b = Symbol('b');
			//			obj[a]='老李';
			//			obj[b]='老顾';
			//			var objectSymbols = Object.getOwnPropertySymbols(obj);//获取obj对象信息,拿到kin
			//			for (var x of objectSymbols) {//循环变量kin
			//				console.log(obj[x]);//输出objkin.value值。老李,老顾
			//			}
			//字符串函数
			//补全长度
			//			var num = 1;
			//			var use = (num+"").padStart(2,"0");//长度不够就补齐,往前补齐
			//			console.log(use);//输出01
			//			
			//			var a = 90;
			//			var b =(a+"").padStart(3,"1");
			//			console.log(b);//输出190

			//			var num = 1;
			//			var use = (num+"").padEnd(2,"0");//往后补齐
			//			console.log(use);//输出10
			//			
			//			var a = 90;
			//			var b =(a+"").padEnd(3,"1");
			//			console.log(b);//输出901

			//			var a = 'afhFGHbbsliqSDHGH';//includes 查找包含的内容,区分大小写
			//			var b = a.includes('B');//返回true,false
			//			console.log(b);

			//			var a = '老李';
			//			var b =a.startsWith('李');//确定此字符串实例的开头是否与指定的字符串匹配。
			//			console.log(b);
			//			
			//			var a = '老李';
			//			var b =a.endsWith('李');//确定此字符串实例的结尾是否与指定的字符串匹配。
			//			console.log(b);
			//函数的参数使用默认值
			//						function a(x,y){
			//							this.x=x;
			//							this.y=y;
			//							console.log(this.x,this.y);
			//						};
			//						a(10,20);
			//						function a(x=0,y=0){//传过来的参数10,20
			//										this.x=x;//将参数10赋值给X
			//										this.y=y;//将参数20赋值给y
			//										this.fun=function(x,y){//传过来的参数5,10
			//											var x =x;//将参数5赋值给X
			//											var y =y;//将参数10赋值给y
			//											console.log(x,y);//输出5,10
			//										};
			//										console.log(this.x,this.y);//输出10,20
			//									};
			//									a(10,20);//传参10,20,
			//									var obj = new a();
			//									obj.fun(5,10)//传参,5,10,

			//rest 参数
			//使用...表示,rest参数通常放在最后面
			//values是一个数组存储了参数的内容
			//			function add(...values) {//传过来的参数用数组储存
			//			  let sum = 0; 
			//			  for (var val of values) {//循环数组
			//			    sum += val;//每次循环数组里的数字相加
			//			  } 
			//			  return sum;//返回相加完后的变量
			//			} 
			////			add(2, 5, 3) // 10
			//			console.log(add(2, 5, 3));//输出10,
			//箭头函数
			//=>定义函数
			//			var f = () => 5;//f(){return 5;}
			//			console.log(f());//输出5
			//			var f =(a,b)=>a+b;//f(a,b){return a+b;}
			//			console.log(f(1,3));//输出4

			//			let x = 99;
			//			function foo(p = x + 1) {
			//				console.log(p);
			//				
			//			}
			//
			//			for(var a = 0; a < 5; a++) {
			//				foo(); // 100,101,102,103,104
			//				x++;//每次+1
			//			}

		         //数组的扩展
			//es5的克隆
			//						var array=[1,2];//申明一个数组
			//						var array2=array.concat();//克隆array数组
			//						console.log(array2[1]);//输出2
			//						console.log(array2);//输出1,2

			//es6的克隆
			//						var array = [5,9];
			//						var array2 = [...array];//(...)三个点加上要克隆数组就是es6的新克隆,个人觉得没有es5好用
			//						console.log(array2[1]);//输出9
			//						console.log(array2);//输出5,9
			//			ES5 的合并数组
			//			var arr1 = ['a', 'b']
			//			var arr2 = ['c']
			//			var arr3 = ['d', 'e']
			//			//			var arr1 = arr1.concat(arr2, arr3);//合并(concat)arr2, arr3数组
			//			//			console.log(arr1);//输出'a','b','c','d','e'
			//			// 			ES6 的合并数组
			//			var arr1 = [...arr1, ...arr2, ...arr3]
			//			console.log(arr1)//输出'a','b','c','d','e'

			//find()函数用来查找目标元素,找到就返回该元素,找不到返回undefined。
			//查找函数有三个参数。
			//
			//value:每一次迭代查找的数组元素。
			//
			//index:每一次迭代查找的数组元素索引。
			//
			//arr:被查找的数组。
			//			var fid=arr1.find((value)=>{
			//				return value =='a'//查找元素,返回找到的值,找不到返回undefined。
			//			});
			//			console.log(fid)//输出  a 

			//findIndex()函数也是查找目标元素,找到就返回元素的位置,找不到就返回-1。
			//查找元素,返回找到的index,找不到返回-1
			//			var fid=arr1.findIndex((value)=>{
			//				return value =='c'//查找元素,返回找到的值,找不到返回undefined。
			//			});
			//			console.log(fid)//输出  2

			//对象的扩展
			//属性简写
			//const foo = 'bar';
			//const baz = {foo};
			////baz // {foo: "bar"}
			//
			//// 等同于
			////const baz = {foo: foo};
			//console.log(baz)//输出{foo:'bar'}

			//方法简写
			//var a = {
			//x() {
			//  return "铁头!";
			//}
			//};
			//console.log(a.x());//输出铁头
			// 
			//// 等同于
			// 
			//var b = {
			//c: function() {
			//  return "老李!";//输出老李
			//}
			//};
			//console.log(b.c());

			//Object.assign方法用于对象的合并
			//const target = { a: 1 };
			//
			//const source1 = { b: 2 };
			//const source2 = { c: 3 };
			//
			//Object.assign(target, source1, source2);
			//console.log(target);//输出{a:1, b:2, c:3}
</script>

笔记纯手打如有看得不清楚可以复制下来自己拿去解释下在看,今天就先到这了。



——来自胡小哥原创ES6课堂笔记(持续更新中...)

还能输出{{restrictNumber}}个字符  
  • {{reply.author}}

    {{CommonUtil.formateDate(reply.ac_CommentDate).shortTime}}
  • 回复了{{Comments.author}} :