2024面试题

张张张张张张张张张张张张张张张张

已于 2024-06-04 17:16:02 修改

阅读量124

点赞数 2

文章标签：前端 vue.js javascript typescript

于 2024-05-30 08:10:29 首次发布

本文链接：https://blog.csdn.net/qq_33144001/article/details/139297759

版权

设置单行文本省略号的写法 ：
width: 200px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;



多行文本省略号的写法
width: 200px;
/* 主要控制父元素容器里面子元素的排列方式 */
display: -webkit-box;
display: -moz-box;
white-space: pre-wrap;
word-wrap: break-word;
overflow: hidden;
text-overflow: ellipsis;
-webkit-box-orient: vertical;
/* 实现限制文字显示多少行,也就是说要多少行是出现省略号,我这里设置三行就让文本出现省略号 */
-webkit-line-clamp: 3;
/*显示行数  要几行就改几行*/

优化手段（vue）
异步组件
Vue.component(
  'async-webpack-example',
  // 这个动态导入会返回一个 `Promise` 对象。
  () => import('./my-async-component')
)

局部引用
components: {
  // 方式一: import
  AsyncComponent: () => import("./components/asyncComponent.vue"),

  // 方式二: require
  AsyncComponent: (resolve) => require(["./components/asyncComponent.vue"], resolve),
},

加载状态
const AsyncComponent = () => ({
  // 需要加载的组件 (应该是一个 `Promise` 对象)
  component: import('./MyComponent.vue'),
  // 异步组件加载时使用的组件
  loading: LoadingComponent,
  // 加载失败时使用的组件
  error: ErrorComponent,
  // 展示加载时组件的延时时间。默认值是 200 (毫秒)
  delay: 200,
  // 如果提供了超时时间且组件加载也超时了，
  // 则使用加载失败时使用的组件。默认值是：`Infinity`
  timeout: 3000
})

apply call bind应用
var a={
     name:'阿姨请别把您闺女介绍给我',
     sex:'男',
     age:'24',
     say:function(){
          console.log(this.name+',今年'+this.age+'岁，性别'+this.sex)
     }
}

var b={
     name:'就要把闺女介绍给你',
     sex:'女',
     age:'18'
}
a.say();//阿姨请别把您闺女介绍给我,今年24岁了，性别男

那么我们想一下如何让b用say的方法显示数据呢？

用call方法：a.say.call(b)

用apply方法：a.say.apply(b)

用bind方法：a.say.bind(b)()

<!DOCTYPE html>
<style>
  a {
    justify-content: center;
    align-items: center;
  }
</style>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div>demo</div>
  </body>
</html>
<script>
  /**
   * 多维数组去重排序
   *
   * */
  let arr = [
    [1, 2, 33, 2, 11],
    [33, 22, 11, 222, 333, 1, 22, 33, [11, 1.2, 24]],
    [[2, 3, 9999]],
  ];
  let deepObj = {
    name: "zhang",
    info: {
      sex: "男",
      hoddy: {
        hoddy: "game",
      },
    },
  };
  function uniqueAndSortArray(tempArr) {
    function uniqueFn(arr) {
      return arr
        .reduce((acc, val) => {
          return Array.isArray(val)
            ? acc.concat(uniqueFn(val))
            : acc.concat(val);
        }, [])
        .sort((a, b) => b - a);
    }
    let newArr = [];
    newArr = uniqueFn(tempArr);
    return Array.from(new Set(newArr));
  }
  //   alert(uniqueAndSortArray(arr));

  /**
   * 延迟函数
   * */
  async function delayFn(delay) {
    await new Promise((resolve) => {
      setTimeout(() => resolve(), delay);
    });
  }
  async function fn() {
    await delayFn(2000);
    console.log("delay 2000");
  }
  fn();

  /**
   * 深拷贝
   * */
  function deepCopyFn(obj) {
    let newObj = [];
    if (typeof obj !== "object" || obj == null) return obj;
    for (let key in obj) {
      if (obj.hasOwnProperty(key)) {
        newObj[key] = deepCopyFn(obj[key]);
      }
    }
    return newObj;
  }
  let newDeepObj = deepCopyFn(deepObj);
  newDeepObj.name = "zxx";
  console.log(newDeepObj);
  console.log(deepObj);
  console.log(deepCopyFn([]));

  /**
   * 防抖 某段时间内重复执行只执行最后一遍
   * */
  function debounceFn(fn, delay) {
    let timer;
    if (timer) clearTimeout(timer);
    return function (...args) {
      timer = setTimeout(() => {
        fn.apply(this, args);
      }, delay);
    };
  }
  function bounceFn(txt, ms) {
    console.log("I am " + txt, "时长：" + ms + "ms");
  }
  let out = debounceFn(bounceFn, 2000);
  out("防抖", 20000);

  function throttle(fn, delay) {
    let timer = null;
    return function (...args) {
      if (timer) return;
      timer = setTimeout(() => {
        fn.apply(this, args);
        timer = null;
      }, delay);
    };
  }
  function trFn(txt) {
    console.log("i am" + txt);
  }
  let outTrFn = throttle(trFn, 2000);
  outTrFn("节流函数 控制2s/次");

  function factorialFn(num) {
    if (num <= 0) return undefined;
    if (num == 0 || num == 1) return 1;
    return num * factorialFn(num - 1);
  }
  console.log(factorialFn(1));
  let psArray = {
    0: "name",
    1: "age",
    2: "sex",
    length: 3,
  };
  console.log(Array.prototype.splice.call(psArray));

  /**
   *  对象原型链继承
   * */
  function SuperFn(name) {
    this.name = name;
  }
  SuperFn.prototype.getSuperValue = function () {
    console.log("this is value:" + this.name);
  };
  function SubFn(name) {
    this.name = name;
  }
  SubFn.prototype = new SuperFn();
  let subObj = new SubFn('sub name');
  subObj.getSuperValue()
</script>

/**
   * 冒泡排序
   * 手写排序
   * */
  let buArr = [2, 1, 3, 6, 10, 9];
  function buSort(arr) {
    let temp;
    for (let i = 0; i < arr.length - 1; i++) {
      for (let j = 0; j < arr.length - 1 - i; j++) {
        if (arr[j] > arr[j + 1]) {
          temp = arr[j];
          arr[j] = arr[j + 1];
          arr[j + 1] = temp;
        }
      }
    }
    return arr;
  }
  console.log("冒泡排序:" + buSort(buArr));
/**
 * 使用SetTimeout模拟/模仿SetInterVal（JavaScript）
 * */ 
  var timer;
  var i = 1;
  timer = function () {
    i++;
    console.log(i);
    if (i == 10) {
      timer = function () {
        console.log("终止运行");
      };
    }
    setTimeout(timer, 500);
  };
  setTimeout(timer, 500);