【前端面试题】基础版html css js 和一些vue框架(博主自己去面试碰到的)

提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档

笔试部分

一,选择题

1.新窗口打开网页,用到下面哪个值(B)

A. _self
B. _blank
C. _top
D. _parent

本题考察的是html语言中通过a标签跳转时的target属性,通过target来设置跳转时的不同状态,

解析
_self是在当前页签打开
_blank是在新窗口打开网页
_top链接文档会在父级框架中打开,如果没有父级框架,则与 _self 效果相同。
_parent链接文档会在顶级窗口中打开,忽略所有框架。

<a href="https://www.baidu.com/" target="_blank"></a>

2.关于position定位,下列说法错误的是(B)

A. fixed元素,可定位于相对于浏览器窗口的指定坐标,它始终是以body为依据

B. relative元素以它原来的位置为基准偏移,在其移动后,原来的位置不再占据空间

C. absolute的元素,如果它的父容器设置了position属性,并且position的属性值为absolute或者relative,那么就会依据父容器进行偏移

D. fixed属性的元素在标准流中不占位置

解析
A. fixed元素,可定位于相对于浏览器窗口的指定坐标,它始终是以body为依据(就像浏览器页面的某些广告,无论界面在上下左右,它始终在页面的某个地方)

B. relative元素以它原来的位置为基准偏移,但在其移动后,原来的位置还会占据空间

C. absolute的元素,如果它的父容器设置了position属性,并且position的属性值为absolute或者relative,那么就会依据父容器进行偏移
(其实是absolute元素脱离了文档流,所以第一个开启定位的祖先元素,就是他的包含块,所谓父相子绝就是指,子元素开启绝对定位后,需要寻找一个祖先元素作为定位,父亲就要把position属性设置为relative相对定位,这样对它自身的影响是最小的)。

D. fixed属性的元素在标准流中不占位置

3. css中哪些属性不可以继承(D)

A. font-size

B. color

C. font-family

D. border

解析
继承就是指子元素会自动用上父元素的这些属性,比如父元素的字体大小,颜色等,border当然是不能继承的

C. font-family也是字体的一种设置方式MDN相关font-family的介绍

4. 下列选项中不属于数组方法的是(B)

A. sort()

B. length()

C. concat()

D. reverse()

解析

A. sort()这是数组中的排序方法,sort() 方法就地对数组的元素进行排序,并返回对相同数组的引用。默认排序是将元素转换为字符串,然后按照它们的 UTF-16 码元值升序排序。

const months = ['March', 'Jan', 'Feb', 'Dec'];
months.sort();
console.log(months);
// Expected output: Array ["Dec", "Feb", "Jan", "March"]

const array1 = [1, 30, 4, 21, 100000];
array1.sort();
console.log(array1);
// Expected output: Array [1, 100000, 21, 30, 4]

B. length最常见的返回数组长度的属性使用时直接数组.length就可以,而不是数组的方法

C. concat()用于合并数组

const array1 = ['a', 'b', 'c'];
const array2 = ['d', 'e', 'f'];
const array3 = array1.concat(array2);

console.log(array3);
// Expected output: Array ["a", "b", "c", "d", "e", "f"]

D. reverse()可以调转数组的元素顺序

const array1 = ['one', 'two', 'three'];
console.log('array1:', array1);
// Expected output: "array1:" Array ["one", "two", "three"]

const reversed = array1.reverse();
console.log('reversed:', reversed);
// Expected output: "reversed:" Array ["three", "two", "one"]

// Careful: reverse is destructive -- it changes the original array.
console.log('array1:', array1);
// Expected output: "array1:" Array ["three", "two", "one"]

5. 使用 Javascript 在数组尾部添加数据的方法是(B)

A. arr.pop()

B. arr.push()

C. arr.shift()

D. arr.unshift()

解析

A. arr.pop()方法从数组中删除最后一个元素,并返回该元素的值。此方法会更改数组的长度。

const plants = ['broccoli', 'cauliflower', 'cabbage', 'kale', 'tomato'];

console.log(plants.pop());
// Expected output: "tomato"

console.log(plants);
// Expected output: Array ["broccoli", "cauliflower", "cabbage", "kale"]

plants.pop();

console.log(plants);
// Expected output: Array ["broccoli", "cauliflower", "cabbage"]

B. arr.push()方法将指定的元素添加到数组的末尾,并返回新的数组长度。

const animals = ['pigs', 'goats', 'sheep'];

const count = animals.push('cows');
console.log(count);
// Expected output: 4
console.log(animals);
// Expected output: Array ["pigs", "goats", "sheep", "cows"]

animals.push('chickens', 'cats', 'dogs');
console.log(animals);
// Expected output: Array ["pigs", "goats", "sheep", "cows", "chickens", "cats", "dogs"]

C. arr.shift()方法从数组中删除第一个元素,并返回该元素的值。此方法更改数组的长度。

const array1 = [1, 2, 3];

const firstElement = array1.shift();

console.log(array1);
// Expected output: Array [2, 3]

console.log(firstElement);
// Expected output: 1

D. arr.unshift()方法将指定元素添加到数组的开头,并返回数组的新长度。

const array1 = [1, 2, 3];

console.log(array1.unshift(4, 5));
// Expected output: 5

console.log(array1);
// Expected output: Array [4, 5, 1, 2, 3]

6. 在css选择器中,优先级排序正确的是(D)

A. id选择器>标签选择器>类选择器

B. 标签选择器>类选择器>id选择器

C. 类选择器>标签选择器>id选择器

D. id选择器>类选择器>标签选择器

解析

id选择器肯定是最高的优先级,其次是class类选择器,最后才是标签选择器

二,简答题

1.JavaScript的数据类型有哪些?

这里有一个口诀,usonb,you so nb的缩写,一共七种数据类型
u: Undefined
s: String , Symbol
o: Object
n: Null , Number
b: Boolean

symbol类型是es6引入的新的数据类型,他用来表示独一无二的值,这里不做过多介绍了。

2.css如何实现元素水平垂直居中?把你知道的都写出来

1 text-align: center;可以设置文本元素水平居中
2 margin:0 auto;可以实现水平居中
3 display: flex; justify-content: center; align-items: center;
4 display:flex , margin:0 auto

3.let 和var有什么区别?let 和const呢?

let 和 var的区别:
作用域:var是全局作用域,let 存在块级作用域
变量提升:使用 var 声明的变量会被提升至当前作用域的顶部,意味着先访问后声明也不会报错,let变量则必须先声名再调用
重复声明:在同一作用域可以用var多次重复声明,而 let 不允许在同一作用域内重复声明同一个变量。
const和let的区别:
可变性:
const 在声明时需要赋初始值,let在声明时可以不赋初始值
const 不能被修改,这里是指const 的地址不能被修改,如果是一个数组或者对象的修改是可以进行操作的
在一个变量可能不会再被修改的时候优先选择const这样有利于提高代码的可读性和可维护性

4.数据类型检测的方式有哪些?

1 typeof
2 instanceof
3 constructor
4 Object.prototype.toString.call()等

5.如何使用ES6 模板文字生成字符串?请写出样例代码

其实这道题我没有怎么理解,只是为了证明自己了解过模板字符串么
我在面试时就只写了一句类似

let age = 21;
let str = `我今年${age}岁了`;

6. vue的生命周期有哪些?

onMounted() onUpdated() onUnmounted() onBeforeMount() onBeforeUpdate() onBeforeUnmount() onErrorCaptured()
写的都是vue3的生命周期,还有一些比较特别的生命周期可以去官网查阅

面试部分

1.箭头函数和普通函数的区别

一.外形不同:箭头函数使用箭头定义,普通函数中没有(有眼睛都能看出来,不太重要)
二.this的指向不同,箭头函数本身没有this,而是捕获上下文中的this来用,在普通函数中this指向调用他的对象。
三.普通函数可以用于用于构造函数,而箭头函数不能。

2.你所知道的数组的方法有哪些

1 push()可以在数组末尾添加元素
2 foreach()可以对数组遍历处理
3 map()也是对数组遍历处理,不过会变成一个新数组
4 filter()是在returntrue时保留这个数据
5 findindex()找到了数据则返回true
6 splice(a,b)是删除数组里a到b的元素

3.vue父子组件通信的方法

父组件向子组件发送信息可以在组件上携带,然后子组件defineprops接受参数
子组件向父组件通信可以先通过父组件用调用函数再从子组件返回数据。

4.git仓库一些基本调用命令

5.v-if和v-show的区别

v-show是根据值来判断是否显示是响应式的,原理是修改元素的的CSS属性(display)来决定实现显示还是隐藏

v-if则是根据值来判断是否存在于dom树中,表达式的值为true的时候元素存在于dom树中,为false的时候从dom树中移除

v-if需要操作dom元素,有更高的切换消耗,v-show只是修改元素的的CSS属性有更高的初始渲染消耗,如果需要非常频繁的切换,建议使用v-show较好,如果在运行时条件很少改变,则使用v-if较好

6.你对同步和异步了解多少

async
题目出自博主亲身经历(如果文章内有错误或者不当的地方欢迎评论区交流)

  • 20
    点赞
  • 19
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值