前端项目技术栈： js语言 || es6、7、8等新特性 || 框架 JQuery 、Vue、 React || 工具 Webstorm 、vscode || 项目构建 webpack || 依赖管理 npm

ES6

是 JavaScript 语言的下一代标准，每一年都会发布一个新版本。意思就是 ES 是浏览器脚本语言的规范，JavaScript 是具体实现，其具有如下几个特性：

1. let

• let 不会逾域，var 会逾域
• let 不能多次声明，var 可以多次声明
• let 不存在变量提升，var 存在变量提升

        {var a = 1;let b = 2;}console.log(a);console.log(b);

扩展： const —— 用于声明常量，不能改变

2. 解构表达式

       // 1. 数组解构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);// 2. 对象解构const person = {name : "waniqng",age : 20,language : ["java", "js", "vue"]}// 寻常写法// const name = person.name;// const age = person.age;// const language = person.language;// 使用解构表达式的写法const {name, age, language} = person;console.log(name, age, language);// 对象解构用法二： 将 name 改名为 abc// const {name : abc, age, language} = person;  

3. 对字符串的扩展

        // 字符串 API 的扩展let str = "hello, wanqing";let age = 20;console.log(str.startsWith("hello"));console.log(str.endsWith("qing"));console.log(str.includes("wanqing"));console.log(str.includes("hello"));// 字符串模板let ss = `
`console.log(ss);// 字符串插值let info = `我是${str}, 我要加油！`;console.log(info)// 字符串中插入表达式let info2 = `我是${str}, 我${age + 1}岁了！`;// 字符串中插入方法let info3 = `我是方法返回值， ${fun()}`;console.log(info2)function fun(){return "我是一个函数";}console.log(info3)

4. 函数优化

            // ES6 之前写法 —— 若 b 为null, 则默认值为 1function add(a,b){b = b | 1;return a + b;}console.log(add(10));// 1. ES6 之后，自己赋值一个默认值function add2(a, b=1) {return a + b;}console.log(add2(20));// 2. 不定参数function fun(...values){console.log(values.length)}fun(1, 2);fun(1, 2, 3);// 3. 箭头函数var print = obj => console.log(obj);print("hello")var addAB = (a, b) => a + b;console.log(addAB(1, 2))var sum3 = (a, b) => {c = a + b;return a + c;}console.log(sum3(10, 20));const person = {name: "wangqing",love: "java"}function hello(person) {console.log("hello" + person.name)console.log(person.name + "like" + person.love)}hello(person);var hello2 = ({name, love}) => {console.log("hello" + name)console.log(name + "like" + love)}hello2(person);

5. 对象优化

            const person = {name: "wangqing",love: "java"}// 获取当前对象中所有属性Object.keys(person)// 获取当前对象所有属性的值Object.values(person)// 获取当前对象所有键值对 Object.entries(person)// assign 用于对象的合并const target = {a : 1};const source1 = {b : 2};const source2 = {c : 3};Object.assign(target, source1, source2);console.log(target);// 声明对象的简写方式const age = 20;const name = "wangqing"const person2 = { age, name}console.log(person2)// 对象函数的简写let person3 = {name : "wanqing",like: function(love){console.log( this.name + " love" + love );},// 注意，箭头函数 this 不能获取到，要使用对象名.属性名like2: love => {console.log( this.name + " love" + love );} ,// 简写写法 3like3(love){console.log( this.name + " love" + love );}}person3.like("打代码");person3.like2("打代码")person3.like3("打代码")// 对象的扩展运算符// 1. 拷贝对象 深拷贝let p1 = {name: "wanqing" , age : 20}let someone = {...p1} // 将 p1 中的内容拷贝给 someoneconsole.log(someone)// 2. 合并对象let age1 = {age : 20};let name2 = {name: "wanqing"}let p2 = {...age1, ...name2}console.log(p2); // 若是 p2 中之前已经含有 age 和 name 的值，使用新值覆盖原来的值

6. map - reduce 方法

        // ES6 为数组中新增了 map 和 reduce 方法// map —— 接收一个函数，将数组中所有值用这个函数处理后返回let arr = [1, 20, 30];// arr = arr.map((item) => {//     return item*2;// })// 更简洁的写法arr = arr.map(item => item*2)console.log(arr)// reduce —— 为数组中每一个元素执行回调函数// 传入一个回调函数，我们这里里传入一个箭头函数为例子// 回调函数其参数为： 上一次处理后的值（调用回调函数返回的值）， 当前正常处理的值， 当前函数在数组中的索引， 调用 reduce 的数组let res = arr.reduce((a, b)=>{console.log("上一次处理后变为" + a);console.log("当前正在处理" + b)return a + b;}, 100) // 可以指定初始值console.log(res)

7. promise

        console.log("合理处理嵌套请求")// 查出当前用户信息// 根据 id 查询当前用户的课程// 更加课程 id 得到当前用户的成绩$.ajax({url : "mock/user.json",success: function(data) {console.log(data)// 查询课程// 查询课程成功，查询成绩// —— 嵌套查询非常凌乱 ~~},error: function(error){console.log("失败")}})// promise 可以封装异步操作let p = new Promise((resovle, reject)=>{console.log("进入")// 异步操作$.ajax({url : "mock/user.json",success: function(data) {console.log("查询用户成功", data)resovle(data)},error: function(error){reject(error)console.log("失败")}})});// promise 操作成功p.then((obj) => {return new Promise((resovle, reject)=>{$.ajax({url : `mock/user_course_${obj.id}.json`,success: function(data) {console.log("查询用户课程成功", data)resovle(data)},error: function(error){reject(error)}})});}).catch((error)=>{}).then((data)=>{console.log("上一步的结果" + data);$.ajax({url : `mock/user_score_${obj.id}.json`,success: function(data) {console.log("查询用户课程成绩成功", data)resovle(data)},error: function(error){reject(error)}})})

8. 模块化
   模块化就是将代码进行拆分，可以随意导入和导出需要用的代码。

• 需要导出给其他模块用的代码

const util =  {sum(a, b) {return a + b;}
}// export 可以导出一切类型
export {util}// 写法二
export const util2 =  {sum(a, b) {return a + b;}
}// 使得导入时可以随意起名字
export default {sum(a, b) {return a + b;}
}

var name = "waniqng"
var love = "js"export{name, love}

• 需要导入其他模块的代码

import util from "./hello.js"
import {name, love} from "./user.js"util.sum(1, 2);
console.log(name);
console.log(love)

尾注：所有的不自信，所有的痛苦，所有的失望，都是因为技术不够强，我热爱我所学的，不后悔走上这条路，我也一定会坚持走下去，与君共勉