es6简单的学习

let定义：

1、没有域解析，不纯在变量提升

	在代码块内，只要let定义变量，在之前使用都是报错

​ 先定义在使用

​ 2、同一个作用域里面，不能重复定义变量

​ 3、for循环，for循环里面是父级作用域，里面又一个

4、var声明的变量是属于window的let和const不是

{
  let a = 12;
  {
    let a = 6
    console.log(a) //6
  }
  console.log(a) //12
}

var arr = [];
	for (let i = 0; i < 10; i++) {
		arr[i] = function() {
			console.log(i)
		}
	}
	arr[1]();

解构赋值：

let [a,b,c] = [12,1,2];

	let [d,e,f = '暂无数据'] = ['a','b']
	console.log(a,b,c)
	console.log(d,e,f)

	let json = {
		name:'strive',
		age:20,
		sex:'nan'
	}
	let {name:n,age:g,sex} = json
	console.log(n,g,sex)

	let q = 12,w = 5;
	[q,w] = [w,q];
	console.log(q,w)

	function getposition() {
		return {
			t:30,
			l:100
		}
	}
	({t,l} = getposition());
	console.log(t,l)

	function show({a,b,c='默认'}){
		console.log(a,b,c)
	}
	show({
		a:1,
		b:2
	})

字符串模板：

可以随意的换行`${data}`	

字符串查找：

indexof str.indexof(要找的东西)  返回值  索引的位置 没找到返回的-1

includes() str.includes(要找的东西)  返回值 true/false

if (navigator.userAgent.includes('Chrome')) {
		console.log('yes')
	}else {
		console.log('no')
}

字符串检测是已谁开头的:

let str = 'file:///Users/mac/Downloads/es6demo1.html';
let str2 = 'https://www.zhihu.com/';
console.log(str2.startsWith('http'))

字符串检测是已谁结尾的:

let sss = 'aaa.png';
let ssss = 'aaa.html';
console.log(ssss.endsWith('png'))

字符串重复多少次:

let strs = '重复'
console.log(strs.repeat(1000))

字符串填充:
padStart(字符串长度，填充的字符串) 往前添加
padEnd(字符串长度，填充的字符串) 往后添加

let str5 = 'apple';
let startpad = 'xxx';
console.log(str5.padStart(str5.length+startpad.length,startpad))
console.log(str5.padEnd(str5.length+startpad.length,startpad))

函数：

函数默认参数已经定义，不能在使用let或者const声明

默认值函数:

function show2({a=111,b=222}={}) {
		console.log(a,b);
}
show2()

扩展运算符,reset运算符:

let arrs1 = [1,2,3,4,5];
console.log(...arrs1);

function shows1(a,b,c) {
	console.log(a,b,c);
}
shows1(...[1,2,3])

function shows2(...a) {
	console.log(a.sort());
}
shows2(1,9,-3,2)

function shows3(a,b,...c) {
	console.log(a,b)
	console.log(c)
}
shows3(1,2,3,4,5)

// 复制一份数组
let arrss1 = [1,2,3,4,5,6];
let arrs2 = [...arrss1];
console.log(arrss1,arrs2);
// ...:
// 	[1,2,3,4,5] -> ...[1,2,3,4,5] -> 1,2,3,4,5
// 	1,2,3,4,5 -> ...1,2,3,4,5 -> [1,2,3,4,5]
// 剩余参数：必须放到参数末尾

箭头函数:

let jiantou = (a,b) => {
			return console.log(a+b)
}
jiantou(20,3)
// 注意
	// 1、this问题，定义函数所在的对象，不在是运行时所在的对象
let jsonss3 = {
			id:1,
			sex:() => {
					// 箭头函数里的this这时候指向window
					console.log(this.id)
			}
}
jsonss3.sex();
	// 2、箭头函数里面没有arguments,使用...可以代替arguments
function jiantousssss() {
			console.log(arguments)
}
jiantousssss(1,2,3,4,5)
			let jiantou2 = (...argus) => {
			console.log(argus)
}
jiantou2(1,2,3,4,5)
// 3、箭头函数不能当构造函数
function jiantou3() {
			this.name = 'abc'
}
let ns = new jiantou3();
console.log(ns.name);
let jiantou4 = () => {
				this.name = 'abc'
};
let ns1 = new jiantou4
console.log(ns1.name)

数组：

循环：

// forEach
		let arrEach = ['apple','bannene','oringe','tomato'];
		arrEach.forEach((value,index,arr) => {
			console.log(this,value,index,arr)
		},123)
		// forEach(循环的回调函数，this指向谁,箭头函数除外箭头函数只能指向他的父级)
	// map
		// 做数据映射，正常情况下需要配合return，返回的是一个新的数组若没有return，相当于forEach只要使用map一定要有return
	// filter
		// 过滤一些不合格的元素，如果回调函数是true就留下来false就放弃
	// some
		// 类似查找，数组里面某一个元素符合条件，返回true否则false
	// every
		// 数组里面所有的元素都要符合条件，才返回true否则false
	// reduce 从左往右
		// 求数组的和，积，阶乘
			let arrreduce = [1,2,3,4,5,6,7,8,9,10];
			let arrduce = arrreduce.reduce((prev,cur,index,arr)=>{
				return prev+cur;
			})	
console.log(arrduce)	
// reduceRight 从右往左
	// 求数组的和，积，阶乘
// 幂的运算符
// Math.pow(2,3)===2**3

新增数组：

// Array.from有length就可以转换成数组类数组转换成数组
		function arrform(){
			let arrgs1 = Array.from(arguments);
			console.log(arrgs1);
		}
		arrform(1,2,3,4,5,6)

//Array.of 把一组值转换成数组
		let arrof = Array.of('apple','bannene','oringe');
		console.log(arrof);
// arr.find()查找，找出第一个符合条件的数组成员如果没有找到就返回undefined
		let arrlength = [20,900,101,100]
		let arrfind = arrlength.find((item,index,arr)=> {
			return item >100;
		})
		console.log(arrfind)
// arr.findIndex()查找的是位置下标，没有找到的是-1
		let arrfindIndex = arrlength.findIndex((item,index,arr)=> {
			return item >100;
		})
		console.log(arrfindIndex)
// arr.fill(填充的东西，开始位置，结束位置)
		let arrfill = new Array(10);
		arrfill.fill('默认添加',2,8);
		console.log(arrfill)
// arr.includes()包含检测数组中是否有这个元素如果有返回true 如果没有是false
		let arrincludes = ['apple','oringe','banben'];
		console.log(arrincludes.includes('oringe2'))

对象：json

// 对象简介语法,在里面不要使用箭头函数
			let names = 'zhangsan';
			let agex = 18
			let jsones = {
				names,
				agex,
				showa(){
					console.log(this.names)
				}
			}
			console.log(jsones.showa())
// Object.is()用来比较两个值是否相等
			console.log(Object.is(1,1))
// Object.assign(目标对象，source1.source2)复制一个对象，合并参数
			let json1 = {a:1},json2 = {b:2},json3={c:3};
			let objectass = Object.assign({},json1,json2,json3);
			console.log(objectass);
			let objarrass = ['apple','bannene','orange']
			let abjarrsgin = Object.assign([],objarrass)
			console.log(abjarrsgin)
// ...对象身上也可以使用
			let jsondian = {a:1,b:2,c:3}
			let jsondian1 = {...jsondian}
			console.log(jsondian1)

Promise:

// Promise 解决异步回调问题
		let apromise = 101
		new Promise(function(resolve,reject){
			// resolve成功调用
			// reject失败调用
			if (apromise === 10) {
				resolve('成功了')
			}else{
				reject('失败了！')
			}
		}).then((res)=> {
			console.log(res)
		}).catch((err)=>{
			console.log(err)
		})
// Promise.resolve('aa')将现有的东西，转成一个promise对象，resolve状态，成功状态
		let p1 = Promise.resolve('成功！')
		p1.then(res=> {
			console.log(res)
		})
		let p6 = Promise.resolve('成功！')
		p6.then(res=> {
			console.log(res)
		})
// Promise.reject('aa')将现有的东西，转成一个promise对象，reject状态，失败状态
		let p2 = Promise.reject('失败！')
		p2.catch(res=> {
			console.log(res)
		})
// Promise.all([p1,p2])把promise打包，扔到一个数组里面，打包完还是一个promise对象，全部成功返回成功有一个失败就返回失败
		Promise.all([p1,p6]).then((res)=> {
			console.log(res)
		}).catch((err)=> {
			console.log(err)
		})
// Promise.race([p1,p2])把promise打包扔到一个数组里面，打包完还是一个promise对象，第一个成功就返回成功第一个失败就返回失败
		Promise.race([p2,p1,p6]).then((res)=> {
			console.log(res)
		}).catch((err)=> {
			console.log(err)
		})
// promise应用 获取登录状态和用户信息
		let status = 1;
		let userlogin = (resolve,reject)=>{
			setTimeout(()=> {
				if (status===1) {
					resolve({data:'login success',state:0,token:'sjdnajndknasndkas'})
				}else{
					reject('失败1')
				}
			},2000)
		}
		let getuserinfo = (resolve,reject)=> {
			setTimeout(()=> {
				if (status===1) {
					resolve({data:'getuser success1',state:01,token:'asdasdasdasdasd'})
				}else{
					reject('失败2')
				}
			},1000)
		}
		new Promise(userlogin).then((res)=>{
			console.log('用户登录成功')
			return new Promise(getuserinfo)
		}).then(res=> {
			console.log('获取用户信息成功')
		})

模块化：

// import 
		1、可以是相对路径也可以是绝对路径
		2、import模块只会导入一次，无论你引入多少次
		3、import './module/1.js'; 如果这么使用相当于引入文件

			(1)export 导出对象 export导出的对象import导入必须加{}如果是export default导出的不用加{}
				const a = 1
				const b = 2
				export {
					a,
					b
				}
			(2)import 引入导出的内容
				import {a,b} from './module/1.js'
				import * as modules from './module.1.js'
		4、有提升效果，import会自动提升到顶部，首先执行
		5、导出去的模块内容，如果里面有定时器更改，外面呢也会改动
		6、import还可以动态加载模块 import() 返回值是一个promise对象
			优点
				1.按需加载
				2.可以写在if中
				3.路径也可以动态加载
			import ('./module/1.js').then(res=> {
				console.log('成功')
			}).catch(err=> {
				console.log('失败')
			})
		7、默认严格模式

类（class）和继承：

// 继承es5之前
	function Person(name,age){
		this.name = name
		this.age = age
	}
	Person.prototype.showName = function(){
		return `名字：${this.name}`
	};
	let pro1 = new Person('zhangsan',19)
	console.log(pro1.showName())
Object.assign(Person.prototype,{
	showName1(){
		return `my name is ${this.name}`
	}
})
let pro2 = new Person('zhangsan',19)
console.log(pro2.showName1())
// class类的感念es6  
// 没有提升功能必须定义之后再调用
// es5里面有默认函数提升
class Person2{
	constructor(name,age) { //构造方法（函数）,调用new 自动执行
		console.log(name,age)
		this.name = name
		this.age = age
	}
	showName3(){
		return `名字为${this.name},年龄为${this.age}`
	}
}
let pro3 = new Person2('lisi',99)
console.log(pro3.showName3())
// class里面this的指向问题 bind 规定重新指向问题
/*
	fn.call(this指向谁，args1，args2) 	  传递的不是数组
	fn.apply(this指向谁，[ags1，args2]) 传递的是数组
*/
class Person3{
	constructor(){
		this.name = '新的aaa';
		this.showName4 = this.showName4.bind(this)
	}
	showName4(){
		return `新的名字为${this.name}`
	}
}
let p3 = new Person3;
let {showName4} = p3
console.log(showName4())
// class 新加的seter 和 geter
class Person4{
	constructor(){
	}
	get aaa(){
		return `获取aaa的值为${this.val}`
	}
	set aaa(val){
		console.log(val)
	}
}
let p4 = new Person4;
p4.aaa = '传输进去的值'
console.log(p4.aaa)
// 静态方法：就是类身上的方法
// 实现让类调用这个方法 使用static关键字就可以实现让类调用类这个对象上面绑定的方法
class Person5{
	constructor(){
	}
	showName5(){
		return `这是showName方法`
	}
	static aaa(){
		return `这是person5的aaa方法`
	}
}
let p5 = new Person5;
console.log(p5.showName5());
console.log(Person5.aaa())
// 子类和父类：继承es5的
// 父类：
function Persons(name){
	this.name = name;
}
Persons.prototype.showName6 = function(){
	return `学生的名字是${this.name}`
};
// 子类：
function Student1(name,skill){
	Persons.call(this,name) // 继承父类属性
	this.skill = skill
}
Student1.prototype = new Persons() //继承父类方法 一定要new person否则不会出现
// 调用
let stu1 = new Student1('xiaoming','逃学');
console.log(stu1.showName6())
// es6的继承
// 父类
class Person7{
	constructor(name){
		this.name = name;
	}
	showName(){
		console.log('fuleidefangfa')
		return `这是父类的方法,${this.name}`
	}

}
// 子类
class Student2 extends Person7{
	constructor(name,skill){
		super(name);//使用super来继承父类的属性
		this.skill = skill;
	}
	showName(){
		super.showName() //父类的方法执行
		return '子类里面的showname';
	}
	showSkill(){
		return `我最擅长的技能是${this.skill}`
	}
}
// 调用
let stu2 = new Student2('大张三','泡妞');
console.log(stu2.showName())
// 继承实现拖拽demo
class Drag{
	constructor(id){
		this.oDiv = document.querySelector(id);
		this.disx = 0;
		this.disy = 0;
		console.log(this.oDiv)
		this.init();
	}
	init(){
		this.oDiv.onmousedown = function(ev){
			this.disx = ev.clientX - this.oDiv.offsetLeft;
			this.disy = ev.clientY - this.oDiv.offsetTop;
			document.onmousemove = this.fnMove.bind(this);
			document.onmouseup = this.fnUp.bind(this);
			return false
		}.bind(this)
	}
	fnMove(ev) {
		this.oDiv.style.left = ev.clientX - this.disx+'px';
		this.oDiv.style.top = ev.clientY - this.disy+'px';
	}
	fnUp() {
		document.onmousemove = null;
		document.onmouseup = null;
	}
}
class DragLimt extends Drag{
	fnMove(ev){
		super.fnMove(ev);//继承父类的方法
		// 限制内容
		if (this.oDiv.offsetLeft<=0) {
			this.oDiv.style.left = 0;
		}else if (this.oDiv.offsetright<=0) {
			this.oDiv.style.right = 0;
		}
	}

}
// 调用
new Drag('#div1');
new DragLimt('#div2');	

数据类型：

/*  1.symbol不能使用new
	2.symbol返回是一个唯一值
		做一个key和一些私有的东西
	3.Symbol是一个单独的数据类型就叫Symbol，基本类型
	4.如果Symbol作为key，用forin循环出不来*/
let sym = Symbol('aaaaaa');
console.log(sym)

generator函数：

/*	1.可以使用结构赋值
	2.扩展运算符
	3.还可以使用Array.from转换成数组*/
	function * gener() {
		yield 'hello';
		yield 'to';
		yield 'world';
		return 'world';
	}
	let gene = gener();
	for (let val of gene){
		console.log(val)
	}
	let [g1,...g2] = gener()
	console.log(g1,g2)
	console.log(...gener())
	console.log(Array.from(gener()))

async特点:

/*	1.await只能放到async函数中
	2.相比genrator语义化更强
	3.await后面可以是promise对象，也可以是数字布尔字符串
	4.async函数返回的就是一个promise对象
	*/
	// 1.promise封装
	// const fs = require('fs');
	/*const readFile = function(filename){
		return new Promise((resolve,reject)=>{
			fs.readFile(filename,(err,data)=>{
				if (err) {
					reject(err)
				}else{
					resolve(data)
				}
			})
		})
	}
	// 使用
	readFile('data/a.txt').then(res=> {
		console.log(res.toString());
	})*/
	// async调用
	/*async function fn (){
		let f1 = await readFile('data/a.txt');
		let f2 = await readFile('data/b.txt');
		let f3 = await readFile('data/c.txt');
		console.log(f1.toString(),f2.toString(),f3.toString());
	}
	fn();*/
	/*5.只要await后面promise状态变为reject那么整个async函数会中断执行
		如何解决async函数中抛出错误，影响后续代码执行
		try {
			//放置异常报错的代码
		} catch(e) {
		}*/
	async function fn1(){
		try {
			return await Promise.reject('失败了！！fn1');
		} catch(e) {
			console.log(e);
		}
		return await Promise.resolve('成功了！fn1');
		
		
	}
	fn1().then(res=> {
		console.log(res)
	}).catch(err=> {
		console.log(err)
	})

Set数据结构：

// Set数据结构：类似数组但是里面不能有重复的值没有key没有get方法 **存储的是一个数组，初始往里面添加东西是	不行的，必须使用add来进行添加才可以
	let set1 = new Set(['a','b']);
	console.log(set1)
	set1.forEach((item,index) => {//可以使用循环来正常的便利里面的属性
		console.log(item)
		console.log(index)//没有下标
	})
	console.log(set1.add('c'))//通过add给set里面添加元素
	console.log(set1.size)//获取里面有多少元素
	console.log(set1.delete('a'))//通过delete删除里面的元素
	console.log(set1.has('b'))//检查set里面是否有这个值有的话true没有的话是false
	console.log(set1.clear())//清空set里面的所有的值
	console.log(set1)
	// set数组去重
	let arrauuns = [1,2,3,4,5,6,7,8,9,0,9,8,7,6,5,43,2,1];
	let arrayuns1 = [...new Set(arrauuns)]
	console.log(arrayuns1)

Map数据结构：

// Map数据结构 对json功能的增强，key可以使任意类型有set和get方法
	let map1 = new Map();
	map1.set('key','value')//设置一个值用set
	map1.get('key')//获取一个值
	console.log(map1)
	map1.forEach(item =>{
		console.log(item)
	})

Number：

// Number新增内容
	Number.isFinite(000)//判断是不是数字是的话返回true不是的话就是false
	Number.isInteger(0.5)//判断是不是整数是整数就返回true不是的话就是false
	// 安全整数
	Number.isSafelnteger(2**53-1)//包含2**53-1和-(2**53-1)为安全整数为true如果不是2**53-1就是不安全整数为fasle
	Number.MAX_SAFE_INTEGER //最大安全整数
	Number.MIN_SAFE_INTEGER //最小安全整数

Math:

// Match
	Math.trunc(4.99)//截取，只保留整数
	Math.sign(-9)//判断一个数是正数还是负数还是0 负数返回的是-1正数返回的是1，0的时候返回的是0，-0的时候返回的是-0其他值返回NAN
	Math.cbrt()//计算一个数的立方根