2024年Vue前篇--大前端进阶知识点回顾(2)，大厂面试技巧

对象篇

模块化编程-自研模块加载器

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

去nodjs的官网选择对应版本安装完成后，通过node-v和npm-v来检查是否安装成功，如果成功会展示安装的版本号

这样我们的JavaScript的环境就已经准备好了

1.2 node初体验

我们可以创建一个.js的JavaScript文件

然后在当前js文件目录下打开终端执行命令： node helloworld.js

是不是跟java类似，例如java 和 javac命令让JavaScript脱离浏览器执行成功！

2.npm（就一个管理包工具）

---

NPM全称Node Package Manager，是Node.js包管理工具，是全球最大的模块生态系统，里面所有的模块都是开源免费的；也是Node.js的包管理工具，相当于前端的Maven 。

1.构建Nodejs工程

- npm init 得到一个package.json文件，类似于我们maven中的pom.xml（核心文件）

- 使用npm init -y 免去繁琐的配置快速的构建出一个node工程

{

“name”: “npm”, //工程名

“version”: “1.0.1”, //版本号

“description”: “这是第一个由npm管理的项目”, //描述

“main”: “index.js”,

“scripts”: {

“test”: “echo “Error: no test specified” && exit 1” //执行脚本

},

“author”: “宋淇祥”, //开发者

“license”: “ISC” //授权协议

}

2.npm常用命令

2-1快速安装依赖第三方模块？

-npm install xxxx或者 npm i xxxx模块名，比如npm install mysql redis等等

2-2安装的模块放在什么地方？

-安装的模块放在项目当中的node_modules文件夹中

2-3模块安装好如何使用？

-const redis =require(“redis”)

2-4模块下载很慢怎么解决？

-npm install -g cnpm --registry=https://registry.npm.taobao.org

2-5如何运行

-node xxxx.js 运行时候是可以不加js的 直接node xxxx即可,终止命令：CTRL+C

2-6下载的模块与package.json有什么联系呢？

“dependencies”: {

“jquery”: “^3.6.0”,

“mysql”: “^2.18.1”,

“redis”: “^3.1.2”,

“vue”: “^2.6.12”

}

通过npm install 下载的依赖会被记录在package.json文件当中，

类似于maven中的pom.xml文件 记录作用：复用

1.package.json文件记录的依赖模块

2.通过npm install可以直接把package.json中的依赖全部下载下来

这样就可以避免重复下载依赖，很方便的去集成第三方模块

3.为什么不直接拷贝node_moudles呢，当然可以，但是模块下载的依赖文件过多混乱文件很多，一般几万到几十万个文件

2-7如果一次下载多个第三方依赖

npm install vue redis mysql

cnpm install vue redis mysql

不添加版本号的情况下默认是下载最新的

2-8如何下载指定版本号

npm install redis@版本号 去官网查看版本号：https://www.npmjs.com/

3.如何卸载我们安装的第三方模块（从项目中剔除）

npm uninstall jquery vue

3.ES6（JavaScript的新语法规则）

---

ES6概述

3.1、let和const的引入

1.let解决了var定义变量的穿透问题

2. const解决了var定义常量可以被修改的问题

3. 实际开发中，如果是小程序/uniapp/一些脚手架，可以大胆的使用let和const

4.如果是web开发还是尽量使用var，因为低版本浏览器还暂时不支持let和const

3.2、默认参数

3.3、模板字符串

3.4、箭头函数【重点】

3.5、对象简写

举个例子：

3.6、对象解构

//对象是以key-value的形式存在的，获取对象属和方法的方式有两种

//方式一：通过.

//方式二: 通过[]

var name = “宋淇祥”

var purpose = “好好学Vue和spring全家桶”

let person2 ={

name, //name = name

purpose, //purpose = purpose

go(){

console.log(“我坐在床上学习ES6新语法”);

}

};

//方式一,通过.的方式

console.log(person2.name);

console.log(person2.purpose);

person2.go();

//方式二,通过[]的方式

console.log(person2[“name”]);

console.log(person2[“purpose”]);

person2"go";

//ES6对象解构，其实就是快速获取属性和和方法的另一种形式

var {name,purpose,go} =person2;

//等价于(还原代码)

//var name =person2.name;

//var purpose=person2.purpose;

console.log(name,purpose)

go();

//为什么需要提供两种方式呢？一个是.一个是[]

3.7、传播操作符…

最后

本人分享一下这次字节跳动、美团、头条等大厂的面试真题涉及到的知识点，以及我个人的学习方法、学习路线等，当然也整理了一些学习文档资料出来是给大家的。知识点涉及比较全面，包括但不限于前端基础，HTML，CSS，JavaScript，Vue，ES6，HTTP，浏览器，算法等等

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

前端视频资料：

题涉及到的知识点，以及我个人的学习方法、学习路线等，当然也整理了一些学习文档资料出来是给大家的。知识点涉及比较全面，包括但不限于前端基础，HTML，CSS，JavaScript，Vue，ES6，HTTP，浏览器，算法等等

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

[外链图片转存中…(img-vh2L1ULb-1715356985321)]

前端视频资料：
[外链图片转存中…(img-deHredyB-1715356985322)]