日常记笔记-CFANZ编程社区

今日面试题

1.上上家公司具体做什么的,你在里面做了什么,开发了的app有几个模块,具体是做哪方面的?

2.react的原理?
一.虚拟DOM
1.虚拟DOM :将页面改变内容应用到虚拟DOM上,而不是直接应用在DOM上
2.当变化被应用到虚拟DOM上时,不急着去渲染界面,而仅仅是调整DOM的内部状态
3.在虚拟DOM收集到足够的改变时,再把这些变化一次性应用到真实DOM上
4.抽离了原来的渲染过程,实现了跨平台能力
二.Diff算法
1.分层求异策略,对element diff进行算法优化
2.通过相同类生成想累死树形结构,不同类生成不同树形结构的策略,对component diff进行算法优化
3.通过设置唯一的key的策略,对element diff进行算法优化
3.react核心思想?
内存维护虚拟dom(js对象),数据变化时(setState),自动更新虚拟DOM,得到一颗新树,然后Diff新老虚拟Dom树,窄带有变化的部分,得到一个Change(patch),讲这个Patch加入队列,最终批量更新这些Patch到DOM中

1.promise.then返回什么?
<!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>

</body>

</html>
<script>
  let func = function () {
    return new Promise((resolve, reject) => {
      resolve('返回值');
    });
  };
  let cb = function () {
    return '新的值';
  }
  func().then(function () {
    return cb();
  }).then(resp => {
    console.warn(resp);
    console.warn('1-------------');
  });
  func().then(function () {
    cb()
  }).then(resp => {
    console.warn(resp);
    console.warn('2--------------');
  });
  func().then(cb()).then(resp => {
    console.warn(resp);
    console.warn('3--------------');
  });
  func().then(cb).then(resp => {
    console.warn(resp);
    console.warn('4---------------');
  })
  // then方法提供一个自定义的回调函数,若传入非函数,则会忽略当前then方法,
  // 回调函数会把上一个then中返回的值当做参数值供当前then方法调用
  // then方法执行完毕后需要返回一个新的值给下一个then调用(没有返回值默认使用undefined)
  // 每个then只能使用前一个then的返回值
</script>

2.es6新特性?

块作用域
类
箭头函数
模板字符串
对象解构
promise
模块
Symbol
代理(proxy)
Set
函数默认参数
rest
扩展运算符
数组和对象的扩展

轮廓和圆角

<!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>
  <style>
    .box1 {
      width: 200px;
      height: 200px;
      background-color: aqua;
      /* 
      outline 用来设置元素的轮廓线,用法和border一模一样
              轮廓和边框不同的点,就是轮廓不会影响到可见框的大小

      */
      /* 
      box-shadow 用来设置元素的阴影效果,阴影不会影响也免得布局
      第一个值 水平偏移量 设置阴影的水平位置 正值向右移动 负值向左移动
      第二个值 水平偏移量 设置阴影的垂直位置 正值向下移动 负值向上移动
      第三个值 阴影的模糊半径
      第四个值 阴影的颜色
      */
      box-shadow: 150px 150px 150px rgba(0, 0, 0, 0.5)
    }

    .box2 {
      width: 200px;
      height: 200px;
      background-color: pink;
      border-radius: 50px 100px;
      /* 
      border-radius:用来设置圆角 圆角设置圆的半径
      分别可以指定四个角的圆角
      四个值 左上 右上 右下 左下
      三个值 左上 右上/左下 右下
      两个值 左上/右下 右上/左下
      */
      /* 
      设置圆形
      */
      border-radius: 50%;
    }

    /* .box1:hover {
      outline: 10px solid red
    } */
  </style>
</head>

<body>
  <!-- <div class="box1"></div> -->
  <div class="box2"></div>
</body>

</html>

盒子的尺寸

<!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>
  <style>
    .box1 {
      width: 100px;
      height: 100px;
      background-color: pink;
      padding: 10px;
      border: 10px solid #000;
      /* box-sizing: content-box; */
      box-sizing: border-box;
      /* 
      默认情况下,盒子可见框大小由内容,内边距和边框共同决定
            box-sizing 用来设置盒子尺寸的计算方式(设置width和height的作用)
                可选值:
                      content-box 默认值,宽度和高度用来设置内容区的大小
                      border-box 宽度和高度用来设置整个盒子可见框的大小
                                width和height值的是内容区和内边距和边框的总大小
      */
    }
  </style>
</head>

<body>
  <div class="box1"></div>
</body>

</html>

力扣每日一题

/**
 * @param {string} s
 * @param {number} numRows
 * @return {string}
 */
var convert = function(s, numRows) {
    // 如果s的长度小于numRows或者numRows为1时,返回s
if(s.length<=numRows||numRows===1){return s};
// 设定一个长度等于numRows的空串数组
const arr=new Array(numRows).fill('');
// 设定num为0
let num=0;
// 设定方向为true,为true就是向下走,为false就是向上走
let plus=true;
// 循环i,i小于s的长度
for(let i=0;i<s.length;i++){
    // 把s的第i项拼接给空串arr
    arr[num]+=s[i];
    // 如果向下,num依次递增
    if(plus){
        num+=1;
    }else{
        // 反之则依次递减
        num-=1;
    }
    // 如果num为0就是向上到头了,要重新向下,将plus设为true
    if(num===0){
        plus=true
    }
    // 如果num为numRows-1,说明到底了,numRows-1是对首项为0的修正,将plus设为true
    if(num===numRows-1){
        plus=false
    }
}
// 对空串返回的结果进行拼接
    return arr.join('');

};