15K的前端应届毕业生，就因为掌握了这些知识点！（前端企业级开发必备）

3.3、const声明常量

---

创建 02-const.js

// 1、声明之后不允许改变

const PI = ‘3.1415926’

PI = 3 // TypeError: Assignment to constant variable.

// 2、一但声明必须初始化，否则会报错

const MY_AGE // SyntaxError: Missing initializer in const declaration

3.4、解构赋值 创建

---

03-解构赋值.js

解构赋值是对赋值运算符的扩展。 他是一种针对数组或者对象进行模式匹配，然后对其中的变量进行赋值。 在代码书写上简洁且易读，语义更加清晰明了；也方便了复杂对象中数据字段获取。

//1、数组解构

// 传统

let a = 1, b = 2, c = 3

console.log(a, b, c)

// ES6

let [x, y, z] = [1, 2, 3]

console.log(x, y, z)

//1、数组解构

// 传统

let a = 1, b = 2, c = 3

console.log(a, b, c)

// ES6

let [x, y, z] = [1, 2, 3]

console.log(x, y, z)

3.5、模板字符串 创建

---

04-模板字符串.js

模板字符串相当于加强版的字符串，用反引号 `,除了作为普通字符串，还可以用来定义多行字符 串，还可以在字符串中加入变量和表达式。

// 字符串插入变量和表达式。变量名写在 $中，${} 中可以放入 JavaScript 表达式。

let name = ‘sunjiaoshou’

let age = 27

let info = My Name is ${name},I am ${age+1} years old next year.

console.log(info)

// My Name is Kuangshen,I am 28 years old next year.

3.6、声明对象简写 创建

---

05-声明对象简写.js

const age = 12

const name = ‘sunjiaoshou’

// 传统

const person1 = {age: age, name: name}

console.log(person1)

// ES6

const person2 = {age, name}

console.log(person2) //{age: 12, name: ‘sunjiaoshou’}

3.7、定义方法简写

---

创建 06-定义方法简写.js

// 传统

const person1 = {

sayHi:function(){

console.log(‘Hi’)

}

}

person1.sayHi();//‘Hi’

// ES6

const person2 = {

sayHi(){

console.log(‘Hi’)

}

}

person2.sayHi() //‘Hi’

3.8、对象拓展运算符

---

创建 07-对象拓展运算符.js 拓展运算符（…）用于取出参数对象所有可遍历属性，然后拷贝到当前对象。

let person = {name: ‘sunjiaoshou’, age: 15}

let someoneOld = person //引用赋值

let someone = { …person } //对拷拷贝

someoneOld.name = ‘sunjiaoshou’

someone.name = ‘sunjiaoshou’

console.log(person) //{name: ‘sunjiaoshou’, age: 15}

console.log(someoneOld) //{name: ‘sunjiaoshou’, age: 15}

console.log(someone) //{name: ‘sunjiaoshou’, age: 15}

3.9、函数的默认参数

---

创建 08-函数的默认参数.js

function showInfo(name, age = 17) {

console.log(name + “,” + age)

}

// 只有在未传递参数，或者参数为 undefined 时，才会使用默认参数

// null 值被认为是有效的值传递。

showInfo(“sunjiaoshou”, 18) // sunjiaoshou,18

showInfo(“sunjiaoshou”) // sunjiaoshou,17

showInfo(“sunjiaoshou”, undefined) // sunjiaoshou,17

showInfo(“sunjiaoshou”, null) // sunjiaoshou, null

3.10、箭头函数

---

创建 09-箭头函数.js

箭头函数提供了一种更加简洁的函数书写方式。

基本语法是：参数 => 函数体

箭头函数多用于匿名函数的定义

let arr = [“10”, “5”, “40”, “25”, “1000”]

let arr1 = arr.sort()

console.log(arr1)

//上面的代码没有按照数值的大小对数字进行排序，

//要实现这一点，就必须使用一个排序函数

arr2 = arr.sort(function(a,b){

return a - b

})

// arr2 = arr.sort((a,b) => {return a - b})

// arr2 = arr.sort((a,b) => a - b)

console.log(arr2)

let arr = [“10”, “5”, “40”, “25”, “1000”]

let arr1 = arr.sort()

console.log(arr1)

//上面的代码没有按照数值的大小对数字进行排序，

//要实现这一点，就必须使用一个排序函数

arr2 = arr.sort(function(a,b){

return a - b

})

// arr2 = arr.sort((a,b) => {return a - b})

// arr2 = arr.sort((a,b) => a - b)

console.log(arr2)

4、NPM包管理器

=========

4.1、简介

---

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

#在命令提示符输入 npm -v 可查看当前npm版本

npm -v

4.2、使用npm管理项目

---

1、创建文件夹npm

2、项目初始化

#建立一个空文件夹，在命令提示符进入该文件夹 执行命令初始化

npm init

#按照提示输入相关信息，如果是用默认值则直接回车即可。

#name: 项目名称

#version: 项目版本号

#description: 项目描述

#keywords: {Array}关键词，便于用户搜索到我们的项目

#最后会生成package.json文件，这个是包的配置文件，相当于maven的pom.xml

#我们之后也可以根据需要进行修改。

#如果想直接生成 package.json 文件，那么可以使用命令 npm init -y

4.3、修改npm镜像

---

1、修改npm镜像

NPM官方的管理的包都是从 http://npmjs.com下载的，但是这个网站在国内速度很慢。

这里推荐使用淘宝 NPM 镜像 http://npm.taobao.org/

淘宝 NPM 镜像是一个完整 npmjs.com 镜像，同步频率目前为 10分钟一次，以保证尽量与官方服 务同步。

2、设置镜像地址

#经过下面的配置，以后所有的 npm install 都会经过淘宝的镜像地址下载

npm config set registry https://registry.npm.taobao.org

#查看npm配置信息

npm config list

4.4、npm install

---

#使用 npm install 安装依赖包的最新版，

#模块安装的位置：项目目录\node_modules

#安装会自动在项目目录下添加 package-lock.json文件，这个文件帮助锁定安装包的版本

#同时package.json 文件中，依赖包会被添加到dependencies节点下，类似maven中的

npm install jquery

#如果安装时想指定特定的版本

npm install jquery@2.1.x

#devDependencies节点：开发时的依赖包，项目打包到生产环境的时候不包含的依赖

#使用 -D参数将依赖添加到devDependencies节点

npm install --save-dev eslint

#或

npm install -D eslint

#全局安装

#Node.js全局安装的npm包和工具的位置：用户目录\AppData\Roaming\npm\node_modules

#一些命令行工具常使用全局安装的方式

npm install -g webpack

#npm管理的项目在备份和传输的时候一般不携带node_modules文件夹

npm install #根据package.json中的配置下载依赖，初始化项目

4.5、其他命令

---

#更新包（更新到最新版本）

npm update 包名

#全局更新

npm update -g 包名

#卸载包

npm uninstall 包名

#全局卸载

npm uninstall -g 包名

5、Babel

=======

5.1、简介

---

ES6的某些高级语法在浏览器环境甚至是Node.js环境中无法执行。 Babel是一个广泛使用的转码器，可以将ES6代码转为ES5代码，从而在现有环境执行执行。 这意味着，你可以现在就用 ES6 编写程序，而不用担心现有环境是否支持。

5.2、安装

---

安装命令行转码工具

Babel提供babel-cli工具，用于命令行转码。它的安装命令如下：

npm install -g babel-cli

#查看是否安装成功

babel --version

5.3、Babel的使用

---

1、创建babel文件夹

2、初始化项目

npm init -y

3、创建文件 src/example.js ，下面是一段ES6代码：

// 转码前

// 定义数据

let input = [1, 2, 3]

// 将数组的每个元素 +1

input = input.map(item => item + 1)

console.log(input)

4、配置 .babelrc

Babel的配置文件是.babelrc，存放在项目的根目录下，该文件用来设置转码规则和插件，基本格式 如下。

{

“presets”: [],

“plugins”: []

}

presets字段设定转码规则，将es2015规则加入 .babelrc：

{

“presets”: [“es2015”],

“plugins”: []

}

5、安装转码器，在项目中安装

npm install --save-dev babel-preset-es2016

6、转码

npm install --save-dev csv-loader xml-loader

转码结果写入一个文件

mkdir dist1

–out-file 或 -o 参数指定输出文件

babel src/example.js --out-file dist1/compiled.js

或者

babel src/example.js -o dist1/compiled.js

整个目录转码

mkdir dist2

–out-dir 或 -d 参数指定输出目录

babel src --out-dir dist2

或者

babel src -d dist2

5.4、自定义脚本

---

1、改写package.json

{

// …

“scripts”: {

// …

“build”: “babel src\example.js -o dist\compiled.js”

},

}

2、转码的时候，执行下面的命令

mkdir dist

npm run build

6、模块化

======

6.1、简介

---

模块化产生的背景 随着网站逐渐变成"互联网应用程序"，嵌入网页的Javascript代码越来越庞大，越来越复杂。

Javascript模块化编程，已经成为一个迫切的需求。理想情况下，开发者只需要实现核心的业务逻辑，其 他都可以加载别人已经写好的模块。 但是，Javascript不是一种模块化编程语言，它不支持"类"（class），包（package）等概念，也不支 持"模块"（module）。 模块化规范 CommonJS模块化规范 ES6模块化规范

6.2、CommonJS规范

---

每个文件就是一个模块，有自己的作用域。在一个文件里面定义的变量、函数、类，都是私有的， 对其他文件不可见。

1、创建“module”文件夹

2、创建 mokuai-common-js/四则运算.js

// 定义成员：

const sum = function(a,b){

return a + b

}

const subtract = function(a,b){

return a - b

}

const multiply = function(a,b){

return a * b

}

const divide = function(a,b){

return a / b

}

3、导出模块中的成员

// 导出成员：

module.exports = {

sum: sum,

subtract: subtract,

multiply: multiply,

divide: divide

}

4、创建 mokuai-common-js/引入模块.js

//引入模块，注意：当前路径必须写 ./

const m = require(‘./四则运算.js’)

console.log(m)

const r1 = m.sum(1,2)

const r2 = m.subtract(1,2)

console.log(r1,r2)

5、运行程序

node 引入模块.js

CommonJS使用 exports 和require 来导出、导入模块。

6.3、ES6模块化规范

---

ES6使用 export 和 import 来导出、导入模块。

1、创建 mokuai-es6 文件夹

2、创建 src/userApi.js 文件，导出模块

export function getList() {

console.log(‘获取数据列表’)

}

export function save() {

console.log(‘保存数据’)

}

3、创建 src/userComponent.js文件，导入模块

//只取需要的方法即可，多个方法用逗号分隔

import { getList, save } from ‘./userApi.js’

getList()

save()

注意：这时的程序无法运行的，因为ES6的模块化无法在Node.js中执行，需要用Babel编辑成ES5 后再执行。

4.初始化项目

npm init -y

5、配置 .babelrc

{

“presets”: [“es2016”],

“plugins”: []

}

6、安装转码器，在项目中安装

npm install --save-dev babel-preset-es2016

7、定义运行脚本，package.json中增加"build"

{

// …

“scripts”: {

“build”: “babel src -d dist”

}

}

8、执行命令转码

npm run build

9、运行程序

node dist/userComponent.js

6.4、ES6模块化写法2

---

1、创建 src/userApi

2.js ，导出模块

export default {

getList() {

console.log(‘获取数据列表2’)

},

save() {

console.log(‘保存数据2’)

}

}

2、创建 src/userComponent2.js，导入模块

import user from “./userApi2.js”

user.getList()

user.save()

3、执行命令转码

npm run build

4、运行程序

node dist/userComponent2.js

7、Webpack

=========

7.1、什么是Webpack

---

Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按 照指定的规则生成对应的静态资源。 从图中我们可以看出，Webpack 可以将多种静态资源 js、css、less 转换成一个静态文件，减少了页面 的请求。

7.2、Webpack安装

---

1、全局安装

npm install -g webpack webpack-cli

2、安装后查看版本号

webpack -v

7.3、初始化项目

---

1、创建webpack文件夹

npm init -y

2、创建src文件夹

3、src下创建common.js

exports.info = function (str) {

document.write(str);

}

4、src下创建utils.js

exports.add = function (a, b) {

return a + b;

}

5、src下创建main.js

const common = require(‘./common’);

const utils = require(‘./utils’);

common.info(‘Hello world!’ + utils.add(100, 200));

7.4、JS打包

---

1、webpack目录下创建配置文件webpack.config.js

const path = require(“path”); //Node.js内置模块

module.exports = {

entry: ‘./src/main.js’, //配置入口文件

output: {

path: path.resolve(__dirname, ‘./dist’), //输出路径，__dirname：当前文件

所在路径

filename: ‘bundle.js’ //输出文件

}

}

以上配置的意思是：读取当前项目目录下src文件夹中的main.js（入口文件）内容，分析资源依赖， 把相关的js文件打包，打包后的文件放入当前目录的dist文件夹下，打包后的js文件名为bundle.js

2、命令行执行编译命令

webpack --mode=development #执行后查看bundle.js 里面包含了上面两个js文件的内容并进行了代码压缩

也可以配置项目的npm运行命令，修改package.json文件

“scripts”: { //…, “dev”: “webpack --mode=development” }

运行npm命令执行打包

npm run dev

3、webpack目录下创建index.html ， 引用bundle.js

4、浏览器中查看index.html

7.5、Css打包

---

1、安装style-loader和 css-loader Webpack 本身只能处理 JavaScript 模块，如果要处理其他类型的文件，就需要使用 loader 进行转 换。 Loader 可以理解为是模块和资源的转换器。 首先我们需要安装相关Loader插件

css-loader 是将 css 装载到 javascript

style-loader 是让 javascript 认识css

npm install --save-dev style-loader css-loader

const path = require(“path”); //Node.js内置模块

module.exports = {

//…,

output:{

//其他配置

},

module: {

rules: [

{

test: /.css$/, //打包规则应用到以css结尾的文件上

use: [‘style-loader’, ‘css-loader’]

}

]

}}

3、在src文件夹创建style.css

最后

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！
html ， 引用bundle.js

4、浏览器中查看index.html

7.5、Css打包

---

1、安装style-loader和 css-loader Webpack 本身只能处理 JavaScript 模块，如果要处理其他类型的文件，就需要使用 loader 进行转 换。 Loader 可以理解为是模块和资源的转换器。 首先我们需要安装相关Loader插件

css-loader 是将 css 装载到 javascript

style-loader 是让 javascript 认识css

npm install --save-dev style-loader css-loader

const path = require(“path”); //Node.js内置模块

module.exports = {

//…,

output:{

//其他配置

},

module: {

rules: [

{

test: /.css$/, //打包规则应用到以css结尾的文件上

use: [‘style-loader’, ‘css-loader’]

}

]

}}

3、在src文件夹创建style.css

最后

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

[外链图片转存中…(img-RzFQrqoe-1714808852180)]

[外链图片转存中…(img-k1mLbtxd-1714808852181)]

[外链图片转存中…(img-fMidNZyg-1714808852181)]

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！