ES6基础知识

类型

1.const

• 声明常量
• 注意

 1.一定要赋初值
 2.常量一般使用大写
 3.常量的值不能修改
 4.块级作用域
		{
		   const PLAYER='UZI';
		}  
		console.log(PLAYER);//PLAYER is not defined 
5.对于数组和对象的元素修改，不算做对常量的修改，不会报错（原因与Java中同）
		const TEAM=['UZI','MLXG','Letme','Ming'];
		TEAM.push('xiaohu');//TEAM指向的地址并没有发生变化
		TEAM=100;//Assignment to constant variable

2.let

• 声明变量
• let不可以重复声明(var可以)，防止命名重复，变量被污染

let a,b,c;
let d=100;
let e=1,f='dd',g=[]; 

• 说明

1.块级作用域
2.不存在变量提升
3.不影响作用域链（当前无继续向上一级寻找）

<div class="container">
    <h2>点击切换颜色</h2>
    <div class="item" ></div>
    <div class="item" ></div>
    <div class="item" ></div>
</div>

<script>
    let items=document.getElementsByClassName('item');
    for(let i=0;i<items.length;i++){//如果此处为var
        items[i].onclick=function(){
            //修改当前元素的背景颜色
            items[i].style.background='pink';      
            //这个地方就不能这样使用，应改为this.style.....,
            //因为var没有块级作用域，相当于循环之后i为3，点击调用回调函数，items[3]报错
        }
    }
</script>

3.symbol

• 创建

1.普通创建
	let s=Symbol();
	console.log(s,typeof s); //Symbol() "symbol"==唯一性对我们不可见，内部实现

2.含参数创建：字符串类似于注释，提醒Symbol是干嘛的
	let s2=Symbol('yc');
	let s3=Symbol('yc');
	console.log(s2===s3);//false

3.Symbol.for()创建
该创建方式被登记在全局环境中供搜索(类似单例模式，有则返回，无则创建)
	let s4=Symbol.for('yc');//函数对象
	let s5=Symbol.for('yc');
	console.log(s4===s5);//true

• 说明

1.Symbol不能与其他数据进行运算
	let result=s+100;
	//Cannot convert a Symbol value to a number
	
	===>每一个 Symbol 的值都是不相等的
2.Symbol 作为对象的属性名，保证属性不重名
	let sy = Symbol("key1");
 
	//写法1
	let syObject = {};
	//syObject.key=2;//{key: 2}
	syObject[sy] = "kk";
	console.log(syObject);//{Symbol(key1): "kk"}

	//写法2
	let syObject1 = {
		[sy]: "kk"
	};
	console.log(syObject1);//{Symbol(key1): "kk"}

	//写法3
	let syObject2 = {};
	Object.defineProperty(syObject2, sy, {value: "kk"});
	console.log(syObject2);//{Symbol(key1): "kk"}

3.Symbol 作为唯一的方法名，防止模板内部本身就有相同的方法名
	let method1=Symbol("方法一");
	function showHello(){
	    document.write("hello world");
	}
	String.prototype[method1]=showHello;

4.Symbol 定义常量，保证这一组常量的值都不相等

4.模板字符串

• 声明

let str=`字符串！！！`;
console.log(str,typeof str);//字符串！！！ string

• 说明

1.内容可以直接出现换行(''和""不可以)
	let str=`<ul>
				<li>沈腾</li>
				<li>玛丽</li>
			</ul>`;
	console.log(str);
	
	let str='<ul>
		        <li>沈腾</li>
		        <li>玛丽</li>
	       </ul>';
	console.log(str);//Invalid or unexpected toke

2.变量拼接
	//之前的拼接
	let lovest='我';
	let out=lovest+'爱你';
	console.log(out);//我爱你
	
	 //使用``之后
	 let lovest="我";
	 let out=`${lovest}爱你`;
	 console.log(out);//我爱你

• 作用：字符串拼接和字符串中需要换行

运算符

1.in和of

• in：取下标
• of：取元素

2.扩展运算符…

• 作用：将数组转换成用 , 分隔的参数序列
• 应用

1.数组的合并
	const KUAIZI=['肖央','王太利'];
	const FH=['曾毅','玲花'];
	const zuixuanxiaopingguo=[...KUAIZI,...FH];   //["肖央", "王太利", "曾毅", "玲花"]
	console.log(zuixuanxiaopingguo);//["肖央", "王太利", "曾毅", "玲花"]

2.数组的克隆
	const SZH=['E','G','M'];
	const SYC=[...SZH];//['E','G','M'];
	console.log(SYC);//浅拷贝

3.将伪数组转换为真正的数组
	<div></div>
	<div></div>
	<div></div>
	
	const DIVS=document.querySelectorAll('div');
	console.log(DIVS);//Object   NodeList
	const DIVSARR=[...DIVS];
	console.log(DIVSARR);//Array

解构赋值

• 解构赋值：按照一定模式从数组和对象中提取值，对变量进行赋值

1.数组的解构
	const F4=['小沈阳','刘能','赵四','宋小宝'];
	let [xiao,liu,zhao,song]=F4;
	console.log(xiao);    //小沈阳
	console.log(liu);     //刘能
	console.log(zhao);    //赵四
	console.log(song);    //宋小宝

2.对象的解构
	const zhao={
	    name:'赵本山',
	    age:'20',
	    xiaopin: function(){
	        console.log('我可以演小品');
	    }
	}
	let {name,age,xiaopin}=zhao;//注意此处是{}，不是[]，区别于数组
	console.log(name);

• 说明：不可以感知到值的变化

zhao.name="赵四";
console.log(name);//赵本山
console.log(age);//20
console.log(xiaopin);//方法体
xiaopin();//我可以演小品

• 用处：用于某属性或方法频繁调用

//当我们频繁调用xiaopin方法时
zhao.xiaopin();
zhao.xiaopin();
zhao.xiaopin();
zhao.xiaopin();  
//zhao这也算重复，这时可以用到解构赋值

let {xiaopin}=zhao;
xiaopin();
xiaopin();
xiaopin();
xiaopin();

参数

1.rest

• 作用：获取函数的实参

1.ES5获取实参===arguments
	function date(){
	    console.log(arguments);
	}
	date(1,2,3);//1 2, 3=====Object

2.ES6获取实参===rest（注意rest参数必须放在最后）
	function date(...rest){
		console.log(rest);
	}
	date(1,2,3);//[1,2,3]  Array,提高对参数的操作

2.参数默认值

• 参数默认值=形参赋初值
• 具有默认值的参数，一般位置要靠后

function add(a,b,c=10){
	return a+b+c;
}
let result1=add(1,2);
console.log(result1);//13

• 与解构赋值结合

connect({
    host: 'localhost',
    username: 'root',
    password: 'root',
    port: 3306
})

function connect({host,username,password,port}=connect){
   console.log(host);    //localhost
   console.log(username);  //root
   console.log(password);  //root
   console.log(port);      //3306
}

箭头函数

• 允许使用 箭头 => 定义函数
• 声明与调用

//之前的:
let fn=function(a,b){
    return a+b;
}

//ES6:
let fn=(a,b)=>{
    return a+b;
}

//调用:
let result=fn(1,2);
console.log(result);//3

• 简写

1.形参有且只有一个===>省略小括号
	let add=n=>{
	   return n+n;
	}
	console.log(add(9));//18

2.代码体只有一条语句===>省略花括号，此时return也必须省略,语句的执行结果就是函数的返回值
	let pow=n=>n*n;
	console.log(pow(9));//81

• 箭头函数声明与之前函数声明的区别

1.this：静态的
//this始终指向函数声明时所在作用域下的this的值
	function getName1(){
	    console.log(this.name);
	}
	let getName2=()=>{
	    console.log(this.name);
	}

	window.name='yc';
	const SCHOOL={
	    name:'ycccc'
	}
	    
	getName1();//yc
	getName2();//yc

	//注意：call(可以改变函数内部this的值)
	getName1.call(SCHOOL);//ycccc
	getName2.call(SCHOOL);//yc
	//并没有改变,this是静态的,this始终指向函数声明时所在作用域下的this的值

2.不能作为构造实例化对象
	let Person=function(name,age){
		this.name=name;
	    this.age=age;
	}
	let me=new Person('xx','19');
	console.log(me);//Person {name: "xxn", age: "19"}
	
	let Person=(name,age)=>{
	    this.name=name;
	    this.age=age;
	}
	let me=new Person('xxxx','19');
	console.log(me);//Person is not a constructor

3.不能使用arguments变量
	let fn=function(){
	    console.log(arguments); 
	}
	fn(1,2,3);//[1,2,3]
	
	let fn=()=>{
	    console.log(arguments);
	}
	fn(1,2,3);//arguments is not defined
	//函数也是一种特殊对象，由容器创建，所以事先放入了一些属性（index5.html）

• 匿名函数与箭头函数的区别

• 箭头函数的实践

需求1：点击div 2s后变成粉色
		//获取元素
		let ad=document.getElementById("ad");
		//绑定事件
		ad.addEventListener("click",function(){
			//保存 this 的值
		    let _this=this;
		    //定时器
		    setTimeout(function(){
		        //修改背景颜色
		        _this.style.background="pink";
		    },2000);
		})

		//使用箭头函数
		ad.addEventListener("click",function(){
		    //定时器
		    setTimeout(()=>{
		        //修改背景颜色
		        this.style.background="pink";
		    },2000);
		})


需求2：从数组中返回偶数的元素
		const arr=[1,6,9,10,100,1000];
		const result=arr.filter(function(item){
		    if(item%2===0){
		        return true;
		    }else{
		        return false;
		    }
		});
		
		const arr=[1,6,9,10,100,1000];
		const result=arr.filter(item=>item%2===0);

异步

1.Promise对象

• [转载]ES6异步——Promise对象具体资料
• 一次执行的异步操作
• 状态

pending：进行中
fulfilled：已完成
rejected：已失败

说明：1.除了异步操作的结果，其他任何操作都无法改变pending状态
	 2.只可以 pending->fulfilled 和 pending->rejected
	 3.fulfilled和rejected状态不能再变,即resolved(已定型)

• 函数

then()
	1.参数：两个函数(执行成功时回调,执行失败时回调)
		两个参数中的回调函数只会有一个被回调
	2.返回：resolved或rejected状态，同时Promise的值就是这个返回值
		如果没有返回值则不可以实现链式调用==下一个拿不到值
		var a = new Promise(function(resolve, reject){
			//resolve(1);//成功时调用
			reject(100);//失败时调用
		});
		//then是依次执行  执行的时机不确定  不影响主程序的执行
		a.then(function(value) {
			console.log("成功："+value);
			return value;
		},function(error){
			console.log("失败："+error);
			return error;
		}).then(function(value) {
			console.log("成功："+(value * 2));//如果没有返回值则不可以实现链式调用  下一个拿不到值
		},function(error){
			console.log("失败："+(error* 2));
		}).then(function(value) {
			console.log(value);
		})
		
		失败：100
		成功：200
		undefined

catch()
	1.then()的一个别名
	2.用于注册Promise对象状态变为rejected的回调函数
	3.清楚的知道函数一定会失败的时候使用

all()
	1.静态方法
	2.参数：Promise对象的数组
	3.返回：当数组里所有promise对象都为resolve时才会返回(都成功时才会返回)
	4.按照数组的原先顺序将结果返回，但执行顺序并不会按照原来的顺序，若后面的先就会先执行后面的
		var promise1 = new Promise(function(resolve) {
			setTimeout(function() {
				resolve(1);
			}, 3000);
		});
		var promise2 = new Promise(function(resolve) {
			setTimeout(function() {
				resolve(2);
			}, 1000);
		});
		
		//promise2---》promise1
		Promise.all([promise1, promise2]).then(function(value) {
			console.log(value);
		});
		
		[1,2]

race()
	1.静态方法
	2.只要有一个promise对象完成或者失败状态该方法就会返回，继续后面的处理逻辑
		var promise1 = new Promise(function(resolve) {
			setTimeout(function() {
				resolve(1);
			}, 3000);
		});
		var promise2 = new Promise(function(resolve) {
			setTimeout(function() {
				resolve(2);
			}, 1000);
		});
		
		Promise.race([promise1, promise2]).then(function(value) {
			console.log(value);
		});
	
		[2]

• 优点

1.解决多个ajax要嵌套调用
2.避免多层异步调用的嵌套
3.promise有简洁的API

• 缺点

1.一旦新建promise就会立即执行,无法中途取消
2.不设置回调函数，promise内部抛出的错误,不会反应到外部
3.当处于pending状态时,无法得知目前进展到哪一个阶段(刚刚开始还是即将完成)

2.Generator

• yield 关键字

1.将函数的执行流挂起
2.为改变执行流程提供可能，从而为异步编程提供解决方案
3.和一般方法不同的是
	在 function 后面，函数名之前有个 *	
	函数内部有 yield 表达式
		function* fun(){
		    console.log("one");
		    yield '1';
		}

• Generator 函数

1.Generator函数不像普通函数一样立即执行，而是返回一个指向内部状态对象的指针
	调用遍历器对象Iterator的next方法，指针会从函数头部或者上一次停下来的地方开始执行
2.next():next方法不传入参数候，yield表达式的返回值是undefined 
	     next方法传入参数候，该参数会作为上一步yield的返回值