2024年最全零基础入门前端可以快速掌握的 javascript 基础(2)，2024年最新2024前端开发面试

基础学习：

前端最基础的就是 HTML , CSS 和 JavaScript 。

网页设计：HTML和CSS基础知识的学习

HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息，可以包含文字、图片、视频等。

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

CSS样式是表现。就像网页的外衣。比如，标题字体、颜色变化，或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。

动态交互：JavaScript基础的学习

JavaScript是用来实现网页上的特效效果。如：鼠标滑过弹出下拉菜单。或鼠标滑过表格的背景颜色改变。还有焦点新闻（新闻图片）的轮换。可以这么理解，有动画的，有交互的一般都是用JavaScript来实现的。

var a = () => {

console.log(this.name);

};

a(); // y

a.apply(cat); // y

10.作用域

// 变量声明提升

console.log(a); // 1

console.log(b); // Uncaught ReferenceError: b is not defined

console.log©; // Uncaught ReferenceError: c is not defined

var a = 1;

let b = 2;

const c = 3;

// 函数声明提升

console.log(y); // ƒ y(){console.log(“nice to meet you!”)}

function y() {

console.log(“nice to meet you!”);

}

11.数据类型 基本类型存于栈内存，引用类型存于堆内存，从存取频率上可理解。

• 基本类型

Number、 Boolean、String、Undefined、Null、BigInt、Symbol

• 引用类型

Object、Array、Function、Date、RegExp

typeof 方法可以判断基本类型和函数；instanceof 方法可以判断引用类型；Object.prototype.toString.call()方法可以精确判断所有数据类型。

12.常用数组&字符串& 正则方法

// 字符串方法

“abc”.split(“”);

“abc”.indexOf(“a”);

“abc”.charAt(0);

“abc”.replace(“a”, 1);

“abc”.match(“a”);

“abc”.matchAll(“a”);

// 数组方法

[1, 2, 3].join(“”);

[1, 2, 3].indexOf(1);

[1, 2, 3].findIndex((item) => item > 1);

[(1, 2, 3)][0];

[1, 2, 3].reduce((acc, item, index, arr) => {

return acc + item;

});

[1, 2, 3].map((item, index) => {});

[1, 2, 3].forEach((item, index) => {});

[1, [2, 3]].flat(2);

[1, 2, 3].fill(“a”);

[1, 2, 3].includes(1);

// 正则方法

/[a-z]/.test(“abc”);

/([a-z])(?!\1)([a-z])/.exec(“aac”);

13.排序

// sort

[1, 3, 5, 2, 4, 6].sort((a, b) => {

return a - b;

});

// 快速排序

function quickSort(arr) {

if (arr.length < 2) return arr;

let left = [];

let right = [];

let flag = arr.splice(arr.length - 1, 1)[0];

for (let i = 0; i < arr.length; i++) {

if (arr[i] > flag) {

right.push(arr[i]);

} else {

left.push(arr[i]);

}

}

return quickSort(left).concat(flag, quickSort(right));

}

// 冒泡排序

function bubbleSort(arr) {

for (let i = 0; i < arr.length - 1; i++) {

for (let j = i + 1; j < arr.length; j++) {

if (arr[i] > arr[j]) {

[arr[i], arr[j]] = [arr[j], arr[i]];

}

}

}

return arr;

}

// 选择排序

function selectSort(arr) {

let min = 0;

for (let i = 0; i < arr.length - 1; i++) {

min = i;

for (let j = i + 1; j < arr.length; j++) {

if (arr[j] < arr[min]) {

min = j;

}

}

[arr[i], arr[min]] = [arr[min], arr[i]];

}

return arr;

}

14.去重

// new Set

new Set([1, 2, 1, 2]);

// 遍历

function uniq(arr) {

for (let i = 0; i < arr.length - 1; i++) {

for (let j = i + 1; j < arr.length; j++) {

if (arr[i] === arr[j]) {

arr.splice(j, 1);

i–;

}

}

}

return arr;

}

15.拍平数组

// flat

[1, [1, [3, 4]]].flat(3);

// 递归

function flat_y(arr) {

let res = [];

for (let i = 0; i < arr.length; i++) {

if (Array.isArray(arr[i])) {

res = res.concat(flat_y(arr[i]));

} else {

res.push(arr[i]);

}

}

return res;

}

16.深拷贝

function deepClone_y(obj, map = new Map()) {

let type = Object.prototype.toString.call(obj);

if (

[

“[object String]”,

“[object Number]”,

“[object Undefined]”,

“object Boolean”,

].includes(type)

)

return obj;

if (type === “[object Array]”) {

if (map.get(obj)) return map.get(obj);

let arr = [];

map.set(obj, arr);

for (let i = 0; i < obj.length; i++) {

arr.push(deepClone_y(obj[i], map));

}

return arr;

}

if (type === “[object Object]”) {

if (map.get(obj)) return map.get(obj);

let res = {};

map.set(obj, res);

for (let key in obj) {

res[key] = deepClone_y(obj[key], map);

}

return res;

}

// 函数类型新建函数方法：new Function(‘参数’,‘函数体’)

}

17.跨域解决方案

域名协议端口都相同才叫做同源

• jsonp

借助script标签实现跨域

ps: 已经过时了为什么还要考

• webpack-dev-server proxy

proxy: {

‘/api’: {

target: ‘http://127.0.0.1:7001/’,

changeOrigin: true,

pathRewrite: {

‘^/api’: ‘/api’

}

}

}

• cors

Access-Control-Allow-Origin: http://www.test.com

Access-Control-Allow-Credentials: true

基础学习：

前端最基础的就是 HTML , CSS 和 JavaScript 。

网页设计：HTML和CSS基础知识的学习

HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息，可以包含文字、图片、视频等。

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

CSS样式是表现。就像网页的外衣。比如，标题字体、颜色变化，或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。

动态交互：JavaScript基础的学习

JavaScript是用来实现网页上的特效效果。如：鼠标滑过弹出下拉菜单。或鼠标滑过表格的背景颜色改变。还有焦点新闻（新闻图片）的轮换。可以这么理解，有动画的，有交互的一般都是用JavaScript来实现的。

的学习

HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息，可以包含文字、图片、视频等。

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

[外链图片转存中…(img-1jEEmDKp-1715689710060)]

CSS样式是表现。就像网页的外衣。比如，标题字体、颜色变化，或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。

[外链图片转存中…(img-kULzXzXs-1715689710061)]

动态交互：JavaScript基础的学习

JavaScript是用来实现网页上的特效效果。如：鼠标滑过弹出下拉菜单。或鼠标滑过表格的背景颜色改变。还有焦点新闻（新闻图片）的轮换。可以这么理解，有动画的，有交互的一般都是用JavaScript来实现的。

[外链图片转存中…(img-c74nk0RH-1715689710062)]