无题(javascript)
2021/7/9 22:36:15
本文主要是介绍无题(javascript),对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
//函数柯里化 var add=function(x1){ var sum=x1; var fun=function(x2){ sum+=x2; return fun; } fun.toString=function(){ return sum; } return fun; } alert(add(1)(2)(3));//6
var a=20; function fun(){ this.a=50; return function(){ return this.a } } var m=new fun(); // =function(){return this.a} console.log(m());//20 var n=fun(); console.log(n());//50
//深度克隆 function deepClone(oldObj){ if(oldObj==null){ return null; } if(typeof oldObj!=="object"){ return oldObj; } var newObj=Array.isArray(oldObj)?[]:{}; for(var key in oldObj){ newObj[key]=deepClone(oldObj[key]); } return newObj; }
//请求a,b,c用时最短 var total=0; Promise.all([ ajax({ url:"http://localhost:5050", data:"type=a" }), ajax({ url:"http://localhost:5050", data:"type=b" }), ajax({ url:"http://localhost:5050", data:"type=c" }), ]).then(arr=>{ /*arr:[ {type:"a",count:30}, {type:"b",count:20}, {type:"c",count:40}, ]*/ for(var obj of arr){ total+=obj.count; } console.log(total); }) /ajax代码// function ajax({url,type="get",data}){ // door err return new Promise(function(resolve,reject){ var xhr=new XMLHttpRequest();//不变! //如果发送get请求时,带参数 if(type=="get"&&data!==undefined){ //则需要将参数用?连接到url地址结尾 url+="?"+data; } xhr.open(type,url,true); xhr.onreadystatechange=function(){ if(xhr.readyState==4){ var result=JSON.parse(xhr.responseText) //door(result); resolve(result);//开门,并将结果,反馈到外部!功能类似于普通函数的return } } if(type=="post"){//只有发送的是post请求时,才需要添加请求头 xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); } if(type=="post"){//只有post请求,才会将参数放在send()中发送 xhr.send(data); }else{//而如果是get请求,send()中什么都没有 xhr.send(); } }) }
//判断一个对象obj是否数组类型,共有几种方法 Array.isArray(obj) //返回bool值 Object.prototype.toString.call(obj) obj.constructor==Array obj instanceof Array Object.getPrototypeOf(obj)==Array.prototype Array.prototype.isPrototypeOf(obj) obj.__proto__==Array.prototype
function f1() { var sum = 0; function f2() { sum++; return f2; } f2.valueOf = function () { //隐式转数值 return sum; }; f2.toString = function () { return sum + ''; }; return f2; } console.log(+f1());//+ f2.valueOf() / + sum =0 console.log(+f1()()) //+ f2() sum++ / sum=1 / + f2.valueOf() /+ 1 =1 console.log(+f1()()()) //+f2()sum++ / sum=1 / + f2() sum++ / sum=2 / +f2.valueOf()/+ 2=2
//旧js中,始终保持arguments中的元素值与形参变量接住的实参值同步在严格模式下,不再同步了 function sid(arr){ arr[0]=arr[2]; } function bar(a,b,c){ c=10; sid(arguments); return a+b+c; } console.log(bar(1,1,1)); //非严格模式 21 //严格模式下 12
var name="window"; var p={ name:"Perter", getName:function(){ var self=this; return function(){ return self.name; } } } var getName=p.getName(); var _name=getName(); console.log(_name);//Perter
this.b="2"; function abc(){ let b=1;++b setTimeout(()=>{ test('fun test');//new function,最后执行 },0); setTimeout(//这个定时器没什么用 test('test fun')//调用函数语法,立马执行 ,1000); console.log(b); function test(str){ this.b++;//指向window console.log(str); console.log(this.b++);//指向window } } abc(); //test fun //3 //2 //fun test //5
//数组去重,有几种方法,哪种最好(数组很长) var arr=[]; for(var i=0;i<100000;i++){ arr.push(parseInt(Math.random()*10000)); } //1:利用对象名不重复的特点 function unique1(arr){ var obj={}; for(var n of arr){ obj[n]=1; } var newArr=[]; for(var key in obj){ newArr.push(parseInt(key)); } //字符串类型去重看下面 // newArr=Object.keys(obj); return newArr; } //对比时间 console.time("unique1"); unique1(arr); console.timeEnd("unique1"); //2:利用新es标准的新类型set //set类型的对象是指值不允许重复的集合 //向set类型添加新值时,没有才加,有这个新值则不加 function unique2(arr){ var set=new Set(arr); var newArr=[...set]; return newArr; } //对比时间 console.log(unique2(arr)) console.time("unique2"); unique2(arr); console.timeEnd("unique2");
<button>click me</button> <button>click me</button> <button>click me</button> <button>click me</button> <button>click me</button> <script> //页面上相同的按钮,点击按钮让它显示自己是第几个 //解法1 var btns=document.getElementsByTagName("button"); for(var i=0;i<btns.length;i++){ (function(i){//匿名函数自调形成闭包 btns[i].onclick=function(){ console.log(i); } })(i); } //解法2 //ES6 用let也是匿名函数自调 for(let i=0;i<btns.length;i++){ btns[i].onclick=function(){ console.log(i); } } </script>
//去掉数组中非数字字符,并给给个数字+1 var arr=[1,2,3,"a",4,"e"]; for(var i=arr.length-1;i>=0;i--){ if(typeof arr[i]==="number"){ arr[i]++; }else{ arr.splice(i,1); } } console.log(arr); //在2个排好序的数组中,高效率找出相同的元素,放入新数组 var arr1=[1,3,7,9,12,37,45]; var arr2=[2,4,9,13,45,88,92]; for(var i=0,j=0,result=[];i<arr1.length&&j<arr2.length;){ if(arr1[i]<arr2[j]){ i++; }else if(arr1[i]>arr2[j]){ j++; }else{//arr1[i]==arr2[j] result.push(arr1[i])//arr2[j]也行 i++; j--; } } console.log(result) //找出一个排好序的数组中,两个元素相加的和为19的元素组合,考虑执行效率 var arr3=[1,2,4,6,7,11,12,15,17]; for(var i=0,j=arr3.length-1;i<j;){ if(arr3[i]+arr3[j]>19){ j--; }else if(arr3[i]+arr3[j]<19){ i++; }else{//arr[i]+arr[j]==19 console.log(`${arr3[i]}+${arr3[j]}`); i++; j--; } }
//使用原生js,模拟forEach和map函数 var arr=[1,2,3,4,5]; Array.prototype.forEach=function(fun){ for(var i=0;i<this.length;i++){ if(this[i]!==undefined){ fun(this[i],i,this) } } } arr.forEach(function(elem){ console.log(`${elem}`) }) Array.prototype.map=function(fun){ var arr=[]; for(var i=0;i<this.length;i++){ if(this[i]!==undefined){ arr[i]=fun(this[i],i,this); } } return arr; } var bb=arr.map(function(elem){ return elem*2; }) console.log(bb)
//给定一个字符串,其中字母出现的次数 var str="helloworld"; var arr=str.split(""); //prev:统计结果 elem:当前元素 var result=arr.reduce(function(prev,elem){ //如果当前元素在prev中不存在,强行添加 if(prev[elem]===undefined){ prev[elem]=1; }else{ //如果已经存在,数量加 1 prev[elem]+=1; } return prev; },{}) console.log(result);
//用原生call()模拟实现bind() //巨他妈难 //第一种 Function.prototype.bind=function(obj){ var fun=this; var arr1=Array.prototype.slice.call(arguments,1); return function(){ var arr=Array.prototype.slice.call(arguments); var arr2=arr1.concat(arguments); fun.apply(obj,arr2); } } //第二种 // Does not work with `new (funcA.bind(thisArg, args))` //不支持使用new调用新创建的构造函数--来自MDN if (!Function.prototype.bind)(function () { var slice = Array.prototype.slice; Function.prototype.bind = function () { var thatFunc = this, thatArg = arguments[0]; var args = slice.call(arguments, 1); if (typeof thatFunc !== 'function') { // closest thing possible to the ECMAScript 5 // internal IsCallable function throw new TypeError('Function.prototype.bind - ' + 'what is trying to be bound is not callable'); } return function () { var funcArgs = args.concat(slice.call(arguments)) return thatFunc.apply(thatArg, funcArgs); }; }; })();
//有选择的将类数组对象中的部分元素转为数组 //第一种写法 Array.prototype.slice.call(arguments,starti) //第二种写法 [].slice.call(arguments,starti)
//定义一个新的类型people,继承animal的类型 function animal(name,age){ this.name=name; this.age=age; } animal.prototype.intr=function(){} function people(name,age){ animal.call(this,name,age); } Object.setPrototypeOf(people.prototype,animal.prototype); //完成
//玩的就是地址的题 var a={n:1};//地址#old var b=a;//b指向a的地址#old //#old.x=a={n:2}-->地址#new //#old的对象强行赋值x:{n:2}-->地址#new a.x=a={n:2};//a指向地址#new console.log(a);//{n:2} console.log(b);//{n:1,x:{n:2}} a.n=3; console.log(b);//{n:1,x:{n:3}} console.log(a);//{n:3}
var num=new Array(); for(var i=0;i<4;i++){ num[i]=f1(i); } //提升到最上面 function f1(n){ //n形成闭包 function f2(){ alert(n); } return f2; } num[2]();//2 num[1]();//1 num[0]();//0 num[3]();//3
//统计字符串每种字符出现的次数 var str="helloworld"; var arr=[];//统计字母的关联数组 for(var i=0;i<str.length;i++){ var char=str[i];//当前字母 if(arr[char]===undefined){ arr[char]=1; }else{ arr[char]++; } } //maxChar出现次数最多的字母 //count共出现了几次 var maxChar,count=0; for(var key in arr){ if(arr[key]>count){ maxChar=key; count=arr[key]; } }
//切割字符串 var search="?uname=dingding&upwd=123456&favs=swimming&favs=running&favs=basketball"; function search20bj(str){ var obj={}; //去? str=str.slice(1); //去&,成数组 var arr=str.split("&"); for(var s of arr){ var [key,value]=s.split("="); if(obj[key]===undefined){ obj[key]=value; }else{ obj[key]=[].concat(obj[key],value); } } return obj; } console.log(search20bj(search));
function fun(n,o){ console.log(o); return{ fun:function(m){ return fun(m,n); } } } var a=fun(0);//undefined a.fun(1);//0 a.fun(2);//0 a.fun(3);//0 var b=fun(0)//undefined .fun(1)//0 .fun(2)//1 .fun(3);//2 var c=fun(0)//undefined .fun(1);//0 c.fun(2);//1 c.fun(3);//1
function setObj(p){ p.name="red"; p={};//局部变量p创建新对象 p.name="blue"; } var p={ name:"pink" }; setObj(p); console.log(p);//red
var a=2; var obj={ a:4, fn1:(function(){ this.a*=2;//带.的都是对象,与变量a无关 var a=3;//<--闭包变量 return function(){ this.a*=2; a*=3; console.log(a); } })()//匿名函数自调,立即执行 } var fn1=obj.fn1; console.log(a);//4 fn1();//9 obj.fn1();//27 console.log(a);//8 console.log(obj.a);//8
function fun(o){ o.name="red"; o={}; o.name="blue"; } var obj={name:"white",age:11}; fun(obj); console.log(obj); //{name: "red", age: 11}
function Foo(){ getName=function(){ console.log(1); }; return this; } Foo.getName=function(){ console.log(2); } Foo.prototype.getName=function(){ console.log(3); } var getName=function(){ console.log(4); } function getName(){ console.log(5); } Foo.getName();//2 getName();//4 Foo().getName();//1 getName();//1 new Foo.getName();//2 new Foo().getName();//3 new new Foo().getName();//3
//构造函数内部,如果return一个引用类型的对象, //则整个构造函数失效,而是返回这个引用类型的对象 //说的就是function B function A(){ } function B(){ return new A(); } A.prototype=new A(); B.prototype=new B(); var a=new A(); var b=new B(); console.log(a.__proto__==b.__proto__);//true
//考闭包 var x=0; var foo={ x:1, bar:function(){ console.log(this.x); var that=this; return function(){ console.log(this.x); console.log(that.x); } } } foo.bar();//1 foo.bar()();//1 0 1
//函数也是对象 function Foo(){ Foo.a=function(){ console.log(1); } this.a=function(){ console.log(2); } } Foo.prototype.a=function(){ console.log(3); } Foo.a=function(){ console.log(4); } Foo.a();//4 let obj=new Foo(); obj.a();//2 Foo.a();//1
var a={}; //b是对象,在这个题里,和里面的值没关系 var b={ key:"a" }; var c={ key:"c" }; //a[b]会隐式把b转为下标,于是找toString() //b没有,找到了Object的toString() //因为new object()继承Object的原型对象 //导致b转化为[object Object] //于是a[b]就是a{"[object Object]":123} a[b]="123"; //再赋值变成a{"[object Object]":456} a[c]="456"; console.log(a[b]);//456
//解析地址为["http", "locahost", "5500", "/public/index.html", "uname=lena&upwd=123456", "#top"] //正则表达式2种做法 var reg10k = /([a-z]+):\/\/([A-Za-z0-9.]+):(\d+)((\/[a-z.]+)+)\?(([a-z]+=[a-z0-9]+&?)+)#([a-z]+)/i; var reg18k =/[a-z]+(?=:\/\/)|(?<=:\/\/)[a-z0-9.]+(?=:)|(?<=:)\d+(?=\/)|\/[a-z/.]+(?=\?)|(?<=\?)[a-z0-9=&]+(?=#)|#[a-z0-9]+/ig; var url = "http://locahost:5500/public/index.html?uname=lena&upwd=123456#top" var arr10k = url.match(reg10k); var arr18k = url.match(reg18k); console.log(arr10k); console.log(arr18k); //数组做法 //先按://切割,取第0部分——protocol var arr = url.split("://"); var protocol = arr[0]; //剩余部分保存在变量rest中继续执行后续操作 var rest = arr[1]; //再按#切割,取第1部分——hash var arr = rest.split("#"); var hash = `#${arr[1]}`; rest = arr[0]; //再按?切割,取第1部分——search var arr = rest.split("?"); var search = arr[1]; rest = arr[0]; //再按/切割 var arr = rest.split("/"); //将数组第一个元素踢出数组——主机名+端口号 var host = arr.shift(); //将剩余部分按/拼接形成相对路径 var pathname = "/" + arr.join("/"); //将host再按:切割,分成主机名和端口号 var arr = host.split(":") var hostname = arr[0]; var port = arr[1]; console.log(protocol); //http console.log(host); //localhost:5500 console.log(hostname); //localhost console.log(port); //5500 console.log(pathname); // /public/index.html console.log(search); //?lid=5 console.log(hash); //#top
//闭包题技巧:找2个东西 //(1)外层函数与内层函数之间都有哪些受保护的变量 //(2)外层函数共向外抛出了几个内层函数对象,3种方式,向外返回内层函数 //a.return function(){ ... } //b.通过给全局变量赋值的方式,向外抛出一个函数 //c.return 一个对象或数组,在对象和数组中包含多个函数定义 //结论:一次外层函数调用时,抛出的多个内层函数对象,共用这次生成的一个变量, // 其中一个函数修改了变量,另一个函数受保护的变量也受影响 function fun(){ var n=999; nAdd=function(){n++}; return function(){ console.log(n); } } var getN=fun(); getN();//999 nAdd(); getN();//1000
function fun(){ for(var i=0,arr=[];i<3;i++){ arr[i]=function(){console.log(i)} } return arr; } var funs=fun(); funs[0]();//3 funs[1]();//3 funs[2]();//3
var a=10; (function(){ console.log(a);//undefined a=5; console.log(window.a);//10 var a=20; console.log(a);//20 })()
function fun(){console.log(1)}; fun();//2 function fun(){console.log(2)}; fun();//2 //下面的var没用,因为window对象中已经有fun了, //var fun就没什么效果,只是=100赋值留在原地 var fun=100; fun();//报错
这篇关于无题(javascript)的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-06-26结对编程到底难不难?答案在这里
- 2024-06-19《2023版Java工程师》课程升级公告
- 2024-06-15matplotlib作图不显示3D图,怎么办?
- 2024-06-1503-Loki 日志监控
- 2024-06-1504-让LLM理解知识 -Prompt
- 2024-06-05做软件测试需要懂代码吗?
- 2024-06-0514-ShardingSphere的分布式主键实现
- 2024-06-03为什么以及如何要进行架构设计权衡?
- 2024-05-31全网首发第二弹!软考2024年5月《软件设计师》真题+解析+答案!(11-20题)
- 2024-05-31全网首发!软考2024年5月《软件设计师》真题+解析+答案!(21-30题)