面试中的编码

a = 'leetcodeisacommunityforcoders';

function deal(str) {

  const arr = str.split('');

  const delArr=['a','e','i','o','u'];

  // console.log(arr, 1);

  for (let i = 0; i < arr.length; i++) {

    // console.log(arr[i], 12, arr[i] === 'a');

    // if (arr[i] === 'a' || arr[i] === 'e' || arr[i] === 'i' || arr[i] === 'o' || arr[i] === 'u') {

    //  arr.splice(i, 1);

    //  // console.log(arr, 11);

    // }

    if( delArr.includes(arr[i]) && arr.indexOf(arr[i])!==-1){

      arr.splice(i,1);

    }

  }

  return arr;

}

deal(a);

a.replaceAll(/[aeiou]/g,'');

const arr = [[1, 2, 2], [3, 4, 5, 5], [6, 7, 8, 9, [11, 12, [12, 13, [14]]]], 10];

function flatten(arr) {

  let tem = [];

  for (let i = 0; i < arr.length; i++) {

    const item = arr[i];

    if (Array.isArray(item)) {

      tem = tem.concat(flatten(item));

    } else {

      // if (tem.indexOf(item) > -1) continue;

      tem.push(item);

    }

  }

  return tem;

}

flatten(arr);

function flatten(arr) {

  for (let i = 0; i < arr.length; i++) {

    if (Array.isArray(arr[i])) {

      arr = arr.concat(arr[i]);

      arr.splice(i, 1);

    }

  }

  return arr;

}

flatten(arr);

const nums1 = [1, 2, 3];

const nums2 = [2, 3, 4];

let tem = [];

nums2.forEach((item) => {

  // if (nums1.includes(item)) {

  //  tem.push(item);

  // }

  if(nums1.indexOf(item)!==-1){

    tem.push(item)

  }

});

console.log(tem);

for foreach 性能比较，无额外的函数调用栈和上下文

foreach Array.foreach(currentValue,index,arr)

function find(S,T){

  if(S.length<T.length) return -1;

  for(let i=0;i<S.length;i++){

    if(S.slice(i,i+T.length)===T){

      return i;

    }

  }

  return -1;

}

find('sahdhsddsdsdqqwqw','hdh')

function rotate(arr,k){

  const len=arr.length;

  const step=k%len;

  return arr.slice(-step).concat(arr.slice(0,len-step))

}

rotate([1,2,3,4,5,6],5)

function debounce(){

  let timer:any;

  return function(val:any){

    clearTimeout(timer);

    timer=setTimeout(()=>{

      console.log(val)

    },500)

  }

}

[...Array(100).keys()].filter((item)=>{

    const aa=new Array(item.toString().split('').reverse().join(''));

// console.log(typeof(aa),new Array(aa))

console.log(item,aa.join(''),Number(aa.join('')))

return item.toString().length>1 && item===Number(aa.join(''))

})

arr = [1, 2, [3, [4, 5]], 6, 8, 3];

Array.form(new Set(arr.flat(Infinity))).sort((a, b) => { return a - b; });

arr=[1,3,4,2,7,5]

function maopao(arr) {

  if (arr.length < 1) return;

  console.time('time1');

  const arr1 = [...arr];

  let isOk = true;

  for (let i = 0; i < arr1.length - 1; i++) {

    for (let j = i + 1; j < arr1.length; j++) {

      if (arr1[i] > arr1[j]) {

        const temp = arr1[i];

        arr1[i] = arr1[j];

        arr1[j] = temp;

        isOk = false;

      }else{

        isOk=true;

      }

    }

    if (isOk) {

      continue;

    }

  }

  console.timeEnd('time1');

  return arr1;

}

maopao(arr);

const obj = { 1: 222, 2: 333, 3: 444 };

const res = Array.from({ length: 12 }).map((item, index) => obj[index + 1] || null);

function byte(str) {

  const arr = str.split('');

  const newArr = arr.map((item,index) => {

    console.log(item,item.toString(),typeof(item))

    return item.toString() === item.toUpperCase() ? item.toLowerCase() : item.toUpperCase();

  });

  console.log(newArr)

  return newArr.join('');

}

console.log(byte('aBc'));

function zero(arr) {

  const len = arr.length;

  let j = 0;

  for (let i = 0; i < len - j; i++) {

    if (arr[i] === 0) {

      arr.push(0);

      console.log('arr1', arr);

      arr.splice(i, 1);

      console.log('arr2', arr);

      i--;

      j++;

    }

  }

  return arr;

}

arr = [0, 2, 1, 0, 3];

zero(arr);

function *DFS(tree){

    yield tree;

    let children=tree.children;

    for(let i in tree){

        yield *DFS(children[i])

    }

}

console.log([...DFS(tree)])

webpack 依赖的收集

配置入口进来做递归解析最后生成一个依赖图，dev-server运行的时候每次都去重新收集所有依赖，terser 只在打包压缩时候才会运行，在dev的时候是没有办法进行缓存的

。bable-loader可以进行缓存设置，但是一般项目为了加快构建速度，都会默认不去处理node_modules里面的依赖，所以第三方的依赖包无法被编译缓存

html:

link ref 等属性 link同时加载 @import页面加载完毕后被加载；link方式的样式的权重高于@import的权重；

link是html标签，@import是IE5以上使用

重绘和回流

function fillNum(num){

  const nums=num.toString();

  const len=Number(nums).toString(2).length;

  console.log("==>",len,nums.toString(2));

  let i=len;

  let arr=[];

if(i<8){

  while(8-i){

    arr.push(0)

    i++;

  }

  let val=nums.toString(2).split("");

  console.log("val===>",arr,val)

  arr=arr.concat(val)

  console.log("arr===>",arr)

}else{

  return Number(nums).toString(2);

}

return arr.join('');

}

var b="192.168.1.1";

var arr=b.split(".");

var len=arr.length;

var str="";

for(let i=0;i<len;i++){

  console.log(arr[i],Number(arr[i]).toString(2))

  str=str+"-"+fillNum(arr[i]);

}

console.log(str)

const sleep=(time)=>{

return new Promise(resolve=>{

  setTimeout(resolve,time)

})

}

sleep(1000).then(()=>{

  console.log(112)

})

arr=[1,32,4,2,45,33,23]

arr.sort((a,b)=>{

return a-b;

})

function zeroMove(arr){

const len=arr.length;

let j=0;

for(let i=0;i<len-j;i++){

  if(arr[i]===0){

    arr.push(0);

    arr.splice(i,1)

    i--;

    j++

  }

}

return arr;

}

zeroMove([0,2,2,0,22,0,1])

function add(...arg){

  console.log("===>",...arg)

  let sum=0;

  const addInner=(...arg)=>{

    console.log("pp=>",...arg)

    arg.forEach(i=>(sum+=i));

    return addInner;

  }

  addInner.toString=()=>sum;

  return addInner(...arg);

}

function ans(arr,target){

const len=arr.length;

//  let map={};

let map=new Map();

for(let i=0;i<len;i++){

  //  map[arr[i]]=i;

  map.set(arr[i],i)

}

console.log(map)

console.log(map.get(1))

for(let j=0;j<len;j++){

  var d=target-arr[j];

  console.log("d===>",d)

  const value=map.get(d);

  console.log("111===>",j,value)

  if(value && value !==j){

    return [j,value]

  }

  // var jj=arr.indexOf(d);

  // if(jj!==-1){

  //  return [j,jj]

  // }

}

return "404";

}

ans([1,2,3,4,7],9)

1234

function reverseNum(num){

  const num1=Math.floor(num/10);

  const num2=num%10;

  if(num1<1){

    return num;

  }else{

    return `${num2}${reverseNum(num1)}`

  }

}

reverseNum(1234)

function reverseStr(str){

  const newStr=str.split('').reverse();

  console.log("newStr===>",newStr);

  const bb=Array.from(new Set(newStr));

  console.log("newStr2===>",new Set(newStr));

  const fv=bb.join('')

  console.log(bb,fv)

  return fv;

}

reverseStr('abddddbs')

const  rsort=()=>{

return ()

}

rsort(()=>Math.random-0.5)

function numToStep(num){

  let count=0;

  while(num!==0){

    if(num%2===0){

      num=num/2;

    }else{

      num--;

    }

    count++;

  }

  return count;

}

numToStep(8);

/**

* @param {number} num

* @return {number}

*/

var numberOfSteps = function (num) {

  const binStr = num.toString(2);

  const arr = binStr.match(/1/g);

  if (arr) {

    console.log(num,binStr,arr);

    return binStr.length + arr.length - 1

  } else {

    return 0;

  }

};

a=1234;

let str=a.toString();

let sum=0;

let pro=1;

for(let i=0;i<str.length;i++){

  sum+=parseInt(str[i]);

  pro*=parseInt(str[i])

}

console.log(pro,sum,pro-sum)

address = "255.100.50.0"

address.replaceAll('.',"[.]")

let i=0;

let map=new Map();

function encode(url){

map.set(i,url);

return "http://tinyurl.com/" + i++;

}

function decode(url){

return map.get(parseInt(url.replace("http://tinyurl.com/", "")))

}

function Permutation(str){

  let res=[];

  if(str.length===0){

    return str

  }

  Permution(str,0,str.length,res);

  return res;

}

function Permution(str,start,end,res){

  if(start=end-1){

    res.push(str);

    return;

  }else{

    for(let i=start;i<end;i++){

      if(i !==start && str[i]!==str[start]){

        continue;

      }else{

        let tem=str[i];

          str[i]=str[start];

          str[start]=tem;

        Permution(str,start+1,str.length,res);

      }

    }

  }

}

var permutation = function(S) {

  const ret = []

  const remove = (chars, i) => chars.filter((c, idx) => i !== idx)

  const proc = (chars, v) => {

    console.log("===>",chars,v)

    if (v.length === S.length) {

      console.log("结果===》",v,S)

      ret.push(v)

      return

    }

    for (let i = 0; i < chars.length; i++) {

      console.log("111===>",chars,remove(chars, i),`${v}${chars[i]}`)

      proc(remove(chars, i), `${v}${chars[i]}`)

    }

  }

  proc([...S], '');

  return ret;

};

function printNum(nums){

  let total=1;

  while(nums--){

    total*=10;

  }

  for(let i=1;i<total;i++){

    console.log(i)

  }

}

printNum(2)

function fibler(nums){

  let f0=0;

  let f1=1;

  let res=0;

  if(nums<1){

    return nums;

  }

  while(--nums){

    res=f0+f1;

    f0=f1;

    f1=res;

  }

return res;

}

fibler(4);

var name="jack";

function person(name){

  this.name=name;

  console.log("===>",this.name);

  console.log("window===>",this);

  return name;

}

var a=person('lily');

console.log("name===>",name)

console.log("a===>",a)

var b=new person("fred");

console.log("b===>",b);

class A{}

class B extends A{}

const a=new A();

const b=new B();

console.log(a.__proto__===A.prototype)

console.log(b.__proto__===B.prototype)

console.log(B.__proto__)

console.log(B.prototype.__proto__)

console.log(b.__proto__.__proto__)

function Node(data,left,right){

  this.data=data;

  this.left=left;

  this.right=right;

}

Node.prototype.show=function(){

  return this.data

}

function BST(){

  this.root=null;

}

BST.prototype.insert=function(data){

  console.log("data==>",data)

  var node=new Node(data,null,null);

  console.log("node==>",node)

  if(this.root===null){

    console.log("thisroot==>",this.root)

    this.root=node;

  }else{

    var current=this.root;

    var parent;

    while(true){

      parent=current;

      console.log("parent0==>",parent,data,current.data,data<current.data)

      if(data<current.data){

        current=current.left;

        if(current===null){

          parent.left=node;

          break;

        }

      }else{

        current=current.right;

        if(current===null){

          parent.right=node;

          break;

        }

      }

    }

    console.log("parent==>",parent)

  }

}

BST.prototype.perOrder=function(node){

  if(node){

    console.log(node.show()+"===>"+node);

    this.perOrder(node.left);

    this.perOrder(node.right)

    console.log(node.left+"===>"+node.left);

  }

}

var bst=new BST();

var nums=[10,3,18,2,4,13,21,9,8,9];

for(let i=0;i<nums.length;i++){

  bst.insert(nums[i])

}

bst.perOrder(bst.root)

/*

高阶组件

很好的模式，作用、局限性、如何实现

定义：一个react组件包裹着另外一个组件，这种模式通常用函数来实现，基本上是一个类工厂

*/

/*

fiber作用

1，概念：

react 执行渲染的一种新的调度策略，js是单线程的，一旦组件开始更新，主线程会一只控制着，这时候如果在执行交互操作，就会卡顿

一个组件可以对应多个fiber

render函数中创建的react element树在第一次渲染时候创建一颗结构一摸一样的fiber节点树。不同的react element类型对应不同的fiber节点类型。一个

react element的工作就由他对应的fiber节点来负责

react fiber重构了这种方式，渲染过程采用切片的方式，每执行一会，就歇一会。如果有优先级更高的任务到来以后就会先去执行，降低页面发生卡顿的可能性。使得react对动画等实时性要求较高的场景体验更好

2，什么是fiber

当JS处理大型计算的时候会导致页面出现卡顿，更严重的就是假死。

===》动画丢帧、不连贯。用户体验差。

解决：

大型计算===》拆小型计算===》执行顺序异步调用，这样就不会长时间霸占线程

UI也能在两次计算执行间隙进行更新，从而与用户及时反馈。

3.从how ===》when

how如何用哪个最少的DOM操作成本来update视图

when 何时update视图那一部分

优先级 type priortylevel=0|1|2|3|4|5;

动画和页面交互都是优先级比较高的，这也是fiber能够使得动画、布局、页面交互变得流畅的原因之一

可以把priority分为同步和异步两个类别，同步优先级的任务会在当前帧完成。

4，基本原则

调和:找出要做的更新工作，计算阶段、计算结果可以被缓存，也可以被打断

交付：需要提交所有更新并渲染，为了防止页面抖动被设置为不能打断

5，数据结构：

链表，指向第一个子节点和相邻的兄弟节点

更新队列：updateQueue,一个链表

每个fiber都有一个属性updateQueue指向其对应的更新队列

6执行流程：

用户操作setState==>enqueSetState方法

7，有什么影响：

1）需要关注react为任务片设置的优先级，特别是页面用动画的情况

2）如果一直有更高级别的任务，那么fiber算法会执行级别更高的任务，执行完毕后再通过callback回到之前渲染一般的组件从头开始渲染

（看起来放弃已经渲染完的生命周期，会有点不合理，反而增加渲染时长）

3，compoenntWillMount componentWillReceiveProps componentWillUpdate几个生命周期不再安全，由于任务执行过程可以被打断，这几个生命周期可能会执行多次

如果包含ajax会有意想不到的BUG。尽量采用纯函数

*/

©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 199,271评论 5赞 466
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 83,725评论 2赞 376
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 146,252评论 0赞 328
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 53,634评论 1赞 270
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 62,549评论 5赞 359
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 47,985评论 1赞 275
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 37,471评论 3赞 390
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,128评论 0赞 254
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 40,257评论 1赞 294
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,233评论 2赞 317
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,235评论 1赞 328
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 32,940评论 3赞 316
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 38,528评论 3赞 302
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,623评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,858评论 1赞 255
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 42,245评论 2赞 344
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 41,790评论 2赞 339

推荐阅读更多精彩内容