防抖
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"></head><body>
防抖： <input id="input" type="text"></body><script>// 监听拿到input输入的值
input.addEventListener('input',function(e){val(e.target.value)})// 防抖的核心代码functionfn(time, fun){let flag // 定义状态returnfunction(value){clearTimeout(flag)// 在执行之前 清除 定时器的 flag 不让他执行
flag =setTimeout(()=>{fun(value)}, time)}}let val =fn(1000,function(val){
console.log(val)})</script></html>
节流
<body><button id="button">手在快1秒执行一次</button></body><script>/*
定时器版本的
fns 回调函数
time 间隔时间
function throttle(fns, time) {
let flag // 定义一个空状态
return function () { // 内部函数访问外部函数形成闭包
if (!flag) { // 状态为空执行
flag = setTimeout(() => {
fns.apply(this, arguments) // 改变this指向 吧 event 事件对象传出去
flag = null
}, time)
}
}
}
*/functionthrottle(fun, time){let flag =0returnfunction(){let now =+newDate().valueOf()// 当前的值 减去上一次的值 >= 传过来的事件 执行if(now - flag >= time){fun.apply(this, arguments)
flag = now
}}}
button.onclick =throttle((e)=>{
console.log(e)},1000)</script>
深拷贝
var arr ={a:2,b:[33]}functioncloneDeep(arr ={}){// 终止递归 判断如果传进来的数据不是 object 或者 传进来的是一个 null 直接返回if(!arr ||typeof arr !='object'|| arr ==null)return arr
// 声明一个对象let result
// 用 instanceof 判断原型链上是否有该类型的原型 是 Array => [] ! Arrays =>{}
arr instanceofArray? result =[]: result ={}// forin 循环对象的key值for(const key in arr){// 对象 key 赋值 result
result[key]=cloneDeep(arr[key])}return result
}let arr2 =cloneDeep(arr)// let arr2 = [...arr]
arr2.b[0]=5
console.log(arr);// {a: 2, b: Array(1)} Array a: 2 b: [33]
console.log(arr2);// {a: 2, b: Array(1)} Array a: 2 b: [5]// 修改新对象不影响原来的对象
类型判断
/*
实现一个类型判断
[] 返回 array
{} 返回object
/^$/ RegExp
1 number
*/// 第一种方案functiontype_of(obj){let res =Object.prototype.toString.call(obj).split(' ')[1]// 输出 RegExp]/*
res.substring(0, res.length - 1) 从第 0 项开始截取 截取到它的长度 -1
也就是最后一项的前一项 把最后的一项 ] 给干掉
*/return res.substring(0, res.length -1).toLowerCase()}// 第二种方案functiontype_of(obj){// .slice(8, -1) 从 第 8项开始截取 -1 不要最后一项returnObject.prototype.toString.call(obj).slice(8,-1).toLowerCase()}
数字千位分割
constformat=(n)=>{let num = n.toString()// 拿到传进来的 number 数字 进行 toStringlet len = num.length // 在拿到字符串的长度// 当传进来的结果小于 3 也就是 千位还把结果返回出去 小于3 不足以分割if(len <3){return num
}else{let render = len %3//传入 number 的长度 是否能被 3 整除
console.log(render)/*
match() 方法可在字符串内检索指定的值，或找到一个或多个正则表达式的匹配。
该方法类似 indexOf() 和 lastIndexOf()，但是它返回指定的值，而不是字符串的位置。
var str = '123123000'
str.match(/\w{3}/g).join(',') // 123,123,000
*/if(render >0){// 说明不是3的整数倍return num.slice(0, render)+','+ num.slice(render, len).match(/\d{3}/g).join(',')}else{return num.slice(0, len).match(/\d{3}/g).join(',')}}}let str =format(298000)
console.log(str)
生成随机数
MDN随机数 https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Math/random
// 生成随机数functionrandom(min, max){// Math.floor() 向下进行取证return Math.floor(Math.random()*(max - min +1)+ min)}
console.log(random(3,5))
轮询方法的封装
constpollFetch=async(callback,pollingInterval,delayTimeStatus =false,stop =false)=>{if(stop)returnconsttimeoutPromise=(delayTime)=>{returnnewPromise(resolve=>{
window.timeId =setTimeout(resolve, delayTime);})}while(true){const pollingTime =1* pollingInterval;const delayTime = pollingTime +(1000*parseInt(Math.random()*40,10));// 轮询时间间隔try{awaitcallback();awaittimeoutPromise(delayTimeStatus ? delayTime : pollingTime);}catch(e){awaittimeoutPromise(delayTimeStatus ? delayTime : pollingTime);}}}/*
pollFetch(()=> {},1000,true)
@ callback 回调 必穿 任务队列
@ pollingInterval 1000 == 一秒 必穿 轮询时间打印服务器的
@ delayTimeStatus 不布尔 非必穿 延迟的状态
@ stop 布尔 菲必传 停止定时器
*/pollFetch(()=>{returnnewPromise((resolve, reject)=>{setTimeout(()=>{resolve();
console.log(4243242342)},50);})},200,false,false)
手写call方法
// 给function的原型上面添加一个 _call 方法Function.prototype._call=function(context){// 判断调用者是否是一个函数 this 就是调用者if(typeofthis!='function'){return}// 如果有 context 传参就是传参者 没有就是window
that = context || window
// 保存当前调用的函数
that.fn =this// 吧 this == fns 存到that.fn来// 截取传过来的参数/*
arguments
a: 1
fn: ƒ fns()
*/// 通过 slice 来截取传过来的参数const local =[...arguments].slice(1)// 传入参数调用函数let result = that.fn(...local)// 删出 fn 属性delete that.fn
return result
}let obj ={a:1}functionfns(a, b){
console.log(a, b);
console.log(this)}
fns._call(obj,23,555)
手写apply
Function.prototype.myApply=function(context){if(typeofthis!=='function'){// 判断当前调用者是否为函数return}// 保存传入的this指向
that = context || window
// 保存当前调用的函数
that.fn =thislet result
// 这里开始判断传入的参数是否存在，此时参数是一个数组形式[thisArg,[传参]]// 那么如果arguments[1]即传参存在的时候，就是需要传参调用保存的函数// 如果不存在就直接调用函数if(arguments[1]){
result = that.fn(...arguments[1])}else{
result = that.fn()}return result
}let obj ={a:1}functionfn(...val){
console.log(this)
console.log(...val)}fn.apply(obj,[1,4,5,6,7,9])
手写 bind
Function.prototype._bind=function(context){// 当调用用了_bind 函数 this 指向调用 _bind 的那个函数// this 不是 function 不让使用 抛出类型错误if(typeofthis!='function'){thrownewTypeError('Error')}// 获取参数 除了传过来的第一项我全都要const args =[...arguments].slice(1)// 吧 function 进行一个缓存
fn =this// 返回一个函数 因为 bind 不是立即调用的returnfunctionFn(){// 判断 this 原型链上是否又该类型的原型 Fnreturnfn.apply(thisinstanceofFn?newfn(...arguments): context, args.concat(...arguments))}}let obj ={a:1}functionfn(...val){
console.log(this)// obj
console.log(...val)// 231, 31242344, 432}
fn._bind(obj,231,31242344,432)()
数组去重
/*
数组的去重
*/let ylbsz =[1,35,6,78,66,6,35]function_set(arr){// 放一个新数组let newArr =[]for(let i =0; i < arr.length; i++){if(newArr.indexOf(arr[i])==-1){
newArr.push(arr[i])}}return newArr
}
console.log(_set(ylbsz))
console.log([...newSet([11,11,222,222])])// 字符串去重let str ='123321你好你好'
console.log([...newSet(str.split(''))].join(''))
数组排序（冒泡）
functionsort(arr){// 外层循环控制的是比较的轮数，你要循环几轮// arr.length （5 ） - 1 = 4for(let i =0; i < arr.length -1; i++){// 内层循环控制的每一轮交换的次数// 第一轮要比较4次 下标为 0 arr.length - 1（4） - i（0） = 4// 第二轮要比较3次 下标为 1 arr.length - 1（4） - i（1） = 3// 第三轮要比较2次 下标为 2 arr.length - 1（4） - i（2） = 2// 第四轮要比较1次 下标为 3 arr.length - 1（4） - i（3） = 1// 内层循环控制的每一轮交换的次数for(let j =0; j < arr.length -1- i; j++){// arr[j] 第一项 arr[j + 1] 第二项// arr[j] 第二项 arr[j + 1] 第三项// ....if(arr[j]> arr[j +1]){// 大于后一项 做一个交换变量 es6 结构赋值 的变量交换[arr[j], arr[j +1]]=[arr[j +1], arr[j]]}}}return arr
}
console.log(sort([200,100,3,9,4]));
数组的排序（快排）
let arr =[1,4,6,7,7,9]// 1. 取出我们数组的中间项 用splice 拿到中间项 // 2. 在声明两个空数组，一个空数组用来放置 中间一项 大于 循环的每一项的话 就把他放到左边的数组里，下// 余的话就放到右边的数组// 3.接下来就是循环便利了 // 最后再次利用函数自己调用自己一直执行 递归// 4. 如果传进来的数组 小于等于 1 的话就终止递归循环// 做一个快排functionfn(arr){// 如果传进来的数组 小于等于 1 的话就终止递归循环if(arr.length <=1)return arr
// 总长度除以2的话就可以拿到中间一项的下标let n = Math.floor(arr.length /2)// splice 返回被删除的元素 下标为 0 就是只拿第一项 因为它只返回一个数据 就是被删除的一项let cen = arr.splice(n,1)[0]// 2. 在声明两个空数组，一个空数组用来放置 中间一项 大于 循环的每一项的话 就把他放到左边的数组里，下// 余的话就放到右边的数组let leftArr =[]let rightArr =[]// 接下来就是循环便利了 判断for(let j =0; j < arr.length; j++){let item = arr[j]// > 如果是大于就是 从大到小 如果是小于 < 从小到大
cen < item ? rightArr.push(item): leftArr.push(item)}returnfn(leftArr).concat(cen,fn(rightArr))}
console.log(fn(arr))
数组排序（插入排序）
functioninsert(arr){// 1、准备一个数组这个数组就是新抓的牌，开始先抓一张牌进来let handle =[]
handle.push(arr[0])// 2、第二次开始按顺序抓牌一直把牌抓光了for(let i =1; i < arr.length; i++){// a 是新抓的牌let a = arr[i]// 和手里的牌进行比较（从后向前比）// handle.length - 1 因为下标是从 0 开始数的for(let j = handle.length -1; j >=0; j--){// 每一次要比较手里的牌let b = handle[j]// 如果当前新牌a比b 大了，可就要放到 b 的后面// 如果 a > b 就是表示从小到大// a < b 送大到小if(a > b){// 如果想要放到 j 的后面就要加上一个 1，/**
* 比如说我要插队一般要插就是插到 a 的前面
* 但是我想要插到 a 的后面怎么办
* 那这个时候就要插到 a 下一个人的人前面就可以了
*
*/
handle.splice(j +1,0, a)break}// 还有一种情况就是如果你比较到第一项的还比较吗，不比较了// 我们吧新牌放到最前面即可if(j ==0){
handle.unshift(a)}}}return handle
}
console.log(insert([2,8,5,92,52,4]))
数组的最大值最小值
const array =[5,4,7,8,9,2];let num = array.reduce((a, b)=> a > b ? a : b);
console.log(num)// 9let nums = array.reduce((a, b)=> a < b ? a : b);
console.log(nums)// 2
对象去重
/*@ 数据处理对象去重*/let arr =[{a:1,b:2,id:6666},{a:1,b:2,id:6666},{a:6,b:8,id:77777},{a:8,b:2,id:88888},]/*
@ 输出 :
0: { a: 1, b: 2, id: 6666 }
1: { a: 6, b: 8, id: 77777 }
2: { a: 8, b: 2, id: 88888 }
*/functionssff(arr4, id){var obj ={};functiondeWeightFour(){
arr4 = arr4.reduce(function(a, b){
obj[b.id]?'': obj[b.id]=true&& a.push(b);return a;},[])return arr4;}var newArr4 =deWeightFour();return newArr4
}
console.log(ssff(arr,'id'))
手写 indexOf
~function(){// 在函数前加上波浪号，其作用是把函数声明转换为表达式，// 就可以直接将下面的代码放入某个函数里运行。// 不用indexOf 和 includesfunctionmyIndexOf(a){// 1、 这个也可以正则实现 下面代码// let reg = new RegExp(a)// res = reg.exec(this)// return res === nu ll ? -1 : res.index// 这个也可以正则实现let lena = a.length
y =this.length
flag =-1if(lena > y)return-1// 如果输入的字符串大于要检测的字符串直接 -1for(var i =0; i <= y - lena; i++){if(this.substr(i, lena)=== a){// substr() 方法可在字符串中抽取从 start 下标开始的指定数目的字符。
flag = i
break}}return flag
}String.prototype.myIndexOf = myIndexOf
}()let demo ='dwanlghMappaw'let str ='h'
console.log(demo.myIndexOf(str));
手写 instanceof
// instanceof// 1、只要当前类出现在实例的原型上，结果都为 true // 2、由于我们可以肆意的修改原型的指向，所以检测出来的结果是不准确的// 3、不能检测基本数据类型var arr =[]
console.log(arr);functioninstance_of(example, classFunc){// 实例.__proto__ === 类.prototype => instanceoflet classFuncPrototype = classFunc.prototype // 这个就代表类的原型
proto = Object.getPrototypeOf(example)// example.__proto__ 实例的.__proto__while(true){// 我也不知道你要找多少次 while循环if(proto ===null){// 找到最顶层为null就说明没找到 返回 falsereturnfalse}if(proto === classFuncPrototype){returntrue}
proto = Object.getPrototypeOf(proto)}}
console.log(instance_of(arr, Array));
console.log(instance_of(arr, Object));
console.log(instance_of(arr, RegExp));
怎么判断两个对象是否相等？
/*
① 首先比较两个对象的长度，如果长度不相等使flag为false，为不相等；
② 如果长度相等那就遍历对象1(对象2也可以)，利用hasOwnProperty() 方法查看对象1中是否包含对象2中的属性或者方法，如果不包含则使flag为false，为不想等。
hasOwnProperty() 方法会返回一个布尔值，指示对象自身属性中是否具有指定的属性（也就是，是否有指定的键）。
③ 接下来判断两对象的内存地址是否相同，不同则为true
*/functioncompreObj(obj1, obj2){var flag =true;functioncompre(obj1, obj2){if(Object.keys(obj1).length != Object.keys(obj2).length){
flag =false;}else{for(let x in obj1){if(obj2.hasOwnProperty(x)){if(obj1[x]!== obj2[x]){compre(obj1[x], obj2[x]);}}else{
flag =false;}}}if(flag ===false){returnfalse;}else{returntrue;}}returncompre(obj1, obj2)}
console.log(compreObj(对象1, 对象2));
如何快速让字符串变成已千为精度的数字
var str ="10000000000";/*
第一种：把数字转换成字符串后，打散为数组，再从末尾开始，逐个把数组中的元素插入到新数组（result）的开头。 每插入一个元素，counter就计一次数（加1），
当counter为3的倍数时，就插入一个逗号，但是要注意开头（i为0时）不需要逗号。最后通过调用新数组的join方法得出结果。
*/String.prototype.toThousands=function(){var num =this;var result =[], counter =0;
num =(num ||0).toString().split('');for(var i = num.length -1; i >=0; i--){
counter++;
result.unshift(num[i]);if(!(counter %3)&& i !=0){ result.unshift(',');}}return result.join('');}
console.log(str.toThousands());/*
第二种：通过正则表达式循环匹配末尾的三个数字,每匹配一次,就把逗号和匹配到的内容插入到结果字符串的开头,
然后把匹配目标（num）赋值为还没匹配的内（RegExp.leftContext）。如果数字的位数是3的倍数时，最后一次匹配到的内容肯定是三个数字，
但是最前面的三个数字前不需要加逗号；如果数字的位数不是3的倍数,那num变量最后肯定会剩下1到2个数字,循环过后,要把剩余的数字插入到结果字符串的开头。
*/functiontoThousands(num){var num =(num ||0).toString(), re =/\d{3}$/, result ='';while( re.test(num)){
result = RegExp.lastMatch + result;if(num !== RegExp.lastMatch){
result =','+ result;
num = RegExp.leftContext;}else{
num ='';break;}}if(num){ result = num + result;}return result;}
console.log(toThousands(str));
第三种：第二种的改良版
functiontoThousands(num){var num =(num ||0).toString(), result ='';while(num.length >3){
result =','+ num.slice(-3)+ result;
num = num.slice(0, num.length -3);}if(num){ result = num + result;}return result;}
console.log(toThousands(str));
第四种：懒人版
functiontoThousands(num){return(num ||0).toString().replace(/(\d)(?=(?:\d{3})+$)/g,'$1,');}
console.log(toThousands(str));
如何判断JS对象中是否存在循环引用
我个人的理解是，如果一个对象的值等于父级(祖父级，曾祖父级…),则说明是循环引用了
定义一个空数组吗，且对于目标对象进行递归，每次都判断递归项是否为对象，是的话就放到数组里，而且每次判断属性值是否存在，在的话说明环引用了
functioncycle(obj, parent){//表示调用的父级数组var parentArr = parent ||[obj];for(var i in obj){if(typeof obj[i]==="object"){//判断是否有循环引用
parentArr.forEach((pObj)=>{if(pObj === obj[i]){
obj[i]="[cycle]"}});cycle(obj[i],[...parentArr, obj[i]])}}return obj;}/**@2方法*/functionhasLoop(obj){// 判断对象内部是否有和源相同的属性functionfindLoop(target, src){// 源数组，并将自身传入const source = src.slice().concat([target])for(const key in target){// 如果是对象才需要判断if(typeof target[key]==='object'){// 如果在源数组中找到 || 递归查找内部属性找到相同if(source.indexOf(target[key])>-1||findLoop(target[key], source)){returntrue}}}returnfalse}// 如果传入值是对象，则执行判断，否则返回falsereturntypeof obj ==='object'?findLoop(obj,[]):false}
简易版Promise.all
functionPromiseAll(promiseArray){//返回一个Promise对象returnnewPromise((resolve, reject)=>{if(!Array.isArray(promiseArray)){//传入的参数是否为数组returnreject(newError('传入的参数不是数组！'))}const res =[]let counter =0//设置一个计数器for(let i =0; i < promiseArray.length; i++){
Promise.resolve(promiseArray[i]).then(value=>{
counter++//使用计数器返回 必须使用counter
res[i]= value
if(counter === promiseArray.length){resolve(res)}}).catch(e=>reject(e))}})}const s1 =newPromise((res, rej)=>{setTimeout(()=>{res('p1')},1000)})const s2 =newPromise((res, rej)=>{setTimeout(()=>{res('p2')},2000)})const s3 =newPromise((res, rej)=>{setTimeout(()=>{res('p3')},3000)})const test =PromiseAll([s1,s2, s3]).then(res=> console.log(res)).catch(e=> console.log(e))
console.log(test);
一维数组转换 tree 结构
let arr =[{id:1,name:'部门1',pid:0},{id:2,name:'部门2',pid:1},{id:3,name:'部门3',pid:1},{id:4,name:'部门4',pid:3},{id:5,name:'部门5',pid:4},]// // 上面的数据转换为 下面的 tree 数据// [// {// "id": 1,// "name": "部门1",// "pid": 0,// "children": [// {// "id": 2,// "name": "部门2",// "pid": 1,// "children": []// },// {// "id": 3,// "name": "部门3",// "pid": 1,// "children": [// {// id: 4,// name: '部门4',// pid: 3,// "children": [// {// id: 5,// name: '部门5',// pid: 4,// "children": []// },// ]// },// ]// }// ]// }// ]functiontree(items){// 1、声明一个数组和一个对象 用来存储数据let arr =[]let obj ={}// 2、for of 便利我么传进来的一个数据，给当前的数据添加children 属性为 array 把他放到我们的obj对象里面 for(let item of items){
obj[item.id]={...item,children:[]}}// 3、for of 再次便利然后逻辑处理for(let item of items){// 4、把数据里面的id 取出来赋值 方便下一步的操作let id = item.id
let pid = item.pid
// 5、根据 id 将 obj 里面的每一项数据取出来let treeitem = obj[id]// 6、如果是第一项的话 吧treeitem 放到 arr 数组当中if(pid ===0){// 把数据放到 arr 数组里面
arr.push(treeitem)}else{// 如果没有 pid 找不到 就开一个 obj { }if(!obj[pid]){
obj ={children:[]}}// 否则给它的 obj 根基 pid（自己定义的下标） 进行查找 它里面的children属性 然后push
obj[pid].children.push(treeitem)}}// 返回处理好的数据return arr
}
console.log(tree(arr))
proxy 实现数据绑定
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title></head><body><li id="li"></li><input id="search" type="text"></body><script>let obj ={}
obj =newProxy(obj,{get(target, prop){return target[prop]
console.log(target,prop)},set(target, prop, value){
console.log(target, prop, value)
target[prop]= value
observer()}})functionobserver(){
li.innerHTML = obj.name
search.value = obj.name
}setTimeout(()=>{
obj.name ='孙志豪'},1000)
search.oninput=function(){
obj.name =this.value
}</script></html>
思考题 LazyMan
// LazyMan('Hank');// 输出:// Hi! This is Hank!// LazyMan('Hank').sleep(3).eat('dinner')// 输出:// Hi! This is Hank!// //等待3秒..// Wake up after 3// Eat dinner~// LazyMan('Hank').eat('dinner').eat('supper')// 输出:// Hi This is Hank!// Eat dinner~// Eat supper~// LazyMan('Hank').sleepFirst(2).eat('dinner').sleep(3).eat('supper')// 输出:// 等待2秒..// Wake up after 2// Hi This is Hank!// Eat dinner~// 等待3秒..// Wake up after 3// Eat supper~// function LazyMan(arr) {// return 'Hi! This is' + arr// }// console.log(LazyMan('Hank'))functionLazyMan(params){// 声明一个数组let arr =[]// 这是第一个的输出结果constfn=()=>{ console.log(`Hi This is ${params}!`),next()}// 声明一个方法用来控制是否执行下一项constnext=()=>{// 返回删除后的第一个数组 const fn = arr.shift()// 如果第一项在就去执行第一个
fn &&fn()}// 吧第一个输出放到数组中
arr.push(fn)// 上来执行一次，是最快执行但不是立马执行setTimeout(()=>{next()})// 声明一个对象给 抛出去let api ={sleepFirst:(content)=>{//因为这结果是是第一个执行 所以用 unshift
arr.unshift(()=>{setTimeout(()=>{ console.log('Wake up after'+ content);next()}, content *1000)})return api
},eat:(content)=>{// 这个是后面的执行的
arr.push(()=>{
console.log(`Eat ${content}~`)next()})return api
},sleep:(content)=>{// 延迟并最后执行
arr.push(()=>{setTimeout(()=>{ console.log('Wake up after'+ content);next()}, content *1000)})return api
},}return api
}LazyMan('Hank').sleepFirst(2).eat('dinner').sleep(3).eat('supper')
思考题 1 某公司1 - 12 月的营业额
/***
* @ sun 完成一下需求某公司1 - 12 月的营业额 存放在一个对象里面如一下：
* let obj = {
1: 888,
2: 542,
5: 637
}
请把数据处理成为 ：
[888, 542, null, null, 637, null, null, null, null, null, null, null]
*
* */
第一种方案
let arr =newArray(12).fill(null).map((item, index)=>{return obj[index +1]||null})
console.log(arr)
第二种方案
Array.from(arr) 把对象变为一个数组 前提就是必须要有 length 的属性 arr.length =13
obj.length =13let result = Array.from(obj).slice(1).map(item=>{returntypeof item =='undefined'?null: item
})
console.log(result)
第三种方案
创建一个12项为 null 的数组
let arr =newArray(12).fill(null)// Object.keys(obj) 获取 obj 的key值
Object.keys(obj).forEach(item=>{// 这个 -1 就把下标减去一个
arr[item -1]= obj[item]})
console.log(arr)
思考题 2 实现 5.add(3).minus(2), 输出结果为 6
/**
* @ 思考题
* 实现 5.add(3).minus(2), 输出结果为 6
* add调用 加法 minus调用 减法
*/~function(){// 每一个方法执行完都会返回一个 number 这类的实例， 这样就可以继续调用number类原型中的方法（链式写法）functioncheck(n){
n =Number(n)returnisNaN(n)?0: n
}functionadd(n){
console.log(this)// this 就是谁调用我this 就是谁
n =check(n)returnthis+ n
}functionminus(n){
n =check(n)returnthis- n
}// Number.prototype.add = add// Number.prototype.minus = minus// 方法多的情况下简写['add','minus'].forEach(element=>{// eval() 函数会将传入的字符串当做 JavaScript 代码进行执行。Number.prototype[element]=eval(element)});}()// 由于不能以数字开头 必须加上圆括号
console.log((5).add(3).minus(2))
思考题3 大写转为小写小写转为大写
/*
* @ 这里有一个字符串需要将它吧大写转为小写小写转为大写
* let str = 'sUnZHIhaO'
*/// charCodeAt(N) 返回在指定的位置的字符的 Unicode 编码let str ='sUnZHIhaO'functionfn(val){return val.replace(/[a-zA-Z]/g,config=>{// config 每一次正则匹配的结果// charCodeAt a ==65 z ==90 判断是否大小写 config.charCodeAt() >= 65 && config.charCodeAt() <= 90// 验证字母大小写：把字母转换为大写，看原来的是否是大写，如果是就转换为小写，不是还是原来return config.toUpperCase()=== config ? config.toLowerCase(): config.toUpperCase()})
console.log(val)}
console.log(fn('sUnZHIhaO'))
思考题4 找一个字符串中重复最多一项和重复一项的字符串的最多个数
/*
var str = 'abcabcddkkkk'
@ 查找一个字符串中重复最多一项和重复一项的字符串的最多个数
输出 k4
*/var str ='abcabcddkkkk'functionfunc(str){let obj ={}// 声明一个对象for(let i =0; i < str.length; i++){let item = str[i]// obj[item] = 如果中间有重复的 obj[item] 就让他+1 没有重复的话就 直接返回 1
obj[item]= obj[item]+1||1}// 声明两个变量一个 max_num是重复最对的个数 重复max_key 以这个是keyvar max_key, max_num =0// for in 用来便利对象拿到的是key值for(const key in obj){if(max_num < obj[key]){// 拿到value 值赋值 max_num
max_num = obj[key]// 拿到 key 赋值给 max_keys
max_key = key
}}return`${max_key}${max_num}`}
console.log(func(str))
思考题5 单个大写字母排到最后
/*
输入：
let arr = ['A1', 'B1', 'A2', 'B2']
let str = ['A', 'B']
输出： ['A1', 'B1', 'A', 'A2', 'B2', 'B']
*/let arr =['A1','A2','B1','B2']let str =['A','B']// // 加上一个 Z 可以让当前数据排到最后// str = str.map(item => item + 'Z')// // localeCompare() 方法返回一个数字来指示一个参考字符串是否在排序顺序前面或之后或与给定字符串相同。// let obj = arr.concat(str).sort((a, b) => a.localeCompare(b)).map(item => item.replace('Z', ''))// console.log(obj)// 循环 str 拿到每一项let k =0// 循环两遍for(let i =0; i < str.length; i++){let item1 = str[i]for(let j =0; j < arr.length; j++){let item2 = arr[j]if(item2.includes(item1)){// 如果包含就记录一下当前的位置（后面还有包含的会重新记录的这个值）
k = j
}}// 把当前项插入arr到后面
arr.splice(k +1,0, item1)}
console.log(arr)
思考题6要求重新排序为数字在后字母在前
/*
@ '14575476a1b2c309lmcsa89908pppkdgvkkllhijkldddefgklmnopqrstuywxyz'
输出 Abcdefghijklmnopqrstuvwxyz9876543210
*/let str ='14575476a1b2c309lmcsa89908pppkdgvkkllhijkldddefgklmnopqrstuywxyz'
console.log([...newSet(str.replace(/[^a-zA-Z]/g,'').split('').sort().concat([...str.replace(/[^\d]/g,'')].sort().reverse()))].join('').replace(/( |^)[a-z]/g,(L)=>L.toUpperCase()))/*
@ 有一个字符串‘a1b2c309pppkkk’
要求重新排序为数字在后字母在前
且首字母大写，数字需要倒序排列，最后整体字符串去重。
*/let a = str.replace(/[^a-zA-Z]/g,'')// 拿到所有的字母let b = str.match(/[0-9]/g).reverse().join('')// 拿到所有的数字进行 反转
console.log([...newSet(a + b)].join('').replace(str[0], str[0].toUpperCase()))
思考题 处理数组的属性名
let arr =['数据1','数据2']let obj =[[213,56465],[21342,769],]/*
处理为一下
let ff = [
{ '数据1': 213, '数据2': 56465 },
{ '数据1': 21342, '数据2': 769 },
]
*/functiontoHash(array, data){// 定义一个空数组 因为 期望数据最层是一个数组let reslute =[]// 循环传进来的需要处理的数据
data.forEach((item, index)=>{// 每一次便利都要想这个对象里面添加数据let obj ={}// 循环data数据里面的每一项每一项是个数组
item.forEach((val, i)=>{// obj 对应的属性名对应 array 下标的每一项
obj[array[i]]= val
})// 根据 data 的下标为每一项添加内层循环处理好的对象
reslute[index]= obj
})return reslute
}
console.log(toHash(arr, obj))
思考题 保留两位小数
functionround(num, decimal){if(isNaN(num)){return0}const p1 = Math.pow(10, decimal +1)const p2 = Math.pow(10, decimal)return Math.round(num * p1 /10)/ p2
}
console.log(round(21.436,2))// 21.44
思考题 计算总价格的封装 并且保留小数
/**
* 取数组的之和，或对象数组中指定属性的之和 并且保留 3 三位小数
* @method sum
* @param {String} attr 对象数组的属性
* @return {Integer} result 之和
* @example
* let a=[1,2,3,4]
* DictArray.$(a).sum();//==>10.
* let a=[{age:1,name:"n1"},{age:3,name:"n2"}];
* DictArray.$(a).sum("age");//==>4.
*/functionround(num, decimal){if(isNaN(num)){return0}const p1 = Math.pow(10, decimal +1)const p2 = Math.pow(10, decimal)return Math.round(num * p1 /10)/ p2
}classDictArray{
data;constructor(data){this.data = data
}sum(attr, accuracy =2){let res =this.data.filter(item=> item !=null)let ress = attr ? res.reduce((r, item)=> r +Number(item[attr]),0): res.reduce((r, item)=> r +=Number(item),0)returnround(ress, accuracy)}static$(arr){let res =newDictArray(arr)return res
}}let a =[{age:1.4444,name:"n1"},{age:3.7765,name:"n2"}];
console.log(DictArray.$(a).sum('age',3))
写了好多后续更新…
标签：
javascript
前端
本文转载自: https://blog.csdn.net/qq_54753561/article/details/124219121
版权归原作者 有两把刷子 所有， 如有侵权，请联系我们删除。
版权归原作者 有两把刷子 所有， 如有侵权，请联系我们删除。