沃土前端社区教程 - es6（7）常用技能点

教程使用指南

教程地址： https://github.com/wotu-courses/es2015.git
下载压缩包或运行命令把代码克隆本地
cd es2015
运行 npm i
运行 npm start

如何进行练习

方法一在项目里的src文件内的index.js里面写你要练习的代码
方法二打开chrome浏览器控制台，把代码贴到控制台运行

es6（7）常用知识点

块级作用域

if (true) {
  var a = 3;
  // let命令，用来声明变量。它的用法类似于var，但是所声明的变量，只在let命令所在的代码块内有效
  let b = 4;
}
console.log('a的值是：',a); // 3
console.log(b); // 报错，b只在大括号起作用

常量

// 1）常量不可以改变
const b = 3;
b = 4; // 报错，常量不能重新被赋值

// 2) 声明一个常量对象，它的属性值是可以改变的
const obj = {
    a: 2,
    b: 3
}
obj.a = 100; // 不会报错

字符串的扩展

let userName = '胡儒清';
// 在字符串里任意地方都插入变量 ${userName}
let str = `我的名字叫:${userName}`;
console.log(str);

对象的扩展(属性和方法的简洁表达式)

let userName = '老胡';
let age = 99;
let person = {
    // 属性键值相同的时候可以像下面这样写
    userName,
    age,
    // es6函数的写法
    say() {
        console.log(this.userName);
    }
}
console.log(person);

箭头函数

// 1) 箭头函数
const add = (a, b) => {
    return a + b;
}
// 上面的函数等同于
var add = function(a, b) {
    return a + b;
}

let square = (a) => a * a;
// 等同于
var square = function(a) {
    return a * a;
}

// 使用箭头函数this不发生改变
let obj = {
    init() {
        // this指向了obj
        console.log('this指向了', this);
        setTimeout(function() {
            // this发生了改变，指向了window
            console.log('一般函数时：', this);
        }, 1000);

        setTimeout(() => {
            // 使用了箭头函数，this依旧指向obj
            console.log('使用箭头函数时', this);
        }, 2000);
    }
}
obj.init();

解构：可以理解为结构的分解

// 1）数组解构
var arr = [2,3,10]
let [a,b,c] = [2,3,10];
// 结构后可以直接使用a，b，c的值
console.log(a,b,c);

// 2）对象解构
let person = { userName: "ruqing", age: "100" };
let {userName, age} = person;
console.log(userName,age);

// 3）函数参数是个对象，并且设置了默认值x=2和y=3
const move = ({x=2, y=3}) => {
    return x + y;
}
move({});   // 5
move({x: 3,y: 8});  // 11

// 1) 类名需要大写
class Animal {
    // 实例化对象的时候会执行构造方法
    constructor(name) {
        this.name = name;
    }
    // es6对象的写法
    say() {
        console.log('动物的名字是' + this.name);
    }
}
// 实例化对象
let dog = new Animal('狗');

// 2) 继承父类
class Cat extends Animal{
    constructor(name,color,age) {
        // 调用父类构造器
        super(name);
        this.color = color;
        this.age = age;
    }
    say() {
        console.log('我是一只猫');
    }
}
let cat = new Cat('咖啡猫','红色',2);

模块（输出export 导入import）

// 输出模块export
// 1）module1.js 使用export输出模块
export const a = 2;
export const b = 2;
export const add = (num1,num2) => {
    let sum = num1 + num2;
    console.log(sum);
};

// index.js 使用import 导入模块
// 使用export导出模块，导入模块时变量名必须跟导出的模块变量一致，可以使用as进行重命名
import { a, b, add as newAdd} from './module1'
newAdd(20,30);
// 或者像下面这样，obj包含了所有导出的模块
import * as m1 from './module1.js'
console.log(obj);

// 2）module2.js  使用exprot default导出文件
const community = {
    name: '沃土前端社区',
    people: 50
}
export default community;
// index.js 导入模块 是随意的
import obj from './module2.js'
console.log(obj);

扩展运算符...

// 1) 用数组接收剩余数值,需放在后面
let remain = (a,b,...c) => {
    // a的值为1，b的值为2，c的值为剩下参数组成的数组
    console.log(a,b,c);
}
remain(1,2,3,4,5,6,7);

let obj1 = {
     a: 2,
     b: 3
}
let obj2 = {
      // 把obj1的属性全放进来
      ...obj1,
      // 添加新的属性或者修改obj1已有的属性
      b: 100,
      c: 20
}

promise

let flag = true;
// Promise能把异步操作的结果保存起来，供别人来使用
let checkFlag = new Promise((resolve,reject)=>{
    setTimeout(()=>{
        let data = {
            a: 222,
            b: 333
        }
        if (flag) {
            // 满足条件使用resolve把数据返回
            resolve(data);
        } else {
            reject('error');
        }
    },1000)
})

checkFlag.then((res)=>{
    console.log(res);
}).catch((err)=>{
    console.log(err);
})

async await 异步变同步

// 1）一个简单的例子
function checkFlag() {
    let flag = true;
    return new Promise((resolve,reject)=>{
        setTimeout(()=>{
            let data = {
                a: 222,
                b: 333
            }
            if (flag) {
                // 满足条件使用resolve把数据返回
                resolve(data);
            } else {
                reject('error');
            }
        },1000)
    })
}

async function getResult(){
    // 异步变同步操作
    try {
        let result = await checkFlag();
        console.log(result);
    } catch(err) {
        console.log(err);
    }
}
getResult();

// 一个实际应用的例子
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
</head>
<body>
    <h3>async wait + Promise的例子</h3>
    <script>
        // 应用场景，我们需要先获取验证码，然后通过验证码去获取用户列表
        const obj = {
            async init() {
                try {
                    let url1 = 'http://www.easy-mock.com/mock/59aba85ee0dc66334199c870/wotu/getVCode';
                    // 首先获取验证码
                    const res1 = await this.doAjax(url1,{});
                    document.write('验证码请求结果：',JSON.stringify(res1));
                    // 然后通过验证码获取用户列表
                    let url2 = 'http://www.easy-mock.com/mock/59aba85ee0dc66334199c870/wotu/userList';
                    let data = {
                        verifyCode: res1.verifyCode
                    }
                    const res2 = await this.doAjax(url2, data);
                    document.write('<br/>用户列表请求结果：',JSON.stringify(res2));
                } catch (e) {
                    alert(e);
                }
            },
            // 发送请求
            doAjax(url, data) {
                return new Promise((resove, reject) => {
                    $.ajax({
                        url,
                        data,
                        dataType: 'json',
                        success: (res) => {
                            resove(res);
                        },
                        error: () => {
                            reject('请求失败:getVCode');
                        }
                    })
                });
            }
        }

        obj.init();
    </script>
</body>
</html>

教程使用指南

如何进行练习

es6（7）常用知识点

相关文章：