2022.8前端面试准备题

一，html
二，CSS
三，JS
四，计算机基础
- 1，mvc和mvvc的区别
- 2，说一下http和https
五，React面试题

一，html

1，语义化

2，新特性

（1）绘图:canvas+svg

canvas:通过脚本绘制图形

 <canvas id="myCanvas">你的浏览器不支持 HTML5 canvas 标签。</canvas>
    
    <script>
        var c = document.getElementById('myCanvas');
        var ctx = c.getContext('2d'); //返回对象，该对象上有绘制图形的方法和属性
        ctx.fillStyle = '#FF0000';
        ctx.fillRect(0, 0, 80, 100);
    </script>

SVG：可缩放矢量图形

 <svg>
       <rect width="200px" height="200px" fill="blue"></rect>
 </svg>

（2）拖拽

<div id="box" ondragover="allowDrage" ondrop="drop"></div>
<img src="./p2869446365.jpg" draggable="true" id="img" ondragstart="dragStart"/>
<script type="text/javascript">
            function dragStart(ev){
                ev.dataTrasfer.setData("Text",ev.target.id)
            }
            function allowDrage(ev){
                ev.preventDeafault();
            }
            function drop(ev){
                ev.preventDeafault();
                var data = ev.dataTrasfer.getData("Text");
                var img = document.getElementById("img");
                ev.targer.appendChild(img);
            }
</script>

（3）音频、视频

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
</video>

<audio controls>
  <source src="horse.ogg" type="audio/ogg">
  <source src="horse.mp3" type="audio/mpeg">
</audio>

（4）地理位置

<button id="btn">click</button>
   <script>
    var btn = document.getElementById("btn");
    btn.addEventListener("click",()=>{
        var geoloc = window.navigator.geolocation;
        geoloc.getCurrentPosition(
            (success)=>console.log('success' , success),
            (err)=>console.log('err' , err),
            {timeout:5000}
        )
    })
   </script>

（5）localStorage、sessionStorage、cookie

a, localStorage+sessionStorage

一个5M大小的针对于前端页面的数据库,值类型限定为string类型，这个在对我们日常比较常见的JSON对象类型需要一些转换

//存
var ls = window.localStorage || window.sessionStorage
ls.setItem("key",value)
//取
ls.getItem("key")
//改
ls.key = value
//删全部
ls.clear()
//删某个
ls.removeItem("key")

b, cookie

https://blog.csdn.net/GoodburghCottage/article/details/125978987

3，请求方法

在这里插入图片描述

二，CSS

1，BFC

在这里插入图片描述

2，响应式布局

在这里插入图片描述

3，CSS选择器

在这里插入图片描述

4，块级元素、行内元素

在这里插入图片描述

5，SEO需要做些什么

在这里插入图片描述

三，JS

1，原型与原型对象、作用域链

在这里插入图片描述

2，闭包

在这里插入图片描述

3，防抖与节流

在这里插入图片描述

闭包封装防抖：

<body>
   <input type="text" id="input"/>
   <script>
     let input = document.getElementById("input");
     input.oninput = debounce(c,500)

     function c(){
        console.log(this.value)
     }

     function debounce(fn,time){
        let t = null
        return function() {
                    if (t !== null) {
                        clearInterval(t)
                    }
                    t = setTimeout(() => fn.call(this), time)
                }
     }
   </script>
</body>

节流
在这里插入图片描述

4，回调地狱+Promise+Async/await

function getTea(){
    return new Promise((resolve)=>{
        resolve("Tea")
    })
}

function getHotpot(){
    return new Promise((resolve)=>{
        resolve("Hotpot")
    })
}
getTea().then(data=>console.log(data))
getHotpot().then(data=>console.log(data))

//async

async function getData(){
   let tea = await getTea()
   console.log(tea)
   let hotpot = await getHotpot()
   console.log(hotpot)
}

getData()

5，this指向

在这里插入图片描述

6，对象拷贝

在这里插入图片描述
浅拷贝

深拷贝

通过JSON实现深、浅拷贝

7，页面间通信

//index.html
<body>
   <button id="btn">submit</button>
   <script>
      let btn = document.getElementById("btn")
      let s = window.sessionStorage
      btn.onclick = function(){
         s.setItem("msg","hello")
         window.location.href = "./test.html"
      } 
   </script>
</body>
//test.html
<body>
    <script>
        let s = window.sessionStorage
        let msg = s.getItem("msg")
        console.log('msg' , msg)
    </script>
</body>

8，set 和map 的区别

在这里插入图片描述

9，Promise

在这里插入图片描述

10，Var、 let 、const 区别

在这里插入图片描述

11，== 和 ===区别

在这里插入图片描述

12，数组方法

在这里插入图片描述

13，call、apply 、bind区别

在这里插入图片描述

14，本地存储的方式有哪些？区别及应用场景？

在这里插入图片描述

15，深拷贝浅拷贝的区别

在这里插入图片描述

16，typeof 与 instanceof 区别

在这里插入图片描述

17，ajax、axios、jsonp的理解

在这里插入图片描述

18，ajax请求的时候get 和post方式的区别

在这里插入图片描述

19，什么是事件委托以及优缺点

在这里插入图片描述

20，数组与字符串相互转化

//字符串转数组
var str="How are you doing today?";
var n=str.split(" "); //How,are,you,doing,today?
//数组转为字符串
var fruits = ["Banana", "Orange", "Apple", "Mango"];
var energy = fruits.join(); //Banana,Orange,Apple,Mango