经纬恒润前端一面面经
1.一个div里面有多个div怎么做到均等分
<div class="container"> <div class="one"></div> <div class="two"></div> <div class="three"></div> <div class="four"></div> </div>
.container{ width: 700px; height: 200px; display: flex; justify-content: space-around;//space-around space-between space-evenly的区别 } .one { width: 100px; height: 100px; background-color: antiquewhite; } .two { width: 100px; height: 100px; background-color: antiquewhite; } .three { width: 100px; height: 100px; background-color: antiquewhite; } .four { width: 100px; height: 100px; background-color: antiquewhite; }
space-evenly:
space-around:
space-between:
2.if表达式1<2<3>4>6<7.....1000量级,怎么去快速得到最终是true还是false,if(1<2<3)true还是false,if(1>2>3)true还是false
- if(1<2<3)先判断1<2是true,true转值为1,1<3等于true
- if(3>2>1)同理,先判断3>2为true,true转值为1,1<1为false
- 再回到这个题本身,面试官说这个题之前有个面试的是通过两个数组来做的,类似于逆波兰表达式的思维,两个栈完成
- 面试官自己的想法就是将其转化为字符串,1<2看作一个字符串,结果再拼上<3形成一个新字符串再做计算,一个循环调用的过程
3.说一下显式原型和隐式原型
4.Array.prototype是一个什么类型,typeof Array输出什么
- Array.prototype是一个长度为零的数组,其中挂载的都是数组方法。
- typeof Array输出的是function
5.数组和对象实现浅拷贝的方式,a{name:'x'},通过Object.assign()实现浅拷贝b,a和b相等吗
- 数组实现浅拷贝的方法:Array.prototype.slice()和Array.prototype.concat()
- 对象实现浅拷贝的方法:Object.assign()
(后面这个问题我说的true,面试官说不对,是false,可能问题也没听清楚,没搞懂,有没有懂的)
let a = { name:'ccc' } let b = Object.assign(a) let c = b console.log(a === b)//true console.log(b === c)//true console.log(a === c)//true
6.vue自定义组件,怎么实现v-model
v-model:
- v-bind绑定一个value属性
- v-on监听当前元素的input事件,当数据变化时,将值传递给value实时更新数据
<input type="text" :value="name" @input="name = $event.target.value">
<template> <input type="text" :value="value" @input="handleInput" :placeholder="placehodler" /> </template> <script> export default { name: 'kInput', props: { value: ['String', 'Number'], placeholder: String }, methods: { handleInput ($event) { // 通过input标签的原生事件input将值emit出去,以达到值得改变实现双向绑定 this.$emit('input', $event.target.value) } } } </script>
7.项目里有两个页面要共享数据,怎么做
- vuex
- 浏览器缓存
- inject/provide
- window对象
8.this.$store 拿数据和自己封装一个js文件保存数据this. $utils有什么区别
- this.$store是通过new 一个vue实例,挂载在这个实例下面的
- this.$utils是外部引入的,不会挂载到vue实例下面
9.函数式编程和面向对象编程的区别
函数式编程:抽象化思维
面向对象编程:是什么,有什么,做什么很清晰