ES6 前端语法

1. let

1.1新增加的声明变量的关键字，与var声明变量有以下不同

 <script>
        //var 声明的变量会越域
        //let 声明的变量有严格局部作用域
        {
            var a=1;
            let b=1;
        }
        
        //let b=2;
        console.log(a); //1
        console.log(b); //ReferenceError: b is not defined
    </script>

1.2 var 可以声明多次，let 只能声明一次

 <script>
       {
            var a=1;
            var a=2;
            let b=1;
            let b=2;
        }
        
        console.log(a); //2
        console.log(b); //Identifier 'b' has already been declared
    </script>

1.3 var 会变量提升，let 不存在变量提升

 <script>
      console.log(x);  // undefined
        var x = 10;
        console.log(y);   //ReferenceError: y is not defined
        let y = 20;
 </script>

2.const 声明变量（只读）

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

 <script>
     const a = 1;
        a = 3; //Uncaught TypeError: Assignment to constant variable.
  </script>

3.解构表达式

3.1数组解构

可以直接将数组的元素依次赋值给其他变量

 <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) //1 2 3
  </script>

3.2对象解构

可以直接将对象的属性赋给其他变量

 <script>
     const person = {
            name: "jack",
            age: 21,
            language: ['java', 'js', 'css']
        }

        //			不需要像下面这样挨个赋值
        //         const name = person.name;
        //         const age = person.age;
        //         const language = person.language;


        //对象解构
        //将name的值赋给abc
        const { name:abc, age, language } = person;

        console.log(abc, age, language)//jack 21 (3) ["java", "js", "css"]
  </script>

3.3字符串扩展

字符串可以使用startsWith()、endsWith、includes等函数

 <script>
    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
  </script>

3.4模板字符串 ``符号

模板字符串相当于加强版的字符串，用反引号 `,除了作为普通字符串，还可以用来定义多行字符串，还可以在字符串中加入变量和表达式。

 <script>
    普通字符串:
       let a=`hello`;
        console.log(a);
        // "Hello'
       

        多行字符串:
       let b=`hello

       world `;
       console.log(b);
        // hello

      // world 

       // 变量名写在 ${} 中，${} 中可以放入 JavaScript 表达式:
        let age=10;
       let name="张三"
       function fun(){
           return "ok";
       }
       console.log(`我是${name},年龄${age+10},我想说:${fun()}`)
        //我是张三,年龄20,我想说:ok
  </script>

4.函数优化

在ES6以前，我们无法给一个函数参数设置默认值，只能采用变通写法；现在可以直接给参数写上默认值，没传就会自动使用默认值

4.1参数默认值

 <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));
  </script>

4.2不定参数

 <script>
     function fun(...values) {
            console.log(values.length)
        }
        fun(1, 2)      //2
        fun(1, 2, 3, 4)  //4
  </script>

4.3箭头函数

 <script>
    var print = obj => console.log(obj);
        print("hello");


   		//箭头函数+解构
        const person = {
            name: "jack",
            age: 21,
            language: ['java', 'js', 'css']
        }
        
        var hello2 = ({name}) => console.log("hello," +name);
        hello2(person);
  </script>

5.对象优化

5.1对象的新方法

 <script>
    const person = {
            name: "jack",
            age: 21,
            language: ['java', 'js', 'css']
        }
		//key/values/entries方法
        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 };

       	//assign将源对象的所有可枚举属性复制到目标对象中。
        Object.assign(target, source1, source2);
        console.log(target); //{a:1,b:2,c:3}
  </script>

5.2声明对象简写

 <script>
     const age = 23
        const name = "张三"
        //原本声明对象
        const person1 = { age: age, name: name }
		
        //简写后(若属性名与常量名相同时才可以使用)
        const person2 = { age, name }
        console.log(person2);//{age: 23, name: "张三"}
  </script>

5.3对象函数属性简写

可以省略对象函数属性的声明，用箭头函数或者函数属性名代替函数声明

 <script>
     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.eat3("水果");//jack在吃水果
  </script>

5.4对象扩展运算符

 <script>
    // 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) //{age: 15, name: "Amy"}
  </script>

6.map 和 reduce函数

6.1map函数

接收一个函数，将原数组中的所有元素用这个函数处理后放入新数组返回。

 <script>
     let arr=[1,2,3,4];
      let a= arr.map(item=>item*2);
      console.log(a);//[2, 4, 6, 8]
  </script>

6.2reduce函数

为数组中的每一个元素依次执行回调函数，不包括数组中被删除或从未被赋值的元素，
arr.reduce(callback,[initialValue])

callback函数可用四个参数
1、previousValue （上一次调用回调返回的值，或者是提供的初始值（initialValue））
2、currentValue （数组中当前被处理的元素）
3、index （当前元素在数组中的索引）
4、array （调用 reduce 的数组）

<script>
  let arr =  [2, 40, -10, 6];
     let result = arr.reduce((a,b,index)=>{
         console.log("上一次处理后："+a);
         console.log("当前正在处理："+b);
         console.log(index);
         return a + b;
     },100);
     console.log(result)

 	//控制台打印结果
     上一次处理后：100
     当前正在处理：2
     0
     上一次处理后：102
     当前正在处理：40
     1
     上一次处理后：142
     当前正在处理：-10
 	2
     上一次处理后：132
     当前正在处理：6
     3
</script>

7.promise对象 异步

当发送异步请求时，如果我们下一个异步请求需要用到上一个异步请求的结果，这个时候就会发生连续嵌套，非常混乱，而通过promise对象和then函数可以解决这一问题

原始的嵌套处理：

<script>
        $.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(err){

            }
        });
    </script>

通过promise对象和then函数处理:

<script>
//第一个成功参数，第二个失败参数
		let p = 
            new Promise((resolve, reject) => {
                $.ajax({
                    url: `mock/user.json`,
                    success: function (data) {
                        console.log("用户为：", data)
                        resolve(data);
                    },
                    error: function (err) {
                        reject(err);
                    },
                });
             })

        p.then((obj) => {
            //return data 给下方then获取
           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) {

                },
            });
        })
    </script>

通过promise对象和then函数处理 再封装

<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`,data);
            })
            .then((data)=>{
               console.log("课程数据：",data)
              return get(`mock/corse_score_${data.id}.json`,data);
            })
            .then((data)=>{
               console.log("分数数据：",data)
            })
            .catch((err)=>{
                console.log("异常")
            })
</script>

8.模块导入导出各种类型的变量，如字符串，数值，函数，类。

导出的函数声明与类声明必须要有名称（export default 命令另外考虑）。
不仅能导出声明还能导出引用（例如函数）。
export 命令可以出现在模块的任何位置，但必需处于模块顶层。
import 命令会提升到整个模块的头部，首先执行。

##############user.js##############
let name="张三";
let age=17;
let myfn = function(){
    return "My name is" + myName + "! I'm '" + myAge + "years old."
}
let myClass =  class myClass {
    static a = "yeah!";
}


//导出
export {name,age,myfn,myClass}

##############test.js##############
//导入
import {name,age,myfn,myClass} from user.js

console.log(name);//张三
console.log(age);//17
console.log(myfn());// My name is Tom! I'm 20 years old.
console.log(myClass.a );// yeah!
```