展开对ES6学习的第三天

canvas绘图之半圆

说明：canvas绘图的画布大小由自身的属性去规划（width和heigth，可以不用带单位），一般绘图用2d画笔去绘制，由beginPath()开始至closePath()结束，由stroke()描线

案例演示

	let html = `<canvas id="myCanvas" width="500" height="500"></canvas>`
	document.body.innerHTML += html
	//获取画布
	const canvas = document.getElementById("myCanvas")
	//创建画笔
	let ctx = canvas.getContext("2d")
	//开始画路径
	ctx.beginPath()
	//画圆的方法，其中五（六）个参数分别代表圆心的坐标，半径，画圆的起始角度，画圆的终止角度，画圆的顺逆时针方法（可选的布尔值：false逆时针，true顺时针）
	ctx.arc(150,150,50,0,Math.PI,false)
	ctx.closePath()
	ctx.stroke()

双飞翼布局

说明：使用flex布局可以很简单的完成双飞翼即：两端固定，中间自适应

代码演示

	.box{
		display: flex;
		justify-content: space-between;
	}
	.item{
		width: 100px;
		height: 100px;
		background-color: #00CCFF; 
	}
	.center{
		width: 100%;
		height: 100px;
		background-color: pink;
	}

	<div class='box'>
		<div class='item'></div>
		<div class='center'></div>
		<div class='item'></div>
	</div>

Set集合

说明：ES6提供的一种数据结构，类似于数组，但是里面的值是唯一的
特点：1、Set本身是一个构造函数，用于生成Set的数据结构
2、Set可以接受一个数组作为参数

	//创建一个Set对象
	const arr = new Set([1,2,3,4,5])
	console.log(arr)
	//添加新的成员用add()方法，返回Set本身
	let arr2 = arr.add(12).add(22).add(33)
	console.log(arr2)
	//删除某个成员用delet()方法,返回布尔值，表示是否删除成功
	let arr3 = arr.delete(3)
	console.log(arr3)
	//检测某个值是否属于Set用has()方法，返回一个布尔值，表示是否存在
	let arr4 = arr.has(3)
	cosnsole.log(arr4)
	//若要取出Set的每一项，可以用forEach方法取
	arr.forEach(item => console.log(item))

数组去重

说明：可以简单的使用Set方法一次性就去除所有重复的成员

	let arr = [1,21,31,41,22,4,41,12,,66]
	//添入Set集合中，去重
	let newArr = new Set([arr])
	//还原数组
	let arr2 = [...newArr]
	console.log(arr2)

对象语法糖

说明：在对象的大括号内，可以直接写变量和函数，作为对象的属性和方法

案例演示

	let name = '刘德华'
	let sing = function(){
		console.log('无时无刻都记住掌声 响遍天')
	}
	const star = {
		name,
		sing,
		love(){
			console.log(666)
		}
	}
	console.log(star)
	star.sing()
	star.love()

函数的补充

说明：ES6 允许函数参数给初始值，一般放在最后面；函数参数的初始值在调用函数时若是没有传参就会使用初始值，若是传参那就是传入的参数顶替初始值

	function fn(a,b,c = 6){
		console.log(a,b,c)
	}
	fn(1,2,44)//1,2,44
	//ES6引入了rest参数，用于获取实参，代替arguments，但是rest参数必须放在最后一个
	//原来的
	function fn2(){
		console.log(arguments)	
	}
	fn2(1,2,3,4)
	//现在的
	function fn3(...args){
		console.log(args)
	}
	fn3('a','b','c','d')
	function fn4(a,b,...args){
		console.log(a,b,args)
	}
	fn4('zs','lisi',22,33,66)// 'zs','lisi',[22,33,66]
	//传入一个对象作为参数，其中默认一项有初始值
	function address({
			host:'127.0.0.1',
			uname,
			age,
			port
		}){
		console.log(host)
		console.log(uname)
		console.log(age)
		console.log(port)
	}
	address({
		host: '3366.com',
		uname: 'xiaoluoke',
		age: 8,
		port: 3306
	})//3366.com xiaoluoke 8 3306 

class

说明：ES6提供了一种更接近传统语言的一种写法，引入class（类）这个概念，作为对象的一个模板，通过class关键字，可以定义类
好处：class写法让对象原型更加清晰，更加简洁，更像面向对象编程的语法

案例演示

	//不使用class关键字的创建一个构造函数
	function User(name,age){
		this.name = name
		this.age = age
	}
	User.prototype.showName = function(){
		console.log(this.name)
	}
	let zs = new User('zs',22)
	zs.showName()//'zs'
	//再次创建一个函数继承User的方法和属性
	function NewUser(name,age,level){
		User.call(this,name,age)
		this.level = level
	}
	//将创建出来的函数原型指向User并继承它的方法
	NewUser.prototype = new User()
	//再将构造原型指回去
	NewUser.prototype.constructor = NewUser
	NewUser.prorotype.showLevel = function(){
		console.log(this.level)
	}
	let lisi = new NewUser('lisi',25,99)
	console.log(lisi)
	//使用class方法创建一个用户类
	//constructor 定义构造函数的初始化
	class P_user{
		constructor(name,age){
			this.name = name
			this.age = age
		}
		showName(){
			console.log(this.name)
		}
	}
	let xm = new P_user('xiaoming',6)
	console.log(xm)
	xm.showName()//'xiaoming'
	
	//extends 继承
	//super 超类 父类，也可以指作借用父类的属性
	class N_newuser extends P_user{
		constructor(name,age,level){
			super(name,age)
			this.level = level
		}
		showLevel(){
			console.log(this.level)
		}
	}
	let tan = new N_newuser('tan',22,99)
	console.log(tan)
	tan.showName()//'tan'

静态成员

说明：在一个属性或方法前使用static修饰的class成员就可称为静态成员
特点：静态成员只允许创建它的函数可以使用，且只会被创建一次
注意：构造函数不能是静态函数

代码演示

	//创建一个构造函数
	function Phone(name,age){
		this.name = name
		this.age = age
	}
	//为构造函数添加静态成员
	Phone.color = 'pink'
	//为构造函数添加公有属性
	Phone.prototype.memory = 256
	//创建一个实例对象
	let mine = new Phone('apple',6)
	console.log(mine.memory)//256
	//原型上的属性和方法，构造函数自己访问不到
	console.log(Phone.memory)//undefined
	//添加为构造函数静态属性或方法
	Phone.size = '5.5inch'
	Phone.say = () =>{
		console.log('这手机还不错')
	}
	//创建一个实例
	let sanxin = new Phone('apple',3)
	console.log(sanxin.size)//undefined,构造函数上的静态成员不会被继承
	//用class类去定义函数内的静态成员用static
	class U_phone {
		static name = '手机'
		static size = 6
		static say(){
			console.log(666)
		}
	}
	//创建一个class的实例
	let M_phone = new U_phone()
	console.log(M_phone.size)//undefined
	M_phone.say()//报错
	console.log(U_phone.size)//6
	U_phone.say()//666

父类属性重写

说明：在class里由父级继承来的方法可以重写，也可视为在class里方法采用就近原则的使用

案例演示

	class Phone{
		constructor(name,age){
			this.name = name
			this.age = age
		}
		call(){
			console.log('小熊维尼')
		}
	}
	//继承Phone的方法和属性
	class M_phone extends Phone{
		constructor(name,age,size,price){
			super(name,age)
			this.size = size
			this.price = price
		}
		play(){
			console.log('维尼和跳跳虎是好朋友')
		}
		call(){
			console.log('跳跳虎')
		}
	}
	//创建一个M_phone实例化的对象
	let fruit = new M_phone('banner',5999,'yellow',7)
	console.log(fruit)
	fruit.call()//'跳跳虎'

Symbol

说明：Symbol是ES6引入的一种新的数据类型，表示独一无二的值，属于js的第七种数据类型，类似于字符串的
特点：Symbol的值是唯一的，解决命名冲突的问题，可以被转化为布尔值但不可转为number和string的类型，不能参与运算
注意：由Symbol定义的对象属性不能用for in 循环，只能用Reflect.ownKeys来获取对象的键名

案例演示

	//创建Symbol的两种方法及其区别
	//方法一：直接创建
	let s = Symbol()
	console.log(s)//Symbol()
	console.log(Symbol() === Symbol())//false
	//方法二：Symbol()里的括号里的值可以传入变量或字符串,最终会转为字符串去存入，所有不可以传入未定义的值或Symbol()本身
	let s2 = Symbol(123)
	console.log(s2)//Symbol(123)
	//共享符号：只有当共享符号里的参数相同时才会相等，且共享符号里的参数会先隐式转化为字符串再对比是否相等
	let s3 = Symbol.for(NaN)
	let s4 = Symbol.for(NaN)
	console.log(s3 === s4)//true
	//创建两个对象，为其中一个对象添加键名为Symbol()的方法
	let game = {
		left: 'left',
		right: 'right'
		up: '上'
	}
	let methods = {
		up: Symbol(),
		down: Symbol()
	}
	game[methods.up] = 'Symbol版的上'
	game[methods.down] = '下'
	console.log(game)
	console.log(game[methods.up])//'Symbol版的上'
	console.log(game[methods.down])//'下'