ES6

1. 语法新特性

1. let声明变量
2. 解构表达式

let arr = [1, 2, 3];
let a = arr[0];
let b = arr[1];
let c = arr[2];
console.log(a, b, c);

let [a, b, c] = arr;
console.log(a, b, c);
// 对象解构
const person = {
    name: "jack",
    age: 21,
    language: ['java', 'js', 'css']
}
const name = person.name;
const age = person.age;
const language = person.language;
console.log(nam, age, language);

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

3. 字符串扩展

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

// 字符串模板
// 1. 多行字符串
let ss = `
          <div> 
            <span>hell world</span>    
          </div
        `
console.log(ss);
// 2. 字符串插入变量和表达式，变量名写在${}中，${}中可以放入JavaScript表达式
let info = `我是${name}，今年${age}岁`;
console.log(info);
info = `我是${name}，今年${age + 10}岁`;
console.log(info);

4. 函数优化

// 在ES6以前，我们无法给一个函数参数设置默认值，只能采用变通写法
function add(a, b) {
    // 判断a是否为空，为空就给默认值
    b = b || 1;
    return a + b;
}

// 传一个参数
console.log(add(10));

// 现在可以这么写，直接在参数上写上默认值，没传就会自动使用默认值
function add2(a, b = 1) {
    return a + b;
}

// 不定参数
function fun(...values) {
    console.log(values.length);
}

fun(1, 2);
fun(1, 2, 3, 4);

// 箭头函数
var print = obj => {
    console.log(obj)
}
var sum2 = (a, b) => a + b;

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

function hello(person) {
    console.log("hello，" + person.name);
}

var hello2 = (param) => console.log("hello, " + param.name);
hello2(person);
// 箭头函数+解构表达式
var hello2 = ([name]) => console.log("hello, " + name);
hello2(person);

5. 对象优化

const person = {
    name: "jack",
    age: 21,
    language: ['java', 'js', 'css']
}
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};
// Object.assign方法的第一个参数是目标对象，后面的参数是源对象
Object.assign(target, source1, source2);
console.log(target);// {a:1,b:2,c:3}

// 声明对象简写
const age = 23;
const name = "张三";
const person1 = {age: age, name: name};
const person2 = {age, name};
console.log(person2);

// 对象的函数属性简写
let person3 = {
    name: "jack",
    // 以前
    eat: function (food) {
        console.log(this.name + "在吃" + food);
    },
    // 箭头函数this不能使用，必须用对象.name
    eat2: food => console.log(this.name + "在吃" + food),
    eat3: food => console.log(person3.name + "在吃" + food)
    //现在
    eat4(food) {
        console.log(this.name + "在吃" + food);
    }
}

6. 对象拓展运算符

//1. 拷贝对象（深拷贝）
let person1 = {name: "Amy", age: 15};
let someone = {...person1};
console.log(someone);
//2. 合并对象
let age = {age: 15};
let name = {name: "Amy"};
let person2 = {...age, ...name};

7. map和reduce

// 数组中新增了map和reduce方法
// map(): 接收一个函数，将原数组中的所有元素用这个函数处理后放入新数组返回
let arr = ["1", "28", "-5", "3"];
arr.map(item => {
    return item * 2;
});
arr = arr.map(item => item * 2);

// reduce()为数组中的每一个元素依次执行回调函数，不包括数组中删除或从未被赋值的元素
// [2,40,-10,6]
// arr.reduce(callbackfn: (previousValue: T, currentValue: T, currentIndex: number, array: T[]) => T, initialValue: T)
/**
 * 1. previousValue (上一次调用回调返回的值， 或者是提供的初始值（initialValue）)
 * 2. currentValue （数组中当前被处理的元素）
 * 3. currentIndex（当前元素在数组中的索引）
 * 4. array（调用reduce的数组）
 */
let result = arr.reduce((a, b) => {
    console.log("上一次处理后： " + a);
    console.log("当前正在处理： " + b);
    return a + b;
})
console.log(result);

2. Promise

1. 以前

//1. 查出当前用户信息
// 2. 按照当前用户的id查出课程
// 3. 按照当前id查出成绩
$.ajax({
    url: "user.json",
    success(data) {
        console.log("查询用户：" + data);
        $.ajax({
            url: `user_core_${data.id}.json`,
            success(data) {
                console.log("查询到课程： " + data);
                $.ajax({
                    url: `core_score_${data.id}.json`,
                    success(data) {
                        console.log("查询到分数：" + data);
                    },
                    error(error) {
                        console.log("出异常了");
                    }
                })
            }
        })
    }
})

2. 现在

// 1. Promise可以封装异步操作
let p = new Promise((resolve, reject) => {
    // 2. 异步操作
    $.ajax({
        url: "user.json",
        success: function (data) {
            console.log("查询用户成功");
            resolve(data);
        },
        error: function (error) {
            reject(error);
        }
    })
});
p.then((obj) => {
    return new Promise((resolve, reject) => {
        $.ajax({
            url: `user_core_${obj.id}`,
            success: function (data) {
                console.log("查询用户课程成功");
                resolve(data);

            },
            error: function (error) {
                reject(error);
            }
        })
    })
}).then((data => {
    console.log("查询到课程： " + data);
    $.ajax({
        url: `core_score_${data.id}.json`,
        success(data) {
            console.log("查询到分数：" + data);
        },
        error(error) {
            console.log("出异常了");
        }
    })
}));

3. 优化

function get(url) {
    return new Promise((resolve, reject) => {
        $.ajax({
            url: url,
            data: data,
            success: function (data) {
                resolve(data);
            },
            error: function (err) {
                reject(err);
            }
        })
    });
}

get("user.json")
  .then((data) => {
      console.log("查询用户成功");
    return get(`core_score_${data.id}.json`)
}).then((data) => {
    console.log("查询用户课程成功");
    return get(`user_core_${data.id}`)
});

3. 模块化

• 模块化就是把代码进行拆分，方便重复利用。类似java中的导包，要使用一个包，必须先导包，而js中没有包的概念，换来的是模块化
• 模块功能主要由两个命令构成， export和 import
  • export命令用于规定模块的对外接口
    • 通常该命令是这样用 export default
    • 如果是export导出，那么导入的时候需要大括号 import {...} from ''
    • 如果是export default导出，那么导入的时候需要大括号 import xx from ''
  • import命令用于导入其他模块提供的功能

import xx from '';