前后端技术栈类比

	前端	后端
编程语言	JavaScript	Java
版本	ES6、7、8	JDK8、9、10、11
框架	JQuery、Vue、React	Spring、SpringMVC
工具	WebStorm、VsCode	IDEA、Eclipse
项目构建	webpack、gulp	maven、gradle
依赖管理	npm	maven

ES6

参考文档：http://caibaojian.com/es6/

一、简介

ECMAScript 6.0（以下简称ES6）是JavaScript语言的下一代标准，已经在2015年6月正式发布了。它的目标，是使得JavaScript语言可以用来编写复杂的大型应用程序，成为企业级开发语言。

ECMAScript和JavaScript的关系

一个常见的问题是，ECMAScript和JavaScript到底是什么关系？

要讲清楚这个问题，需要回顾历史。1996年11月，JavaScript的创造者Netscape公司，决定将JavaScript提交给国际标准化组织ECMA，希望这种语言能够成为国际标准。次年，ECMA发布262号标准文件（ECMA-262）的第一版，规定了浏览器脚本语言的标准，并将这种语言称为ECMAScript，这个版本就是1.0版。

该标准从一开始就是针对JavaScript语言制定的，但是之所以不叫JavaScript，有两个原因。一是商标，Java是Sun公司的商标，根据授权协议，只有Netscape公司可以合法地使用JavaScript这个名字，且JavaScript本身也已经被Netscape公司注册为商标。二是想体现这门语言的制定者是ECMA，不是Netscape，这样有利于保证这门语言的开放性和中立性。

因此，ECMAScript和JavaScript的关系是，前者是后者的规格，后者是前者的一种实现（另外的ECMAScript方言还有Jscript和ActionScript）。日常场合，这两个词是可以互换的。

二、let & const

1. 作用域

示例：

<script>

    //var 申明的变量往往会越域
    //let 申明的变量有严格的作用域
    {
        var a = 1;
        let b = 1;
    }
    console.log(a);     // 1
    console.log(b);     // b is not defined

</script>

运行结果：

2. 重复声明

<script>

    //var 可以多次声明
    //let 只能申明一次
    var m = 1;
    var m = 2;
    let n = 3;
    let n = 4;

    confirm.log(m);     // 2
    console.log(n);     // Identifier 'n' has already been declared

</script>

3. 不存在变量提升

<script>

console.log(a); // 输出undefined
console.log(b); // 报错ReferenceError

var a = 2;
let b = 2;

</script>

4. const

const 声明一个只读的常量。一旦声明，常量的值就不能改变。

const PI = 3.1415;
PI // 3.1415

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

三、解构 & 字符串

1. 解构

ES6允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构（Destructuring）。

数组解构：

let a = 1;
let b = 2;
let c = 3;
//等价于
let [a, b, c] = [1, 2, 3];

对象解构：

let person = {
	name: 'wxs',
    age: 20
};

// {对象属性:新建变量名}，相当于将 person 对象的 name 属性赋值给变量 who
let {name:who, age} = person;
console.log(who);	//'wxs'
console.log(age);	// 20

2. 字符串

字符串拓展：

var s = 'Hello world!';

s.startsWith('Hello') // true
s.endsWith('!') // true
s.includes('o') // true

模板字符串：

//传统的输出模板
$('#result').append(
  'There are <b>' + basket.count + '</b> ' +
  'items in your basket, ' +
  '<em>' + basket.onSale +
  '</em> are on sale!'
);

//模板字符串
//字符串用 ``（反引号）包裹
$('#result').append(`
  There are <b>${basket.count}</b> items
   in your basket, <em>${basket.onSale}</em>
  are on sale!
`);

//字符串中嵌入变量、表达式（甚至是函数也可以嵌入）
let name = "Bob", 
    time = "today", 
`Hello ${name}, how are you ${time}?`

四、函数优化

1. 函数参数默认值

function add(a, b = 1) {
	return a + b;
}
console.log(add(10));       // 11

2. 不定参数

function fun(...values) {
	console.log(values.length)
}
console.log(fun(1,2,3,4,5)) // 5

3. 箭头函数

// let print = function(obj) {
//     console.log(obj);
// }
let print = obj => console.log(obj);
print("hello");             // hello

// let sum = function(a, b) {
//     return a + b;
// }
let sum = (a, b) => a + b;
sum(1,2);                   // 3

// 箭头函数 + 解构
let person = {
	name: 'wxs',
    age: 20
};
let hello = ({name}) => console.log("hello " + name);
hello(person);				// hello wxs

五、对象优化

1. Object 的方法

const person = {
    name: "wxs",
    age: 20
}

Object.keys(person); 	// ["name","age"]
Object.values(person); 	// ["wxs",20]
Object.entries(person); // [Array(2),Array(2)]


let target = {
    a: 1
};
let source1 = {
    b: 2
};
let source2 = {
    c: 3
};
Object.assign(target, source1, source2);	//将 target 后面的对象合并到 target 中
console.log(target); // {a: 1, b: 2, c: 3}

2. 声明对象简写

let name = "wxs";
let age = 20;

//let person = {name: name,age: age};
let person = {name, age};

3. 对象函数的属性简写

let person = {
	name: "wxs",
	
	eat: function (food) {
		console.log(this.name + "吃东西~");
	},
	
    //箭头函数中不能使用 this！
	eat2: food => console.log(person.name + "吃东西~"),
	
	eat3(food) {
		console.log(this.name + "吃东西~");
	}
}

4. 对象的拓展运算

//对象拓展运算
//1. 深拷贝
let person = {
	name: "wxs",
	age: 20
};
let wxs = {
	...person
};
console.log(wxs); // {name: "wxs", age: 20}

//2. 对象合并
let name = {
	name: "wxs"
};
let age = {
	age: 20
}
let person = {
	...name,
	...age
}

六、map & reduce

七、Promise

八、模块化

1. 简介

模块化就是把代码进行拆分，方便复用，类似于 Java 中的导包。

2. 使用

export

import

Vue

参考文档：http://caibaojian.com/vue/guide/

一、概念

Vue.js（读音 /vjuː/, 类似于 view）是一套构建用户界面的 渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。另一方面，Vue 完全有能力驱动采用单文件组件和 Vue 生态系统支持的库开发的复杂单页应用。

Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

二、快速开始

在 VsCode 中打开新的文件夹
控制台执行以下命令

cnpm init -y

cnpm install vue

至此，vue项目构建完成
新建测试文件：index.html
引入 Vue

编写测试代码

完整代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <div id="app">
        <h1>{{name}},帅的一</h1>
    </div>

    <script src="./node_modules/vue/dist/vue.js"></script>
    <script>
        let vm = new Vue({
            el: "#app",
            data: {
                name: "wxs"
            }
        });
    </script>
</body>
</html>

显示效果：

![image-20200602092626792](【尚硅谷《谷粒商城》2020学习笔记】三、前端基础/image-20200602092626792.png

三、常用指令

官方文档都有，就不一一赘述

（其实就是懒hhh）