2023高频前端面试题(持续更新 含答案)

news2024/11/21 2:26:00

1,es6有哪些新特性?

ES6是2015年推出的一个新的版本、这个版本相对于ES5的语法做了很多的优化

let和const具有块级作用域,不存在变量提升的问题。新增了箭头函数,简化了定义函数的写法,同时
可以巧用箭头函数的this、(注意箭头函数本身没有this,它的this取决于外部的环境),新增了promise,解决了回调地域的问题,新增了模块化、利用import 、export来实现导入、导出。新增了结构赋值,ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构
(Destructuring)。新增了class类的概念,它类似于对象。

1-1,let声明变量和var一样,但是let不存在变量提升,存在块级作用域,块级作用域---很适合用在for循环中,使用let时for循环每循环一次就是一个单独的变量i只在当前花括内生效,而且不会泄露成全局的i,不能重复声明,不存在变量提升

1-2,const-声明常量,只要声明就必须初始化,不能重复声明,不存在变量提升,const只要声明就必须初始化

1-3,新增了箭头函数,简化了定义函数的写法,同时可以巧用箭头函数的this、(注意箭头函数本身没有this,它的this取决于外部的环境)

箭头函数和普通函数的区别:

  • this指向不同,因为箭头函数中没有this

  • 箭头函数不能使用arguments

  • 书写方式,箭头函数使用(=>)箭头定义函数

  • 箭头函数可以省略return

  • 箭头函数都是匿名函数

  • 箭头函数不能用于构造函数,不能使用new

  • call apply bind改变不了this指向

1-4,symbol

新增的数据类型,第七种数据类型,原始数据类型,表示独一无二的值

let sy=Symbol()
console.log(typeof sy);
// 数值是由symbol函数生成的,不能使用new
// 可以接受参数,用来描述数据
let sy=Symbol('a')
let sy1=Symbol('a')
console.log( sy===sy1);

1-5,集合-set

新增的数据结构 类似于数组,成员是不重复的,只有一个,可以接收参数,可以接收数组或者iteration接口的数据

// 可以去重
let s=new Set()
var arr=[1,2,3,1,2,3]
 arr.forEach(item=>{
    s.add(item)
})
console.log(s);
let s=new Set('aasdasd')
let s1=new Set(document.querySelectorAll('li'))
console.log(s1);

属性:

  • set.prototype.size :长度

  • set.prototype.constructor:指向构造函数

数据:

  • set.prototype.add(value)添加数据

  • set.prototype.delete(value)删除数据

  • set.prototype.has(value)检测数据是否存在,返回时布尔值

  • set.prototype.clear()将数据清空

遍历器:

  • set.prototype.keys()遍历属性名(键名)遍历器

  • set.prototype.values()遍历属性值(键值)遍历器

  • set.prototype.entries()遍历键值对的遍历器

  • forEach()遍历

1-6,map

类似对象 键值对的形式存在,不限制数据类型作为属性名,值---值

let m=new Map()
m.set(1,{name:'1'})
m.set([1,2,3],1)
console.log(m.get());

1-7,解构赋值

按照一定模式匹配相应的数据

数组的结构

var arr=[1,2,3]
var [a,b,c]=arr 
console.log(a,b,c)//1,2,3
//相当于:
[a,b,c]=[1,2,3]

对象的结构

var obj={
name:'zhang',
age:'19',
set:{
name:'lisi'
}
}
var {name:bar,age:a,set:{name:baz}}=obj
console.log(baz);

函数的解构赋值

// 参数的解构赋值
function fun([x,y],b,a,c){
    console.log(x,y);
}
fun([1,2],10,20)

1-8,严格模式

对代码进行限制规范,严格模式和普通没有区别

// 注意:- 将严格模式的语句放到代码的第一行
//       - ie 6 7 8 9不支持严格模式 

'use strict' // 全局开启

function fn() {
    'use strict' // 某个函数开启

}
  • 全局变量必须声明

  • 禁止使用 with

  • 创建 eval 作用域

  • 禁止 this 指向全局作用域

  • 函数参数不能重名

1-9, promise

异步编程的方式,可以解决回调地狱的问题

特点:有三个状态 pending(正在进行) fulfilled(已经成功)

rejected (已经失败)

结果只有两种可能:pending(正在进行)到 fulfilled(已经成功) --成功---resolve

pending(正在进行)到 rejected (已经失败)---失败---reject

接收一个回调函数 里面有两个参数

const p = new Promise(function (resolve, reject) {
setTimeout(function () {
    resolve(100)
}, 1000)

})
p.then(function(value){
console.log(value);
},function(error){
console.log(error);
})

catch

用来捕获失败,相当于then(undefined,function())或者then(null,function())

promise的状态不会一经确定就不会改变了

2,什么是递归,递归有哪些优点或缺点?

递归函数 -- 高阶函数

如果一个函数,是自己调用自己(直接调用或者间接调用) 这个函数就是递归

简单理解:函数内部自己调用自己, 这个函数就是递归函数

适合大量数据或者数据的反复计算

注意:必须有一个结束条件,结束了,才有结果

 function getSty(a){
     getSty([]) 
} 

优点:结构清晰、可读性强

缺点:效率低、调用栈可能会溢出,其实每一次函数调用会在内存栈中分配空间,而每个进程的栈的容

量是有限的,当调用的层次太多时,就会超出栈的容量,从而导致栈溢出。

3,谈谈你平时都用了哪些方法进行性能优化?

减少http请求次数、打包压缩上线代码、使用懒加载、使用雪碧图、动态渲染组件、CDN加载包。

4,什么是闭包?手写一个闭包函数? 闭包有哪些优缺点?

闭包指有权访问另一个函数作用域中变量的函数。简单理解就是 ,一个作用

域可以访问另外一个函数内部的局部变量。

function fn() {
var num = 10;
function fun() {
console.log(num); 
 }
return fun;
}
var f = fn(); 
f();

作用延长变量作用域、在函数的外部可以访问函数内部的局部变量,容易造成内层泄露,因为闭包中

的局部变量永远不会被回收

优点

1:变量长期驻扎在内存中;

2:避免全局变量的污染;

3:私有成员的存在 ;

缺点

会造成内存泄露

5,v-for 循环为什么一定要绑定key ?

页面上的标签都对应具体的虚拟dom对象(虚拟dom就是js对象), 循环中 ,如果没有唯一key , 页面上删除一条标签, 由于并不知道删除的是那一条,所以要把全部虚拟dom重新渲染, 如果知道key为x标签被删除掉, 只需要把渲染的dom为x的标签去掉即可

6,Js 中常见的内存泄漏?

1.意外的全局变量

2.被遗忘的计时器或回调函数

3.脱离 DOM 的引用

4.闭包

7,Get 和 post 有什么区别?

Get 是从服务器上获取数据,post 是向服务器传送数据

在客户端,get 通过 url 提交数据,数据在 url 中可以看到,post 方式,

数据放在 html header 中提交

安全性问题 原则上post肯定要比get安全,毕竟传输参数时url不可见

Get 提交数据最多只能有 1024 字节,post 没有限制

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/408735.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

用代码写出浪漫__合集(python、matplotlib、Matlab、java绘制爱心、玫瑰花、前端特效玫瑰、爱心)

活动地址:CSDN21天学习挑战赛 用代码写出浪漫合集(爱心、玫瑰花) 本文目录: ​一、前言 二、用python、matplotlib、Matlab、java绘制爱心 (1)爱心图形1(弧线型)(显示…

【微信小程序】-- 案例 - 自定义 tabBar(四十六)

💌 所属专栏:【微信小程序开发教程】 😀 作  者:我是夜阑的狗🐶 🚀 个人简介:一个正在努力学技术的CV工程师,专注基础和实战分享 ,欢迎咨询! &…

uniapp 使用第三方UI库 uview-plus

前言:开发uniapp时,有些功能,使用UI库提供的更加方便和简单。所以我就搜索uniapp 的UI库,根据网上和uniapp的插件市场,确定使用uviewUI库。 uniapp项目使用的vue2 -----> 对应 uView uniapp项目使用vue3 -…

css3渐变色

作用:让元素在两个或多个指定的颜色之间显示平稳的过渡。 种类:分为线性渐变与径向渐变 一、线性渐变 1、向下/向上/向左/向右/对角方向 语法:background-image: linear-gradient(direction, color-stop1, color-stop2, ...); direction…

Vue的事件处理,点击事件

目录 1、 v-on:click 绑定属性示例: 2、 v-on:click 绑定方法示例: 3、 v-on:click 绑定特殊变量示例: 4、事件处理的修饰符 按键修饰符: v-model表单修饰符: v-bind指令修饰符: 监听DOM事件使用的是v…

vue+mysql实现前端对接数据库

下载引入相关依赖 1、cnpm install --save mysql 2、cnpm install --save axios 3、cnpm install --save body-parser 4、cnpm install --save express 5、cnpm install --save crypto 在main中引入axios import Axios from axios Vue.prototype.$axios axios 配置连接…

使用python搭建一个简易的Web服务

介绍 简单的说,web服务器就是机器上监听了本地的IP和端口的一个进程,当有客户的请求进来时,它会响应客户的请求并返回相应的信息。客户端和服务端之间的通信基于HTTP协议,客户端可以是浏览器或者任何支持HTTP的应用。我们平时访问…

vue+element ui完成头像上传功能(文件转base64)以及自定义布局。

1、自定义布局 查阅element ui的头像上传功能,发现是点击头像位置才可以上传,那我们可不可以点击头像外部的按钮来上传头像呢? element ui效果图: 目标效果: 在实…

OpenAI 成近期顶流团队?如何使用 OpenAI 和 Node.js 构建 AI 图像生成器?

摘要: 12月7号,知名人工智能研究机构 Open AI 在Youtub上发布视频介绍使用OpenAI 和 DALL-E 模型创建一个网络应用程序,该应用程序将根据输入的文本从头开始生成图像。https://www.youtube.com/watch?vfU4o_BKaUZE 前言💖 大家好&#xff0…

全网多种方法解决Invalid Host header(无效的主机头)服务器域名访问出现的错误

文章目录1. 复现错误2. 分析错误3. 解决错误4. 其他方法解决该错误1. 复现错误 在搭建vue-cli环境,用nginx做代理服务器,访问时却显示:Invalid Host header。 2. 分析错误 知其然,知其所以然,我们在解决该问题之前&am…

支付宝手机网站H5支付

手机网站支付产品介绍 | 网页&移动应用 为方便商家在移动端网页应用中集成支付宝支付功能,支付宝提供了手机网站支付能力。 流程简介:商家在网页中调用支付宝提供的网页支付接口调起支付宝客户端内的支付模块,商家网页会跳转…

【报错】npm install --save core-js/modules/es.array.push.js

代码写着写着,一运行突然就报了下面这么个错误 一开始没细看,以为是自己代码逻辑哪里写错,但是检查了一遍下来,好像没啥问题呀 然后后面就跟着执行了一下npm install --save core-js/modules/es.array.push.js 哦豁,还…

【自学前端】我只学这些够吗?好难

表弟也终于到了马上要大学毕业的时间,然后听说我在做前端开发工作,就想着能不能和我一起搞一搞。 我说这又不是小时候一起去地里抓兔子,说走就一起走,拿上工具一起走了,这得学啊。看着表弟期待的眼神,他问了…

【CTF】buuctf web 详解(持续更新)

buuctf web[HCTF 2018]WarmUp[极客大挑战 2019]EasySQL[极客大挑战 2019]Havefun[强网杯 2019]随便注[ACTF2020 新生赛]Include[SUCTF 2019]EasySQL[极客大挑战 2019]Secret File[ACTF2020 新生赛]Exec[极客大挑战 2019]LoveSQL[GXYCTF2019]Ping Ping Ping[极客大挑战 2019]Kni…

从零开始的「校园商铺」毕设全栈开发—开题报告

☕前言: 不知不觉已经在大学中度过了四年时光,春暖花开、桃红柳绿,又到了一年毕设季,恰逢〖新星计划2023〗活动正好有毕设相关的创作方向,号称两小时带我搞定毕设,像我这样喜欢白嫖(&#x1f61…

【小程序从0到1】宿主环境|WXML|WXSS|JS逻辑交互

欢迎来到我的博客 📔博主是一名大学在读本科生,主要学习方向是前端。 🍭目前已经更新了【Vue】、【React–从基础到实战】、【TypeScript】等等系列专栏 🛠目前正在学习的是🔥React/小程序React/小程序React/小程序&am…

cropperjs的简单使用

前言 最近发现了cropperjs,可以用于裁剪图片,特点来踩一下坑。 官方文档 参考文章: cropper.js 裁剪图片并上传(文档翻译demo) 1小时搞定cropper.js制作头像/图片上传、裁剪、并发送至后端 可以仿gitee的头像上传…

JavaScript WebAPI

✏️作者:银河罐头 📋系列专栏:JavaEE 🌲“种一棵树最好的时间是十年前,其次是现在” 目录DOM 基本概念选中页面元素事件初识事件三要素操作元素获取/修改元素内容获取/修改元素属性获取/修改表单元素属性valuetype获取…

JS小知识,如何将 CSV 转换为 JSON 字符串

大家好,今天和大家聊一聊,在前端开发中,我们如何将 CSV 格式的内容转换成 JSON 字符串,这个需求在我们处理数据的业务需求中十分常见,你是如何处理的呢,如果你有更好的方法欢迎在评论区补充。一、使用 csvt…

手写防抖和节流函数

一、认识防抖debounce函数 我们用一副图来理解一下它的过程: 当事件触发时,相应的函数并不会立即触发,而是会等待一定的时间;当事件密集触发时,函数的触发会被频繁的推迟;只有等待了一段时间也没有事件触…