Node(2) ES6 新增语法特性

一、花样变量声明

1. var 关键字

   // a.存在变量提升
   console.log(score);
   var score = 99;
   
   // b.函数作用域
   for(var i=0;i<10;i++){
   	
   }
   console.log(i);
   
   // c.可重新声明
   var score = 98;
   console.log(score);
   
   // d.可重新赋值
   score = 97;
   console.log(score);
   
   

2. let 关键字

   // a.无变量提升
   console.log(score);
   let score = 99;
   
   // b.块级作用域
   for(let i=0;i<10;i++){
   	
   }
   console.log(i); // 报错
   
   // c.不可重新声明
   let score = 98; // 报错
   
   // d.可重新赋值
   score = 97;
   console.log(score);
   

3. const 关键字

   // #声明必须赋值(常量一般全部大写)
   const PI;				// 报错
   console.log(PI);	
   	
   // a.无变量提升
   console.log(PI);    	// 报错
   const PI= 3.1415926;
   	
   // b.块级作用域
   {
   	const SHAPE= 4;
   }
   console.log(SHAPE); 	// 报错
   
   // c.不能重复声明
   const PI = 3.15;		// 报错
   
   // d.不可重新赋值
   PI= 4;					// 报错
   console.log(PI);
   

二、解构赋值

1. 、对象解构赋值

   对象解构赋值：将对象属性的值赋给变量；

   Let’s Coding：

   
   	let obj = {
   		name:"张三"	,
   		age:18		,
   		sex:'男'	,
   		score:60	,
   		grade:'初三'
   	}
   	
   	// ES5：解构赋值
   	let name 	= obj.name	;
   	let age		= obj.age	;
   	let sex		= obj.sex	;
   	console.log(name,age,sex);
   	
   	// ES6：解构赋值
   	
   	// 1.自定义赋值
   	let {name:name1,age:age1,sex:sex1} = obj;
   	console.log(name1,age1,sex1);
   	
   	// 2.全写
   	let {name:name,age:age,sex:sex} = obj;
   	console.log(name,age,sex);
   	
   	// 3.简写(变量名需与对象属性名一致)
   	let {name,age,sex} = obj;
   	console.log(name,age,sex);
   	
   	// 4.默认值
   	let {name,age,sex,scories=10} = obj;
   	console.log(name,age,sex,scories);
   	
   	// 5.默认值在编译时就赋值好了，在运行时会将对象的属性值重新赋给变量
   	let {age=20} = obj;
   	console.log(age); // 18
   
   	// 补充：...another 表示出了name 属性之外的所有属性封存在另一个对象another中
   	let {name,...another} = obj;
   	console.log(another);
   	
   
   

2. 数组解构赋值

   数组解构赋值：将数组元素值依次赋值给变量；

   Let’s Coding：

   
   	let array = [1,2,3,4];
   	
   	// ES5：数组解构赋值
   	let one 	= array[0];
   	let two		= array[1];
   	let three	= array[2];
   	let four	= array[3];
   	console.log(one,two,three,four);
   	
   	// ES6：数组解构赋值
   	
   	// 1.依次赋值
   	let {one,two,three,four}	= array	;
   	console.log(one,two,three,four)		;
   	
   	// 2.多余变量
   	let {one,two,three,four,five}= array;
   	console.log(one,two,three,four,five);		// five：undefined
   	
   	// 3.默认值
   	let {one,two,three,four,five=50}= array;
   	console.log(one,two,three,four,five);
   
   

3. 解构赋值&&函数

   Let’s Coding：

   // ES5：
   	// 声明函数+多个形参
   	function fun(name,age,sex){
   		console.log(name,age,sex);
   	}
   	fun('zs',18,'男');
   	// 对象参数
   	function fun(obj){
   		console.log(obj.name,obj.age,obj.sex);
   	}
   	fun({name:'zs',age:18,sex:'男'});
   
   // ES6：
   	function fun({name,age,sex}){
   		console.log(name,age,sex);
   	}
   	fun({name:'ls',age:19,sex:'男'});
   	
   

三、箭头函数

• 箭头函数

  箭头函数：匿名函数的简写；
  注意：箭头函数中的this与普通函数中this有不同点；

  Let’s Coding：

  	
  	// 匿名函数：
  	let fun = function(name){console.log(name);};
  	fun("张飒");
  	// 箭头函数 = 参数 -> 函数体；
  	let fun = name -> console.log(name);
  	
  	/* 箭头函数简写规则：
  		1.function 改为 -> , 读作：goesto;
  		2.只有一个形参，小括号可省;
  		3.形参为0或>=2，括号不可省略;
  		4.函数体只有一句话，可省略大括号;
  		5.函数体只有一句话，且为return + 返回值，则return省;
  		6.函数体大于1句话，大括号不可省;
  	*/
  	
  	// 无参数且函数体为一句话
  	let fun = () -> console.log('Are you Ok?');
  	
  	// 单个参数，一句函数体
  	let fun = name -> console.log('name：Are you Ok?');
  	
  	// 多个参数，一句函数体
  	let fun = (name,age) -> console.log(name,age);
  
  	// 单个参数+return 语句
  	let fun = score -> score+10;
  
  	// 多个参数+return+函数体
  	let fun = (name,age,score) -> {
  		console.log(name,age,score);
  		return score+10;
  	};
  	
  

四、对象成员的简写

• Let’s Coding：

	let name 	='zs'	;
	let age 	= 18	;
	let sex		='男'	;

	// ES5：对象成员简写
	let obj = {
		name:name,
		age:age,
		sex:sex
		introduce:function(){
			console.log("My name is:",name);
		}
	};
	console.log(obj);

	// ES6：对象成员简写
	let oo = {
		name,
		age,
		sexx:sex,				// 别名赋值
		introduce:function(){
			console.log("My name is:",name);
		}
		
	};

五、模板字符串

新增模板字符串：``,保留原字符串格式；

Let’s Coding:

	// ES5：
	let str = "
		one
	two three four,
	five six seven;
	"; 					// 报错

	// ES6：
	let author = "八";
	let str = `
		one
			${author}
	two three four,
	five six seven;
	`; 	
	console.log(str);
	// 函数
	function fun(){console.log("123");};
	console.log(`数字：${fun()}`);

六、(展开)运算符

展开运算符：...

1. 对象展开运算符

   Let’s Coding：

   let song = {
   	skill:"青花瓷",
   }
   let business = {
   	skill:"money",
   	num:999999999
   }
   let people ={
   	...song,		// 将song的所有内容共享给people
   	...business		// 将business的所有内容共享给people
   }
   console.log(people);
   

2. 数组展开运算符

   Let’s Coding：

   	// 数组拼接
   	let index = [1,2,3];
   	let score = [...array,60,70,80];
   	console.log(score);
   
   	let sum = [...index , ...score];
   	console.log(sum);
   
   	// 求最值
   	let max = Math.max.apply(Math,sum);
   	console.log(max);
   	max = Math.max(...sum);
   	console.log(max);
   

七、数据类型 Set

新增数据类型 Set ：同数组存放数据，但不存放重复元素；

• Let’s Coding:

  // 重复项数组
  let arr = [1,2,1,3,4,2];
  // 去除重复
  let set = new Set(arr);
  console.log(set);
  // 返回成数组
  let only = [...set];
  console.log(only);
  
  // 整理
  let onlies = [...new Set(arr)];
  console.log(onlies);
  

八、Promise

暂无

---

结语：今日事，今日毕；明日事，何其多。

赠诗：

明日复明日，
明日何其多。
我生待明日，
万事成蹉跎。
世人若被明日累，
春去秋来老将至。
朝看水东流，
暮看日西坠。
百年明日能几何？
请君听我《明日歌》；