前端面试2024

1、箭头函数的特点和作用

(1)简化语法：箭头函数可以用更短的语法定义函数，不需要使用function关键字和return语句。例如，(x, y) => x + y可以代替function(x, y) { return x + y; }。

(2)简化this绑定：在箭头函数中，this的值由外部最接近的非箭头函数的作用域决定，而不是动态绑定。这意味着在箭头函数中，this指向的是定义时的对象，而不是调用时的对象。这种特性可以避免在回调函数中出现this指向错误的问题。

(3)简化语法绑定：在箭头函数中，没有arguments对象。这意味着箭头函数不能通过arguments对象访问传递给函数的参数。如果需要访问传递的参数，可以使用剩余参数（rest parameters）或者使用展开语法（spread syntax）。

需要注意的是，箭头函数不能用作构造函数，不能使用new关键字实例化，并且没有prototype属性。箭头函数也没有自己的this、arguments、super或new.target绑定。

2、flex布局和grid布局的各种属性

Flex 布局语法教程 | 菜鸟教程

flex-direction: row | row-reverse | column | column-reverse;//排列方向

flex-wrap: nowrap | wrap | wrap-reverse;

flex-flow: <flex-direction> <flex-wrap>;

justify-content: flex-start | flex-end | center | space-between | space-around;

align-items: flex-start | flex-end | center | baseline | stretch;

align-content: flex-start | flex-end | center | space-between | space-around | stretch;

column-gap	指定列之间的间隙
gap	row-gap 和 column-gap 的简写属性
grid	grid-template-rows, grid-template-columns, grid-template-areas, grid-auto-rows, grid-auto-columns, 以及 grid-auto-flow 的简写属性
grid-area	指定网格元素的名称，或者也可以是 grid-row-start, grid-column-start, grid-row-end, 和 grid-column-end 的简写属性
grid-auto-columns	指的默认的列尺寸
grid-auto-flow	指定自动布局算法怎样运作，精确指定在网格中被自动布局的元素怎样排列。
grid-auto-rows	指的默认的行尺寸
grid-column	grid-column-start 和 grid-column-end 的简写属性
grid-column-end	指定网格元素列的结束位置
grid-column-gap	指定网格元素的间距大小
grid-column-start	指定网格元素列的开始位置
grid-gap	grid-row-gap 和 grid-column-gap 的简写属性
grid-row	grid-row-start 和 grid-row-end 的简写属性
grid-row-end	指定网格元素行的结束位置
grid-row-gap	指定网格元素的行间距
grid-row-start	指定网格元素行的开始位置
grid-template	grid-template-rows, grid-template-columns 和 grid-areas 的简写属性
grid-template-areas	指定如何显示行和列，使用命名的网格元素
grid-template-columns	指定列的大小，以及网格布局中设置列的数量
grid-template-rows	指定网格布局中行的大小
row-gap	指定两个行之间的间距

3、如何保存小数点的精度

(1)使用 toFixed() 方法：这个方法会将数字转换为字符串，并按照指定的小数位数四舍五入。

(2)使用乘除法手动四舍五入：先乘以10的指定小数位数的幂，然后进行四舍五入，最后再除以同样的幂。

(3)使用 Number.prototype.toPrecision()：这个方法会按照指定的长度来四舍五入，如果设置的精度高于实际数字的小数位数，会用0来填充。

注意：toFixed() 和 toPrecision() 返回的都是字符串形式的数字，如果需要数字类型，可以进一步转换

4、如何判断一个x数据是什么类型

一、数据类型有那些

基本类型（简单类型/值类型/原始类型）：Boolean、Number、String、undefined、null、Symbol（ES6 新增）

引用类型（复杂类型）：Object、Array、Function

二、 数据类型判断方法

1、typeof

typeof 返回值 “object” 、“number”、“boolean”、“undefined”、“function” 、“string”、“function”、'symbol"

2、instanceof

instanceof 是用来 判断数据是否是某个对象的实例，返回一个布尔值

缺点

对于基本类型的数据，instanceof是不能直接判断它的类型的，因为实例是一个对象或函数创建的，是引用类型，所以需要通过基本类型对应的 包装对象 来判断。所以对于 null 和 undefined 这两个家伙就检测不了

5 instanceof Number // false

new Number(5) instanceof Number  // true

//因为原型链继承的关系，instanceof 会把数组都识别为 Object 对象，所有引用类型的祖先都是 Object 对象

3、constructor

使用 constructor 可以查看目标构造函数，也可以进行数据类型判断。但是不能判断 null 和 undefined，因为这两个特殊类型没有其对应的包装对象。

constructor和instanceof 类似，constructor 返回结果的是自己的构造函数，而 instructor 则是自己与构造函数比较返回布尔值

constructor === Number     // true

"text".constructor === String  // true

true.constructor === Boolean   // true

({}).constructor === Object    // true

console.log({} instanceof Object) // true

// Uncaught TypeError: Cannot read property 'constructor' of undefined

undefined.constructor === undefined  // 报错

null.constructor === null            // 报错

4、Object.prototype.toString

在判断数据类型时，我们称 Object.prototype.toString 为 “万能方法” “终极方法”，工作中也是比较常用而且准确

// 简单实现

var arr = [1, 2, 3]

Object.prototype.toString.call(arr)

// 简易实现 Array.isArray() 方法

function isArray(obj) {

  return type(obj) === 'array'

}

console.log(isArray(arr)) // true

在ECMAScript中，Object类型的每个实例都有 toString() 方法，返回对象的字符串表示，所以每个实例化的对象都可以调用 toString() 方法，并且其他数据类型也能使用 toString()

5、Array.isArray()

返回的是一个布尔值

let a = [1,2,3];

console.log(typeof a);  //返回“object”

console.log(Array.isArray(a));  //true

5、如何判断空对象

一、JSON.stringify()将对象转为字符串比较

var a={};
var b=new Object();
console.log(JSON.stringify(a)=="{}") //true
console.log(JSON.stringify(b)=="{}") //true

二、for…in循环

var a={};
function isEmptyObject(obj){
for(var key in obj){
return false
};
return true
};
console.log(isEmptyObject(a));

三、Object.getOwnPropertyNames()

Object.getOwnPropertyNames()方法返回一个由指定对象的所有自身属性的属性名（包括不可枚举属性但不包括Symbol值作为名称的属性）组成的数组。用此方法判断空对象只需要判断返回的数组长度是否为零，为零的话就是空对象。

var obj = { };
console.log(Object.getOwnPropertyNames(obj).length == 0); // true

四、Object.keys()

Object.keys() 方法会返回一个由一个给定对象的自身可枚举属性组成的数组，数组中属性名的排列顺序和使用 for…in 循环遍历该对象时返回的顺序一致。用此方法判断空对象只需要判断返回的数组长度是否为零，为零的话就是空对象。

var data = {};
var arr = Object.keys(data);
console.log(arr.length == 0);//true

6、vuex和storage存储数据的区别

（1）从存储的位置来说，Vuex 用的是内存，而 Storage 用的是文件存储；

（2）从易失性来说，Vuex与页面的生存周期相同（如关闭页面、刷新等数据就会消失），而
localStorage是“永久”存储的，sessionStorage 生存于应用会话期间；

（3）从存储空间来看，Vuex取决于可用内存和浏览器的限制，Storage
都有个默认的大小（至少5MB，由浏览器决定），超出大小则需要用户同意增加空间；

（4）从共享来看，Vuex无法跨标签页、跨物理页面共享，则Storage则可以在同一域名底下共享；

（5）从用途来看，Vuex是用于管理页面内容及组件的状态，而Storage主要是用于存储数据；

（6）Storage是由浏览器提供的基础设施，而Vuex则是由JavaScript程序库提供的服务

7、echarts的使用，地图，3d

百度地图JSAPI WebGL v1.0类参考

Documentation - Apache ECharts

Three.js中文网

8、pinia的基本使用

关于pinia的介绍-CSDN博客

9、基本页面UI设计

Axure

sketch

10、重绘和重排

重绘就是重新绘制（repaint）：是在一个元素的外观被改变所触发的浏览器行为，浏览器会根据元素的新属性重新绘制，使元素呈现新的外观。

重排就是重新排列（reflow）：当渲染树的一部分必须更新并且节点的尺寸发生了变化，浏览器会使渲染树中受到影响的部分失效，并重新构造渲染树。

11、js的常用方法

push、pop、unshift、shift、splice、slice、concat、join、revres、indexOf、sort、filter、map

12、H5新特性

  一、语义标签

  二、增强型表单

  三、视频和音频

  四、Canvas绘图

  五、SVG绘图

  六、地理定位

  七、拖放API

  八、WebWorker

  九、WebStorage

  十、WebSocket