es6整理

es6

思维导图

let和const

• let是块级变量；
• 不可以重复声明，会报错；
• 没有变量提升，会报错；
• 存在暂时性死区，即声明变量时，区块中对这些声明变量形成封闭作用域，凡是在声明之前使用变量就会报错；
• const在与let相同基础上要注意 const声明的变量不能修改，否则会报错

// stu是对象，在内存中以地址的形式存储，
const stu={
	name:'zs'
}
// 修改了数据。所以地址没有变化。不会报错
stu.name='ls';
// 重新赋值会报错。
stu={
	name:'ls'
}

模板字符串

模板字符串作为函数参数参数存在。会执行函数。自动解析参数 把所有常量拼接成一个数组。变量依次拼接到数组后面

var pro={
	title:'华为手机',
	price:4999
}
product.innerHTML+="<tr><td>"+pro.title+"</td><td>"+pro.price+"</td></tr>";
// 模板字符串 在变量和常量拼接的时候使用   整个字符串使用`${变量}`
product.innerHTML+=`<tr><td>${pro.title}</td><td>${pro.price}</td></tr>`;

解构

解构：es6允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这称为解构

// 数组的解构,按照数组顺序依次赋值。如果变量多余，相当于声明不赋值。如果数据多余，对变量没有影响
var [a,b,c,d]=[10,100,'h',12,3,4,4,5];
console.log(a,b,c,d);
// 快速交换值
let m=12;
let n='my';
[n,m]=[m,n];
console.log(m,n);
// 对象的解构赋值 使用的是{}
// 对象的解构与数组的解构有一个重要的不同，数组的元素是按次序排列的
// 数组解构中，变量的值由所处的位置决定。对象的属性没有次序，变量必须与属性同名才可以，才可以取到正确的值。
var stu={name:'zs',age:12};
// hobby相当于声明了没有赋值。
let {name,age,hobby}=stu;
console.log(name,age,hobby);
// 字符串的解构。按照字符串的顺序依次赋值和数组解构类似
let [x,y,z]='hello';
console.log(x,y,z);
// 类似数组的对象都有一个length属性，可以对该属性进行解构赋值。
let {length:len}='zsh';
console.log(len);
// 函数的解构赋值，类似于数组的解构解构
function add([a,b]){
	console.log(a,b);
	console.log(parseInt(a)+parseInt(b))
}
add([3,4]);
// 相当于把字符串3赋值给了a 字符串4赋值给了b
add('34');

数组扩展

var arr=new Array(10);// 长度为10的数组。
// Array.of()对new Array()的扩展 。不论输入什么，都代表的是数组元素。
arr=Array.of(10);
// Array.from()把类数组转化为数组
var btns=document.getElementsByTagName('button');
console.log(btns);
console.log(btns instanceof Array);
btns=Array.from(btns);
// foreach不能用来遍历类数组，能遍历数组
btns.forEach(function(item,index,arr){
	console.log(arr);
})
// 类数组 一定要严格按照格式来写 属性名是0 1 2 并且一定要有length。如果转化为了数组，最终的长度由length的值
var arr1={
	0:'z',
	1:'s',
	2:'h',
	length:5
}
arr1=Array.from(arr1);
arr1.forEach(function(item,index,arr){
	console.log(item);
})
var score=[98,60,48,56];
// 数组.find(function(n代表数组元素){条件})得到的结果是第一个符合条件的数组元素的值。从左到右寻找 如果找不到结果是undefined。
// var m=score.find(function(n){return n<0});
// console.log(m);
// 数组.findIndex(function(n代表数组元素){条件})得到的结果是第一个符合条件的数组元素的下标。从左到右寻找 如果找不到结果是-1。
var m=score.findIndex(function(n){return n>60});
console.log(m);

let score=[60,70,40,80,90,98,89,85];
// 过滤所有符合条件的数据  数组.filter(function(){条件})
var n=score.filter(function(n){
	return n>80;
});
console.log(n);
// splice(参数1,参数2,参数3) 参数1开始的位置 参数2删除的个数 参数3插入的元素
score.splice(1,2,100,100,100);
console.log(score);
// copyWithin(参数1,参数2,参数3)参数1：替换开始的位置 参数2：复制开始的位置 参数3：复制结束的位置 含开始不含结束
// 用复制的元素替换原来的元素
// 只是替换，复制的元素的数量。复制的如果多余需要替换的。数组不会扩展，只会替换应有的数量
score.copyWithin(6,3,7);
console.log(score);
// 值可以是负值。从右到左。从-1开始
// 负值的时候，一定要保证开始的位置，小于结束的位置
score.copyWithin(-4,-5,-1);
// 以下写法不规范 一般不建议正负交叉写
// score.copyWithin(-4,-1,-5);

函数扩展

// 剩余参数 ...变量名。用来获取函数的多余实参，只能放置在形参结尾，不能放置开始或者中间。
function mul(x,y,z,...a){
	// arguments获取用户输入的所有实参 类数组
	console.log(arguments);
	// 剩余参数是一个数组
	console.log(a);
}
mul(1,2,3,4,5,6);
// 如果b的值存在，就赋值给b 否则b的值就是5000
b=b||5000;
// 函数参数的默认值，如果b有实参，默认就是实参的值。如果b没有实参，默认值5000
function fn(a,b=5000){
	console.log(a,b)
}
//如果函数体只有return语句 可以直接省略{}和return
var fn=(x,y)=>x+y;
console.log(fn(1,2));
//如果函数体，只有一句普通代码 可以直接省略{}
var fn=(x,y)=>console.log(x+y);
fn(2,3);
// 箭头函数内部，没有arguments，只能使用剩余参数
var fn=(x,y,z,...b)=>{
console.log(b.unshift(x,y,z));
console.log(b);
}
fn(1,2,3,4,5);

总结：箭头函数，使用注意点

• 箭头函数中的this指向的是定义的时候所在的对象，而不是使用的时候所在的对象
• 箭头函数不可以当做构造函数使用,也就是说，不可以使用new命令，否则会抛出错误。
• 箭头函数内部，没有arguments，只能使用剩余参数

es6类

es6类可以说是构造函数加原型的复合。
es6类的概念，只是"语法糖"。es6实现的关于类的大多数功能都可以通过es5方法实现。
类就是封装事物

class 类名{
	constructor(){
		放置属性
	}
}

例如

class Product{
	constructor(title,price,color){
		this.color=color;
		this.title=title;
		// 书写在constructor中的方法，每一次实例对象的时候，都会重新生成一个新的方法。针对于每一个对象，执行的方法都是一样的，这个时候就会造成资源浪费
		// this.buy=function(){
		// 	console.log('购买了商品')
		// }
	}
	// 放置在此处的方法，相当于放置在了Product.prototype内部
	buy(){
		console.log('购买了商品'+this.price);
	}
	// 方法与方法之间不需要加符号
	joinCar(){
		console.log('加入购物车成功');
	}
}

es6继承

class Animal{
	constructor(name,color,price){
		this.name=name;
		this.color=color;
		this.price=price
	}
	eat(){
		console.log(this.name+" eat apple")
	}
}
//Cat继承自Animal
//es6中通过extend关键字实现继承。比在es5中通过原型链实现继承，要清晰和方便。更偏向传统编程语言
class Cat extends Animal{
	constructor(name,color,price,type){
		//super继承来自父级的属性(相当于把父级的属性一一复制过来)
		//如果constructor没有该属性传递不过来，直接书写属性会报错
		super(name,color,price)
		this.type=type
	}
}
//把实参的值，赋值给了constructor
var c1=new Cat('jack','white',2000,'Persian cat')
class BSM extends Cat{
	constructor(){
		//在子类的constructor中必须要有super关键字如果不写会报错
		//子类的this关键字根据super方法创建
		//子类实例对象的构建，是基于父类实例进行加工。只有super方法才可以返回父类实例
		super()
	}
}
var b1=new BSM()
console.log(Animal.prototype.isPrototypeOf(c1));
console.log(Animal.prototype.isPrototypeOf(b1));
console.log(Cat.prototype.isPrototypeOf(b1));

get和set

class Circle{
	constructor(){
		this.r=10
	}
	//get方法 获取值的时候会自动调用 一定要加返回值
	get acr(){
		return Math.PI*this.r*this.r
	}
	//set方法 设置值的时候会自动调用 实参是通过等于号赋值
	set acr(value){
		this.r=value
	}
}
var c=new Circle()
console.log(c.acr)
c.acr=23
console.log(c.acr)

私有方法（不常用）

class Cat{
	eat(){
		this._food()
	}
	//在es6提案，提到了如果方法名以_开始，默认只能在类中调用，不能被继承或者被实例对象使用，但是目前没什么用私有方法
	_food(){
		console.log('fruit')
	}
}
var c=new Cat()
c._food()

静态方法和静态属性

//Math.random()   Math.PI
//静态方法        静态属性
class Cat{
	//类中的方法前面如果加了static关键字，该方法就是静态方法
	//静态方法只能通过类名直接调用
	static eat(){
		console.log('静态方法，需要通过类直接调用')
	}
}
//静态属性指的是类本身有的属性，通过类名直接调用，不需要实例化对象调用
Cat.price=111;
var c=new Cat();
//c.eat(); 会报错 Cat是静态方法
Cat.eat();
//静态方法可以被子类继承
class Bsm extends Cat{
	constructor(){
		spuer()
	}
}
Bsm.eat()
console.log(Bsm.price)