无所事事的样子开始了摸鱼的一天
ES2015 还有啥呢
Object.assign()
// 复制对象呢,一个对象去做饭,一个对象去收拾屋,再来个扇风的,啧啧
Object.is()
// 判断两个值是否相等
ES2015 proxy代理来了
// 代理能干啥呢,当然是代理你了,没错就是你的经纪人,出道吧年轻人
Object.defineProeperty // 没有proxy的时候也有这个功能哦
// 代理让你感觉没有安全感了吧,如果只是代码好像没有问题的亚子(ps:不太聪明的亚子)
// 可以监听到各种东西哦,只是增删改查,不要总开车86还没下山呢年轻人
const person = {
name:'mdzz',
age:18
};
const personProxy = new Proxy(person,{
get(target,property){
// property 被访问的数据名
// target 代理的数据
return property in target ? target[property] : '默认值';
},
set(target,property,value){
// 校验一手可以 挣钱少的活咱不干
if(value<9999){
throw new TypeErrpr(`就给${value},太少了,咱受不了那委屈`);
}
target[property]=value;
}
});
console.log(personProxy.name); // mdzz
console.log(personProxy.xxx); // 默认值
ES2015 为啥出现了proxy呢
// 当然是因为这个经纪人厉害了,经纪人厉害了你才能挣的多点啊
// Object.defineProeperty只能监视属性的读写,也就是个实习生水平还待靠自己
const person = {
name:'mdzz',
age:18
};
const personProxy = new Proxy(person,{
deleteProperty(target,property){
// property 被访问的数据名
// target 代理的数据
delete target[property];
}
});
delete personProxy.name;
console.log(person);
属性如下图:
// proxy还能监视数组呢,就很全能
// Object.defineProeperty是用从写数组的方式监视的,果然只是实习生水平
const list = [];
const listProxy = new Proxy(list,{
set(target,property,value){
consoel.log('set',property,value);
target[property]=value;
return true; // 设置成功
}
});
listProxy.push(100);
// proxy是以非侵入的方式进行监听的,就是这个没写在对象内
ES2015 Reflect是个静态类
// 不能new哦
// 底层封装了有14个方法,有一个废弃了的样子
// 统一的提供了一套基于操作对象的API,就别自己瞎造轮子了
// 统一了就很优秀了,强迫症表示,我好了
const obj = {
name:'mdzz',
age:18
};
const objProxy = new Proxy(obj,{
get(target,property){
// property 被访问的数据名
// target 代理的数据
return Reflect.get(target,property);
}
});
console.log(obj.name);
// 乱的不行啊,鲁迅曾经说过,统一才是优秀的。(我康师傅不服)
console.log('name' in obj);
console.log(delete obj['age']);
console.log(Object.keys[obj]);
// 统一一手,整齐划一,踢着正步朝主席台走来的是……
console.log(Reflect.has(obj,'name'));
console.log(Reflect deleteProperty(obj,'age'));
console.log(Reflect.ownKeys(obj));
// 方法挺多就不列了,摸鱼的人怎么可能勤勉呢,怠惰deisi
// 就上面那图里差不多的样子
ES2015 Promis
//先知道知道吧,第三天在看吧,这玩意待写好多字呢
ES2015 Class
// 这玩意可不是css的class啊,你要说css的,我上去就一嘴巴子
// 之前用的原型 prototype 属性附加属性实现
// 现在用class 这玩意 java的 都会
// 有了这个,哼哼,来,让我们new几个对象,一个去扫地,一个去做饭,再来个扇风的,啧啧 完美
class girlFriend {
constructor(name){
this.name=name;
}
goCook(){
console.log(`${this.name}给朕做饭去`);
}
static create(name){
return new girlFriend(name);
}
}
const mdzz = girlFriend.create('mdzz');
// class都有了能没继承么,继承朕的蚂蚁花呗吧
class computer exxtends girlFriend{
constructor(name,people){
super(name);
this.people = people;
}
areYouPeople(){
super.goCook();
console.log(`你还是人么?${this.people}`);
}
}
const test = new computer('电脑','不是人');
// 嘴角流下了伤心的泪水
ES2015 Set数据结构
//这玩意好,去重贼好用,数据不能重复哦~
const numberList = new Set();
numberList.add(1).add(2).add(2); // Set{1,2}
for(let item of numberList){ // 遍历一手
console.log(item);;
}
numberList.has(11); // false
numberList.size; // 2
numberList.delete(2); // Set{1}
numberList.clear(); // 没了
// 数组去重demo
const arr=[1,1,1,2,3,4,8,8,8,9,6,4,5];
const result = [...new Set(arr)]; // 简单滴很
console.log(result);
ES2015 Map数据结构
// 类似对象,但是对象存复杂结构就难了
// key值如果是对象的话,对象的对象属性就有点问题了[object Object]这属性名,俩字优秀了
// 用Map就可以了呢
const m = new Map();
const zz = {name:'zz'};
m.set(zz,'mdzz');
console.log(m); // Map{{name:'zz'}=>'mdzz'}
// has() clear() delete() 这些都有
console.log(m.get(zz)); // 'mdzz'
m.forEach(value,key)=>{
console.log('key:'+key);
console.log('value:'+value);
}
// 就是可以使用任意类型的东西做key
ES2015 Symbol
// 好几个开发命名总会有机会重名的,加个前缀吧,总感觉别扭呢
// Symbol来了,每个Symbol都是独一无二的属性,就和我一样是人类但是每个人都不是同一个人呢,不一样的烟火呢
const s = Symbol();
console.log(s);
console.log(Symbol()===Symbol()); // false
// 可以弄出私有属性呢 类似private的感觉~
// Symbol('asd')===Symbol('asd') true
// 里面参数相同就可以相等哦,毕竟都指向你这个同一束烟火呢
// 参数会转为字符串格式哦 ~
// 内置了一些常量属性
// iterator hasInstance
// Symbol作为属性名称,遍历数组是查不到的哦,序列化对象也会被隐藏,就保密性很强的亚子
ES2015 for...of
// '全能'遍历器来了
// for...of 随时可以使用 break 跳出终止循环
// forEach就不能
// 数组的 some() every() 可以return true/false终止遍历
// 它可以遍历Set数据、Map数据
//Set和数组差不多的亚子,就不写demo了
const m = new Map();
m.set('name','mdzz');
m.set('age','12');
for(const [key,value] of m){
console.log(key,value);
}
// 遍历对象的时候可待看看咯,需要对象实现iterable接口哦
// 且看我下面道来~~
ES2015 可迭代接口
// iterable接口
const obj = {
[Symbol.iterator]:function(){
let index= 0;
const self = this;
return {
next: function(){
return {
value:self.store[index],
done:index++>=self.store.length,
}
}
}
}
}
ES2015 迭代器模式
const todos = {
life: ['吃饭', '睡觉', '打豆豆'],
learn: ['语文', '数学', '外语'],
work: ['喝茶'],
[Symbol.iterator]: function () {
const all = [...this.life, ...this.learn, ...this.work];
let index= 0;
return {
next: function(){
return {
value:all[index],
done:index++>=self.store.length,
}
}
}
}
}
// 对外提供统一的遍历方式了,你不用管我对象内有多少东西,都可以遍历出来
// 可以多人合作写代码的样子,或者是给别人的接口啥的
for (const item of todos) {
console.log(item);
}
ES2015 生成器
// 减少回调嵌套过深的解决方案(ps:我觉得就是让代码好阅读了,我们只是bug的搬运工)
function * foo(){
console.log('test');
return 101;
}
const result = foo();
console.log(result.next()); // 返回了个对象实现了iterator接口的亚子
// yield 相比 return 不算是终止函数的运行,而是运行完本行后返回值后暂停,下次调用从此处开始运行。
// 使用 Generator 函数实现 iterator 方法
const todos = {
life: ['吃饭', '睡觉', '打豆豆'],
learn: ['语文', '数学', '外语'],
work: ['喝茶'],
[Symbol.iterator]: function * () {
const all = [...this.life, ...this.learn, ...this.work];
for (const item of all) {
yield item;
}
}
}
for (const item of todos) {
console.log(item);
}
// 比上面的少了点啥吧,看起来好懂多了
—————————————————————————————————————————————————————— 我这废柴