前端工程化：ES6特性-EW帮帮网

本文为个人学习笔记整理，仅供交流参考，非专业教学资料，内容请自行甄别

文章目录

一、let与var
二、解构
三、链判断
四、参数默认值
五、箭头函数
六、模板字符串
七、异步操作
八、Async
九、Await
十、模块化

一、let与var

let与var是定义变量的两种方式。一般推荐使用前者，主要是考虑到以下的这些因素：

1.1、越狱问题

{
    var a = 10;
    let b = 20;
}
console.log(a);
console.log(b);

这段代码的运行结果：
在这里插入图片描述
a和b的作用域都应该是在大括号中的，而使用var定义的a变量，作用域超出了大括号。

1.2、变量的重复声明

var a = 1;
var a = 2;
var a = 3;
console.log(a)

这段代码的运行结果，前两次赋值的a被覆盖了。
在这里插入图片描述

// 报错
let b = 4;
let b = 5;
console.log(b)

这段代码的运行结果，let声明的同一个变量不能重复赋值
在这里插入图片描述

1.3、变量提升问题

console.log(a);
var a = 10;

这段代码的运行结果，打印出的a为空：
在这里插入图片描述

console.log(b);
let b = 2;

这段代码的运行结果，报错，因为使用let声明的变量，在打印时还没有进行赋值操作
在这里插入图片描述

二、解构

解构分为数组解构，对象解构和方法解构

2.1、数组解构

let arr = [1,2,3];

//如果需要获取数组中的某一个元素，常规写法
console.log(arr[0]);

//解构
let [x,y,z] = arr;
console.log(x)
console.log(y)
console.log(z)

2.2、对象解构

let person = {
    name:"zhangsan",
    age:18,
    email:"2458677367@gmail.com"
}

//获取对象中的某个属性，常规写法
console.log(person.name)
console.log(person.age)
console.log(person.email)

//将对象解构
let {name,age}=person;
console.log(name)
console.log(age)

2.3、方法解构

//方法解构
function test({name,age}){
    console.log(name)
    console.log(age)
}

//传入对象
test(person)

三、链判断

我定义一个这样的对象：

let message = {
    body:{
        user:{
            name:'John',
        }
    }
};

常规判空的写法，如果对象结构层级复杂，那么判空相对也会很复杂

let result = (message && message.body && message.body.user && message.body.user.name) || "default";
console.log(result)

es6的链判断：

let result0 = message?.body?.user?.name || "default";
console.log(result0);

四、参数默认值

假设我定义了一个方法，需要接收a和b两个参数，但是在调用时只传入了一个参数：

function test(a,b){
    // b = b || 1
    return a + b;
}

console.log(test(1));

会报错，因为1需要和空值做运算。
在这里插入图片描述
传统的给参数默认值，可以是：

function test(a,b){
    b = b || 1
    return a + b;
}

而es6规范，支持在函数的参数定义上，给予默认值：

function test1(a,b = 5){
    return a + b;
}

console.log(test1(1));

在这里插入图片描述
如果用户传递了值，则按照用户传递的为准：

function test1(a,b = 5){
    return a + b;
}

console.log(test1(1,10));

在这里插入图片描述
注意，默认值只能给函数中的最后一个参数设置。

五、箭头函数

箭头函数就相当于JAVA中的lambda表达式，是函数式编程的体现：

//箭头函数
//传统做法
function print(arg){
    console.log(arg);
}

print(2);

//箭头函数
let print1 = arg => console.log(arg);
print1(3);

六、模板字符串

如果需要进行字符串动态拼接，传统方式：

let arg1 = "1926";
let arg2 = "1848";
let info = "测试参数1:["+arg1+"],测试参数2:["+arg2+"]"

console.log(info);

采用es6的模板字符串，需要将""换成``，并且使用${}的方式取值。

let info1 = `测试参数1:[${arg1}],测试参数2:[${arg2}]`
console.log(info1);

七、异步操作

在es6中，promise代表异步操作，并且封装了异步操作的结果：

//promise
//是js中的异步操作
console.log("start")
let promise = fetch("https://jsonplaceholder.typicode.com/posts/1")
//无需等待上一步操作的结果
console.log("finish")


//promise操作成功之后
promise.then(success=>{
    console.log("success");
});
//promise操作失败之后
promise.catch(err=>{
    console.log("fail:" + err);
});

在这里插入图片描述

八、Async

async也是将函数转换为异步的一种方式，如果需要将某个函数进行异步处理，可以使用自己封装promise的方式：

// 异步方式1
function test2(arg0){
    return new Promise((resolve,reject)=>{
        if (arg0 % 2 === 0){
            resolve(arg0)
        }else {
            reject("arg0不是偶数")
        }
    })
}

//获取promise正确与错误的结果
test2(100).then(data=>console.log(data)).catch(error=>console.log(error));

也可以直接在function前加入async关键字，被async关键字修饰的function，返回的依旧是一个promise对象。在处理异常时，最好的方式是直接使用throw new Error关键字进行抛出，否则async并不知道是then还是catch接收到的异常。

//异步方式2 async
async function test3(arg0){
    if (arg0 % 2 === 0){
        return arg0
    }else {
        // return "arg0不是偶数"
        throw new Error("arg0不是偶数")
    }
}

//如果使用async 出现了异常但是没有抛出，async并不知道是then还是catch接收到的
test3(101).then(data=>console.log("then接收到" + data)).catch(error=>console.log("catch接收到" + error));

九、Await

await是异步转同步的一种方式。还是以之前的fetch异步获取数据为例，首先fetch得到的是一个promise对象，需要通过then，catch进行处理。在将结果使用.json进行转换时，得到的又是另一个promise对象，依旧要进行then，catch的处理。

//读取网页数据案例，两个异步操作
function getFile() {
    let urlResult = fetch("https://jsonplaceholder.typicode.com/posts/1");
    urlResult.then((res) => {
        let urlResJson = res.json();
        urlResJson.then((res) => {
            console.log(res)
        })
    }).catch((err) => {
        console.log(err)
    })
}

getFile()

而使用await关键字，则是将promise的异步操作转为同步：

async function getFile1() {
    let urlResult = await fetch("https://jsonplaceholder.typicode.com/posts/1");
    let urlResJson = await urlResult.json();
    console.log(urlResJson)
}

getFile1()

在这里插入图片描述

十、模块化

如果一个js文件，需要导入另一个js文件中的内容，可以通过import和export关键字实现：
user.js

const user = {
    username :"zhangsan",
    age:18
}


const isAdult = (age) =>{
    if (age > 18){
        console.log("成年人")
    }else {
        console.log("未成年人")
    }
}


//导出用户实体和方法
export {
    user,
    isAdult
}

main.js

import {
    user,
    isAdult
} from "./user.js";

isAdult(user.age)

如果在html中引入，则需要加上type="module"

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试模块化</title>
    <script src="lib/module/main.js" type="module"></script>
</head>

前端工程化：ES6特性