ES6 知识总结

ES6是javascript语言新特性

变量声明：

var
全局作用域
函数作用域
会变量提升

let

局部变量
局部作用域
不能变量提升
在一个作用域里面不能重复声明

 {
				// const PI = 3.1415926;
				// const PI;
				// PI = 3.1415926; // x 声明必须赋值
				// PI = 3.14; 		// x 值不能修改
				// console.log(PI);
				const LIST = ["I","Hate","You"];
				LIST.push("LOve");
				console.log(LIST);
			 }

const

声明必须赋值
值类型不允许修改
变量名建议大写

// var 可以声明变量
			// let 同样可以声明局部作用域变量(在一对{}启用)
			// 01 let 局部变量
			// 02 不能重复声明
			// 03 let 不能变量提升
			//  let 应用领域
			//  01 单击第一个li弹出 li的下标(局部作用域)
			// h1内容 1s 是9 2s是8 3s是7 ...10s是 1
			// 选择到h1
			var h1 = document.querySelector("h1");
			// 用for循环变量
			for(let i=9;i>=1;i--){
				// 延迟10-i秒执行
				setTimeout(function() {
					// 设置文本值为 i
					h1.innerText = i;
				}, (10-i)*1000);
			}
			
			/* var lis = document.querySelectorAll("ul li");
			// 遍历选择的节点,添加单击事件
			for(let i=0;i<lis.length;i++){
				lis[i].onclick = function(){alert(i)}
			}
			// for循环结束 i值为5 单击时候for循环早已结束 */
			
			
			
			// {
			// 	alert(a);
			// 	let a = 15;
			
			// }
			/* {
				let a = 20;
				// let a = 35;
				a = 35;
				a = "love js";
				alert(a);
			} */
			
			/* if(true){
				var a = 15;
			}
			alert(a); */
			
			/* if(true){
				let a = 15;
				alert(a);
			}
			 */

解构

    数组 
  

      var [a,b..rest]=[1,2,3,4,5]
        []解构符号
，一位
...rest 剩余
c=10 默认

    对象 
    

   var {age,name,eye, leg=2,...rest}=obj;
        []解构符号
，一位
...rest 剩余
c=10 默认

字符串

遍历

var str = 'yue𠮷 口';
		/* for(var i=0;i<str.length;i++){
			console.log(str[i])
		} */
		/* for(let s of str){
			console.log(s);
		} */

检查

indexof   查找索引返回下标 
 lastindexOf  倒序查找 返回下标
includes  是否包含
stratsWith  以什么开头的
endWith    以什么结尾的

// 03 es6  repeat
		// console.log("我爱你\n".repeat(1000))
		
		// 04 查找是否包含 indexOf lastIndeOf  下标|-1   includes是否包含 true|fase
		// var str = "台湾是中国的一个省份";
		
		// alert(str.includes("福建"))
		
		// 检测:startsWith 以xxx开通  endsWith以xxx结尾
		// var str = "我特别喜欢和你做朋友";
		// alert(str.startsWith('你')) // false
		
		// 填充:001 002 100 101 padStart(位数,填充字符串)  padEnd()
		// 01 02 10 50 55
		// var str = "1";
		// console.log(str.padStart(3,"0"))
		// console.log(str.padEnd(10,"0"))
		
		// 字符串模板 ``定义字符串,用${ } 定义js
		//  可以随意换行,可以随意使用符合
		var s = "花轿";
		var  str = `那天,他坐上${s.length<3?'八抬大轿':'奔驰加长版'},'"微笑"'
		
		着就看不见了`;
		console.log(str);
		

数组

Array.from（类数组）
把类似数组转换为数组
forEach（function item，index，self）
item
index
self
map() 映射一个数组
filter（item=>true 保留|| false 过滤掉）
reduce（）
 累计
some（）
有一个true 整体返回true
every 有一个返回false 整体返回true
find 查找符合条件的
find inex
sort 排序
includes 检测是否包含
fill 填充数组

默认参数·

    默认参数

function say（str=嘻嘻嘻）
say（）
say（呵呵呵）

    扩展参数(执行)

function metting(a1,a2,a3){}
var arr= ["A","B'","D"];
// mettinglrr[J]ar[1],arr[2])
// metting.apply(null,arr);
metting（...rr);

    不定参(定义)

function ad.list){
return list.reduce((a,b)=>a+b);
//retrun Array.from(arguments).reduce(a,b)=>a+b)
}

class类点击小游戏
 

// class 类就是function 构造函数的 语法糖(简写)  本质上还是函数 typeof class 
		// box类: 属性:生命力;颜色;dom节点;  方法:dead() 死亡,被打 生命值-1
		class Box{
			// 初始化实例(构造函数)
			constructor(life=1,x=0,y=0) {
				// 生命力
			    this.life = life;
				// 墙的x与y值
				this.x = x;
				this.y = y;
				// 创建一个节点
				var dom = document.createElement("div");	
				// 插入节点
				document.body.appendChild(dom);
				// 指定实例的dom
				this.dom = dom;
				// 更新dom
				this.updateDom();
				// 给dom添加点击事件
				this.dom.addEventListener("click",(e)=>{
					// 用的箭头函数,this指向的 上一层作用域this(Box实例)
					// 让生命值--
					this.life --;
					var score = document.querySelector(".score");
					score.innerText=score.innerText*1+1;
					// 如果生命值小于等于0,让dom从页面中删除
					if(this.life<=0){this.dom.remove();	}
					// 更新dom;
					this.updateDom();
					 
				})
				 
			}
			updateDom(){
				// 根据生命值的不一样
				// 赋值给他不同的颜色
				if(this.life<3){
					this.color="#c83a0b";
				}else if(this.life<=5){
					this.color="#791810";
					this.innerText = "5123"
				}else{
					
					this.color="#e3e3e3";	
				}
				// 修改dom的样式:宽;高;背景色;位置;左;顶
				this.dom.style.width = "100px";
				this.dom.style.height = "100px";
				this.dom.style.backgroundColor = this.color;
				this.dom.style.position="absolute";
				this.dom.style.left = this.x+"px";
				this.dom.style.top = this.y+"px";
			}
		}
		// Box是类:b1,b2,b3类的实例
		var b1  = new Box();
		// 当实例的时候会先执行constructor创建一个实例对象,也会执行updateDom更新dom
		var b2  = new Box(10,100,0);
		var b3  = new Box(4,200,0);
		
		// 创建一个新的MBox 可以移动box,继承 Box,
		// 自动移动(从上掉下来)
		// 继承Box
		class MBox extends Box{
			constructor(life=1,x=0,y=0) {
				// super调用父构造函的方法
			    super(life,x,y);
				// 停止动画id
				this.id =null;
				// 自动向下移动
				this.autoMoveDown();
			}
			autoMoveDown(){
				this.id = setInterval(()=>{
					// 更改y值
					this.y+=2;
					// 更新dom(继承Box)
					this.updateDom();
					if(this.y>window.innerHeight){
						// 选择到分数
						var score = document.querySelector(".score");
						// 如果触底减分
						score.innerText=score.innerText-10;
						// 如果操作了窗口的高,移除
						this.dom.remove();
						// 停止间隔调用
						clearInterval(this.id);
					}
				},16)
			}
		}
		// 实例化MBox;
		// var b4 = new MBox(4,300,0);
		// var b5 = new MBox(10,400,-200);
		// 
		// 随机创造20个方块
		for(var i=0;i<10;i++){
			// 随机生命 1-10
			var life = Math.ceil(Math.random()*5)
			// 随机y 0--500;
			var y = Math.floor(Math.random()*-500)
			// 实例化
			new MBox(life,i*80,y);
		}