1.Proxy代理
// 原定人
var person={
name:'喜羊羊',
age:16,
}
// 代理人
var per=new Proxy(person,{
// obj参数表示所要拦截的目标对象
// key定制拦截行为
get(obj,key){
return obj[key]//获取
},
set(obj,key,value){
//修改值
obj[key]=value
},
has(obj,key){
if(obj[key]==undefined){
return false
}
else{
return true
}
}
})
per.test='灰太狼'
console.log(per.name);
console.log(per.test);
// ownKeys方法 拦截过滤Object.keys()对对象的属性遍历
var per=new Proxy(person,{
ownKeys(obj){
return['name']
}
})
console.log(Object.keys(person));
console.log(Object.keys(per));
// has方法 拦截key in object的操作,结果会返回一个布尔值
console.log('name' in per);
// apply方法 对象类型的变量可以被代理,函数也可以被代理
let fn=()=>{
alert('我是投资人')
}
let fnlest=new Proxy(fn,{
apply(){
alert('我承办投资')
}
})
// fn()
// fnlest()
// proxy.revocable方法 取消代理
let leave=Proxy.revocable(fn,fnlest)
fnlest()
2.遍历器
原理: 原理;当可遍历对象被for...of遍历的时候,[Symbol.iterator]()就会被调用,返回一个iterator对象。其中还有一个很重要的方法:next( );
let arr = [1, 2, 3, 4]
//调用数组symbol.iterator方法
let iter = arr[Symbol.iterator]()
console.log(iter.next());
console.log(iter.next());
console.log(iter.next());
console.log(iter.next());
console.log(iter.next());
// {value: 1, done: false} value内容 done状态(true,false)
// for of 对象 加自定义遍历器
let obj = {
name: "张三",
age: 19,
say(){
console.log(111);
}
}
// console.log([obj]);
// 给对象添加迭代器
obj[Symbol.iterator] = function () {
let index = 0;
let keys = Object.keys(this)
return {
next: () => {
let value = {
key: keys[index],
value: this[keys[index]]
}
let done = index === keys.length;
index++
return {
value,
done
}
}
}
}
for (let item of obj) {
console.log(item);
}
3.生成器
function* Hello(name) {
yield `hello ${name}`;
yield `how are you`;
yield `bye`;
}
var test = Hello('web')
console.log(test);
console.log(test.next()); //hello web
// console.log(test.next());
console.log(test.next(test.next()));//bye 下一个
// 关键字‘yield*
//声明Generator函数:gen1
function* gen1() {
yield "gen1 start";
yield "gen1 end";
}
//声明Generator函数:gen2
function* gen2() {
yield "gen2 start";
yield "gen2 end";
}
//声明Generator函数:start
function* start() {
yield "start";
yield* gen1();
yield* gen2();
yield "end";
}
//调用start函数
var ite = start();
//创建一个生成器
console.log(ite.next());
//{value: "start", done: false}
console.log(ite.next());
//{value: "gen1 start", done: false}
console.log(ite.next());
// //{value: "gen1 end", done: false}
// ite.next();
// //{value: "gen2 start", done: false}
// ite.next();
// //{value: "gen2 end", done: false}
// ite.next();
//{value: "end", done: false}
4.for of
可遍历的对象包括数组,字符串,set和map结构等具有iterator 接口的数据结构。
// for...in也可遍历数组
var arr = [1, 2, 3]
// var Arr=[]
// for(var key in arr){
// Arr[key]=arr[key]
// }
// console.log(Arr);
for (var key of arr) {
if (key == 2) {
continue;
}
console.log(key);
}
// keys()得到数组中数字类型索引
for (let index of arr.keys()) {
console.log(index);
}
// 遍历字符串
let str = 'web前端'
for (let strlist of str) {
console.log(strlist);
}
// 遍历dom元素
var li = document.querySelectorAll('li')
for (let lilist of li) {
console.log(lilist);
}
// for of不能遍历对象 如遍历需加遍历器
5.类的使用
// 声明类 大写
class Animal{
// 构造函数存在名字
style(color){
this.color=color
}
say(){
console.log('叫');
}
}
// 实例化对象
var mydog=new Animal('white')
console.log(mydog.color);
mydog.say()