Web前端最新JS基础4(1)，2024年前端高级面试题总结

前端框架

前端框架太多了，真的学不动了，别慌，其实对于前端的三大马车，Angular、React、Vue 只要把其中一种框架学明白，底层原理实现，其他两个学起来不会很吃力，这也取决于你以后就职的公司要求你会哪一个框架了，当然，会的越多越好，但是往往每个人的时间是有限的，对于自学的学生，或者即将面试找工作的人，当然要选择一门框架深挖原理。

以 Vue 为例，我整理了如下的面试题。

如果你觉得对你有帮助，可以戳这里获取：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

字符串属性

---

| 属性 | 含义 |

| :-: | :-- |

| str[] | 访问字符串中字符 |

| charAt() | 找到索引号内容并返回 |

| indexof() | 找到字符串索引号 |

| lastIndexof() | 从后面找到字符串索引号 |

| substring() | 2个值，从哪个开始，到哪个结束，不包括结束字符 |

| substr() | 2个值，从哪开始，截取几个 |

| slice() | 2个值，从哪个开始，到哪个结束，不包括结束字符 |

| replace() | 用新字符串替换指定字符串 |

| split() | 分隔字符串，返回一个数组 |

| concat() | 字符串拼接 |

| trim() | 去除前后空格符 |

| startsWith(a) | 是否以a字符开头 |

| endWith(a) | 是否以a字符结尾 |

| includes(a) | a在全字符串是否存在 |

| toLowerCase | 转换小写 |

| toUpperCase | 转换大写 |

| repeat(N) | 将字符串复制N次 |

| padStart(n,‘m’) | 将m复制n次填充到字符串前面 |

| padEnd(n,‘m’) | 将m复制n次填充到字符串后面 |

注:

1. 字符串中空格也是一个字符串

2. indexof()找不到时返回-1

3. slice,substring,substr

• 是以相同形式被调用，当只有一个数，提取到末尾位置

• 当有负数时，slice将所有负值当成字符串长度加上负参数值，substr将第一个负参数值当成字符串长度加上负参数值，第二个转换为0，substring将所有转换为0

示例代码

var str=‘hello’;

console.log(str[0])

//结果h

var str=‘hello’;

console.log(str.charAt(0))

//结果h

var str=‘hello’;

console.log(str.indexOf(‘l’))

//结果02

var str=‘hello’;

console.log(str.lastIndexOf(‘l’))

//结果03

var str=‘hello’;

console.log(str.substring(0,2))

//结果he

var str=‘hello’;

console.log(str.substr(0,2))

//结果he

var str=‘hello’;

console.log(str.replace(‘he’,‘eh’))

//结果ehllo

var str=‘hello’;

newStr=str.split(‘’)

console.log(newStr)

//结果[‘h’, ‘e’, ‘l’, ‘l’, ‘o’]

var str=‘hello’;

newStr=str.concat(’ world’)

console.log(newStr)

//结果hello world

var str=’ hello’;

newStr=str.concat(’ world’)

newStr1=newStr.trim()

console.log(newStr1)

//结果hello world

var str=‘hello’;

newStr=str.startsWith(‘h’)

console.log(newStr)

//结果true

var str=‘hello’;

newStr=str.toUpperCase()

console.log(newStr)

//结果HELLO

for-in与for-of

---

• foe-in

var obj={

name:‘Nichols’,

age:19,

}

for(var key in obj){

console.log(obj[key])

//结果Nichols 19

}

• for-of

var str=‘hello’;

for(var value of str){

console.log(value)

//结果h e l l 0

}

框架相关

原生JS虽能实现绝大部分功能，但要么就是过于繁琐，要么就是存在缺陷，故绝大多数开发者都会首选框架开发方案。现阶段较热门是React、Vue两大框架，两者工作原理上存在共通点，也存在一些不同点，对于校招来说，不需要两个框架都学得特别熟，一般面试官会针对你简历中写的框架进行提问。

在框架方面，生命周期、钩子函数、虚拟DOM这些基本知识是必须要掌握的，在学习的过程可以结合框架的官方文档

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

Vue框架

知识要点：
1. vue-cli工程
2. vue核心知识点
3. vue-router
4. vuex
5. http请求
6. UI样式
7. 常用功能
8. MVVM设计模式

React框架

知识要点：
1. 基本知识
2. React 组件
3. React Redux
4. React 路由

要点：**

1. vue-cli工程
2. vue核心知识点
3. vue-router
4. vuex
5. http请求
6. UI样式
7. 常用功能
8. MVVM设计模式

[外链图片转存中…(img-8qVdvVvU-1715908369663)]

React框架

知识要点：
1. 基本知识
2. React 组件
3. React Redux
4. React 路由

[外链图片转存中…(img-10NwgBLa-1715908369663)]