前端工程化:ES6特性

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

文章目录


一、let与var

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

1.1、越狱问题

javascript 复制代码
{
    var a = 10;
    let b = 20;
}
console.log(a);
console.log(b);

这段代码的运行结果:

a和b的作用域都应该是在大括号中的,而使用var定义的a变量,作用域超出了大括号。

1.2、变量的重复声明

javascript 复制代码
var a = 1;
var a = 2;
var a = 3;
console.log(a)

这段代码的运行结果,前两次赋值的a被覆盖了。

javascript 复制代码
// 报错
let b = 4;
let b = 5;
console.log(b)

这段代码的运行结果,let声明的同一个变量不能重复赋值

1.3、变量提升问题

javascript 复制代码
console.log(a);
var a = 10;

这段代码的运行结果,打印出的a为空:

javascript 复制代码
console.log(b);
let b = 2;

这段代码的运行结果,报错,因为使用let声明的变量,在打印时还没有进行赋值操作

二、解构

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

2.1、数组解构

javascript 复制代码
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、对象解构

javascript 复制代码
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、方法解构

javascript 复制代码
//方法解构
function test({name,age}){
    console.log(name)
    console.log(age)
}

//传入对象
test(person)

三、链判断

我定义一个这样的对象:

javascript 复制代码
let message = {
    body:{
        user:{
            name:'John',
        }
    }
};

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

javascript 复制代码
let result = (message && message.body && message.body.user && message.body.user.name) || "default";
console.log(result)

es6的链判断:

javascript 复制代码
let result0 = message?.body?.user?.name || "default";
console.log(result0);

四、参数默认值

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

javascript 复制代码
function test(a,b){
    // b = b || 1
    return a + b;
}

console.log(test(1));

会报错,因为1需要和空值做运算。

传统的给参数默认值,可以是:

javascript 复制代码
function test(a,b){
    b = b || 1
    return a + b;
}

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

javascript 复制代码
function test1(a,b = 5){
    return a + b;
}

console.log(test1(1));

如果用户传递了值,则按照用户传递的为准:

javascript 复制代码
function test1(a,b = 5){
    return a + b;
}

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

注意,默认值只能给函数中的最后一个参数设置。

五、箭头函数

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

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

print(2);

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

六、模板字符串

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

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

console.log(info);

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

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

七、异步操作

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

javascript 复制代码
//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的方式:

javascript 复制代码
// 异步方式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接收到的异常。

javascript 复制代码
//异步方式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的处理。

javascript 复制代码
//读取网页数据案例,两个异步操作
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的异步操作转为同步:

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

getFile1()

十、模块化

如果一个js文件,需要导入另一个js文件中的内容,可以通过importexport关键字实现:

user.js

javascript 复制代码
const user = {
    username :"zhangsan",
    age:18
}


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


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

main.js

javascript 复制代码
import {
    user,
    isAdult
} from "./user.js";

isAdult(user.age)

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

javascript 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试模块化</title>
    <script src="lib/module/main.js" type="module"></script>
</head>
相关推荐
典学长编程几秒前
前端开发(HTML,CSS,VUE,JS)从入门到精通!第五天(jQuery函数库)
javascript·css·ajax·html·jquery
野区小女王5 分钟前
react调用接口渲染数据时,这些表格里的数据是被禁选的
前端·react.js·前端框架
尝尝你的优乐美22 分钟前
原来前端二进制数组有这么多门道
前端·javascript·面试
前端_yu小白24 分钟前
Vue2实现docx,xlsx,pptx预览
开发语言·javascript·ecmascript
金金金__40 分钟前
事件循环-原理篇
javascript·浏览器
CF14年老兵40 分钟前
🔥 2025 年开发者必试的 10 款 AI 工具 🚀
前端·后端·trae
张元清1 小时前
解密苹果最新 Liquid Glass 效果:如何用代码重现 iOS 设计系统的视觉魔法
前端·css·面试
CF14年老兵1 小时前
2025 年 React 在 Web 开发中的核心地位:优势、应用场景与顶级案例
javascript·react.js·redux
还是大剑师兰特1 小时前
Javascript面试题及详细答案150道之(046-060)
javascript·大剑师·js面试题
Struggler2811 小时前
让ai更加精准的理解你的提示词
前端