前端面试（每日更新）_getlv.then((fulfilled)-CSDN博客

本文链接：https://blog.csdn.net/m0_54256047/article/details/127835449

1.如何快速让盒子居中对齐

2.margin和padding有什么不同

3.vw与百分比的区别

4.行内和块级元素

5.如何让谷歌浏览器（默认12px最小）支持小字体

6.let与var

7. 深拷贝与浅拷贝

8.Promise

1.如何快速让盒子居中对齐

两行代码搞定：

body{
    display:flex;
}

.hz{
    margin:auto;
}

盒子左右的对齐

margin：auto

display: flex

意思是弹性布局，它能够扩展和收缩 flex 容器内的元素，以最大限度地填充可用空间。Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为Flex布局。

注意，设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。

它可以用于以下四个方面：
1、在不同方向排列元素
2、重新排列元素的显示顺序
3、更改元素的对齐方式
4、动态地将元素装入容器

2.margin和padding有什么不同

作用对象不同，padding是施加于自身的，margin作用于外部

3.vw与百分比的区别

相对关系不一样，百分比相对父级，vw相对视窗（父级变了百分比也会变，vw不会变）

4.行内和块级元素

块级元素独占一行，宽度有继承关系；行内元素不换行，不可以设置大小，行内元素的大小由内容决定

5.如何让谷歌浏览器（默认12px最小）支持小字体

把字体放在p标签包裹，然后用类选择器设置样式

.small-font{
    transform: scale(0.2);
    -webkit-transform: scale(0.2);
}

控制台：

6.let与var

var的3个问题: 声明提升，没有局部作用域，声明覆盖。

如果换成let则会提示错误

7. 深拷贝与浅拷贝

基本数据类型是浅拷贝吗？

不能算拷贝

引用数据类型是浅拷贝吗？

数组与对象的赋值都叫做浅拷贝（拷贝前的数据也会随之变化）

<script>
    let a=5;
    let b=a;
    b=3;
    let arr = [1,2,3];
    let newArr= arr;
    newArr.push(4)//添加值4
    console.log(arr,newArr)
</script>

控制台：

（拷贝的是地址值，不是内容，两个变量都指向堆内存中的同一个地址）

解构赋值是浅拷贝吗？

针对一维数组和对象可以看做是深拷贝，多维的就是浅拷贝

<script>
    //一维数组
    let arr = [1,2,3];
    let newArr= [...arr];
    newArr.push(4)//添加值4
    console.log(arr,newArr)
    //二维数组
    let arr2=[[1,2,3],[4,5,6]];
    let newArr2= [...arr2];
    newArr2[0].push(888)
    console.log(arr2,newArr2)
</script>

控制台：

<script>
       // 一维对象
       let obj={
        a:1,
        b:2
       }
       // 二维对象
       let obj2={
        a:1,
        b:2,
        c:{
            e:3
        }
       }
</script>

深拷贝

 //深拷贝用法
    let list = [
        {id: 1, stuName: '小明',class:'五年二班'},
        {id: 2, stuName: '小红',class: '五年三班'},
        {id: 3,stuName: '小绿', class:'五年四班'},
    ]
    let newList =JSON.parse(JSON.stringify( list));
    //属于深拷贝，这个对部分情况不可用（像方法这种关键字不可拷贝）
    //原理：JSON.stringify( list)先将数组转换为字符串，
    newList.push({id: 888})
    console.log(list, newList)

8.Promise

出现的原因：回调地狱=> 业务逻辑复杂=>毁掉增多=> 可维护性，观赏性降低

案例：

<script>
//1.许下一个承诺=>(异步)
let isForget=false;
let getLv = new Promise((resolve,reject) =>{
if(isForget){
    let lv ={
        color:'red',
        price:'￥99'
    }
    //得到包包
    resolve(lv)
}else{
    let err = new Error("加班去了")
    reject(err)
    }
})

let testFn = function(){
    getLv.then((fulfilled)=>{
        console.log(fulfilled)
    }).catch((rejected) =>{
        console.log(rejected.message)
    })
}
testFn();
</script>