前端面试复习一

150 阅读12分钟

HTML

行内元素块级元素空元素

行内元素:span img input...
块级元素: div footer header section p h1...h6 ...
空元素:br hr ...
元素之间的转换
<html>
    <head>
        <style>
            div{
                display:inline; //转换为行内元素    不独占一行,且不能设置宽高的
                display:inline-block;//转换为行内块级元素  不独占一行 ,可以设置宽高
                display:block;//转换为块级元素           独占一行,可以设置宽高
            }
        </style>
    </head>
</html>

link和@import区别

区别一:link先有,后有@import (兼容性link比@import兼容)
区别二:加载顺序,浏览器先加载标签link后加载@import
<html>
    <head>
        <link>
        <style>
            @import "a.css";
        </style>
    </head>
</html>

标签之间的区别

title和h1的区别:
    定义:
        title:概括了网站信息,可以告诉搜索引擎或者用户关于这个网站的内容主题是什么
        h1:文章主题内容,告诉搜索引擎我们网页内容最主要是什么
    区别:
        title是显示在网页的标题上,h1是显示在网页内容上
        title比h1添加的重要对于seo的了解 (网站的logo都是用h1包裹的)
bstrong的区别:
    定义:
        b:实体标签,用来给文字加粗的
        strong:逻辑标签,用来加强字符语气
    区别:b标签只有加粗的样式,没有实际含义
        strong表示标签内字符比较重要,用以强调
iem的区别:
    定义:
        i:是一个实体标签,用来做文字倾斜的
        em:是逻辑标签,用来强调文字内容的
    区别:
        i只是一个倾斜标签,没有实体含义 (i大多数用于字体图标上)
        em表示标签内字符重要,用于强调  (em则用于专业术语上如医药、生物)
img中title和alt区别:
    定义:
        title:鼠标移入到图片显示的值
        alt:图片无法加载显示的值
    区别:
        在seo的层面上,搜索引擎抓取不到图片的,所以前端在写img标签的时候,为了增加seo的效果,增强alt属性来描述图片的主题内容。
png、jpg、git这些图片格式什么时候用
    定义:
        png:无损压缩,尺寸体积要比jpg/jpen的大,适合做小图标
        jpg:采用压缩算法,有一点失帧,比png体积小(用于中大型图片)
        git:一般做动图的
        webp:同时支持有损或无损压缩,相同质量的图片,webp具有更小的体积,兼容性不好
        
<html>
    <head>
        <style></style>
    </head>
    <body>
        <img title="这是一张图片" alt="这是alt">
    </body>
</html>

CSS

CSS盒子模型

css盒子模型有:标准盒子模型、IE盒子模型
css的盒子模型区别:
    标准盒子模型:marginborderpaddingcontent
    IE盒子模型:margincontentborder+padding+content)
如何转换盒子模型:
通过css来进行转盒子模型
*{
    box-sizing:border-box;//IE盒子模型
    box-sizing:content-box;//标准盒子模型
}

line-height和height的区别

line-height是每一行文字的高,如果文字换行则整个盒子高度会增大(行数*行高)
height是一个死值,就是这个盒子的高度

CSS选择器

CSS选择符:
通配(*)
id选择器(#)
类选择器(.)
标签选择器(divp、sapn...)
相邻选择器(+ 下一个兄弟)
后代选择器(ul li)选中ul的所有li元素
子元素选择器(>)
属性选择器(div[background:red])
*{
    ul li + li{//这是排除第一个li元素,选择剩下的所有li元素
        background:red;
    }
}
​

CSS属性继承

文字系列:font-sizecolorline-height、text-aling...
不可继承属性:borderpaddingmargin...

CSS优先级算法如何计算

优先级比较:@important>内联样式>id>class>标签>通配
CSS权重计算:
    第一:内联样式style 权重值:1000
    第二:id选择器      权重值:100
    第三:类选择器      权重值:10
    第四:标签&伪元素   权重值:1
    第五:统配、>、+    权重值:0

CSS画个三角形

border来画
transparent  :颜色透明
div{
    width:0;
    height:0;
    border-left:100px solid #ccc;
    border-right:100px solid  transparent;
    border-top:100px solid transparent;
    border-bottom:100px solid transparent;
}
三角形在那哪个方向哪个方向就不透明

盒子垂直居中

<div class="container">
<div class="main"></div>
</div>
第一种方法:flex布局来实现
.container{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 300px;
    height:300px;
    border: 1px solid black;
}
.main{
    background: red;
}
第二种方法:
    .container{
    position: relative;
    width: 300px;
    height:300px;
    border: 1px solid black;
}
.main{
    background: red;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}

display有哪些值

none:隐藏元素
block:将元素转换为块元素
inline:将元素转换为内联元素
inline-block:建元素转换为行内块级元素
table:将元素用表格的形式来显示

BFC规范

BFC就是页面上一个隔离的独立容器,容器里面的子元素不会影响外面的元素
1.BFC:就是块级格式化上下文
2.BFC原则:如果一个元素具有BFC,那么内部元素在怎么弄,都不会影响外面的元素。
3.如何触发BFC:
    float的值为非none
    overflow的值为非visible
    display的值为:inline-block、table-cell...
    position的值为:absoute,fixed

清除浮动的方式

1.触发BFC来请除浮动(overflow:hidden)
2.多创建一个盒子,添加样式:clear:both;
3.通过伪元素来实现:after
div:after{
    content:"";
    display:block;
    clear:both;
}

CSS定位

通过position属性来定位
static:没有定位
fixed:固定定位,相对于浏览器窗口进行定位
relative:相对于自身定位,不脱离文档流
absolute:相对于第一个有relative的父元素定位,脱离文档流
relative和absolute区别
1.relative不脱离文档流 ,absolute脱离文档流
2.relative相对于自身定位,absolute相对于第一个有relative的父元素
3.relative如果有leftrighttopbottom只有lefttop存在
  absolute如果有leftrighttopbottom都可以存在

双飞翼布局

定义:左右

<html>
    <head>
        <style>
            *{
                margin:0;
                padding:0;
            }
            .container{
                width:100vw;
                height:100vh;
            }
            .container>div{
                float:left;
            }
            .left{
                margin-left:-100%;
                width:200px;
                height:100vh;
                background:red;
            }
            .conter{
                width:100%;
                background:pink;
            }
            .right{
                margin-left:-200px;
                width:200px;
                height:100vh;
                background:blue;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <div class="conter"> conter</div>
            <div class="left"> left</div>
             <div class="right"> right</div>
        </div>
    </body>
</html>

CSS reset

reset.css 是一个css文件,用来重置css样式
Normalize.css 为了增强跨浏览器渲染的一致性,重置css样式

CSS sprite

1.是什么
    把多个小图标合并成一个大图片
2.优缺点
    优点:减少了http请求的次数,提升了性能;
    缺点:维护比较差(例如图片位置进行修改或者宽高进行修改)

display:none and visibility:hidden

display:none:是不占用位置的
visibility:hidden ;虽然隐藏了但是占用位置  

opacity和rgba

共同性:实现透明效果
1.opacity 取值范围是01之间,0表示完全透明,1表示不透明
2.rgba  r代表红色,g表示绿色,b表示蓝色,a也是0-1之间
区别:opacity会继承父元素的opacity属性,而RGBA设置的元素的后代元素不会继承不透明的属性

JavaScript

JS延迟加载

async defer
<script async type="" src="1.js"></script>
<script defer type="" src="1.js"></script>
defer:等html全部解析完成,才会加载js代码,顺序执行js脚本。
asyncasync是和html解析同步完成的,不是顺序执行js脚本,谁先加载完成谁先执行。

JS数据类型

基本类型:Stringnumberbooleanundefinednullsymbolbigint
引用类型:object (array function objectNaN 是一个数值类型 具体不知道 如 undefined+1 就是 NaN

null和undefined的区别

1.作者在设计js的时候先设计了null(最初设计js的时候借鉴了java)
2.null会被隐试转换为0,很不容易发现错误
3.先有null后有undefined。出来undefined是为了填补之前的错误
​
具体的区别:javascript的最初版本是这样区分的:null是一个表示“无”的对象(空对象指针),转为数值为0undefined是一个表示“无”的原始值,转换为数值是NaN

==和===区别

==:比较的是值
    string==number||boolean||number||...都会隐式转换
    通过valueOf转换(valueOf()方法通常由JavaScript在后台自动调用)
===:比较的是值和类型

JS微任务和宏任务

1.js是单线程的语言。
2.js代码执行流程:同步任务执行完==》事件循环
    事件循环(微任务、宏任务)
同步的任务都执行完了,才会执行事件循环里面,进入事件循环:请求、定时器、事件...
微任务:promise.then
宏任务:setTimeout..
要执行宏任务的前提是清空了微任务。
​
setTimeout(function(){
    console.log(5)
},1000)
new Promose((reslove)=>{
    console.log(2)
    reslove()
}).then(()=>{
    console.log(3)
}).then(()=>{
    console.log(4)
})
console.log(1);
​
打印结果是:2 1 3 4 5

JS作用域

1.除了函数外,js是没有块级作用域
2.作用域链:内部可以访问外部的变量,外部不可以访问内部的变量。
    变量优先访问内部变量,内部没有在向外找。
3.注意声明变量是var还是没有写如(b=0 =》window.b=04.js有变量提升的机制(变量悬挂声明)
5.优先级:声明变量》声明普通函数》参数》变量提升
function fun(a){
    var a=10;
    function a(){}
    console.log(a); //打印的值是 10 
}
​
​
​
function c(){
    var b = 1;
    function a(){
        console.log(b);
        var b= 2;
        console.log(b);
    }
    a();
    console.log(b);
}
c();
执行结果:undefined  2  1

随机数

//生成n位数字字符串
function randomNum(n){
    let res = ''
    for(let i=0;i<n;i++){
        res += Math.floor(Math.random()*10);
    }
    return res;
}
//生成n位数字字母混合得字符串
function generateMixed(n){
    let chars = ['0','1','2','3','4','5','6','7','8','9','A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z'];
    let res = '';
    for(let i=0;i<n;i++){
        let id = Math.floor(Math.random()*36);
        res += chars[id]
    }
    return res;
}

闭包

闭包:本质就是上级作用域内变量的生命周期,因为被下级作用域内引用,而没有被释放。就导致上级作用域内的变量,等到下级作用域执行完以后才正常得到释放。
优点:
    可以访问外部函数的局部变量
缺点:
    变量会驻留内存中,造成内存损耗问题
    内存泄漏【ie】
​
​
function fun(){
    let a =10;
    return function(){
        console.log(a)
    }
}
fun()();

原型链+this指向

 function Foo(){
     getName = function(){console.log(1)}//注意是全局 window.
     return this;//this是指向window
 }
Foo.getName = function(){console.log(2)}
Foo.prototype.getName = function(){console,log(3)}
var getName = function(){console,log(4)}
function getName(){
    console.log(5)
}
Foo.getName(); //2
getName();    //4
Foo().getName();//1
//这里调用了顶掉了var getName 。。。 
  //getName = function(){console.log(1)}//注意是全局 window.
getName();//1
new Foo().getName();//3
​
-------------------------------------------------
    var o ={
        a:10,
        b:{
            fn:function(){
                console.log(this.a);//undefine
                console.log(this)//指向b
            }
        }
    }
o.b.fn();

JS判断是不是数组

    let a= [1,2,3]
    let b= "124"
1.通过 isArray 来判断
   console.log(Array.isArray(a)) //true
   console.log(Array.isArray(b)) //false
2.通过 instanceof 
    console.log(a instanceof Array) //true
3.通过原型
    console.log(Object.prototype.toString.call(a).indexOf('Array')>-1)//true
4.isPrototypeof
    console.log(Array.prototype.isPrototypeof(a))//true
5.constructor
    console.log(a.constructor.toString().indexOf('Array')>-1)//true

slice是干嘛的,splice会不会改变原数组

1.slice 是用来截取数组的但是不会改变原数组
const arr = ['a', 'b', 'c', 'd', 'e', 'f'];
arr.slice(); // 无参数时,截取所有的元素。
arr.slice(2); // 从第二个值开始提取,直到末尾
arr.slice(-2); // 提取最后两个元素 负数会将其与长度相加,-2+6=4
arr.slice(2, 4); // 提取从第二个到第四个之间的元素(不包括第四个元素)
arr.slice(4, 2); // 空2.splice:功能有:插入、删除、替换   (会改变原数组)
    返回删除的数组
    var arr1 = ['a', 'b', 'c', 'd', 'e', 'f'];
arr1.splice(1); //从第index为1的位置开始,删除元素
arr2.splice(-2); //删除最后两个元素,和slice同样的思想。
arr3.splice(1, 3); //从第index为1的位置开始删除元素,一共删除三个元素
// 增加系列
arr4.splice(1,0,'g','h') //纯增加情况
//变更的情况就是 先删除再增加,即替换
arr4.splice(1, 3, 'js', 'vue');//删除+增加 == 更改

数组去重

var arr = [1,1,2,2,3,3]
1.new Set()
    console.log(Array.from(new Set(arr)))
    console.log([new Set(arr)])
2.indexOf
    function unqiue(arr){
        var array=[];
        for(let i =0;i<arr.length;i++){
            if(array.indexOf(arr[i])==-1){
                array.push(arr[i])
            }
        }
        return array;
    }
    

多维数组找最大值

let arr =[
    [3,2,5,2],
    [36,5,3,0],
    [36,58,2]
]
function funAarry(arr){
    var ar = [];
    arr.forEach((item,index)=>{
        ar.push(Math.max(...item))
    })
    return ar;
}

给字符串新增方法

String.prototype.addPrefix = function(str){
    return str+this
}
console.log("world".addPrefix('hello'))//helloworld

找出字符串出现最多次数字符

let str = 'aabbccddsssssaaassss'
var obj = {};
for(let i =0;i<str.length;i++){
    let char = str.charAt(i);//charAt方法可返回指定位置的字符。
    if(obj[char]){
        obj[char]++;
    }else{
        obj[char]=1;
    }
}
​
var max =0;
for(let key in obj){
    if(max<obj[key]){
        max = obj[key]
    }
}
for(let key in obj){
    if(obj[key]==max){
        console.log("出现最多的字符是"+key)
        console.log("出现的次数是"+max)
    }
}

new操作符具体做了什么

1.创建了一个空的对象
2.将空对象的原型,指向于构造函数的原型
3.将空对象作为构造函数的上下文(改变this的指向)
4.对构造函数有返回值的处理判断
​
function create(fn,...args){
    //创建一个空对象
    let obj={}
    //将空对象的原型,指向于构造函数的原型
    Object.setPrototypeOf(obj,fn.prototype)
    //将空对象作为构造函数的上下文  改变this指向
    let result = fn.apply(obj,args);
    //对构造函数有值返回处理判断
    return result instanceof Obejct ? result :obj;
}

原型链

1.原型可以解决什么问题
    对象属性共享和共享方法
2.谁有原型
    函数有:prototype
    对象拥有:_proto_
3.对象查找属性或者方法的顺序
    先在对象本身找-》构造函数中找=》对象的原型=》构造函数的原型中=》当前原型的原型中查找
4.原型链
    就是把原型串联起来,原型链的最顶端是null

继承

1.ES6继承
class Parent{
    constructor(){
        this.age=18;
    }
}
class Child extends Parent{
    constructor(){
        super();//继承要添加这不然会报错
        this.name="kun"
    }
}
let k = new Child()
console.log(k,k.name,k.age)
2.原型链继承
function Parent(){
    this.age =20
}
function Child(){
    this.name="kun"
}
Child.prototype = new Parent();
​
let k = new Child();
console.log(k,k.name,k.age)
3.借用构造函数
function Parent(){
    this.age =20
}
function Child(){
    this.name="kun"
    Parent.call(this)
}
let k = new Child();
console.log(k,k.name,k.age)

call、apply、bind区别

共同的:功能一样 改变函数体内this指向
语法:函数.call()、函数.apply、函数.bing()
区别:
    1.call、apply会立即执行,bing返回的是一个函数需要加()来执行
    2.参数不同:apply第二个参数是数组,call和bing有多个参数需要挨个写 (fn.call(obj,1,2)          fn.apply(obj,[1,2]))
场景:
    1.let arr =[1,2,3,500,56,5]
        console.log(Math.max.apply(null,arr))
    2.

sort

定义:针对于数组的元素进行排序,并返回数组,默认排序是根据字符串unicode码点
let arr = [12,2,'13',11,111,24]
let arr1 = arr.sort(function(a,b){
    return a-b;//数组从小到大排序
    return b-a;//数组从大到小排序
})
let arr = [
    {name:123,age:1},
     {name:321,age:3},
     {name:153,age:2},
]
function compare(age){
    return function(a,b){
        let v1 =a[age]
        let v2 = b[age]
        return v1-v2
    }
}
let k2 =arr.sort(compare('age')) //对其从大到小排序

深拷贝和浅拷贝

共同点:复制
1.浅拷贝:只复制引用,而未复制真正的值 (共用同一个地址)
    //浅拷贝
    let arr1=[1,2,3,5,4,6,5]
    let arr2= arr1;
    console.log(arr1,arr2)
    arr1[0]=0;
    arr2[1]=0;
    console.log(arr1,arr2)
    一个数组发生改变,则另一个数组也会发生改变
    let obj1={a:1,b:2}
    let obj2= Object.assign(obj1)
2.深拷贝:是复制真正的值 互不干扰
    let obj1 ={
        a:1,
        n:2
    }
    let obj2 = JSON.parse(JSON.stringify(obj1)) 
    JSON.parse(JSON.stringify(obj))深拷贝的问题
        1、如果obj里面存在时间对象,JSON.parse(JSON.stringify(obj))之后,时间对象变成了字符串。
        2、如果obj里有RegExpError对象,则序列化的结果将只得到空对象。
        3、如果obj里有函数,undefined,则序列化的结果会把函数, undefined丢失。
        4、如果obj里有NaNInfinity和-Infinity,则序列化的结果会变成null。
        5JSON.stringify()只能序列化对象的可枚举的自有属性。如果obj中的对象是有构造函数生成的, 则使用JSON.parse(JSON.stringify(obj))深拷贝后,会丢弃对象的constructor。
        6、如果对象中存在循环引用的情况也无法正确实现深拷贝。
​
3.递归实现深拷贝:
    function copyObj(obj){
        if(Array.isArray(obj)){
            let newObj=[]
        }else{
             let newObj={}
        }
        for(let key in obj){
            if(typeof obj[key]=="object"){
                newObj[key]=copyObj(obj[key])
            }else{
                newObj[key] = obj[key]
            }
        }
        
        return newObj;
    }
​
   
    
​

localStorage、sessionStorage、Cookie

localStorage.setItem("kun",123);
sessionStorage.setItem("kun",123);
let date = new Date();
let time = 1000*60*60*24;
time = date.getTime()+time
document.cookie='name=kun;expires='+date.toUTCString()+""   //expires是设置过期时间
共同点:在客户端存放数据
区别:
    1.数据存放有效期
        sessionStorage:浏览器当前窗口有效,关闭当前页面就失去数据
        localStorage:一直保存在浏览器中,不会因为页面关闭而失去数据,也叫持久化存储
        cookie:只在设置的cookie过期时间之前有效。即使浏览器窗口关闭也有效
    2.sessionStorage、localStorage 不可以设置过期时间
    3.存储大小的限制:
        cookie存储不能超过4k
        sessionStorage、localStorage不能超过5M
        浏览器的不同也会有一些变化

H5/C3面试题

什么是语义化标签

image-20230222231540619

::before和:after中双冒号和单冒号的区别

image-20230222231818963

伪类
伪类是添加到选择器的关键字,用于指定所选元素的特殊状态,修改特殊状态下的样式。
​
这是MDN文档对伪类的定义。
​
比如设置鼠标悬浮在按钮元素上时,设置背景色为红底白字。
button:hover{
  background:red;
    color:white
}
伪元素
伪元素是一个附加至选择器末的关键词,允许你对被选择元素的特定部分修改样式。

如何关闭IOS键盘首字母自动大写

在input的输入筐添加属性image-20230222232223985

怎么让Chrome支持小于12px文字

Chrome的默认字体大小是16px 每个浏览器的字体大小都不一样
可以通过css3 缩放来实现
    div span{
        display:inline-block;
        -webkit--transform:scale(0.8)
    }

rem和em区别

image-20230222233113891

IOS系统中元素被触摸时产生的半透明灰色遮罩去除

通过css

image-20230222233254805

表单输入框placeholder的颜色修改

image-20230222233740076

禁止ios长按触发系统的菜单,禁止长按下载图片

image-20230222234132226

禁止用户选中文字

image-20230222234144881

自适应

rem只是一个单位不属于自适应的核心
单纯的使用rem是没有用的
自适应最终就是改变html的font-size来使得页面自适应
方案:
    1.淘宝无限适配【移动端】:淘宝无限适配+布局单位使用rem
    function flexible(){
        window.onresize=function(){ //监听页面放大缩小
            ///获取当前可视页面的宽度
            let doc = document.documentElement;
            let w=  doucument.documentElement.clientWidth/10   
            doc.style.fontSize = w+"px";
        }
    }

响应式

1.是什么
    一个URL可以响应多端
    通过媒体查询来调整页面的内容和一些布局
        @media only screen and (max-width:1000px){  //大于1000px
            ul li:last-child{
                display:none;
            }
        }
        only:可以排除不支持媒体查询的浏览器
        screen:设备类型
        max-width|max-height  
        min-width|min-height
2.响应式图片 (性能优化)
    <picture>
        <source srcset="2.jpg" media="(min-width:1000px)" >
        <source srcset="3.jpg" media="(min-width:700px)" >
        <img srcset="1.jpg">
    </picture>

网页布局方案

1.什么情况下采用响应式布局
    数据不是特别大,用户量不是特别大,纯展示类的项目适合响应式布局
    列如:公司官网、专题页面
    特别追求性能的,不太适合响应式
2.pc+移动端应该做什么样的布局方案
    注意:访问量还可以或者比较大,类似于淘宝网
    移动端是一套,会使用自适应的布局方式
    PC是一套,会加一点响应式
3.PC的设计图
    ui:1980
    笔记本电脑:1280
    ui图的宽度和电脑的宽度不对应怎么办?
        1.把ui图进行等比缩放,缩放成和电脑一样的尺寸
        2.换个1980的电脑
4.移动端的设计图
    宽度:750
    因为750的设计图/2就是375,正好是iphone6的尺寸,我们要把iphone6的尺寸作为基准点

ES6

var、let 、const

共同的:都是可以声明变量的
区别一:
    var 具有变量提升的机制
    letconst没有变量提升机制
区别二:
    var可以多次声明同一个变量
    letconst不可以多次声明同一个变量
区别三:
    varlet声明变量
    const声明常量
    varlet声明的变量可以再次赋值,但是const不可以再次赋值了
区别四:
    var声明的变量没有自身的作用域
    letconst声明的变量有自身的作用域
    

作用域考题

console.log(str)//undefined
var str ='hello'
console.log(num) //报错
let num =10
---。
function demo(){
    var n=2;
    if(true){
        var n =3;
    }
    console.log(n)//2
}
---。
const obj ={
        a:123
    }
obj.a=111
console.log(obj) // {a:111}
可以修改里面的值

对象合并

const a ={a:1,b:3}
const b ={b:2,c:4}
方式一:
    let obj = Object.assign(a,b);//{a:1,b:2,c:4}
方式二:
    let obj = {...a,...b}////{a:1,b:2,c:4}
方式三:
    function extend(target,soure){
        for(var key in soure ){
            target[key] = soure[key]
        }
        return target
    }

箭头函数和普通函数区别

1.this指向问题
    箭头函数中的我this只在箭头函数定义时就决定的,而且不可修改的(call,apply,bing)
    箭头函数的this指向定义时候,外层第一个普通函数的this
2.箭头函数不能new(不能当作构造函数)
3.箭头函数prototype是undefined
4.箭头函数是没有arguments

Promise有几种状态

1.三种状态:
    1.pending 进行中
    2.fulfilled 已成功
    2.rejected 已失败
2.Promise的含义:是异步编程的一种解决方案,解决了回调地狱的问题
3.
    Promise.resolve('foo').then(ress=>{
        console.log(res);
    }).then(()=>{
        console.log(1)
    }).then(()=>{
        console.log(2)
    }).then(()=>{
        console.log(3)
    }).then(()=>{
        console.log(4)
    }).then(()=>{
        console.log(5)
    })
​
结果:foo  1 2 3 4 5 
4.async await
    function getData(){
    return new Promise((resolve,reject)=>{
        resolve("1")
    })
    
    async function(){
         let a= await getData();
        console.log(a) // 1
    }
   function();
}

find和filter的区别

1.返回的内容不同
    filter返回是新数组
    find 返回具体的内容
2.
    find:匹配到第一个即返回
    filter:返回一个整体(每一个匹配到的都返回)

some和every的区别

let arr =[6,4,3,5,2]
​
let a = arr.some(val=>{
   return val>4 
})
let a = arr.every(val=>{
   return val>4 
})
console.log(a,b)// true false
​
some==>如果有一项匹配则返回true
everr==》全部匹配才返回true

Vue

vue2生命周期

1.有哪些生命周期
    系统自带:
        beforeCreate
        created
        beforeMount
        mounted
        beforeUpdate
        updated
        beforeDestory
        destoryed
2.一旦进入到页面或者组件,会执行哪些生命周期:
        beforeCreate
        created
        beforeMount
        mounted
3.那个阶段有$el,在哪个阶段有$data
        beforeCreate 啥也没有
        created 有data没有el
        beforeMount 有data没有el
        mounted 都有
4.如果加入了keep-alive会多两个生命周期
    activated  deactivated
5.如果加入了keep-alive,第一次进入组件会执行哪些生命
    
6.如果加入了keep-alive,第二次或者第n次入组件会执行哪些生命

Webpack

Vite

SQL