ECMAScript6.0（以下简称ES6，ECMAScript是一种由Ecma国际通过ECMA-262标准化的脚本）， 是JavaScript语言的下一代标准，2015年6月正式发布，从ES6开始的版本号采用年号，如ES2015，就是ES6。ES2016就是ES7。 ECMAScript是规范，JS的规范的具体实现。

var & let & const

var在{}之外也起作用
let在{}之外不起作用

var多次声明同一变量不会报错，let多次声明会报错，只能声明一次。
var 会变量提升（打印和定义可以顺序反）。let 不存在变量提升（顺序不能反）

const声明之后不允许改变，一但声明必须初始化，否则会报错

解构表达式

数组解构

支持let arr = [1,2,3]; let [a,b,c] = arr;这种语法 

  1. <script>
  2.         //数组解构
  3.         // let arr = [1,2,3];
  4.         // // let a = arr[0];
  5.         // // let b = arr[1];
  6.         // // let c = arr[2];
  8.         // let [a,b,c] = arr;
  9.         // console.log(a,b,c)
  10. </script>

对象解构

支持对象解析：const { name: abc, age, language } = person; 冒号代表改名 

  1. <script>
  2.   const person = {
  3.             name: "jack",
  4.             age: 21,
  5.             language: ['java', 'js', 'css']
  6.         }
  7.         //const name = person.name;
  8.         //const age = person.age;
  9.         //const language = person.language;
  11.               //对象解构 冒号的作用就是改变属性名不改变值
  12.         const { name:abc, age, language } = person;
  13.         console.log(abc, age, language)
  14. </script>

字符串扩展

几个新的 API

  1. <script>
  2.               let str = "hello.vue";
  3.         console.log(str.startsWith("hello"));    //true  是不是以 hello 开始
  4.         console.log(str.endsWith(".vue"));        //true    是不是以 .vue 结尾
  5.         console.log(str.includes("e"));                //true    是不是包含 e 
  6.         console.log(str.includes("hello"));        //true    是不是包含 hello
  7. </script>

字符串模板

一个字符串为多行
````用漂号括起来【中间的空格也都算】

  1. <script>
  2.               let ss = `<div>
  3.                     <span>hello world<span>
  4.                 </div>`;
  5.         console.log(ss);    //【中间的空格也都算】
  6. </script>

占位符功能 ${}

  1. <script>
  2.   // 字符串插入变量和表达式。变量名写在 ${} 中，${} 中可以放入 JavaScript 表达式。
  4.         function fun() {
  5.             return "这是一个函数"
  6.         }
  8.         let info = `我是${abc}，今年${age + 10}了, 我想说： ${fun()}`;
  9.         console.log(info);
  10. </script>

函数优化

参数默认值

原来想要函数默认值得这么写b = b || 1; 现在可以直接写了function add2(a, b = 1) 

  1. <script>
  2.         //在ES6以前，我们无法给一个函数参数设置默认值，只能采用变通写法：
  3.         function add(a, b) {
  4.             // 判断b是否为空，为空就给默认值1
  5.             b = b || 1;
  6.             return a + b;
  7.         }
  8.         // 传一个参数
  9.         console.log(add(10));
  12.         //现在可以这么写：直接给参数写上默认值，没传就会自动使用默认值
  13.         function add2(a, b = 1) {
  14.             return a + b;
  15.         }
  16.         console.log(add2(20));
  17. </script>

不定参数

function fun(…values) 

  1. <script>
  2.   //不定参数
  3.         function fun(...values) {
  4.             console.log(values.length)
  5.         }
  6.         fun(1, 2)      //2
  7.         fun(1, 2, 3, 4)  //4
  8. </script>

箭头函数（lambda表达式），还支持使用{}结构传入对象的成员

  1. <script>
  2. //箭头函数
  3.         //以前声明一个方法
  4.         // var print = function (obj) {
  5.         //     console.log(obj);
  6.         // }
  7.         var print = obj => console.log(obj);
  8.         print("hello");
  10. ----------------------------------------------------------
  12.         var sum = function (a, b) {
  13.             c = a + b;
  14.             return a + c;
  15.         }
  17.         var sum2 = (a, b) => a + b;
  18.         console.log(sum2(11, 12));
  20.         var sum3 = (a, b) => {
  21.             c = a + b;
  22.             return a + c;
  23.         }
  24.         console.log(sum3(10, 20))
  26. ----------------------------------------------------------
  28.         const person = {
  29.             name: "jack",
  30.             age: 21,
  31.             language: ['java', 'js', 'css']
  32.         }
  34.         function hello(person) {
  35.             console.log("hello," + person.name)
  36.         }
  38.         //箭头函数+解构
  39.         var hello2 = ({name}) => console.log("hello," +name);
  40.         hello2(person);
  42. </script>

对象优化

对象方法

keys()：获取对象的所有 key 形成的数组
values()：获取对象的所有 value 形成的数组
entries()：获取对象的所有 key 和 value 形成的二维数组
assign(dest,…src)：将多个 src 对象的值拷贝到 dest 中

  1. <script>
  2.         const person = {
  3.             name: "jack",
  4.             age: 21,
  5.             language: ['java', 'js', 'css']
  6.         }
  8.         console.log(Object.keys(person));//["name", "age", "language"]
  9.         console.log(Object.values(person));//["jack", 21, Array(3)]
  10.         console.log(Object.entries(person));//[Array(2), Array(2), Array(2)]
  12.               const target = { a:1 };
  13.         const source1 = { b:2 };
  14.         const source2 = { c:3 };
  16.         //合并成这样 {a:1,b:2,c:3}
  17.         Object.assign(target, source1, source2);
  19.         console.log(target);//{a:1,b:2,c:3}
  20. </script>

声明对象简写

  1. <script>
  2.   //传统
  3.               const age = 23
  4.         const name = "张三"
  5.         const person1 = { age: age, name: name }
  7.   //ES6：属性名和属性值变量名一样，可以省略
  8.         const person2 = { age, name }//声明对象简写
  9.         console.log(person2);
  10. </script>

对象的函数属性简写

  1. <script>
  2.   let person3 = {
  3.             name: "jack",
  4.             // 以前：
  5.             eat: function (food) {
  6.                 console.log(this.name + "在吃" + food);
  7.             },
  8.             //箭头函数this不能使用，对象.属性
  9.             eat2: food => console.log(person3.name + "在吃" + food),
  10.             eat3(food) {
  11.                 console.log(this.name + "在吃" + food);
  12.             }
  13.         }
  15.         person3.eat("香蕉");
  16.         person3.eat2("苹果")
  17.         person3.eat3("橘子");
  18. </script>

对象拓展运算符

拓展运算符（…） 用于取出参数对象的所有可遍历属性然后拷贝到当前对象

  1. <script>
  2. //  拷贝对象（深拷贝）
  3.         let p1 = { name: "Amy", age: 15 }
  4.         let someone = { ...p1 }
  5.         console.log(someone)  //{name: "Amy", age: 15}
  6. //  合并对象
  7.         let age1 = { age: 15 }
  8.         let name1 = { name: "Amy" }
  9.         let p2 = { ...age1, ...name1 } 
  10.         console.log(p2)
  11. </script>

map 和 reduce

  1.  <script>
  2.         //数组中新增了map和reduce方法。
  3.         //map()：接收一个函数，将原数组中的所有元素用这个函数处理后放入新数组返回。
  4.          let arr = ['1', '20', '-5', '3'];
  6.         //  arr = arr.map((item)=>{
  7.         //     return item*2
  8.         //  });
  9.          arr = arr.map(item=> item*2);    
  10.          console.log(arr);    //[2, 40, -10, 6]
  12.        /*
  13.        reduce() 为数组中的每一个元素依次执行回调函数，不包括数组中被删除或从未被赋值的元素
  14.            arr.reduce(callback,[initialValue])
  15.          1、previousValue （上一次调用回调返回的值，或者是提供的初始值（initialValue））
  16.         2、currentValue （数组中当前被处理的元素）
  17.         3、index （当前元素在数组中的索引）
  18.         4、array （调用 reduce 的数组）
  19.       */
  21.         let result = arr.reduce((a,b)=>{
  22.             console.log("上一次处理后："+a);
  23.             console.log("当前正在处理："+b);
  24.             return a + b;
  25.         },100);
  26.         console.log(result)
  27. </script>

Promise

在 JavaScript 的世界中，所有代码都是单线程执行的。由于这个『缺陷』，导致 JavaScript 的所有网络操作，浏览器事件，都必须是异步执行。异步执行可以用回调函数实现。一旦有一连串的 ajax 请求 a,b,c,d… 后面的请求依赖前面的请求结果，就需要层层嵌套。这种缩进和层层嵌套的方式，非常容易造成上下文代码混乱，我们不得不小心翼翼处理内层函数与外层函数的依据，一旦内层函数使用了上层函数的变量，这种混乱程度就会加剧…… 总之，这种层叠上下文的层层嵌套方式，着实增加了神经的紧张程度。

  1.   corse_score_10.json 得分
  2. {
  3.     "id": 100,
  4.     "score": 90
  5. }
  7. user.json 用户
  8. {
  9.     "id": 1,
  10.     "name": "zhangsan",
  11.     "password": "123456"
  12. }
  15. user_corse_1.json 课程
  16. {
  17.     "id": 10,
  18.     "name": "chinese"
  19. }
  20. 用json文件模拟接口
  22. <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
  23. <script>
  24.               //1、查出当前用户信息
  25.         //2、按照当前用户的id查出他的课程
  26.         //3、按照当前课程id查出分数
  27.          $.ajax({
  28.              url: "mock/user.json",
  29.              success(data) {
  30.                  console.log("查询用户：", data);
  31.                  $.ajax({
  32.                      url: `mock/user_corse_${data.id}.json`,
  33.                      success(data) {
  34.                          console.log("查询到课程：", data);
  35.                          $.ajax({
  36.                              url: `mock/corse_score_${data.id}.json`,
  37.                              success(data) {
  38.                                  console.log("查询到分数：", data);
  39.                              },
  40.                              error(error) {
  41.                                  console.log("出现异常了：" + error);
  42.                              }
  43.                          });
  44.                      },
  45.                      error(error) {
  46.                          console.log("出现异常了：" + error);
  47.                      }
  48.                  });
  49.              },
  50.              error(error) {
  51.                  console.log("出现异常了：" + error);
  52.              }
  53.          });
  54. </script>

Promise 改造以前嵌套方式

  1. <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
  2. <script>
  3.                 //1、Promise可以封装异步操作
  4.          let p = new Promise((resolve, reject) => { //传入成功解析，失败拒绝
  5.              //1、异步操作
  6.              $.ajax({
  7.                  url: "mock/user.json",
  8.                  success: function (data) {
  9.                      console.log("查询用户成功:", data)
  10.                      resolve(data);
  11.                  },
  12.                  error: function (err) {
  13.                      reject(err);
  14.                  }
  15.              });
  16.          });
  17.          p.then((obj) => { //成功以后做什么
  18.              return new Promise((resolve, reject) => {
  19.                  $.ajax({
  20.                      url: `mock/user_corse_${obj.id}.json`,
  21.                      success: function (data) {
  22.                          console.log("查询用户课程成功:", data)
  23.                          resolve(data);
  24.                      },
  25.                      error: function (err) {
  26.                          reject(err)
  27.                      }
  28.                  });
  29.              })
  30.          }).then((data) => { //成功以后干什么
  31.              console.log("上一步的结果", data)
  32.              $.ajax({
  33.                  url: `mock/corse_score_${data.id}.json`,
  34.                  success: function (data) {
  35.                      console.log("查询课程得分成功:", data)
  36.                  },
  37.                  error: function (err) {
  38.                  }
  39.              });
  40.          })
  41. </script>

优化处理

  1. <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
  2. <script>
  3.                 function get(url, data) { //自己定义一个方法整合一下
  4.             return new Promise((resolve, reject) => {
  5.                 $.ajax({
  6.                     url: url,
  7.                     data: data,
  8.                     success: function (data) {
  9.                         resolve(data);
  10.                     },
  11.                     error: function (err) {
  12.                         reject(err)
  13.                     }
  14.                 })
  15.             });
  16.         }
  18.         get("mock/user.json")
  19.             .then((data) => {
  20.                 console.log("用户查询成功~~~:", data)
  21.                 return get(`mock/user_corse_${data.id}.json`);
  22.             })
  23.             .then((data) => {
  24.                 console.log("课程查询成功~~~:", data)
  25.                 return get(`mock/corse_score_${data.id}.json`);
  26.             })
  27.             .then((data)=>{
  28.                 console.log("课程成绩查询成功~~~:", data)
  29.             })
  30.             .catch((err)=>{ //失败的话catch
  31.                 console.log("出现异常",err)
  32.             });
  34. </script>

模块化

模块化就是把代码进行拆分，方便重复利用。类似 java 中的导包：要是用一个包，必须先导包。而 JS 中没有包的概念，换来的就是 模块

模块功能主要由两个命令构成：export 和 import

  • export 命令用于规定模块的对外接口
  • import 命令用于导入其他模块提供的功能

export

  1. user.js
  2. var name = "jack"
  3. var age = 21
  4. function add(a,b){
  5.     return a + b;
  6. }
  8. export {name,age,add}
  9. ---------------------------------------
  10. hello.js
  11. // export const util = {
  12. //     sum(a, b) {
  13. //         return a + b;
  14. //     }
  15. // }
  17. export default {
  18.     sum(a, b) {
  19.         return a + b;
  20.     }
  21. }
  22. // export {util}
  24. //export 不仅可以导出对象，一切JS变量都可以导出。比如：基本类型变量、函数、数组、对象。

import

  1. main.js
  2. import abc from "./hello.js"
  3. import {name,add} from "./user.js"
  5. abc.sum(1,2);
  6. console.log(name);
  7. add(1,3);