ES6新特性及语法

let和const

//1. let不可以越域
        // {
        // let b = 2;
        // var a= 1;
        // }
        // console.log(a);
        // console.log(b);


// 2. let不能多次声明变量
        // var a = 1;
        // var a = 2;![在这里插入图片描述](https://img-blog.csdnimg.cn/20210125214843777.png)

        // console.log(a)
        // let b = 2;
        // // let b = 3;
        // console.log(b)


// 3. let不会变量提升
        // console.log(a) 
        // var a = 2;
        // console.log(b)
        // let b = 2;

//4. const 不可修改
        // const a = 1;
        // const a = 2;
        // console.log(a)

解构表达式

//1. 数组解构
        let arr = [1,2,3];
        let [a,b,c] = arr;

        console.log(a,b,c);


// 2. 对象解构
        const person = {
            name: "jack",
            age: 21,
            language: ['C','java']
        }

        const {name,age,language} = person;
        console.log(name,age,language);

        const {name:n,age:ag,language:l} = person;
        console.log(n,ag,l);

---

字符串拓展

<script>
    //字符串扩展
    let str = "hello.vue";
    console.log(str.startsWith("hello"));//是否hello开头
    console.log(str.endsWith(".vue")); //是否 .vue结尾
    console.log(str.includes("e"));//是否包含e
    console.log(str.includes("hello")); //是否包含hello
    // 字符串模板
    function fun(){
        return '好家伙好家伙'
    }

    let ss = `
    123
    156
    849
        meiy 
    `
    console.log(ss);

    // ${fun}打印的是整个方法体的所有代码 ${fun()}返回的是方法的返回值
    let info = `
    但使龙城飞将在,
    ${age},${age+835834},
    ${fun()},
    不教胡马度阴山`
    console.log(info);
</script>

方法新特性

<script>
    //ES6以前 我们无法给函数参数设置默认值,只能采用变通写法
    function add(a, b) {
        b = b || 1;
        return a + b;
    }
    console.log(add(10));

    //ES6开始 我们可以直接在定义方法时给参数赋值
    /**
     * 根据实践发现以下特点:
     * 1. 如果想要使用该特性 有默认值的参数应该在参数列表的最后且连续
     *    方法读取参数时从第一位开始读,不跳过 
     **/
    function add2(a, b = 2, c) {
        return a + b + c;
    }
    console.log(add2(10));
    console.log(add2(11, 11));
    console.log(add2(11, 11, 11));

    /**
     * 不定参数
     **/
    function fun(...params) {
        console.log(params);
        console.log(params.length);
    }
    fun(1, 2, 3, 4)

    /**
     * 箭头函数 类似java的lambda表达式 => 表示
     **/
    var sum = (a,b) => a+b;
    console.log(sum(99,99));

    var sum = (a,b) => {a += b; return a + b;}
    console.log(sum(10,10));


    /**
     * 箭头函数 + 解构表达式
     * 
     **/ 
    user = {
        name: '柳彦川',
        age: 21
    }
    var getName = ({name}) => name;
    console.log(getName(user));
</script>

对象优化

新增的api

对象取值

const user = {
    name: '柳彦川',
    age: 21,
    sex: '男'
}

console.log(Object.keys(user));
console.log(Object.values(user));
console.log(Object.entries(user))

对象操作

const a = {aa : 'a'};
const b = {bb : 'b'};
const c = {cc : 'c'};
S
Object.assign(a,b,c);
console.log(a);

---

//新的创建对象方式
const name = 'lyc';
const age = 21;

var person = { name, age }
console.log(person);

---

对象的函数属性简写

        //3)、对象的函数属性简写
        let person3 = {
            name: 'lyc',
            //以前：
            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("香菜");
        person3.eat2("苹果");
        person3.eat3("橘子");

拷贝对象(深拷贝)

user = {
    name: '柳彦川',
    age: 21,
    sex: '男'
}
job = {
    time: 996,
    salary: 100
}

let person = {...user}
console.log(person);

let person2 = {...user, ...job}
console.log(person2);

map、reduce方法

//数组中新增了map和reduce方法。
//map():接收一个函数，将原数组中的所有元素用这个函数处理后放入新数组返回。
let arr = ['1', '20', '-5', '3'];
let mapres = arr.map((item)=>item*2);
console.log(mapres);
//reduce()为数组中的每一个元素依次执行回调还数，不包括数组中被删除或从未被赋值的元素，
//[2,40,-10,6]
///arr.reduce(callback,[initialValue])
/*
1、previousValue(上一次调用回调返回的值，或者是提供的初始值（initialvalue))
2、currentvalue(数组中当前被处理的元素）
3、index(当前元素在数组中的索引）
4、array(调用reduce的数组）*/
let reduceres = mapres.reduce((a,b) => {
    console.log('上次:'+a);
    console.log('这次:'+b);
    return a+b;
},100);

console.log(reduceres);

Promise

Promise 对象是由关键字 new 及其构造函数来创建的。

特点：

• 构造函数接收两个函数作为参数，分别是resolve和reject。
  • 当异步操作执行成功后，会将异步操作结果作为参数传入resolve函数并执行
  • 失败则会将异步操作的错误作为参数传入reject函数并执行
• then方法，分别指定resolved状态和rejected状态的回调函数

 //Promise
 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/course_${data.id}.json`)
     })
     .then((data) => {
         console.log(data);
         return get(`mock/score_${data.id}.json`)
     })
     .then((data) => {
         console.log(data);
     })
     .catch((err) => {
         console.log(err);
         console.log("处理错误");
     })