前端开发的ES6新特性（学生党必看）

一：ES6新特性-let&const

1.常量const
const常量（声明之后不允许改变，一旦声明必须初始化， 否则报错）
2.let变量
let声明的变量有严格的作用域
var声明的变量往往会越域
var可以声明多次,let只可以声明一次

         {
             var a =1;
             let b =2;
         }
         console.log(a);
         console.log(b);
         test.html:18 
        
    //    Uncaught ReferenceError: b is not defined
    // at test.html:18:22

二：ES6新特性-解构&字符串

1.数组解构

<script  type="text/javascript">
    let arr=[1,2,3];
    // let d = arr[0]
    // let b = arr[1]
    // let c = arr[2]
    let [d,b,c] = arr;
    console.log(d,b,c);
</script>

2.对象解构

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

    let {name,age,language} = person
    console.log(name,age,language)
    </script>

3.字符串扩展

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

4.字符串模板

<script>
    let ss = `<div>
        <a>飒飒事</a>
        </div>`;
        
        console.log(ss);
    </script>

<script>
    let person = {
        name: 'jack',
        age: 21,
        language: ['java','js','css'],
    }
    let {name,age,language} = person
    console.log(name,age,language)
    // 字符串插入变量和表达式。变量名写在${},${}中可以放js表达式
    function fun(){
        return "这是一个函数";
    }
    let info = `我是${name},今年${age+10},我想说${fun()}`;
    console.log(info);
    </script>

三：ES6新特性-函数优化

<script>
    // 给参数写上默认值
    function add2(a,b = 1){
        return a+b;
    }
    console.log(add2(20))
    // 21

    // 输入可变长度参数
    function fun1(...values){
        console.log(values.length)
    }
    fun1(5) // 1
    fun1(5,6,4)  // 3

    // 简单的箭头函数
    var sum=(a,b) => a + b;
    console.log(sum(11,11))


    const person = {
        name: "jack",
        age: 21,
        language: ['java','js','css'],
    }
    function hello(person){
        console.log(person.name)
    }
    let hellos=(obj)=> console.log(obj.name)
    hellos(person)  //jack
    </script>

四：ES6新特性-对象优化

1.对象的内置函数和对象合并

    // 对象的内置函数
    <script>
        const person = {
            name: "jack",
            age: 21,
            language: ['java','js','css']
        }

        console.log(Object.keys(person)); //(3) ['name', 'age', 'language']
        console.log(Object.values(person));  // (3) ['jack', 21, Array(3)]
        console.log(Object.entries(person)) // (3) [Array(2), Array(2), Array(2)]



        // 对象合并

        const target = {a: 1};
        const  source1 = {b:2};
        const source2 = {c:3}
        Object.assign(target,source1,source2);

        console.log(target)
        </script>

2.声明对象简写和声明对象书写方式

<script>
    const age = 23;
    const name=""
    const person1 = {age:age,name:name};

    const person2 = {age,name}
    console.log(person2) // 效果和person1一样
    </script>

    <script>
        let person = {
            name: "xushu",
            eat: function(food){
                console.log("我吃了"+food)
            },
            eat1: food => console.log("我吃了"+food),
            eat3(food){
                console.log("我吃了"+food)
            },
        }
        person.eat("香蕉");
        person.eat1("苹果");
        person.eat3("非常");
        </script>

3.对象的拷贝和合并

<script>
    let p1 ={
        name: "zlj",
        age: 19
    }
    let someone = {...p1}
    console.log(someone)

    let name =  {name: "12"}
    let age= {age: 19}
    console.log(someone)
    </script>

五 ：ES6新特性-promise异步编排

    <script>
        // 1.promise可以封装异步操作
        // 2.resolve 操作成功以后解析数据
        // 3.reject操作失败来拒绝
        let p =new Promise((resolve,reject) =>{
            $.ajxt({
                url: "/mock/user.json",
                success: function(data){
                    console.log(data)
                    resolve(data)
                },
                // 操作失败来拒绝
                failure: function(data) {
                    console.log("查询用户失败："+data)
                    reject(data)

                }
            });
        });
        p.then((obj) =>{
            return new promise((resolve,reject) =>{
                console.log("接收前面传来的信息:" +obj);
                $.ajax({
                    url: "/mock",
                    // 操作成功以后解析数据
                    success: function(data) {
                        console.log("查询用户可成功"+data)
                        resolve(data)
                    },
                    failure: function(data) {
                        console.log("查询用户课程失败"+data)
                        reject(data)
                    }
                })
            })
        }).then((data) =>{
            console.log("上一步的结果"+data)
            $.ajax({
                url: "/mock",
                success: function(data) {
                    console.log("查询用户课程分数成功"+data)
                    resolve(data);
                },
                // 操作失败来拒绝
                failure: function(data) {
                    console.log("查询用户课程分数失败"+data)
                    reject(data)
                }
            })
        })
        </script>

更加简便的方法

 <script>
            function myAjax(url){
                return new Promise(function(resolve, reject) {
                    $.ajax({
                        url: url,
                        success: function(result){
                            resolve(result);
                        },
                        error: function(err) {
                            reject(err);
                        }
                    })
                })
            }
            //验证用户名不存在
            myAjax("/local")
            .then(result=>{
                if(result.data){
                    alert("用户名不存在")
                    return myAjax("/local2")
                }
                else {
                    alert(result.message)
                }
            })
            // 验证手机号是否存在
            .then(result=>{
                if(result.data){
                    alert(result.data)
                }
            })
            .catch(err =>{
                alert("服务器异常")
            })
            </script>