尚硅谷2020微服务分布式电商项目《谷粒商城》(Alibaba+Vue)开发教程学习笔记（一）
https://blog.csdn.net/ok_wolf/article/details/105400748
一、前端技术栈类比
JavaScript es6,7,8 —— Java jdk9,10,11...
框架 JQuery、Vue、React —— 框架 Spring、SpringMVC
工具 webstorm、vscode —— 工具 idea、eclipse
项目构建 webpack、gulp —— 项目构建 maven、gradle
依赖管理 npm —— 依赖管理 maven
二、ES6
1、ES6简介
ECMAScript 6（简称ES6）是于2015年6月正式发布的JavaScript语言的标准，正式名为ECMAScript 2015（ES2015）.是JavaScript语言的下一代标准，每年一个版本，企业级开发语言。
ECMAScript是浏览器脚本语言的规范，而各种我们熟知的js语言，如JavaScript则是规范的具体实现。
2、ES6新特性学习
（1）var声明的变量往往会越狱，let声明的变量有严格局部作用域
<script>
// var 声明的变量往往会越狱
// let 声明的变量有严格局部作用域
{
var a = 1;
let b = 2;
}
console.log(a); //1
console.log(b); //ReferenceError: b is not defined
</script>（2）var可以声明多次，let只能声明一次
//var可以声明多次，let只能声明一次
var m = 1
var m = 2
let n = 3
let n = 4
console.log(m) // 2
console.log(n) //Identifier 'n' has already been declared（3）var会变量提升，let不存在变量提升
console.log(x); //undefined
var x = 10;
console.log(y) //ReferenceError: Cannot access 'y' before initialization
let y = 20;（4）const声明常量（只读常量）
//const声明常量（只读常量）
const a = 1;
a = 3; //Uncaught TypeError: Assignment to constant variable.（5）数据结构
//数据结构
let arr = [1,2,3];
// let a = arr[0];
// let b = arr[1];
// let c = arr[2];
let [a,b,c] = arr;
console.log(a, b, c);（6）对象结构
//对象结构
const person = {
name: "jack",
age: 21,
language: ['java', 'js', 'css']
}
// const name = person.name;
// const age = person.age;
// const language = person.language;
const{name:abc, age, language} = person;
console.log(abc, age, language)（7）字符串扩展
//字符串扩展
let str = "hello.vue";
console.log(str.startsWith("hello")); //true
console.log(str.endsWith(".vue")); //true
console.log(str.includes("e")); //true
console.log(str.includes("hello")); //true（8）字符串模板
let ss = `<div>
<span>hello world<span>
/div>`
console.log(ss);
//在字符串插入变量和表达式，变量名写在${}中，${}中科院放入JavaScript表达式
function func() {
return "这一个函数"
}
let name = "jack";
let age = 32;
let info = `我是${name}, 今年${age+10}了， 我想说: ${func()}`;
console.log(info);（9）函数参数默认值
//在ES6之前，无法给一个函数参数设置默认值，只能采用变通的方法
function add(a, b) {
//判断是否为空，为空就给默认值
b = b || 1;
return a + b;
}
//传递一个参数
console.log(add(10));
//现在可以这么写，直接给参数写上默认值，没给就使用默认值
function add2(a, b = 1) {
return a + b;
}
console.log(add2(10));
//不定参数
function fun(...values) {
console.log(values.length);
}
fun(1,2) //2
fun(1, 2, 3, 4) //4（10）箭头函数
//箭头函数
//以前声明一个方法
var print = function (obj) {
console.log(obj);
}
var print2 = obj => console.log(obj);
print2("hello");
var sum = function (a, b) {
c = a + b;
return a + c;
}
var sum2 = (a, b) => a + b;
console.log(sum2(11, 22));
var sum3 = (a, b) => {
c = a + b;
return a + c;
}
console.log(sum3(10, 20));
const person = {
name: "jack",
age: 21,
language: ['java', 'js', 'css']
}
function hello(person) {
console.log("hello", + person.name);
}
var hello2 = (param) => console.log("hello, " + param.name);
hello2(person); //hello,jack
var hello3 = ({name}) => console.log("hello, " + name);
hello3(person); //hello,jack（11）新增的API
//1.新增的API
const person = {
name: "jack",
age: 21,
language: ['java', 'js', 'css']
}
console.log(Object.keys(person)); // ["name", "age", "language"]
console.log(Object.values(person)); // ["jack", 21, Array(3)]
console.log(Object.entries(person)); //[Array(2), Array(2), Array(2)]
const target = {a: 1};
const source1 = {b: 2};
const source2 = {c: 3};
Object.assign(target, source1, source2);
console.log(target); //{a: 1, b: 2, c: 3}（12）声明对象简写
//2.声明对象简写
const age = 23;
const name = "张三";
//传统
const person1 = {age: age, name: name};
console.log(person1); //{age: 23, name: "张三"}
//ES6：属性名和属性值变量名一样，可以省略
const person2 = {age, name};
console.log(person2); //{age: 23, name: "张三"}(13)对象的函数属性简写
//3.对象的函数属性简写
let person3 = {
name: "jack",
//以前
eat: function (food) {
console.log(this.name + "在吃" + food);
},
//箭头函数版，这里拿不到this
eat1: food => console.log(this.name + "在吃" + food),
//箭头函数版，正确版
eat2: food => console.log(person3.name + "在吃" + food),
//简写版
eat3(food) {
console.log(this.name + "在吃" + food);
}
}
person3.eat("apple"); //jack在吃appple
person3.eat1("apple");//在吃appple
person3.eat2("apple");//jack在吃appple
person3.eat3("apple");//jack在吃appple（14）对象扩展运算符
//4.对象扩展运算符
//拷贝对象（深拷贝）
let person4 = {name : "Amy", age: 15}
let somone = {...person4}
console.log(somone) //{name: "Amy", age: 15}
//合并对象
let age2 = {age2: 15}
let name2 = {name2: "Amy"}
let person5 = {name: "zhangsan"}
person5 = {...age2, ...name2}
console.log(person5) //{age2: 15, name2: "Amy"} //会覆盖之前的值（15）map和reduce方法
//数组中新增了map和reduce方法
//map(): 接收一个函数，将原数组中的所有元素用这个函数处理后放入新数组返回
let arr = ["1", "20", "-5", "3"];
// arr = arr.map((item) => {
// return item * 2;
// })
arr = arr.map(item => item*2)
console.log(arr); //[2, 40, -10, 6]
//reduce()为数组中的每一个元素一次执行回调函数，不包括数组中被删除或从未被赋值的元素
//[2, 40, -10, 6]
//arr.reduce(callback, [initialValue])
/*
1.initialValue(上一次调用回调返回的值，或者是提供的初始值（initialValue))
2.currentValue(数组中当前被处理的元素)
3.index(当前元素在数组的索引)
4.array(调用reduce的数组)
*/
let result = arr.reduce((a,b) => {
console.log("上一次处理后："+a);
console.log("当前正在处理："+b);
return a + b;
},100)
console.log(result);
/*上一次处理后：100
map和reduce.html:33 当前正在处理：2
map和reduce.html:32 上一次处理后：102
map和reduce.html:33 当前正在处理：40
map和reduce.html:32 上一次处理后：142
map和reduce.html:33 当前正在处理：-10
map和reduce.html:32 上一次处理后：132
map和reduce.html:33 当前正在处理：6
map和reduce.html:36 138
*/（16）promise异步操作
新建mock文件夹，在下面创建三个文件，内容如下：
user.json
{
"id": 1,
"name": "zhangsan",
"password": "123456"
}user_corse_1.json
{
"id": 10,
"name": "chinease"
}corse_score_10.json
{
"id": 100,
"score": 90
}<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
function get(url, data) {
return new Promise((resolve, reject) => {
$.ajax({
url: url,
data: data,
success: function (data) {
resolve(data);
},
error: function (err) {
reject(err)
}
})
});
}
get("mock/user.json")
.then((data) => {
console.log("用户查询成功：", data)
return get(`mock/user_corse_${data.id}.json`);
})
.then((data) => {
console.log("课程查询成功：", data)
return get(`mock/corse_score_${data.id}.json`);
})
.then((data) => {
console.log("课程成绩查询成功：", data)
})
.catch((err) => {
console.log("出现异常", err)
});
//结果：
//用户查询成功： {id: 1, name: "zhangsan", password: "123456"}
//课程查询成功： {id: 10, name: "chinease"}
//课程成绩查询成功： {id: 100, score: 90}（17）模块化
新建js文件夹，创建三个文件内容如下：
hello.js
// export const util = {
// sum(a, b) {
// return a + b;
// }
// }
export default {
sum(a, b) {
return a + b;
}
}
//export {util}
//export不仅可以导出对象，一切js变量都可以导出，比如：基本类型变量，函数，数组，对象。user.js
var name = "jack"
var age = 23
function add(a, b) {
return a + b;
}
export {name, age, add}main.js
import util from "./hello.js"
import {name, add} from "./user.js"
util.sum(1, 2);
console.log(name)
add(1, 3);3、Vue
未完，待续。。。
