henry-diasa / awesome_interview_question Goto Github PK

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

var construct2DArray = function(arr, m, n) {
  if (arr.length !== m * n) {
      return [];
  }
  let result = []
  for(let i=0; i< m; i++) {
    let smallArr = []
    for(let j=0; j< n; j++) {
      smallArr.push(arr[j + i*n])
    }
    result.push(smallArr)
  }
  return result
};
console.log(construct2DArray(arr, 4, 3))

var { jsxDEV } = require("react/jsx-dev-runtime");
jsxDEV("h1", {
  children: [
    "hello",
    jsxDEV("span", {
      style: {
        color: "red",
      },
      children: "world",
    }),
  ],
});

/* 三角形：绘制一个正方形，border，transparent掉某个边 */
/* .triangle {
  width: 0;
  height: 0;
  border: 100px solid;
  border-color: rebeccapurple red goldenrod yellowgreen;
  border-top-color: transparent;
  border-bottom-color: transparent;
  border-right-color: transparent;
} */

.triangle {
  width: 0;
  height: 0;
  border-bottom: 100px solid burlywood;
  border-top: 100px solid transparent;
  border-right: 100px solid transparent;
  border-left: 100px solid transparent;
}

/* 圆形：绘制一个圆，隐藏三个边,通过旋转确定方向 */
/* .circle {
  width: 0;
  height: 0;
  border: 100px solid;
  border-color: rebeccapurple red goldenrod yellowgreen;
  border-radius: 50%;
  border-top-color: transparent;
  border-bottom-color: transparent;
  border-right-color: transparent;
  transform: rotate(45deg);
} */

.circle {
  width: 0;
  height: 0;
  border-top: 100px solid transparent;
  border-right: 100px solid transparent;
  border-left: 100px solid transparent;
  border-bottom: 100px solid yellowgreen;
  border-radius: 50%;
  transform: rotate(45deg);
}

/* vw实现 */
.square {
  width: 10%;
  height: 10vw;
  background: tomato;
}

/* 1、移动端 */
<meta name="viewport" content="width=device-width,initial-scale=0.5, minimum-scale=0.5, maximum-scale=0.5"/>

/* 2、transform */
transform: scale(0.5,0.5);


/* 3、boxshadow */
.boxshadow {
  height: 1px;
  background: none;
  box-shadow: 0 0.5px 0 #000;
}

/* 两个div，字体单独放在一个div里面 */
/* 比较一下缩小后的12px是否一样大 */
.fontDiv {
  font-size: 12px;
}
.fontSection {
  font-size: 24px;
  transform: scale(0.5);
}

/* 左边定宽，右边自适应。
* 1、float+margin： 左边给定宽度，浮动。右边给定margin-left为宽度
*/
.wrapper {
  width: 100vw;
  height: 100vh;
}
.left {
  width: 200px;
  height: 100%;
  background-color: rosybrown;
  float: left;
}
.right {
  height: 100%;
  background-color: greenyellow;
  margin-left: 200px;
}

/* 三栏布局，中间自适应 */
/* float+margin */
.app {
  width: 100vw;
  height: 100vh;
  background-color: greenyellow;
}
/* 左栏左浮动 */
.left {
  background: red;
  width: 100px;
  float: left;
  height: 100%;
}

/* 中间自适应 */
.main {
  background: blue;
  height: 100%;
  margin: 0px 200px 0px 100px;
}

/* 右栏右浮动 */
.right {
  background: red;
  width: 200px;
  float: right;
  height: 100%;
}

<div class="wrapper">
 <div class="list">1</div>
 <div class="list">2</div>
 <div class="list">3</div>
 <div class="list">4</div>
 <div class="list">5</div>
 <div class="list">6</div>
 <div class="list">7</div>
 <div class="list">8</div>
 <div class="list">9</div>
</div>
 
.wrapper {
 width: 100%;
 display: grid;
 grid-template-columns: 33.33% 33.33% 33.33%;
 grid-template-rows: 200px 200px 200px;
}

.list {
 background: #f4979a;
 margin: 5px;
}

/* 清除浮动 */
.clearfix::after {
  content: '';
  height: 0;
  display: block;
  clear: both;
}

数据传输

// 解题思路：先排序后再遍历数组
// 第二个数组的元素如果在第一个数组中存在，则删除存在数组中的值 继续遍历

/**
 * @param {number[]} nums1
 * @param {number[]} nums2
 * @return {number[]}
 */
let nums1 = [4,9,5], nums2 = [9,4,9,8,4]
var intersect = function(nums1, nums2) {
  nums1.sort((a, b) => a - b);
  nums2.sort((a, b) => a - b); // 先排序，使得重复的元素相邻出现
  const list = []
  nums1.forEach(v =>{
    if(nums2.indexOf(v) !== -1){
      list.push(v)
      nums2.splice(nums2.indexOf(v), 1)
    }
  })
  return list
};

intersect(nums1, nums2)

toString.call(1) // [object Number]
toString.call(function(){}) // [object Function]
toString.call(null) // [object Null]

// 检测数组
Array.isArray([])

Number.isNaN(NaN) // true
Number.isNaN(12) // false

function myTypeof(data) {
    const str = JSON.stringify(data)
    if (/^{.*}$/.test(data)) {
        return 'object'
    }
    if (/^\[.*\]$/.test(data)) {
        return 'array'
    }
}

    // ---------------------------------------------------------防抖函数
    function debounce(func, delay) {
      let timeout
      return function () {
        let arg = arguments
        if (timeout) clearTimeout(timeout)
        timeout = setTimeout(() => {
          func(arg)
        }, delay);
      }
    }

    // ---------------------------------------------------------立即执行防抖函数
    function debounce2(fn, delay) {
      let timer

      return function () {
        let args = arguments
        if (timer) clearTimeout(timer)


        let callNow = !timer
        timer = setTimeout(() => {
          timer = null
        }, delay);
        if (callNow) { fn(args) }
      }
    }
    // ---------------------------------------------------------立即执行防抖函数+普通防抖
    function debounce3(fn, delay, immediate) {
      let timer

      return function () {
        let args = arguments
        let _this = this
        if (timer) clearTimeout(timer)

        if (immediate) {
          let callNow = !timer
          timer = setTimeout(() => {
            timer = null
          }, delay);

          if (callNow) { fn.apply(_this, args) }
        } else {
          timeout = setTimeout(() => {
            func.apply(_this, arguments)
          }, delay);
        }

   // ---------------------------------------------------------节流 ，时间戳版

    function throttle(fn, wait) {

      let previous = 0
      return function () {
        let now = Date.now()
        let _this = this
        let args = arguments
        if (now - previous > wait) {
          fn.apply(_this, arguments)
          previous = now
        }
      }
    }

    // ---------------------------------------------------------节流 ，定时器版
    function throttle2(fn, wait) {
      let timer
      return function () {
        let _this = this
        let args = arguments
        if (!timer) {
          timer = setTimeout(() => {
            timer = null
            fn.apply(_this, arguments)
          }, wait);
        }
      }
    }

回调函数中嵌套回调函数的情况就叫做回调地狱。
回调地狱就是为是实现代码顺序执行而出现的一种操作，它会造成我们的代码可读性非常差，后期不好维护。

Promise是最早由社区提出和实现的一种解决异步编程的方案，比其他传统的解决方案（回调函数和事件）更合理和更强大。
ES6 将其写进了语言标准，统一了用法，原生提供了Promise对象。
ES6 规定，Promise对象是一个构造函数，用来生成Promise实例。

1、Promise对象的状态不受外界影响
1）pending 初始状态
2）fulfilled 成功状态
3）rejected 失败状态
Promise 有以上三种状态，只有异步操作的结果可以决定当前是哪一种状态，其他任何操作都无法改变这个状态
2、Promise的状态一旦改变，就不会再变，任何时候都可以得到这个结果，状态不可以逆，只能由 pending变成fulfilled或者由pending变成rejected

1）无法取消Promise,一旦新建它就会立即执行，无法中途取消
2）如果不设置回调函数，Promise内部抛出的错误，不会反映到外部
3）当处于pending状态时，无法得知目前进展到哪一个阶段，是刚刚开始还是即将完成

1）onResolvedCallbacks 成功后要执行的回调序列 是一个数组
2）onRejectedCallbacks 失败后要执行的回调序列 是一个数组

以上两个数组存放在Promise 创建实例时给Promise这个类传的函数中，默认都是空数组。
每次实例then的时候 传入 onFulfilled 成功回调 onRejected 失败回调，如果此时的状态是pending 则将onFulfilled和onRejected push到对应的成功回调序列数组和失败回调序列数组中，如果此时的状态是fulfilled 则onFulfilled立即执行，如果此时的状态是rejected则onRejected立即执行

上述序列中的回调函数执行的时候 是有顺序的，即按照顺序依次执行

     function rotate(arr, k) {
        const len = arr.length;
        if (!k || len === 0) return arr;
        const step = Math.abs(k % len);
        for (let i = 0; i < step; i++) {
          const n = arr.pop();
          if (n!==null) {
            arr.unshift(n);
          }
        }
        return arr;
      }

     function rotate(arr, k) {
        const len = arr.length;
        if (!k || len === 0) return arr;
        const step = Math.abs(k % len);
        const left = arr.slice(-step);
        const right = arr.slice(0, len - step);
        return left.concat(right);
      }

function equal(a, b) {
  return Math.abs(a - b) < Number.EPSILON;
}

html{
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: grayscale(100%);
    filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
}

grayscale()将图像转换为灰度
blur()模糊图像
brightness()使图像更亮/更暗
contrast()增加/减少图片对比度
drop-shadow()在图像后面应用阴影
hue-rotate()更改图像整体色调
invert()反转图像颜色
opacity()使图像透明
saturate()对输入图像进行饱和/去饱和处理
sepia()将图像转为棕褐色

/**
* 知识点：二分查找
 * @param {number[]} nums
 * @param {number} target
 * @return {number}
 */
var searchInsert = function(nums, target) {
    // 初始化左开始位置，右边开始位置
    let left = 0, right = nums.length - 1, ans = nums.length;
    while (left <= right) {
        let mid = parseInt((right + left)/2);
        // 目标元素小于等于中间元素，右移，否则左移
        if (target <= nums[mid]) {
            ans = mid;
            right = mid - 1;
        } else {
            left = mid + 1;
        }
    }
    return ans;
};

首先客户端向服务端发起一个随机值，以及一个加密算法
服务端收到后返回一个协商好的加密算法，以及另一个随机值
服务端在发送一个公钥CA
客户端收到以后先验证CA是否有效，如果无效则报错弹窗，有过有效则进行下一步操作
客户端使用之前的两个随机值和一个预主密钥组成一个会话密钥，在通过服务端传来的公钥加密把会话密钥发送给服务端
服务端收到后使用私钥解密，得到两个随机值和预主密钥，然后组装成会话密钥
客户端在向服务端发起一条信息，这条信息使用会话秘钥加密，用来验证服务端时候能收到加密的信息
服务端收到信息后返回一个会话秘钥加密的信息
都收到以后SSL层连接建立成功

let outObj = {
  inObj: {a: 1, b: 2}
}
let newObj = {...outObj}
newObj.inObj.a = 2
console.log(outObj) // {inObj: {a: 2, b: 2}}

let outObj = {
  inObj: {a: 1, b: 2}
}
let newObj = Object.assign({}, outObj)
newObj.inObj.a = 2
console.log(outObj) // {inObj: {a: 2, b: 2}}

<ul>
  <li v-for="item in activeList" :key="item"></li>
</ul>
export default {
  data() {
    return {
      list: [78, 90, 20, 45, 66, 120, 136]
    }
  },
  computed: {
    activeList() {
      return this.list.filter((item) => item < 100)
    }
  }
}

function Woman(){ 
}
Woman.prototype= new People();
Woman.prototype.name = 'haixia';
let womanObj = new Woman();

function Woman(name){
 //继承了People
  People.call(this); //People.call(this，'wangxiaoxia'); 
  this.name = name || 'renbo'
}
let womanObj = new Woman();

function Wonman(name){
  let instance = new People();
  instance.name = name || 'wangxiaoxia';
  return instance;
}
let wonmanObj = new Wonman();