gulimall基础篇回顾Day-04
前端开发基础知识&快速入门
- 一、VSCode 使用？
-
- 1、安装常用插件
- 2、创建项目
- 3、创建网页
- 4、运行效果
- 二、ES6
-
- 1、简介
- 2、什么是 ECMAScript
- 3、ES6 新特性
一、VSCode 使用？
1、安装常用插件
切换到插件标签页
安装以下基本插件
2、创建项目
vscode 很轻量级，本身没有新建项目的选项，创建一个空文件夹就可以当做一个项目
3、创建网页
创建文件，命名为 es6.html，( idea 使用快捷键 ！+ tab 键快速生成 html 模板)
4、运行效果
如果使用 (VScode) live server，页面内容变化，保存以后，浏览器会自动变化。
二、ES6
1、简介
ECMAScript 6.0（以下简称 ES6，ECMAScript 是一种由 Ecma 国际(前身为欧洲计算机制造商 协会,英文名称是 European Computer Manufacturers Association)通过 ECMA-262标准化的脚本 程序设计语言）是 JavaScript 语言的下一代标准，已经在 2015 年 6 月正式发布了，并且 从 ECMAScript 6 开始，开始采用年号来做版本。即 ECMAScript 2015，就是 ECMAScript6。 它的目标，是使得 JavaScript 语言可以用来编写复杂的大型应用程序，成为企业级开发语言。 每年一个新版本。
2、什么是 ECMAScript
来看下前端的发展历程：
web1.0 时代： 最初的网页以 HTML 为主，是纯静态的网页。网页是只读的，信息流只能从服务的到客户端 单向流通。开发人员也只关心页面的样式和内容即可。
web2.0 时代： - 1995 年，网景工程师 Brendan Eich 花了 10 天时间设计了 JavaScript 语言。 - 1996 年，微软发布了 JScript，其实是 JavaScript 的逆向工程实现。 - 1996 年 11 月，JavaScript 的创造者 Netscape 公司，决定将 JavaScript 提交给标准化组 织 ECMA，希望这种语言能够成为国际标准。 - 1997 年，ECMA 发布 262 号标准文件（ECMA-262）的第一版，规定了浏览器脚本语言的 标准，并将这种语言称为 ECMAScript，这个版本就是 1.0 版。JavaScript 和 JScript 都是 ECMAScript的标准实现者，随后各大浏览器厂商纷纷实现了ECMAScript标准。所以，ECMAScript 是浏览器脚本语言的规范，而各种我们熟知的 js 语言，如 JavaScript 则是规范的具体实现。例如 Jdbc 是规范，而 Mysql 只是其中的一个具体实现。
3、ES6 新特性
1、let 声明变量
<html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title></head><body> <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; </script></body></html>2、const 声明常量（只读变量）
// 1. 声明之后不允许改变 // 2. 一但声明必须初始化，否则会报错 const a = 1; a = 3; //Uncaught TypeError: Assignment to constant variable.3、解构表达式
<html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title></head><body> <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) </script></body></html>4、字符串扩展
1)、几个新的 API
ES6 为字符串扩展了几个新的 API：
includes()：返回布尔值，表示是否找到了参数字符串。startsWith()：返回布尔值，表示参数字符串是否在原字符串的头部。endsWith()：返回布尔值，表示参数字符串是否在原字符串的尾部。
<html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title></head><body> <script> const person = { name: "jack", age: 21, language: ['java', 'js', 'css'] } 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 //1、字符串模板 let ss = ` hello world `; console.log(ss); //2、字符串插入变量和表达式。变量名写在 ${} 中，${} 中可以放入 JavaScript 表达式。 function fun() { return "这是一个函数" } let info = `我是${abc}，今年${age + 10}了, 我想说： ${fun()}`; console.log(info); </script></body></html>5、函数优化
<html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title></head><body> <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 sum1 = 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></body></html>6、对象优化
1)、新增的 API
ES6 给 Object 拓展了许多新的方法，如：
- keys(obj)：获取对象的所有 key 形成的数组
- values(obj)：获取对象的所有 value 形成的数组
- entries(obj)：获取对象的所有 key 和 value 形成的二维数组
- 格式：
[[k1,v1],[k2,v2],...] - assign(dest, …src) ：将多个 src 对象的值 拷贝到 dest 中。（第一层为深拷贝，第二层为浅 拷贝）
<html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title></head><body> <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、合并对象 let age1 = { age: 15 } let name1 = { name: "Amy" } let p2 = {name:"zhangsan"} p2 = { ...age1, ...name1 } console.log(p2) </script></body></html>7、map 和 reduce
<html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title></head><body><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></body></html>8、Promise
<html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script></head><body> <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></body></html>9、模块化
1)、什么是模块化
模块化就是把代码进行拆分，方便重复利用。类似 java 中的导包：要使用一个包，必须先 导包。而 JS 中没有包的概念，换来的是模块。 模块功能主要由两个命令构成：export和import。
export命令用于规定模块的对外接口。
import命令用于导入其他模块提供的功能。
2)、export
比如我定义一个 js 文件:hello.js，里面有一个对象
const util = { sum(a,b){ return a + b; } }我可以使用 export 将这个对象导出：
const util = { sum(a,b){ return a + b; } }export {util};当然，也可以简写为：
export const util = { sum(a,b){ return a + b; } }export不仅可以导出对象，一切 JS 变量都可以导出。比如：基本类型变量、函数、数组、 对象。 当要导出多个值时，还可以简写。比如我有一个文件：user.js：
var name = "jack" var age = 21 export {name,age}省略名称
上面的导出代码中，都明确指定了导出的变量名，这样其它人在导入使用时就必须准确写出 变量名，否则就会出错。 因此 js 提供了default关键字，可以对导出的变量名进行省略
export default = { sum(a,b){ return a + b; } }这样，当使用者导入时，可以任意起名字
3）、import
使用export命令定义了模块的对外接口以后，其他 JS 文件就可以通过import命令加载这 个模块
例如我要使用上面导出的 util：
// 导入 utilimport util from 'hello.js'// 调用 util 中的属性 util.sum(1,2)要批量导入前面导出的 name 和 age：
import {name, age} from 'user.js'console.log(name + " , 今年"+ age +"岁了")但是上面的代码暂时无法测试，因为浏览器目前还不支持 ES6 的导入和导出功能。除非借 助于工具，把 ES6 的语法进行编译降级到 ES5，比如Babel-cli工具 我们暂时不做测试，大家了解即可。
