大前端快速入门

3. 创建02- let-const和var的区别.html

• 解决变量穿透问题

模板字符串

以前：我们都是使用 " 或者 " " 来吧字符串套起来

现在：``【反引号】， 用${ } 取值

函数默认参数与箭头函数

• 默认参数

• 箭头函数

对象初始化简写

对象简写的案例

账号：

密码：

对象解构

传播操作符

• 把一个对象传播到另一个对象中 通过 …

数组map和reduce方法使用（了解）

map

reduce

Es6小结

• 将我们的Es6语法放到Nodejs中也是可以运行的

• es6 可以在nodejs，uniapp 微信小程序中得到广泛的支持，可以大胆的使用这些语法

• 创建js文件—node xx.js—运行

//传通定义变量和常量的方式 统一使用var

var name = “学相伴”;

var link = “https://www.kuangstudy.com”;

var PI = Math.PI;

console.log(name);

console.log(link);

console.log(PI);

//Es6定义方式

let name2 = “学相伴2”;

let link2 = “https://www.kuangstudy.com”;

//定义常量

const PI2 = Math.PI;

console.log(name2);

console.log(link2);

console.log(PI2);

4、Npm包管理器

• 安装我们的nodejs的时候npm就内置进去了 npm -v 查看

• 类似于我们的Maven

• 仓库地址 https://www.npmjs.com/

1. npm :node package manager, node包管理器 类似于java的maven

作用：

1.快速构建nodejs工程

• 在我们的项目路径下执行

• npm init

• npm init -y 自动帮我们跳过操作

• 得到一个package.json文件，内容如下：

{

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

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

“description”: “我是一个node工程”, //描述

“main”: “index.js”, //入口js文件

“scripts”: { //运行脚本

“test”: “echo “Error: no test specified” && exit 1”

},

“keywords”: [

“node”

],

“author”: “liu”, //开发者

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

}

类似于 pom.xml 文件作用管理依赖

2.快速的安装依赖第三方模块，比如npm install mysql redis 等等

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

项目路径下执行

npm install xxxx 或者 npm i xxx模块名

npm install mysql

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

安装的模块会放到项目的node_modules文件夹中

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

const redis = require(“redis”);

const mysql = require(“mysql”);

根据官网学习https://www.npmjs.com/

2-4：模块和package.json有什么关系呢？

“dependencies”: {

“mysql”: “^2.18.1”,

“redis”: “^3.1.2”

}

1.通过npm i xxxx会记录在package.json这个文件中。

2.就类似于maven中pom.xml一个含义，记录作用:复用（新建工程的时候不用重复安装，直接把package.json复制过去，然后在项目路径下执行 npm install，可以把package.json所依赖的模块全部自动下载下来）。

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

2-5：如果安装模块很慢怎么办？

任意命令行执行即可（安装cnpm）

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

cnpm install xxx

2-6：如何运行？

node xxxx.js 运行

ctrl+c 终止

2-7：如何下载多个？

npm istall xxx xxx xxx

cnpm istall xxx xxx xxx

2-8：下载指定的版本号

npm istall xxx@版本号

具体的版本号：查看npm官网：

3.如何卸载模块呢

npm uninstall xxx xxx

5、Babel的安装作用

• Es6的高级语法在浏览器中甚至nodejs中是无法执行的

• Babel将es6代码转变为es5，不用担心环境问题

安装Babel

1. 创建文件，在文件项目路径下安装npm install -g babel-cli

2. babel --version 查看版本

使用Babel

1. 创建文件夹

2. 初始化项目npm init -y

3. 创建src文件—创建/src/exmaple.js

//es6

let name = “xiaoliu”;

const title = “sichuan”;

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

let newarr = arr.map(ele=>ele*2);

console.log(newarr);

4. 创建babel配置文件 .babelrc

{

“presets”: [“es2015”],

“plugins”: []

}

5. 项目路径下执行npm install --save-dev babel-preset-es2015，安装我们的转码器

6. 继续执行babel src -d dist 将我们src下的js文件进行转码—帮我们生成/dist/exmaple.js文件

7. 对比我们的exmaple.js

“use strict”;

//es2015 自动帮我们生成的

var name = “xiaoliu”;

var title = “sichuan”;

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

var newarr = arr.map(function (ele) {

return ele * 2;

});

console.log(newarr);

//es6 我们自己写的

let name = “xiaoliu”;

const title = “sichuan”;

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

let newarr = arr.map(ele=>ele*2);

console.log(newarr);

自定义脚本

1. 在package.json文件中

“scripts”: {

“test”: “echo “Error: no test specified” && exit 1”,

“xxx” : “babel src -d dist” //手动添加xxx

},

2. 然后删除dist–执行npm run xxx—同理会生成我们的dist，意义都一样

6、模块化管理

下面是我在学习HTML和CSS的时候整理的一些笔记，有兴趣的可以看下：

进阶阶段

进阶阶段，开始攻 JS，对于刚接触 JS 的初学者，确实比学习 HTML 和 CSS 有难度，但是只要肯下功夫，这部分对于你来说，也不是什么大问题。

JS 内容涉及到的知识点较多，看到网上有很多人建议你从头到尾抱着那本《JavaScript高级程序设计》学，我是不建议的，毕竟刚接触 JS 谁能看得下去，当时我也不能，也没那样做。

我这部分的学习技巧是，增加次数，减少单次看的内容。就是说，第一遍学习 JS 走马观花的看，看个大概，去找视频以及网站学习，不建议直接看书。因为看书看不下去的时候很打击你学下去的信心。

然后通过一些网站的小例子，开始动手敲代码，一定要去实践、实践、实践，这一遍是为了更好的去熟悉 JS 的语法。别只顾着来回的看知识点，眼高手低可不是个好习惯，我在这吃过亏，你懂的。

1、JavaScript 和 ES6

在这个过程你会发现，有很多 JS 知识点你并不能更好的理解为什么这么设计，以及这样设计的好处是什么，这就逼着让你去学习这单个知识点的来龙去脉，去哪学？第一，书籍，我知道你不喜欢看，我最近通过刷大厂面试题整理了一份前端核心知识笔记，比较书籍更精简，一句废话都没有，这份笔记也让我通过跳槽从8k涨成20k。

2、前端框架

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

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

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