谷粒商城笔记-前端框架
1.前端基础-技术栈
VSCode: 前端开发工具 ；ES6：ECMAScript是浏览器脚本语言的规范 ; Node.js 包管理工具（NPM）;Vue（mvvm思想）;Babel（浏览器兼容问题）;Webpack (自动化项目构建工具，打包工具)。
shift+!+Enter：生成模板
Alt+Shift+F：代码整理
2.ES6
参考文档： https://www.w3cschool.cn/escript6/escript6-827l37er.html
2.1简介
ECMAScript是一种由ECMA国际（前身为欧洲计算机制造商协会，European Computer Manufacturers Association）通过ECMA-262标准化的脚本程序设计语言。
ECMAScript 6.0（以下简称 ES6）是 JavaScript 语言的下一代标准，已经在 2015 年 6 月正式发布了。它的目标，是使得 JavaScript 语言可以用来编写复杂的大型应用程序，成为企业级开发语言。
ES6 既是一个历史名词，也是一个泛指，含义是 5.1 版以后的 JavaScript 的下一代标准，涵盖了 ES2015、ES2016、ES2017 等等，而 ES2015 则是正式名称，特指该年发布的正式版本的语言标准。本书中提到 ES6 的地方，一般是指 ES2015 标准，但有时也是泛指“下一代 JavaScript 语言”
ECMAScript 和 JavaScript 的关系是，ECMAScript是浏览器脚本语言的规范，而我们熟知的js语言，如javascript则是规范的具体实现。（另外的 ECMAScript 方言还有 JScript 和 ActionScript）。日常场合，这两个词是可以互换的
2.2 ES6语法新特性
创建新文件夹es6，之后打开VSCode，项目中文件->打开文件夹。新建文件xx.html;shift+!+Enter生成模板，右键->Open with live server：可以查看编辑的html文件。
2.2.1 let声明变量、const声明常量（只读变量）：
1）、var 声明的变量往往会越域。let 声明的变量有严格局部作用域。
2）、var 可以声明多次；let 只能声明一次。
3）、var 会变量提升；let 不存在变量提升
4）、const：1. 声明之后不允许改变；2. 一但声明必须初始化，否则会报错
测试用例：
<script> // var 声明的变量往往会越域 // let 声明的变量有严格局部作用域 { var a = 1; let b = 2; } console.log(a); // 1 console.log(b); // ReferenceError: b is not defined // // 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 // // var 会变量提升 // // let 不存在变量提升 console.log(x); // undefined var x = 10; console.log(y); //ReferenceError: y is not defined let y = 20; // // const // // 1. 声明之后不允许改变 // // 2. 一但声明必须初始化，否则会报错 const c = 1; c = 3; //Uncaught TypeError: Assignment to constant variable. </script>
2.2.2 解析表达式：
1）、数组解构：let [a,b,c] = arr;
2）、对象解构：const { name: abc, age, language } = person;
3）、字符串扩展：startsWith,endsWith,includes
4）、字符串模板：
a. `` 可用来表示跨行的字符串.
b.字符串插入变量和表达式。变量名写在 ${} 中，${} 中可以放入 JavaScript 表达式。
测试用例：
<script> //数组解构 // 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) 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) //4、字符串扩展 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 //字符串模板 let ss = `<div> <span>hello world<span> </div>`; console.log(ss); // // 2、字符串插入变量和表达式。变量名写在 ${} 中，${} 中可以放入 JavaScript 表达式。 function fun() { return "这是一个函数" } let info = `我是${abc}，今年${age + 10}了, 我想说： ${fun()}`; console.log(info); </script>
2.2.3 函数优化：
1）、函数参数可以添加默认值
2）、不定参数：可以传递不确定个数的参数
3）、箭头函数：一个参数，多个参数,单行执行函数，多行执行函数
测试用例：
<script> //在ES6以前，我们无法给一个函数参数设置默认值，只能采用变通写法： function add(a, b) { // 判断b是否为空，为空就给默认值1 b = b || 1; return a + b; } // 传一个参数 console.log(add(10)); //现在可以这么写：直接给参数写上默认值，没传就会自动使用默认值 function add2(a, b = 1) { return a + b; } console.log(add2(20)); //2）、不定参数 function fun(...values) { console.log(values.length) } fun(1, 2) //2 fun(1, 2, 3, 4) //4 //3）、箭头函数 //以前声明一个方法 // var print = function (obj) { // console.log(obj); // } var print = obj => console.log(obj); print("hello"); var sum = function (a, b) { c = a + b; return a + c; } var sum2 = (a, b) => a + b; console.log(sum2(11, 12)); 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 = ({name}) => console.log("hello," +name); hello2(person); </script>
2.2.4 对象优化：
1）、新增API：ES6给Object扩展了许多新的方法Object.keys,Object.values,Object.entries （获得对象的键值对）。
2）、Object.assign方法用于对象的合并。
3）、声明对象简写
4）、对象的函数属性简写
5）、对象拓展运算符 -拷贝对象（深拷贝）,合并对象,x(//新对象的值会覆盖本来就有的值)
测试用例
<script> 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 }; //{a:1,b:2,c:3} Object.assign(target, source1, source2); console.log(target);//["name", "age", "language"] //2）、声明对象简写 const age = 23 const name = "张三" const person1 = { age: age, name: name } const person2 = { age, name } console.log(person2); //3）、对象的函数属性简写 let person3 = { name: "jack", // 以前： eat: function (food) { console.log(this.name + "在吃" + food); }, //箭头函数this不能使用，对象.属性 eat2: food => console.log(person3.name + "在吃" + food), eat3(food) { console.log(this.name + "在吃" + food); } } person3.eat("香蕉"); person3.eat2("苹果") person3.eat3("橘子"); //4）、对象拓展运算符 // 1、拷贝对象（深拷贝） let p1 = { name: "Amy", age: 15 } let someone = { ...p1 } console.log(someone) //{name: "Amy", age: 15} // 2、合并对象,x let age1 = { age: 15 } let name1 = { name: "Amy" } //新对象的值会覆盖本来就有的值 let p2 = {name:"zhangsan"} p2 = { ...age1, ...name1 } console.log(p2) </script>
2.2.5 map与reduce函数：
1)、map()：接收一个函数，将原数组中的所有元素用这个函数处理后放入新数组返回。
2）、reduce() 为数组中的每一个元素依次执行回调函数，不包括数组中被删除或从未被赋值的元素.
1、previousValue （上一次调用回调返回的值，或者是提供的初始值（initialValue））
2、currentValue （数组中当前被处理的元素）
3、index （当前元素在数组中的索引）
4、array （调用 reduce 的数组）
测试用例
<script> //数组中新增了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); //reduce() 为数组中的每一个元素依次执行回调函数，不包括数组中被删除或从未被赋值的元素， //[2, 40, -10, 6] //arr.reduce(callback,[initialValue]) /** 1、previousValue （上一次调用回调返回的值，或者是提供的初始值（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) </script>
2.2.6promise函数：
Promise ，简单说就是一个容器，里面保存着某个未来才会结束的事件。
测试用例：
<script> //1、查出当前用户信息 //2、按照当前用户的id查出他的课程 //3、按照当前课程id查出分数 // $.ajax({ // url: "mock/user.json", // success(data) { // console.log("查询用户：", data); // $.ajax({ // url: `mock/user_corse_${data.id}.json`, // success(data) { // console.log("查询到课程：", data); // $.ajax({ // url: `mock/corse_score_${data.id}.json`, // success(data) { // console.log("查询到分数：", data); // }, // error(error) { // console.log("出现异常了：" + error); // } // }); // }, // error(error) { // console.log("出现异常了：" + error); // } // }); // }, // error(error) { // console.log("出现异常了：" + error); // } // }); //1、Promise可以封装异步操作 // let p = new Promise((resolve, reject) => { // //1、异步操作 // $.ajax({ // url: "mock/user.json", // success: function (data) { // console.log("查询用户成功:", data) // resolve(data); // }, // error: function (err) { // reject(err); // } // }); // }); // p.then((obj) => { // return new Promise((resolve, reject) => { // $.ajax({ // url: `mock/user_corse_${obj.id}.json`, // success: function (data) { // console.log("查询用户课程成功:", data) // resolve(data); // }, // error: function (err) { // reject(err) // } // }); // }) // }).then((data) => { // console.log("上一步的结果", data) // $.ajax({ // url: `mock/corse_score_${data.id}.json`, // success: function (data) { // console.log("查询课程得分成功:", data) // }, // error: function (err) { // } // }); // }) 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) }); </script>
3.Vue学习
