开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> 前端面试题(基础部分) -> 正文阅读

[JavaScript知识库]前端面试题(基础部分)

#目录1.作用域2.函数封装(例子:字符串拼接)3.冒泡排序4.数组反转5.语义化标签6.h5新特性(标签)7.闭包8.去重9.flex10.rem布局11.this指向12.清除浮动13.VUE生命周期以及特点14.Promise15.块元素有哪些16.vue-router17.浏览器储存方式19.性能优化20.css哪些属性可以继承21.VUEX24.v-show v-if区别27.深度拷贝浅度拷贝29.http状态码30.link标签和import区别31.跨域解决方案32.webpack33.transform34.盒模型35.label36.js 递归用js递归的方式写1到100求和？37.target、currentTarget的区别？39.说一下自己常用的es6的功能40.get post put delete41.js基本类型和引用类型43.require import区别区别1：模块加载的时间区别2：模块的本质44.img中的alt title区别45.BFC规范理解46.null underfined区别47.vue组件之间的传递48.apply call作用：区别：49.css 选择符50.vue通信

1.作用域

 ?  var num1=50;
 ?  var num2=66;
 ?  function f1(num,num1){
 ? ? ?  num=100;
 ? ? ? ? num1=200;
 ? ? ? ? num2=200;
 ? ? ? ? console.log(num);
 ? ? ?  console.log(num1);
 ? ? ?  console.log(num2);
 ?  }
 ?  f1(num1,num2);
 ?  //f1(50,66)
 ?  //50
 ?  console.log(num1);
 ?  //200
 ?  console.log(num2);

注意:let var const区别

let 只作用域块元素当中定义的是变量

var 作用与全局当中定义的变量

const 定义的常量

2.函数封装(例子:字符串拼接)

题目:将foo='get-element-by-id' 拼接成getElementById

 ?  function toString(foo){
 ? ? ?  let arr=foo.split('-')
 ? ? ?  for (let index = 1; index < arr.length; index++) {
 ? ? ?  arr[index]=arr[index].charAt(0).toUpperCase()+ arr[index].substr(1,arr[index].length-1)
 ? ? ?  }
 ? ? ?  let arr1=arr.join("");
 ? ? ?  console.log(arr1);
 ? ? ?  return arr1
 ?  }
 ?  toString('get-element-by-id')

注意:

split('')通过什么符号字母进行截取且返回的结果是数组

charAt('拿那一位')

toUpperCase()大写

substr(start,length)字符串中抽取从 start 下标开始的指定数目的字符

join('')通过字母或者符号进行数组的拼接返回的是一串字符串

3.冒泡排序

 ?  let arr=[5,4,3,2,1]
 ?  // 轮数
 ?  for (let i = 0; i < arr.length-1; i++) {
 ? ? ?  // 次数
 ? ? ?  for (let j =0; j < arr.length-1-i; j++) {
 ? ? ? ? ?  if (arr[j]<arr[j+1]) {
 ? ? ? ? ? ? ?  let temp=arr[j];
 ? ? ? ? ? ? ?  arr[j]=arr[j+1];
 ? ? ? ? ? ? ?  arr[j+1]=temp
 ? ? ? ? ?  }
 ? ? ?  }
 ?  }
 ?  console.log(arr);

4.数组反转

5.语义化标签

title,header,nav,main,article,h1~h6,ul,ol,address,canvas,dialog,aside,section,figure,details,mark

6.h5新特性(标签)

header标签包含引导和导航等，通常包含h1~h6、搜索框、logo等。 footer标签一般配合address标签(显示地址)，包含作者信息、相关链接等。 nav标签一般包含多个a标签，构建导航组件。 aside标签主要装载广告、侧边栏。 article标签包含文章，一般内嵌header、footer、h1、p标签。 section标签可以用在以上任一一个标签中划分组件。 hgroup顾名思义是h1~h6的集合

7.闭包

闭包的实质是因为函数嵌套而形成的作用域链

闭包的定义即：函数 A 内部有一个函数 B，函数 B 可以访问到函数 A 中的变量，那么函数 B 就是闭包

8.去重

var arr=['12','32','89','12','12','78','12','32'];
 ?  // 最简单数组去重法
 ?  function unique1(array){
 ? ? ?  var n = []; //一个新的临时数组
 ? ? ?  for(var i = 0; i < array.length; i++){ //遍历当前数组
 ? ? ? ? ?  if (n.indexOf(array[i]) == -1)
 ? ? ? ? ? ? ?  n.push(array[i]);
 ? ? ?  }
 ? ? ?  return n;
 ?  }
 ?  arr=unique1(arr);
 ? ? // 速度最快， 占空间最多（空间换时间）
 ?  function unique2(array){
 ? ? ?  var n = {}, r = [], type;
 ? ? ?  for (var i = 0; i < array.length; i++) {
 ? ? ? ? ?  type = typeof array[i];
 ? ? ? ? ?  if (!n[array[i]]) {
 ? ? ? ? ? ? ?  n[array[i]] = [type];
 ? ? ? ? ? ? ?  r.push(array[i]);
 ? ? ? ? ?  } else if (n[array[i]].indexOf(type) < 0) {
 ? ? ? ? ? ? ?  n[array[i]].push(type);
 ? ? ? ? ? ? ?  r.push(array[i]);
 ? ? ? ? ?  }
 ? ? ?  }
 ? ? ?  return r;
 ?  }
 ?  //数组下标判断法
 ?  function unique3(array){
 ? ? ?  var n = [array[0]]; //结果数组
 ? ? ?  for(var i = 1; i < array.length; i++) { //从第二项开始遍历
 ? ? ? ? ?  if (array.indexOf(array[i]) == i) 
 ? ? ? ? ? ? ?  n.push(array[i]);
 ? ? ?  }
 ? ? ?  return n;
 ?  }

9.flex

属性

水平居中

行内元素: text-align: center
块级元素: margin: 0 auto
position: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: center
- display:table+display:table-cell + vertical-align: middle;

10.rem布局

rem px em区别

rem

rem是全部的长度都相对于根元素<html>元素。通常做法是给html元素设置一个字体大小，然后其他元素的长度单位就为rem。

em

子元素字体大小的em是相对于父元素字体大小
元素的width/height/padding/margin用em的话是相对于该元素的font-size

px

px像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。

一般电脑的分辨率有{1920*1024}等不同的分辨率

1920*1024 前者是屏幕宽度总共有1920个像素,后者则是高度为1024个像素

11.this指向

a.如果是一般函数,this指向全局对象window;

b.在严格模式下"use strict",为undefined.

c.对象的方法里调用,this指向调用该方法的对象.

d.构造函数里的this,指向创建出来的实例.

12.清除浮动

1.使用空标签清除浮动。

这种方法是在所有浮动标签后面添加一个空标签定义css clear:both. 弊端就是增加了无意义标签。

2.使用after伪对象清除浮动

　该方法只适用于非IE浏览器。具体写法可参照以下示例。使用中需注意以下几点。一、该方法中必须为需要清除浮动元素的伪对象中设置 height:0，否则该元素会比实际高出若干像素；

#parent:after{

　　content:".";

　　height:0;

　　visibility:hidden;

　　display:block;

　　clear:both;

　}

3.设置overflow为hidden或者auto

4.浮动外部元素

13.VUE生命周期以及特点

在beforeCreate和created这个生命周期，进行初始化事件，进行数据的观测，到了created的时候，放在data里面的数据已经完成了绑定

在created和beforeMount这个生命周期，它会判断vue实例对象有没有el这个属性，如果没有生命周期就结束了，如果有就判断有没有template这个属性，如果有就把他作为模板渲染，如果没有就把外部HTML作为模板

在beforeMount和mounted这个生命周期，会把vue实例对象的el替换成挂载的DOM元素，这时data里的数据还没被渲染

在mounted完成之后，挂载的DOM元素数据被渲染上去

14.Promise

怎么使用、解决了什么、怎么中断

15.块元素有哪些

行内元素：a, b, i, abbr, span, sub, sup, strike, strong

块级元素：div, p, h1-h6, ul, textarea, table, button

空元素：hr, input, br, img, link, meta

16.vue-router

两种模式、几种、区别

vue-router是vuex.js官方的路由管理器，它和vue.js的核心深度集成，让构建但页面应用变得易如反掌 <router-link> 组件支持用户在具有路由功能的应用中 (点击) 导航。通过 to 属性指定目标地址 <router-view> 组件是一个 functional 组件，渲染路径匹配到的视图组件。

17.浏览器储存方式

cookie: 一般由服务器生成，可设置失效时间.

localStorage:仅在客户端（即浏览器）中保存,除非被清除，否则永久保存

sessionStorage:仅在当前会话下有效，关闭页面或浏览器后被清除

19.性能优化

减少http请求

把js脚本置地加载

css放在head中

20.css哪些属性可以继承

可继承的样式： font-size font-family color, UL LI DL DD DT;

不可继承的样式：border padding margin width height ;

21.VUEX

优缺点、属性、action mutation区别、看过vuex源码

vuex是一个专为vue.js应用程序开发的状态管理器，它采用集中式存储管理应用的所有组件的状态，并且以相应的规则保证状态以一种可以预测的方式发生变化。 state: vuex使用单一状态树，用一个对象就包含来全部的应用层级状态 mutation: 更改vuex中state的状态的唯一方法就是提交mutation action: action提交的是mutation，而不是直接变更状态，action可以包含任意异步操作 getter: 相当于vue中的computed计算属性

24.v-show v-if区别

前者为false的时候为 display:none，后者为false的时候，不生成节点前者有更高的切换渲染消耗，频繁切换建议使用后者

27.深度拷贝浅度拷贝

说法①

浅拷贝和深拷贝的区别：

对于浅拷贝来说，对于一个数组（数组是一个对象），只要我们修改了一个拷贝数组，原数组也会跟着改变。

他们引用的是同一个地址的数据，拷贝的时候并没有给b数组创造独立的内存，只是把a数组指向数据的指针拷贝给了b；

而深拷贝就与其相反，将会给b数组创造独立的内存，并且将a数组的内容一一拷贝进来，两者互不影响。

实现深拷贝：

一：层级拷贝，用递归实现；

二：JSON解析 var b = JSON.parse(JSON.stringify(a));

说法②

拷贝这种说法存在引用值（存指针地址）浅拷贝是第一层拷贝的时候对应建立数组或者对象然后循环插入到这个对象或者数组中然后导出,但是它没有解决第二层是数组或者第三层往下去的是数组或者对象,所以你需要递归这个函数,递归之后这个对象或者数组就是深拷贝

var obj = {
name:'abc',
age:123,
sex:'female',
car:['visa','unionpay']
} 
var obj1 = {}
function clone(origin,target){
 var target = target || {};
 for(var prop in orgin){
 ? ? target[prop] = origin[prop];
 }
 return target;
 }
clone(obj,obj1)
//这个时候去操作obj.car里面的值，那么obj1 也会相应的发生改变

?
function depClone(origin,target){
 ? var target = target || {},
 ? ? ? toStr = Object.prototype.toString,
 ? ?  arrStr = "[object Array]";
 ? for(var prop in origin){
 ? ? ? if(origin.hasOwnProperty(prop)){
 ? ? ? ? ? if(origin(prop) !==null&&typeof(origin[prop] == 'object')){
 ? ? ? ? ? ? ? if(toStr.call(origin[prop]) == 'arrStr'){
 ? ? ? ? ? ? ? ? ? target[prop] = [];
 ? ? ? ? ? ? ? }
?
 ? ? ? ? ? ? ? else{
 ? ? ? ? ? ? ? ? ? target[prop] = {};
 ? ? ? ? ? ? ? }
 ? ? ? ? ? ? ? deepClone(origin[prop],target[prop])
 ? ? ? ? ? }
 ? ? ? ? ? else{
 ? ? ? ? ? ? ? target[prop] = origin[prop];
 ? ? ? ? ? }
 ? ? ? }
 ? }
 ? return target
}
?

29.http状态码

1xx(临时响应)

100: 请求者应当继续提出请求。

101(切换协议) 请求者已要求服务器切换协议，服务器已确认并准备进行切换。

2xx(成功)

200：正确的请求返回正确的结果

201：表示资源被正确的创建。比如说，我们 POST 用户名、密码正确创建了一个用户就可以返回 201。

202：请求是正确的，但是结果正在处理中，这时候客户端可以通过轮询等机制继续请求。

3xx(已重定向)

300：请求成功，但结果有多种选择。

301：请求成功，但是资源被永久转移。

303：使用 GET 来访问新的地址来获取资源。

304：请求的资源并没有被修改过

4xx(请求错误)

400：请求出现错误，比如请求头不对等。

401：没有提供认证信息。请求的时候没有带上 Token 等。

402：为以后需要所保留的状态码。

403：请求的资源不允许访问。就是说没有权限。

404：请求的内容不存在。

5xx(服务器错误)

500：服务器错误。

501：请求还没有被实现。

30.link标签和import区别

1 属性差别。link属于XHTML标签，而@import完全是CSS提供的语法规则。 link标签除了可以加载CSS外，还可以做很多其它的事情，比如定义RSS，定义rel连接属性等，@import就只能加载CSS了。 2 加载顺序的差别。当一个页面被加载的时候（就是被浏览者浏览的时候），link引用的CSS会同时被加载，而@import引用的CSS会等到页面全部被下载完再被加载。所以有时候浏览@import加载CSS的页面时开始会没有样式（就是闪烁），网速慢的时候还挺明显. 3 兼容性的差别。由于@import是CSS2.1提出的所以老的浏览器不支持，@import只有在IE5以上的才能识别，而link标签无此问题。 4 使用dom控制样式时的差别。当使用javascript控制dom去改变样式的时候，只能使用link标签，因为@import不是dom可以控制的。

31.跨域解决方案

（1）response 添加 header：resp.setHeader("Access-Control-Allow-Origin", "*");

（2）jsonp （原理即利用script标签可以跨域）

（3）代理

32.webpack

理解、常用打包插件、常见的loader

webpack是一款模块加载器兼打包工具，它能把各种资源，例如JS（含JSX）、coffee、样式（含less/sass）、图片等都作为模块来使用和处理。简单说就是模块加载器，通过使用Webpack，能够像Node.js一样处理依赖关系，然后解析出模块之间的依赖，将代码打包。

css-loader：将样式打包成字符串。 style-loader：将样式字符串添加到页面的style标签中

33.transform

画一条0.5px的直线？

考查的是css3的transform

height: 1px;
transform: scale(0.5);

34.盒模型

盒模型的组成，由里向外content,padding,border,margin.

在IE盒子模型中，width表示content+padding+border这三个部分的宽度

在标准的盒子模型中，width指content部分的宽度

35.label

label标签主要是方便鼠标点击使用，扩大可点击的范围，增强用户操作体验

36.js 递归

用js递归的方式写1到100求和？

递归我们经常用到，vue在实现双向绑定进行数据检验的时候用的也是递归，但要我们面试的时候手写一个递归，如果对递归的概念理解不透彻，可能还是会有一些问题。

function add(num1,num2){
	var num = num1+num2;
        if(num2+1>100){
	 return num;
	}else{
	  return add(num,num2+1)
        }
 }
var sum =add(1,2);

37.target、currentTarget的区别？

currentTarget当前所绑定事件的元素

target当前被点击的元素

39.说一下自己常用的es6的功能

module、class、promise

const和let关键字
forEach
some
find
箭头函数
promise

40.get post put delete

1、POST /url 创建 2、DELETE /url/xxx 删除 3、PUT /url/xxx 更新 4、GET /url/xxx 查看

41.js基本类型和引用类型

基本数据类型：Undefined、Null、Boolean、String、Number、Symbol （es6）。引用类型：Object。Object可以细分为：Object 类型、Array 类型、Date 类型、RegExp 类型、Function 类型

43.require import区别

区别1：模块加载的时间

require：运行时加载 import：编译时加载（效率更高）【由于是编译时加载，所以import命令会提升到整个模块的头部】

区别2：模块的本质

require：模块就是对象，输入时必须查找对象属性 import：ES6 模块不是对象，而是通过 export 命令显式指定输出的代码，再通过 import 命令输入（这也导致了没法引用 ES6 模块本身，因为它不是对象）。由于 ES6 模块是编译时加载，使得静态分析成为可能。有了它，就能进一步拓宽 JavaScript 的语法，比如引入宏（macro）和类型检验（type system）这些只能靠静态分析实现的功能。

44.img中的alt title区别

alt是图片加载失败时，显示在网页上的替代文字； title是鼠标放在图片上面时显示的文字，title是对图片的描述与进一步说明； alt是img必要的属性，而title不是；对于网站seo优化来说，title与alt还有最重要的一点：搜索引擎对图片意思的判断，主要靠alt属性。所以在图片alt属性中以简要的文字说明，同时包含关键词，也是页面优化的一部分。条件允许的话，可以在title属性里进一步对图片说明。

45.BFC规范理解

一、什么是BFC？　　BFC全称：块级格式化上下文（block formatting context），简单来说它就是一种属性，这种属性会影响元素与元素之间的位置、间距二、形成BFC的条件　　1、float：给元素添加浮动（属性值为left、right，但none除外）　　2、position：给元素添加定位（属性值为absolute或fixed）　　3、display：给元素添加display属性（属性值为 inline-block、table-cell或table-caption）　　4、overflow：给元素添加overflow 属性（属性值为hidden、auto或scroll，但visible除外）三、BFC形成后出现的常见问题　　1、margin重叠问题　　2、浮动相关问题

46.null underfined区别

null表示"没有对象"，即该处不应该有值

undefined表示"缺少值"，就是此处应该有一个值，但是还没有定义。

47.vue组件之间的传递

父子件向子组件传值

组件内部通过props接收传递过来的值

Vue.component('menu-item',{
data:
{
	return:{

},
props:['title']
template:'<div>{{title}}</div>'
}
})

子组件向父组件传值

<div :style='{fontSize:fontSize + "px"}'> {{pstr}}</div>
<menu-item @enlarge-text="handle" :pstr="pstr"></menu-item>
<button @click="$emit('enlarge-text')">扩大字体大小</button>
            handle:function () {
                // console.log(this.fontSize)
                this.fontSize+=5
            }

兄弟组件传值

建立事件中心建立全局组件监听事件点击触发兄弟组件事件

let hub=new Vue()
Vue.component('组件名称',{data:return:{},
	template:`模板`,
	mounted:function(){
	当html运行完毕时运行 事件监听 监听本身
	hub.$on('本身事件监听名',(val)=>{
		
	})
	},
	methods:{
	事件名:function(){
		触发兄弟组件
		hub.$emit('兄弟组件监听名',传的值)
	}
	}
})

48.apply call

function  test(){
    console.log(this)  //this 指向window 对象 
}

let  hello = {
   fun:test
}
hello.fun() //{fun:f} 此时this指向hello
//也可以这样操作 
test.apply()
test.call()
//当传入参数
test.apply(hello )   //打印 hello对象 
test.call(hello )     //打印 hello对象

作用：

1??他们可以通过传入其他对象来改变当前this的指向

区别：

共同点：
都可以用来代替另一个对象调用一个方法，将一个函数的对象上下文从初始的上下文改变为由thisObj指定的新对象。
另一种说法，都能够改变方法的执行上下文（执行环境），将一个对象的方法交给另一个对象来执行，并且是立即执行。
不同点：
apply();//最多只能有两个参数--新this对象和一个数组argArray，如果给该方法传递多个参数，则把参数都写进这个数组里边，当然，即使只有一个参数，也要写进数组里边。
call();//可以接收多个参数，第一个参数apply()一样，后面则是一串参数列表。
实际上，apply和call的功能是一样的，只是传入的参数列表的形式不同。

test.call(hello,1,2,3 )   //以此传入hello和1，2，3参数 
test.apply(hello，[1,2,3] )   //打印 hello对象, 但后面的参数需要放在一个数组中

49.css 选择符

1.id选择器（ # myid）

2.类选择器（.myclassname）

3.标签选择器（div, h1, p）

4.相邻选择器（h1 + p）

5.子选择器（ul > li）

6.后代选择器（li a）

7.通配符选择器（ * ）

8.属性选择器（a[rel = "external"]）

9.伪类选择器（a: hover, li:nth-child）

50.vue通信

props和$emit 2.中央事件总线 EventBus(基本不用) 3.vuex(官方推荐状态管理器) 4.$parent和$children

JavaScript知识库最新文章

ES6的相关知识点

react 函数式组件 & react其他一些总结

Vue基础超详细

前端JS也可以连点成线（Vue中运用 AntVG6）

Vue事件处理的基本使用

Vue后台项目的记录（一）

前后端分离vue跨域，devServer配置proxy代理

TypeScript

初识vuex

vue项目安装包指令收集

加:2021-08-04 11:06:48 更:2021-08-04 11:08:42

360图书馆购物三丰科技阅读网日历万年历 2025年5日历

-2025/5/11 17:21:37-

图片自动播放器
↓图片自动播放器↓

TxT小说阅读器
↓语音阅读,小说下载,古典文学↓

一键清除垃圾
↓轻轻一点,清除系统垃圾↓

图片批量下载器
↓批量下载图片,美女图库↓

网站联系: qq:121756557 email:121756557@qq.com IT数码