2024年Web前端最新ES6学习笔记(二)，2024年最新2024中级Web前端开发面试解答

总结一下

面试前要精心做好准备，简历上写的知识点和原理都需要准备好，项目上多想想难点和亮点，这是面试时能和别人不一样的地方。

还有就是表现出自己的谦虚好学，以及对于未来持续进阶的规划，企业招人更偏爱稳定的人。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

万事开头难，但是程序员这一条路坚持几年后发展空间还是非常大的，一切重在坚持。

为了帮助大家更好更高效的准备面试，特别整理了《前端工程师面试手册》电子稿文件。

前端面试题汇总

JavaScript

性能

linux

前端资料汇总

前端工程师岗位缺口一直很大，符合岗位要求的人越来越少，所以学习前端的小伙伴要注意了，一定要把技能学到扎实，做有含金量的项目，这样在找工作的时候无论遇到什么情况，问题都不会大。

Number.parseInt() 与 Number.parseFloat()：

ES6 将全局方法 parseInt 和 parseFloat，移植到 Number 对象上面，使用不变；

Math.trunc：

用于去除一个数的小数部分，返回整数部分；

Number.isInteger：

Number.isInteger() 用来判断一个数值是否为整数；

// 数值扩展

// 0. Number.EPSILON 是 JavaScript 表示的最小精度

// EPSILON 属性的值接近于 2.2204460492503130808472633361816E-16

function equal(a, b) {

return Math.abs(a - b) < Number.EPSILON;

}

console.log(“0、Number.EPSILON 是 JavaScript 表示的最小精度”);

// 箭头函数简化写法

equal = (a, b) => Math.abs(a - b) < Number.EPSILON;

console.log(0.1 + 0.2);

console.log(0.1 + 0.2 === 0.3); // false

console.log(equal(0.1 + 0.2, 0.3)); // true

// 1. 二进制和八进制

console.log(“1、二进制和八进制”);

let b = 0b1010;

let o = 0o777;

let d = 100;

let x = 0xff;

console.log(x);

// 2. Number.isFinite 检测一个数值是否为有限数

console.log(“2、Number.isFinite 检测一个数值是否为有限数”);

console.log(Number.isFinite(100));

console.log(Number.isFinite(100 / 0));

console.log(Number.isFinite(Infinity));

// 3. Number.isNaN 检测一个数值是否为 NaN

console.log(“3. Number.isNaN 检测一个数值是否为 NaN”);

console.log(Number.isNaN(123));

// 4. Number.parseInt Number.parseFloat字符串转整数

console.log(“4. Number.parseInt Number.parseFloat字符串转整数”);

console.log(Number.parseInt(‘5211314love’));

console.log(Number.parseFloat(‘3.1415926神奇’));

// 5. Number.isInteger 判断一个数是否为整数

console.log(“5. Number.isInteger 判断一个数是否为整数”);

console.log(Number.isInteger(5));

console.log(Number.isInteger(2.5));

// 6. Math.trunc 将数字的小数部分抹掉

console.log("6. Math.trunc 将数字的小数部分抹掉 ");

console.log(Math.trunc(3.5));

// 7. Math.sign 判断一个数到底为正数 负数 还是零

console.log(“7. Math.sign 判断一个数到底为正数 负数 还是零”);

console.log(Math.sign(100));//1

console.log(Math.sign(0));//0

console.log(Math.sign(-20000));//-1

18 、对象扩展

---

ES6 新增了一些 Object 对象的方法：

1. Object.is比较两个值是否严格相等，与『===』行为基本一致（+0 与 NaN）；

2. Object.assign 对象的合并，将源对象的所有可枚举属性，复制到目标对象；

3. proto 、setPrototypeOf、 setPrototypeOf 可以直接设置对象的原型；

// 对象扩展

// 1. Object.is 比较两个值是否严格相等，与『===』行为基本一致（+0 与 NaN）；

console.log(Object.is(120, 120)); // ===

// 注意下面的区别

console.log(Object.is(NaN, NaN));

console.log(NaN === NaN);

// NaN与任何数值做===比较都是false，跟他自己也如此！

// 2. Object.assign 对象的合并，将源对象的所有可枚举属性，复制到目标对象；

const config1 = {

host: “localhost”,

port: 3306,

name: “root”,

pass: “root”,

test: “test” // 唯一存在

}

const config2 = {

host: “http://zibo.com”,

port: 300300600,

name: “root4444”,

pass: “root4444”,

test2: “test2”

}

// 如果前边有后边没有会添加，如果前后都有，后面的会覆盖前面的

console.log(Object.assign(config1, config2));

// 3. proto、setPrototypeOf、 getPrototypeOf 可以直接设置对象的原型；

const school = {

name: “尚硅谷”

}

const cities = {

xiaoqu: [‘北京’, ‘上海’, ‘深圳’]

}

// 并不建议这么做

Object.setPrototypeOf(school, cities);

console.log(Object.getPrototypeOf(school));

console.log(school);

19 、模块化

---

模块化是指将一个大的程序文件，拆分成许多小的文件，然后将小文件组合起来；

模块化的优势有以下几点：

1. 防止命名冲突；

2. 代码复用；

3. 高维护性；

ES6 之前的模块化规范有：

1. CommonJS => NodeJS、Browserify；

2. AMD => requireJS；

3. CMD => seaJS；

ES6 模块化语法

模块功能主要由两个命令构成：export 和 import；

1. export 命令用于规定模块的对外接口（导出模块）；

2. import 命令用于输入其他模块提供的功能（导入模块）；

ES6导出模块语法汇总

m.js（逐个导出）

export let school = “尚硅谷”;

export function teach(){

console.log(“我们可以教你开发技术！”);

}

n.js（统一导出）

// 统一暴露（导出）

let school = “尚硅谷”;

function findJob(){

console.log(“我们可以帮你找到好工作！”);

}

export {school,findJob}

o.js（默认导出）

export default{

school : “尚硅谷”,

change : function(){

console.log(“我们可以帮你改变人生！”);

}

}

ES6导入模块语法汇总

使用模块化的另一种方式

将js语法整合到一个文件app.js：

// 通用方式

// 引入m.js模块内容

import * as m from “./m.js”;

console.log(m);

console.log(m.school);

m.teach();

使用模块化的另一种方式.html：

20 、Babel对ES6模块化代码转换

---

Babel 是一个 JavaScript 编译器；Babel 能够将新的ES规范语法转换成ES5的语法；

因为不是所有的浏览器都支持最新的ES规范，所以，一般项目中都需要使用Babel进行转换；步骤：使用Babel转换JS代码——打包成一个文件——使用时引入即可；

步骤

第一步：安装工具babel-cli（命令行工具） babel-preset-env（ES转换工具） browserify（打包工具，项目中使用的是webpack）；

第二步：初始化项目

npm init -y

第三步：安装

npm i babel-cli babel-preset-env browserify

第四步：使用babel转换

npx babel js（js目录） -d dist/js（转化后的js目录） --presets=babel-preset-env

第五步：打包

npx browserify dist/js/app.js -o dist/bundle.js

第六步：在使用时引入bundle.js

21 、ES6模块化引入NPM包

---

第一步：安装jquery

npm i jquery

第二步：在app.js使用jquery

//入口文件

//修改背景颜色为粉色

import $ from ‘jquery’;// 相当于const $ = require(“jquery”);

$(‘body’).css(‘background’,‘pink’);

21 、Array.prototype.includes

---

Includes 方法用来检测数组中是否包含某个元素，返回布尔类型值；

判断数组中是否包含某元素，语法：arr.includes(元素值)；

js

// includes

let arr = [1,2,3,4,5];

console.log(arr.includes(1));//和indexOf类似，区别在于indexOf返回下标，其返回布尔

22 、指数操作符

---

在 ES7 中引入指数运算符「**」，用来实现幂运算，功能与 Math.pow 结果相同；

幂运算的简化写法，例如： 2 的 10 次方：2**10；

// 指数操作符

console.log(Math.pow(2,10))

console.log(2**10);

23 、async 和 await

---

概述

• async 和 await 两种语法结合可以让异步代码看起来像同步代码一样；

• 简化异步函数的写法；

async 函数

1. async 函数的返回值为promise对象；

2. promise 对象的结果由async 函数执行的返回值决定；

// async函数：异步函数

async function fn() {

// return 123; // 返回普通数据

// 若报错，则返回的Promise对象也是错误的

// throw new Error(“出错啦！”);

// 若返回的是Promise对象，那么返回的结果就是Promise对象的结果

return new Promise((resolve, reject) => {

// resolve(“成功啦！”);

reject(“失败啦！”);

})

}

const result = fn();

// console.log(result); // 返回的结果是一个Promise对象

// 调用then方法

result.then(value => {

console.log(value);

}, reason => {

console.warn(reason);

});

await 表达式

1. await 必须写在 async 函数中；

2. await 右侧的表达式一般为 promise 对象；

3. await 返回的是 promise 成功的值；

4. await 的 promise 失败了, 就会抛出异常, 需要通过 try…catch 捕获处理；

// async函数 + await表达式：异步函数

// 创建Prmise对象

const p = new Promise((resolve,reject)=>{

resolve(“成功啦！”);

})

async function fn(){

// await 返回的是 promise 成功的值

let result = await p;

console.log(result); // 成功啦！

}

fn();

async 和 await 读取文件案例

// 导入模块

const fs = require(“fs”);

// 读取

function readText() {

return new Promise((resolve, reject) => {

fs.readFile(“…/resources/text.txt”, (err, data) => {

//如果失败

if (err) reject(err);

//如果成功

resolve(data);

})

})

}

function readTest1() {

return new Promise((resolve, reject) => {

fs.readFile(“…/resources/test1.txt”, (err, data) => {

//如果失败

if (err) reject(err);

//如果成功

resolve(data);

})

})

}

function readTest2() {

return new Promise((resolve, reject) => {

fs.readFile(“…/resources/test2.txt”, (err, data) => {

//如果失败

if (err) reject(err);

//如果成功

resolve(data);

})

})

}

//声明一个 async 函数

async function main() {

//获取为学内容

let t0 = await readText();

//获取插秧诗内容

let t1 = await readTest1();

// 获取观书有感

let t2 = await readTest2();

console.log(t0.toString());

console.log(t1.toString());

console.log(t2.toString());

}

main();

async 和 await 结合发送ajax请求

// async 和 await 结合发送ajax请求

最后

小编的一位同事在校期间连续三年参加ACM-ICPC竞赛。从参赛开始，原计划每天刷一道算法题，实际上每天有时候不止一题，一年最终完成了 600+：

凭借三年刷题经验，他在校招中很快拿到了各大公司的offer。

入职前，他把他的刷题经验总结成1121页PDF书籍，作为礼物赠送给他的学弟学妹，希望同学们都能在最短时间内掌握校招常见的算法及解题思路。

整本书，我仔细看了一遍，作者非常细心地将常见核心算法题和汇总题拆分为4个章节。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

而对于有时间的同学，作者还给出了他结合众多数据结构算法书籍，挑选出的一千多道题的解题思路和方法，以供有需要的同学慢慢研究。