2. 技术
    3. 滴滴前端面试-作用域链、弹性盒子、盒子模型、vuex和props、输出、变换样式、flex、居中、变量类型判断

    滴滴前端面试-作用域链、弹性盒子、盒子模型、vuex和props、输出、变换样式、flex、居中、变量类型判断

    技术2023-11-08  103

    我面试的是滴滴前端实习生，面试官挺年轻的，是个前端程序猿小哥哥。只是这是我的第一次正经面试，在将近一小时的面试里，脑子一片空白。虽然我能感觉到问的问题都超级简单，而且都是我看过的，我还是回答的磕磕绊绊。。。。以后一定避免眼高手低，知识点不能只是看过，还得记熟。下面是我整理的问题和答案，欢迎补充和纠正：

    1、作用域链是什么

    答：一般情况下，变量取值到创建这个变量 的函数的作用域中取值。但是如果在当前作用域中没有查到值，就会向上级作用域去查，直到查到全局作用域，这么一个查找过程形成的链条就叫做作用域链。

    2、弹性盒子

    答：

    .box{ display: flex; /*display: inline-flex;*/ } 容器的属性 flex-direction： row | row-reverse | column |column-reverse;水平/垂直从上、下开始 flex-wrap： nowrap | wrap |wrap-reverse;不换行/换行/换行，第一行在下 flex-flow：flex-direction属性和flex-wrap属性的简写形式 justify-content: flex-start | flex-end | center | space-between | space-around;水平对齐方式 align-items: flex-start | flex-end | center | baseline |stretch;垂直对齐方式 align-content：flex-start | flex-end | center |space-between | space-around | stretch;多轴线对齐方式项目的属性 order：数值越小，排列越靠前，默认为0。 flex-grow：放大比例，默认为0。即如果存在剩余空间，也不放大。 flex-shrink：缩小比例，默认为1，即如果空间不足，该项目将缩小。 flex-basis：项目占据的主轴空间（main size），默认值为auto，也可以自己设置数值。 flex:flex-grow, flex-shrink 和 flex-basis的简写。 align-self: auto | flex-start | flex-end | center | baseline | stretch;默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

    3、说一下盒子模型

    答：盒模型的组成，由里向外content,padding,border,margin. 在IE盒子模型中，width表示content+padding+border这三个部分的宽度。 在标准的盒子模型中，width指content部分的宽度。 box-sizing的使用： box-sizing: content-box 是W3C盒子模型 （默认） box-sizing: border-box 是IE盒子模型

    4、vuex和props

    答：Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。 React的核心思想就是组件化思想，页面会被切分成一些独立的、可复用的组件。组件从概念上看就是一个函数，可以接受一个参数作为输入值，这个参数就是props，所以可以把props理解为从外部传入组件内部的数据。

    5、输出是什么

    var a = { name: 'A', fun: function() { console.log(this.name); } }; a.fun(); a.fun.call({ name: 'B' }); var fun1 = a.fun; fun1();

    答案：A B undifined

    6、如何给所有p标签变换样式

    答：1、css中用标签选择器 2、js

    <body> <p >每天你和阳光都在</p> </body> <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> <script> $("p").css({"background-color":"blue","font-size":"14px"}); </script>

    7、flex=1是什么意思

    答：

    8、css水平、垂直居中的写法

    答：水平居中

    行内元素:text-align: center块级元素:margin: 0 autoposition:absolute +left:50%+ transform:translateX(-50%)display:flex + justify-content: center

    垂直居中

    设置line-height 和height相等position：absolute +top:50%+ transform:translateY(-50%)display:flex + align-items: centerdisplay:table+display:table-cell + vertical-align: middle;

    9、如何判断变量类型

    答： 1、typeof typeof对大多数的类型判断都是正确的，返回的都是小写的字符串类型,但是无法区分数组，null，和真正的Object，它的判断都是"object"。 2、Object.prototype.toString.call()， Object.prototype.toString.call()的方法，各种类型都合适，判断准确，也是我准备长期使用的一种方法，返回的结果如[Object Array]，据我所知，jQuery的内部工具、vue的内部工具，mock的内部工具，都是采用的这种方法。 3、instanceof instanceof 操作符的左操作数是一个普通的对象，右操作数是一个函数。a instanceof Foo 回答的问题是:在 a 的整条 [[Prototype]] 链中是否有指向 Foo.prototype 的对象。 用法：

    //数组： var a= [1,2,3]； a instanceof Array //true var a = new Array(1,2,3); a instanceof Array //true //函数： var a = function(){} a instanceof Fuction // true var a = new Function(); a instanceof Function //true // 对象： var a= {};a instanceof Object //true

    4、constructor.name 该方式大部分情况下都可以，弊端是undefined，或者null没有constructor。 用法：

    var a = '' a.constructor.name // 返回String
    Processed: 0.013, SQL: 9