ES6二

2020.12.6 22.10

01数组的扩展

let score=[60,70,40,80,90,59,72,48,33];
var n=score.filter(n=>n<60);//过滤值小于60的元素
console.log(n);//[40,59,48,33]

2.删除(es5)
splice(参数1,参数2,参数3)
参数1开始的位置(下标) 参数2删除的个数 参数3插入的元素

let score=[60,70,40,80,90,59,72,48,33];
//从下标为1的元素开始删除(此元素不删除)，删除2个元素，插入3个值为100的元素
score.splice(1,2,100,100,100);
console.log(score);//[60,70,100,100,100,80,90,59,72,48,33]

3.替换(es6)
copyWithin(参数1,参数2,参数3)
参数1：替换开始的位置(下标) 参数2：复制开始的位置 参数3：复制结束的位置 含开始不含结束
替换:用复制的元素替换原来的元素

let score=[60,70,40,80,90,59,72,48,33];
console.log(score);
//从下标为2的元素开始替换，从下标为3的元素开始复制,到下标为7的元素结束
var q=score.copyWithin(2,3,7);
//替换位置:40,复制的元素80,90,59,72
console.log(q);//[60,70,80,90,59,72,72,48,33]
原数组:[60,70,40,80,90,59,72,48,33]
替换后:[60,70,80,90,59,72,72,48,33]

只是替换，复制的元素的数量。复制的如果多余需要替换的。数组不会扩展，只会替换应有的数量
例如复制4,2,3,5 需要将[100,90,80,70]中的90和80替换掉。复制4个，替换2个
替换后的数组:[100,4,2,70]

值可以是负值。从右到左。从-1开始
负值的时候，一定要保证开始的位置，小于结束的位置

//				-7,-6,-5,-4,-3,-2,-1
let score=[60,70,40,80,90,59,72,48,33];
console.log(score);
//从下标为-4的元素开始替换，从下标为-5的元素开始复制,到下标为-1的元素结束
var q=score.copyWithin(-4,-5,-1);
//替换位置:59,复制的元素90,59,72,48
console.log(q);//[60,70,40,80,90,90,59,72,48]
原数组:[60,70,40,80,90,59,72,48,33]
替换后:[60,70,40,80,90,90,59,72,48]

以下写法不规范 一般不建议正负交叉写
score.copyWithin(-4,-1,-5)

02.函数的扩展

函数的参数
1.默认参数

//es6
function add(a,b=5000){
	console.log(`姓名:${a},公积金:${b}`);
}
add('abc');//b不给值就默认5000

//es5
function add(a,b){
// 如果b的值存在，就赋值给b 否则b的值就是5000
	b=b||5000;
	console.log('姓名:'+a+','+'公积金:'+b);
}
add('abc');

2.参数扩展/展开(剩余参数)
arguments获取用户输入的所有实参
arguments是类数组对象

function add(x,y,z){
	console.log(arguemnts);//[1,2,3]
}
add(1,2,3);

剩余参数 ...变量名 用来获取函数的多余实参，只能放置在形参结尾，不能放置开始或者中间。
剩余参数是一个数组

function add(x,y,z,...argu){//argu只是变量名
	console.log(argu);//[4,5,6]
}
add(1,2,3,4,5,6,);

箭头函数
箭头函数 去除function,()和{}之间使用=>

//普通函数
function add(x){
	console.log(x);
}
//箭头函数
let add=(x)=>{console.log(x);}

3种简写:

1.()内只有一个参数可以省略()
普通函数function add(x){ console.log(x); }
箭头函数:let add=x=>{console.log(x);}

2.函数体只有return语句 可以直接省略{}和return，此简写下若只省略{}不省略return会报错,反之则不会
普通函数:function add(x){ return x>10; }
箭头函数:let add=x=>x>10;

3.函数体只有一句普通代码 可以直接省略{}
普通函数:function add(x){ console.log(x>10); }
箭头函数:let add=x=>console.log(x>10);

箭头函数的3个注意点:
1.箭头函数内部，没有arguments，只能使用剩余参数

var fn=(x,y,z,...b)=>{
	console.log(b);//[4,5]
	console.log(arguments);//报错,arguments is not defined
}
fn(1,2,3,4,5);

练习:在箭头函数中，获取所有实参
方法一:

//由于剩余参数argu是一个数组，所以可以用concat连接
let fn=(x,y,z,...argu)=>console.log([x,y,z].concat(argu));
fn(1,2,3,4,5);

方法二:

let fn=(x,y,z,...argu)=>{
	var p=[x,y,z];
	p.push(argu);
	console.log(p);//[,1,2,3,[4,5,6]]
}	
fn(1,2,3,4,5,6);

如果要进行排序输出:

let add=(...argu)=>console.log(argu.sort((a,b)=>a-b));
add(5,4,3,2,1);//[1,2,3,4,5]

2.箭头函数的this
箭头函数中的this指向的是定义的时候所在的对象，而不是使用的时候所在的对象
call、apply、bind不能修改箭头函数中this的指向

var a=()=>{console.log(this)};//window
var stu={
	name:'zs'
}
a.call(stu);//普通函数下this会指向stu
a();

3.箭头函数不可以当做构造函数使用,也就是说，不可以使用new命令，否则会抛出错误。
var Product=(title)=>{ this.title=title; }
var p=new Product('标题');
以上操作会报错

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

03.class类

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

class 类名{
	constructor(){
		放置属性
		//也可以在此放置方法
	}
	放置方法1//(方法之间不加符号,加符号会报错)
	放置方法2
	放置方法...
}

class Product{
	constructor(title,price){
		this.title=title;
		this.price=price;
	}
	buy(){
		console.log(`花费${this.price}购买了${this.title}`);
	}
}
let p=new Product('手机',3999);
p.buy();

方法放置位置的区别:

class Product{
	constructor(title,price){
		this.title=title;
		this.price=price;
		
		/*书写在constructor中的方法，
		每一次实例对象的时候，都会重新生成一个新的方法。(效率偏低)
		针对于每一个对象，执行的方法都是一样的，这个时候就会造成资源浪费(实例对象的方法)*/
		
		/*this.buy=function(){
			console.log(`花费${this.price}购买了${this.title}`);
		}*/
	}
	//放置在此处的方法，相当于放置在了Product.prototype内部(原型的方法)
	buy(){
		console.log(`花费${this.price}购买了${this.title}`);
	}
}
let p=new Product('手机',3999);
let m=new Product('口红',399);
p.buy();
console.log(p.buy==m.buy);//false,执行方法一样，存储地址不一样

放在constructor里的都是自有方法,和constructor同级的都是继承来的,如👆的buy方法
通过hasOwnProperty可以判断是自有还是继承

console.log(p.hasOwnProperty('title'));//true
console.log(p.hasOwnProperty('buy'));//false

如果是需要每个对象都有的方法/属性,如商品的颜色等,放在constructor中
共用的方法,如购买商品,加入购物车,放在和constructor同级的地方

判断某个实例对象是否属于某个构造函数/类
实例对象 instanceof 构造函数/类如 p instanceof Product

console.log(p.constructor==Product);//实例对象通过constructor和构造函数相关联
console.log(p.__proto__==Product.prototype);//实例对象的__proto__指向构造函数的prototype
console.log(Product.prototype.isPrototypeOf(p));//构造函数的prototype存在于实例对象的原型链中
console.log(Object.prototype.isPrototypeOf(p));//最顶层obj的prototype存在于实例对象的原型链中

蓝线是原型链

原型和原型链图示参考自:链接

2020.12.7 02:55