JavaScript

前端面试总结

2024-01-15  本文已影响0人  h2coder

基础类问题

h5的新特性

html5 备注
只有一种 DOCTYPE ⽂件类型声明(统 一标准) <!DOCTYPE html>
增加了一些新的标签元素(功能, 语义化） section, video, progress, nav, meter, time, aside, canvas, command, datalist, details, embed, figcaption, figure, footer, header, hgroup...
input 支持了几个新的类型值 date, email, url 等等
新增了一些标签属性 charset（⽤于 meta 标签）；async（⽤于 script 标 签）
新增的全域属性 contenteditable, draggable... hidden...
新增API 本地存储, 地理定位, Canvas绘图, 拖拽API, 即时通信 WebSocket

css3新增的特性

盒子/图片水平垂直居中

css盒模型

块级元素和行内元素

注：元素的显示模式，可以通过display属性来切换

css选择器权重值

选择器类型 权重值
通配符（*） 0
元素选择器（例如p） 1
类选择器（例如.class） 10
ID选择器（例如#id） 100
属性选择器（例如[type]） 10
伪类选择器（例如:hover） 10
伪元素选择器（例如::before） 10

H5事件

H5中input元素的type属性值

js数据类型

let num = 42;
console.log(typeof num); // "number"

let str = "hello world";
console.log(typeof str); // "string"

let bool = true;
console.log(typeof bool); // "boolean"

let obj = {name: "John", age: 30};
console.log(typeof obj); // "object"

let arr = [1, 2, 3];
console.log(typeof arr); // "object"

let func = function() {};
console.log(typeof func); // "function"

let undef;
console.log(typeof undef); // "undefined"

let nul = null;
console.log(typeof nul); // "object"

let arr = [1, 2, 3];
console.log(Array.isArray(arr)); // true

let nul = null;
console.log(nul == null); // true

let sym = Symbol();
console.log(typeof sym); // "symbol"

let sym1 = Symbol();
let sym2 = Symbol();

let obj = {
  [sym1]: "hello",
  [sym2]: "world"
};

console.log(obj[sym1]); // "hello"
console.log(obj[sym2]); // "world"

回流和重绘

function updatePage() {
  // 更新页面元素的外观

  requestAnimationFrame(updatePage);
}

updatePage();

闭包

原型和原型链

this指向问题

数组中forEach和map

call、bind、apply

new操作符具体过程

浅拷贝和深拷贝

js事件循环

防抖和节流

ES6新增方法

set和map的区别

点击穿透现象及解决办法

button:active {
  background-color: blue;
}

js的继承

如何理解promise

axios.get('http://example.com/movies.json')
  .then(response => response.json())
  .then(data => console.log(data))   
  .catch(error => console.error(error));

async/await的理解

async function getData() {
  const result = await fetch('https://example.com/data');
  const data = await result.json();
  return data;
}

作用域

事件对象和事件委托

sessionStorage和localStorage的区别

rem和em

响应式布局

有没有用过视频组件

<video src="video.mp4" width="480" height="360" autoplay></video>

为什么会跨域 ？

不受同源策略影响的有哪些

跨域怎么处理 ？

宏任务和微任务

ES6中var let const的区别

JS的数据类型，储存上的差距

构造函数在被实例化的时候内部发生了什么

for of和 for in的区别

什么是同步异步

深拷贝 为什么他能做到互不影响

事件代理和场景

Object.defineProperty有几个参数？每个参数做了什么？

let obj = {};
Object.defineProperty(obj, 'foo', {
  value: 'bar',
  writable: true,
  enumerable: true,
  configurable: true
});

let obj = {};
Object.defineProperty(obj, 'foo', {
  get: function() {
    return this._foo;
  },
  set: function(value) {
    this._foo = value;
  }
});

纯函数是什么

怎么创建一个文档碎片

工具类问题（git&webpack）

git命令、git的工作区有哪些

webpack是什么？

webpack版本号

vite和wabpack的区别

网络类问题

http有了解过么 展开说说？

http握手总共有几次 分别是什么

一个页面从输入 URL 到页面加载显示完成的过程

常见的 HTTP 状态码

三次握手和四次挥手

HTTP和HTTPS区别

Axios拦截器

Vue2

MVVM的理解

插槽

vue组件中data为什么必须是一个函数

Vue 数据双向绑定的原理

自己举一个使用vuex的完整过程

npm install vuex

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    // 定义状态
  },
  getters: {
    // 定义 getters
  },
  mutations: {
    // 定义 mutations
  },
  actions: {
    // 定义 actions
  }
})

import Vue from 'vue'
import App from './App.vue'
import store from './store'

new Vue({
  store,
  render: h => h(App)
}).$mount('#app')

export default {
  computed: {
    // 使用 getters
    count() {
      return this.$store.getters.count
    }
  },
  methods: {
    // 使用 mutations
    increment() {
      this.$store.commit('increment')
    },
    // 使用 actions
    asyncIncrement() {
      this.$store.dispatch('asyncIncrement')
    }
  }
}

解释一下递归

v-model实现的原理

什么是单页面应用

vue的理解？

vue.js中如何监听路由信息的改变

nextTick的理解

vue给对象添加新属性界面不刷新，怎么解决？

vue中key的原理

<div v-for="item in items" :key="item.id">{{ item.text }}</div>

Vue 组件通讯

兄弟组件的传值

自定义指令的使用，以及指令的生命周期/钩子函数

Vue.directive('指令名', {
  // 当被绑定的元素插入到 DOM 中时……
  inserted: function (el) {
     // 操作
  }
})

directives: {
  指令名: {
    // 指令的定义
    inserted: function (el) {
       // 操作
    }
  }
}

说5个vue的指令

路由懒加载

// 路由懒加载，异步组件
const SomeComponent = () => ({
  // 这个组件会在被访问时异步加载
  component: import('./some-component.vue'),
  loading: SomeLoadingComponent,
  error: SomeErrorComponent,
  delay: 200,
  timeout: 3000
})

// 路由配置
const router = new VueRouter({
  routes: [
    {
      path: '/some-route',
      component: SomeComponent
    }
  ]
})

Vuex核心属性

路由模式

路由之间跳转方式

如何封装组件

v-show和v-if的区别

v-for和v-if为什么不能一起使用

说说vue的生命周期

Vue组件之间的传递方式

vue-router的钩子函数

vue3和vue2区别

深度侦听在什么情况下使用？立即侦听什么情况下使用？

路由的钩子函数

vue-router传参方式有哪些？

什么是前置路由守卫？

路由传参的方式

// 方式一：路径路由，使用查询参数，传递参数
this.$router.push(`/search?words=${this.inpValue}`);

// 方式二，路径路由，使用配置对象
this.$router.push({
    path: "/search",
    query: {
    words: this.inpValue,
    },
});

// 写法三，动态路由-直接拼路径的方式
this.$router.push(`/search/${this.inpValue}`);

// 写法四，动态路由-配置对象的方式
this.$router.push({
    path: `/search/${this.inpValue}`,
});

// 写法五，命名路由的方式
this.$router.push({
    name: "search",
    params: {
    words: this.inpValue,
    },
});

// 查询参数传参
<router-link to="/search?words=程序员">程序员</router-link>
// 命名路由，传参
<router-link to="/search/程序员">程序员</router-link>

计算属性与watch的区别

watch的深度监听在哪种场景下使用

keep-alive使用时从这个页面跳转到另外一个页面返回后这个数据还存在吗？为什么？

计算属性绑定数据后，跳转到另一个页面再返回，数据是否还在？为什么？

页面优化有哪些？

动态组件是什么？

vue-router导航守卫/钩子函数

Vue3

Pinia和vuex的区别，vuex的不足有哪些？

Vue3双向绑定怎么实现

Vue3中 setup的作用是什么？为什么Vue3比Vue2在script中多了一个setup这个语法糖？

TypeScript

TS的作用、TS代码可以在浏览器解析吗

微信小程序

微信小程序已上线要怎么重构，比如原生做的小程序升级为vue+uni-app框架

做uniapp商城小程序遇到了什么坑？

之前做uniapp开发的时候有做过多端吗？最多做过几端?

扫码进来，有一条链接，但是我要获取链接里面带的参数，怎么获取？

const url = new URL('https://example.com?foo=1&bar=2');
const params = new URLSearchParams(url.search); 
params.get("foo") //1
params.get("bar") //2

uni-app 项目要在不同多端发布，那么在开发的时候要考虑哪方面的问题呢？

uni-app组件中父组件，子组件，兄弟组件，彼此之间的数据交换有哪些参数？

微信小程序的生命周期

微信小程序的登陆流程

微信小程序的跳转方式

微信小程序的数据绑定和vue有什么区别

微信小程序支付流程

场景

token失效处理

服务端渲染和客户端渲染分别是什么？

一般vue开发用什么库来辅助

vantUI elementUI js-cookie socket.io  axios  ECharts

页面刚开始出现一片空白的原因

vue的项目如何做首屏的优化

在浏览商品时，点击商品详情，然后返回，要求进度条还在之前的位置，怎么做

localStorage能实现token的存储需求，为啥还要存储在vuex中呢

项目中后台接口没有写好你怎么做，有几种方式

cookie为什么不能存储token或存储在cookie有什么问题

axios挂到原型上有什么作用

怎么知道自己项目所处的环境是什么

cli用的是那个版本和src里面都有哪些文件

版本：
    Vue      2.6.10 版本
    vuex     3.1.0  版本
    Vue-cli  4.4.4  版本
    webpack  4.4.0  版本
    
src:
    api         接口请求
    assets      静态图片
    components  公共组件
    icons       字体图标
    router      路由配置
    store       vuex
    utils       axios封装
    views       页面级路由

怎么做项目的权限控制

axios是怎么封装的

PC端的兼容问题你遇到哪些？

1、img下的留白
    解决方案：给img设定display:block。

2、如果图片加a标签在IE9-中会有边框
    解决方案:给img设定border:none。

3、rgba不支持IE8
    解决方案:可以用 opacity

4、标签最低高度设置min-height不兼容ie6/7
    解决方案：如果我们要设置一个标签的最小高度200px，需要进行的设置为：{min-height:200px; height:auto !important; height:200px; overflow:visible;}

5、图片加a标签在IE9中出现边框
    解决方案： img{border: none;}

移动端的兼容问题你遇到那些

1、在ios和andriod中,audio元素和video元素在无法自动播放
    应对方案：触屏即播
    $('html').one('touchstart',function(){
        audio.play()
    })
2、iOS 系统中文输入法输入英文时，字母之间可能会出现一个六分之一空格
    可以通过正则去掉： this.value = this.value.replace(/\u2006/g, '');

3、IOS移动端click事件300ms的延迟响应
    引入第三方插件fastclick可以解决在手机上点击事件的300ms延迟
 
4、 h5底部输入框被键盘遮挡问题
    h5页面有个很蛋疼的问题就是，当输入框在最底部，点击软键盘后输入框会被遮挡。可采用如下方式解决
    1）定义一个class:
        .focusState {position: absolute;}
    2）利用监听键盘的收起展开事件来添加移除定义的focusState 样式
         created(){
            var clientHeight = document.documentElement.clientHeight || document.body.clientHeight;
            window.onresize = function() {
              
            var nowClientHeight = document.documentElement.clientHeight || document.body.clientHeight;
            if (clientHeight - nowClientHeight > 60 ) {
                
                document.getElementById("apply").classList.add("focusState");
                
            }
            else {
                
                document.getElementById("apply").classList.remove("focusState");
            } 
        };
    },

移动端如何做真机测试

H5和app的区别

在请求回来的数据保存至localstorage里面页面没有刷新，怎么获取数据

在使用vuex时怎么实现数据的持久化

全局前置守卫的应用，自己举个小例子说出来怎么使用

有一个数组，数组都是数字怎么把里面的奇数偶数分开

数组去重的方式有哪些？

vuex第一次刷新导致首页空白

项目中运用哪些框架

vue用了这么久 你对他有什么看法 比如语法 或者其他一些东西

服务端渲染和客户端渲染分别是什么？

移动端兼容（适配）、浏览器兼容、不同的分辨率兼容

echars移动端使用

低代码

什么样的数据能放cdn

资源类型
- HTML\CSS\JavaScript
- 图片
- 音频
- 视频

Web端即时通讯

url从输入地址到访问的过程

商城购物车是怎么做的 ？在购物车订单页面怎么去更新数据？

后台管理的权限如何实现

项目优化打包

原理

事件线程的理解

JS的运行机制

图片懒加载底层原理

说一下vue2底层原理 ？vue2的特点 ？

上一篇下一篇

猜你喜欢

热点阅读