河南省住房城乡建设门户网站,it外包公司好不好,永久免费的网站服务器有哪些平台,网站开发500011-Iterator迭代器 打印出的是里面的内容#xff0c;如果是for in打印出来的是索引#xff0c;of不能遍历对象Symbol.iterator是js内置的#xff0c;可以访问直接对象arr[Symbol.iterator]#xff0c;()调用对象非线性一般不能迭代 后两个是伪数组#xff0c;但是是真迭…11-Iterator迭代器 打印出的是里面的内容如果是for in打印出来的是索引of不能遍历对象Symbol.iterator是js内置的可以访问直接对象arr[Symbol.iterator]()调用对象非线性一般不能迭代 后两个是伪数组但是是真迭代器接口 ...解构赋值...展开运算符默认会调用内置迭代器自动转换为数组形式12-set结构
类似于数组但成员的值都是唯一的没有重复与数组不同的是set没有索引 let s1new Set([1,2,3,4,2,1])console.log(s1);console.log([...s1]);//...展开运算符默认会调用内置迭代器自动转换为数组形式console.log(Array.from(s1));//将类似于数组的内容转化为真数组set结构键名和键值相同放进一个数组[11 ,11][22,22][33,33]for(let i of s2.entries()){console.log(i);}set结构没有索引只有一个值因此结果是11 11;22 22;33 33s2.forEach((item,index){console.log(item,index);})
// 数组也可以用entries// let arr[aa,bb,cc]// for(let i of arr.entries()){// console.log(i);//打印出来是索引和值组成的数组// }let arr[aa,bb,cc]for(let [index,item] of arr.entries()){console.log([index,item]);}//[0,11][1,22][2,33]面试题给一个数组去重
思路把数组里面的item都转换为字符串因为set无法区分对象再送到set里面进行判断有没有 arr. filter()方法里面的函数返回false会清除该数据true会保留 let list[1,2,2,kerwin,kerwin,[1,2],[3,4],[1,2],
{name:kerwin},{age:100},{name:kerwin},undefined,undefined];function uni(arr){let resnew Set();return arr.filter(item{let idJSON.stringify(item);if(res.has(id)){return false;}else{res.add(id);return true;}})}console.log(uni(list));13-Map结构
类似于对象,也是键值对的集合,但是“键”的范围不限于字符串,各种类型的值(包括对象)都可以当作键。 内置Iterator迭代器对象用for of遍历比普通对象便利 let o{a:1}let m2new Map();m2.set(name,kerwin);m2.set(age,100);m2.set(o,大连);console.log(m2);for(let i of m2){console.log(i);}console.log([...m2]);//里面得到的是数组形式// set get has delete size clearconsole.log(m1.get({a:1}));//两个对象地址不一样,undefined拿不到m2里面的值console.log(m2.get(o));//大连keys() values() entries() 返回的都是一个迭代器 用for of遍历foreachfor(let i of m1.values()){console.log(i);}for(let i of m1.entries()){console.log(i);}for(let [index,item] of m1.entries()){console.log([index,item]);}for(let [index,item] of m1){console.log([index,item]);}console.log();m1.forEach((item,index){console.log(item,index);})14-Proxy代理
Proxy的作用是在对象和和对象的属性值之间设置一个代理,获取或设置该对象的值,以及实例化等多种操作,都会被拦截住,经过这一层我们可以统一处理,我们可以认为它就是”代理器” let snew Set();// 只能修改代理proxy才能修改s// 代理拥有代理对象的所有东西let proxynew Proxy(s,{// 方法内部用到了thisthis应该指向实例化对象但用了proxy代理后指向了proxy// 因此报错需要修改this指向(也就是set里找自带方法才能去调用add()什么的)get(target,key){let valuetarget[key]// 判断value是不是一个方法instanceof用于判断左边的对象是不是右边的类的实例if(value instanceof Function){// 用于修正的方法call apply bind前两个在修正的时候就手就调用了而bind不会// call() apply() bind()括号里填修正的指针指向谁return value.bind(target);// target就是Set对象因此填写target}// get必须要返回东西return value},set(target,key,value){console.log(set,target,key,value);//{},name,kerwinif(keydate){box.innerHTMLvalue;}target[key]value;}})proxy本质上属于元编程非破坏性数据劫持在原对象基础上进行了功能的衍生而又不影响对象
15-Reflect
Reflect可以用于获取目标对象的行为,它与Object类似,但是更易读,为操作对象提供了一种更优雅的方式。它的方法与Proxy是对应的。
1.代替object的某些方法 2.修改某些object的方法返回结果 3.命令式变为函数行为 getset方法
let obj {name:kerwin}Reflect.set(obj,age,100)Reflect.get(obj,name)4.配合proxy使用
let snew Set();let proxynew Proxy(s,{get(target,key){// let valuetarget[key]let valueReflect.get(target,key)// 判断value是不是一个方法instanceof用于判断左边的对象是不是右边的类的实例if(value instanceof Function){// 用于修正的方法call apply bind前两个在修正的时候就手就调用了而bind不会// call() apply() bind()括号里填修正的指针指向谁return value.bind(target);// target就是Set对象因此填写target}// get必须要返回东西return value},set(target,key,value){// Reflect.set(target,key,value)Reflect.set(...arguments)//如果是一个数组用...展开传进去}})16-Promise对象
promise是异步编程的一种解决方案比传统的解决方案回调函数更合理和更强大。
1.使用 // 执行器函数let pronew Promise(function(resolve,reject){setTimeout((){// resolve(1000)reject(no 1111)},1000)})// pro.then((){// // 成功// console.log(奖金);// },(){// // 失败// console.log(没有);// })pro.then((res){// 成功的函数console.log(奖金,res);}).catch((err){// 失败的函数// 捕获错误console.log(没有,err);})2.Promise对象的状态
Promise对象通过自身的状态,来控制异步操作。Promise实例具有三种状态 异步操作未完成(pending) 异步操作成功(fulfilled) 异步操作失败(rejected)这三种的状态的变化途径只有两种。 从“未完成”到“成功” 从“未完成”到“失败”一旦状态发生变化,就不会再有新的状态变化。这也是Promise这个名字的由来,它的英语意思是“承诺”,一旦承诺成效,就不得再改变了。这也意味着Promise实例的状态变化只可能发生一次。 因此,Promise的最终结果只有两种 异步操作成功,Promise实例传回一个值(value),状态变为fulfi1led。 异步操作失败,Promise实例拋出一个错误(error),状态变为rejected。 3. .then.then链式调用 看第一个.then返回的结果如果是非promise对象会自动转换为fulfilled对象。 如果是根据这个新的promise对象决定下一步是resolve执行then还是reject执行catch 4.promise方法allrace
Promise.all():里面的几个都成功了才走.then,只要有一个失败就走.catch ·[pro1pro2pro3]数组里面的一起执行Promise.race(),谁先回来就执行谁相应的状态指定的回调函数 应用场景超时处理pro1pro2其中一个如果执行不了就返回超时
17-Generator生成器函数
返回值就是一个遍历器 yield表达式返回值取决于下一个next()方法中传入的参数
script// 协程让函数暂停执行需要调用next()才能往下走function* gen() {console.log(11);yield aa; //中文产出的意思console.log(22);yield bb;console.log(33);//如果是return cc不会被遍历出来打印出来value是“cc”done已经变成true了是true时就停了}let ggen()// g.next()//11// g.next()//22// g.next()//33let res1g.next()console.log(res1);let res2g.next()console.log(res2);let res3g.next()console.log(res3);
//for(let i of g){// console.log(i);//}可以一下子遍历完/script结果不会有”-11111“还没有给res1赋值就遇到yield停止了 18-Class语法
1.类的写法 2.getter与setter拦截属性
不能在location里面拦截后再操作自己的属性会进入一个死循环的递归调用
class Person{constructor(name,age,id){this.namename;this.ageage;this.eledocument.querySelector(#${id});}get location(){console.log(get);}set location(data){console.log(set,data);}get html(){return this.ele.innerHTML}set html(data){this.ele.innerHTMLdata.map(itemli${item}/li).join()}}let objnew Person(kerwin,100,list)obj.html[111,222,333]// 在控制台赋值obj.html[111,222,333]时候会被set拦截到它基于html把数据映射成li节点class Person{// 如果希望一个属性是静态的可以在前面加一个staticstatic mynameperson类的名字;static mymethodfunction(){// console.log(mymethod,this.age);在这里访问不到age因为this指向的是Person的类名不是实例化对象}constructor(name,age,id){this.namename;this.ageage;}say(){console.log(this.name,this.age);}}Person.mynameperson类的名字Person.mymethodfunction(){console.log(mymethod);}let objnew Person(kerwin,100)// 访问在控制台obj.myname访问不到//应用场景有些属性或方法不需要实例化对象就可以挂在类的身上称为静态属性和静态方法比如person都会的事// console.log(Person.myname);// Person.mymethod()3.Class继承
1.super()方法继承调用父类constructor里面的方法 2.如果和父类方法名一样会就近原则执行执行自己的覆盖父类包括静态属性和静态方法 3.如果想在父级相同的方法基础上添加一些操作需要调用super
class Student extends Person{constructor(name,age,score){super(name,age)this.scorescore;}
2.如果和父类方法名一样会就近原则执行执行自己的覆盖父类// say(){// console.log(this.name,this.age,this.score);// }
3. 如果想在父级相同的方法基础上添加一些操作需要调用supersay(){super.say();//调用父级的say方法console.log(this.score);}getScore(){console.log(this.score);}}let objnew Student(kerwin,100,150)案例用面向对象的思路将数据传给box
div classbox1h1/h1ul/ul/divdiv classbox2h1/h1img src altul/ul/divscriptvar data1{title:体育,list:[体育1,体育2,体育3]}var data2{title:综艺,url:https//................................,list:[综艺1,综艺2,综艺3]}class CreatBox{// 获取节点和数据constructor(select,data){this.eledocument.querySelector(select)this.titledata.title;this.listdata.list;// 初始化完后立即执行渲染页面this.render()}render(){let oh1this.ele.querySelector(h1)let oulthis.ele.querySelector(ul)oh1.innerHTMLthis.titleoul.innerHTMLthis.list.map(itemli${item}/li).join()}}class CreatImgBox extends CreatImgBox{constructor(select,data){super(select,data)this.imgUrldata.urlthis.render()//再调用一遍防止子类中的某些操作执行不到而出错}render(){super.render()let oimgthis.ele.querySelector(img)oimg.srcthis.imgUrl}}new CreatBox(.box1,data1)new CreatImgBox(.box2,data2)/script19-Module模块化 好处异步加载、 私密不漏、 重名不怕(不同js包下面方法名相同的)、依赖不乱 defer,async异步加载 不会被script标签阻塞会继续往下面走
script src20-Module.js defer/script一直等到全部渲染完后才去执行
script src20-Module.js async/script一旦下载完渲染引擎就会中断渲染
script src20-1.js typemodule/script这种方式引入js会访问不到里面的方法私密不漏引用方法1
在哪用在哪引 1.在js里导出方法
// const obj{
// A1,
// A2
// }
// export default obj
export default {
}2.在script里导入js中的方法
bodyscript typemodule// 导入js中的方法A1的名称可以改变from后的链接必须加./import A1 from ./20-1.js/script
/body重名问题解决
import obj1 from ./20-1.js
import obj2 from ./20-1.js
console.log(obj1.test(),obj2.test())//重名不怕导入写法2
不加default不能改名这种写法区别于解构
export {A1A2
}
import {A1A2} from ./20-1.js重名问题解决as表示重命名后
import {A1,A2,test as testA} from ./20-1.js
import {test as testB} from ./20-2.js
如果想一起导
import * as obj1 from ./20-1.js
import * as obj2 from ./20-2.js导入写法3直接在方法前加export **写法4**混合使用
20-NodeJS中的模块化
