前端工程化 - 快速通关 - ES6

news2024/12/25 0:07:50

目录

ES6

1.1 let

1.2 const

1.3解构

1.4链判断

1.5参数默认值

1.6箭头函数

1.7模板字符串

1.8Promise

1.9Async 函数

1.10模块化

ES6


●ECMAScript（ES） 是规范、 JavaScript 是 ES 的实现
●ES6 的第一个版本 在 2015 年 6 月发布，正式名称是《ECMAScript 2015 标准》（简称 ES2015）
●ES6 指是 5.1 版以后的 JavaScript 的下一代标准，涵盖了 ES2015、ES2016、ES2017 等等

1.1 let


推荐使用let关键字替代 var关键字声明变量，因为 var存在诸多问题，比如： 

越域

{
    var a = 1;
    let b = 2;
}
console.log(a); // 1
console.log(b); // ReferenceError: b is not defined

重复声明

// var 可以声明多次
// let 只能声明一次
var m = 1
var m = 2
let n = 3
// let n = 4
console.log(m) // 2
console.log(n) // Identifier 'n' has already been declared

变量提升

// var 会变量提升
// let 不存在变量提升
console.log(x); // undefined
var x = 10;
console.log(y); //ReferenceError: y is not defined
let y = 20;

1.2 const

// 1. 声明之后不允许改变
// 2. 一但声明必须初始化，否则会报错
const a = 1;
a = 3; //Uncaught TypeError: Assignment to constant variable.

1.3解构

数组解构

let arr = [1, 2, 3];
//以前我们想获取其中的值，只能通过角标。ES6 可以这样：
const [x, y, z] = arr;// x，y，z 将与 arr 中的每个位置对应来取值
// 然后打印
console.log(x, y, z);

对象解构

const person = {
    name: "jack",
    age: 21,
    language: ['java', 'js', 'css']
}
// 解构表达式获取值，将 person 里面每一个属性和左边对应赋值
const {name, age, language} = person;
// 等价于下面
// const name = person.name;
// const age = person.age;
// const language = person.language;
// 可以分别打印
console.log(name);
console.log(age);
console.log(language);
//扩展：如果想要将 name 的值赋值给其他变量，可以如下,nn 是新的变量名
const {name: nn, age, language} = person;
console.log(nn);
console.log(age);
console.log(language);

1.4链判断

如果读取对象内部的某个属性，往往需要判断一下，属性的上层对象是否存在。
比如，读取message.body.user.firstName这个属性，安全的写法是写成下面这样。

let  message = null;
// 错误的写法
const  firstName = message.body.user.firstName || 'default';

// 正确的写法
const firstName = (message
                   && message.body
                   && message.body.user
                   && message.body.user.firstName) || 'default';
console.log(firstName)

这样的层层判断非常麻烦，因此 ES2020 引入了“链判断运算符”（optional chaining operator）?.，简化上面的写法。

const firstName = message?.body?.user?.firstName || 'default';

1.5参数默认值

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

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

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

1.6箭头函数

//以前声明一个方法
// var print = function (obj) {
// console.log(obj);
// }
// 可以简写为：
let print = obj => console.log(obj);
// 测试调用
print(100);
// 两个参数的情况：
let sum = function (a, b) {
    return a + b;
}
// 简写为：
//当只有一行语句，并且需要返回结果时，可以省略 {} , 结果会自动返回。
let sum2 = (a, b) => a + b;
//测试调用
console.log(sum2(10, 10));//20
// 代码不止一行，可以用`{}`括起来
let sum3 = (a, b) => {
    c = a + b;
    return c;
};
//测试调用
console.log(sum3(10, 20));//30

1.7模板字符串

let info = "你好，我的名字是：【"+name+"】，年龄是：【"+age+"】，邮箱是：【】"
console.log(info);

1.8Promise
 

代表 异步对象，类似Java中的 CompletableFuture
Promise 是现代 JavaScript 中异步编程的基础，是一个由异步函数返回的可以向我们指示当前操作所处的状态的对象。在 Promise 返回给调用者的时候，操作往往还没有完成，但 Promise 对象可以让我们操作最终完成时对其进行处理（无论成功还是失败）
fetch 是浏览器支持从远程获取数据的一个函数，这个函数返回的就是 Promise 对象

const fetchPromise = fetch(
  "https://mdn.github.io/learning-area/javascript/apis/fetching-data/can-store/products.json"
);

console.log(fetchPromise);

fetchPromise.then((response) => {
  console.log(`已收到响应：${response.status}`);
});

console.log("已发送请求……");

fetch api

fetch 是浏览器支持从远程获取数据的一个函数，这个函数返回的就是 Promise 对象

const fetchPromise = fetch(
  "https://mdn.github.io/learning-area/javascript/apis/fetching-data/can-store/products.json",
);

fetchPromise.then((response) => {
  const jsonPromise = response.json();
  jsonPromise.then((json) => {
    console.log(json[0].name);
  });
});

通过 fetch() API 得到一个 Response 对象；
●response.status： 读取响应状态码
●response.json()：读取响应体json数据；（这也是个异步对象）

const fetchPromise = fetch(
  "https://mdn.github.io/learning-area/javascript/apis/fetching-data/can-store/products.json",
);

fetchPromise.then((response) => {
  const jsonPromise = response.json();
  jsonPromise.then((json) => {
    console.log(json[0].name);
  });
});

promise状态


首先，Promise 有三种状态：

  • ●待定（pending）：初始状态，既没有被兑现，也没有被拒绝。这是调用 fetch() 返回 Promise 时的状态，此时请求还在进行中。
  • ●已兑现（fulfilled）：意味着操作成功完成。当 Promise 完成时，它的 then() 处理函数被调用。
  • ●已拒绝（rejected）：意味着操作失败。当一个 Promise 失败时，它的 catch() 处理函数被调用。


Promise对象

const promise = new Promise((resolve, reject) => {
// 执行异步操作
if (/* 异步操作成功 */) {
      resolve(value);// 调用 resolve，代表 Promise 将返回成功的结果
    } else {
      reject(error);// 调用 reject，代表 Promise 会返回失败结果
    }
});

示例

    let get = function (url, data) {
        return new Promise((resolve, reject) => {
            $.ajax({
                url: url,
                type: "GET",
                data: data,
                success(result) {
                    resolve(result);
                },
                error(error) {
                    reject(error);
                }
            });
        })
    }

1.9Async 函数
 

async function 声明创建一个绑定到给定名称的新异步函数。函数体内允许使用 await 关键字，这使得我们可以更简洁地编写基于 promise 的异步代码，并且避免了显式地配置 promise 链的需要。

  • ●async 函数是使用async关键字声明的函数。async 函数是 AsyncFunction 构造函数的实例，并且其中允许使用 await 关键字。
  • ●async 和 await 关键字让我们可以用一种更简洁的方式写出基于 Promise 的异步行为，而无需刻意地链式调用 promise。
  • ●async 函数 返回的还是 Promise对象
async function myFunction() {
  // 这是一个异步函数

}

在异步函数中，你可以在调用一个返回 Promise 的函数之前使用 await 关键字。这使得代码在该点上等待，直到 Promise 被完成，这时 Promise 的响应被当作返回值，或者被拒绝的响应被作为错误抛出

async function fetchProducts() {
  try {
    // 在这一行之后，我们的函数将等待 `fetch()` 调用完成
    // 调用 `fetch()` 将返回一个“响应”或抛出一个错误
    const response = await fetch(
      "https://mdn.github.io/learning-area/javascript/apis/fetching-data/can-store/products.json",
    );
    if (!response.ok) {
      throw new Error(`HTTP 请求错误：${response.status}`);
    }
    // 在这一行之后，我们的函数将等待 `response.json()` 的调用完成
    // `response.json()` 调用将返回 JSON 对象或抛出一个错误
    const json = await response.json();
    console.log(json[0].name);
  } catch (error) {
    console.error(`无法获取产品列表：${error}`);
  }
}

fetchProducts();

1.10模块化

将 JavaScript 程序拆分为可按需导入的单独模块的机制。Node.js 已经提供这个能力很长时间了，还有很多的 JavaScript 库和框架已经开始了模块的使用（例如，CommonJS 和基于 AMD 的其他模块系统 如 RequireJS，以及最新的 Webpack 和 Babel）。
好消息是，最新的浏览器开始原生支持模块功能了。

工程架构

index.html

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

 user.js

const  user = {
    username: "张三",
    age: 18
}

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


export {user,isAdult}

// Java 怎么模块化；
// 1、 druid.jar
// 2、import 导入类

// JS 模块化；
// 1、 xxx.js
// 2、 xxx.js 暴露功能；
// 3、import 导入 xxx.js 的功能
//xxx.js 暴露的功能，别人才能导入

main.js

// 所有的功能不用写在一个JS中
import {user,isAdult} from './libs/user.js'


alert("当前用户："+user.username)

isAdult(user.age);

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1676655.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

【C语言习题】12.扫雷游戏

【C语言习题】12.扫雷游戏

文章目录 1.扫雷游戏分析和设计1.1 扫雷游戏的功能说明1.2游戏界面&#xff1a;1.3游戏的分析和设计1.2.1 数据结构的分析1.2.2 ⽂件结构设计 2.扫雷游戏的代码实现3.代码讲解 1.扫雷游戏分析和设计 1.1 扫雷游戏的功能说明 使用控制台实现经典的扫雷游戏游戏可以通过菜单实现…
阅读更多...
机器学习案例：加州房产价格（四）

机器学习案例：加州房产价格（四）

参考链接&#xff1a;https://hands1ml.apachecn.org/2/#_12 数据探索和可视化、发现规律 通过之前的工作&#xff0c;你只是快速查看了数据&#xff0c;对要处理的数据有了整体了解&#xff0c;现在的目标是更深的探索数据。 首先&#xff0c;保证你将测试集放在了一旁&…
阅读更多...
特征模态分解(FMD)：一种小众而又新颖的分解方法

特征模态分解(FMD)：一种小众而又新颖的分解方法

​ 声明&#xff1a;文章是从本人公众号中复制而来&#xff0c;因此&#xff0c;想最新最快了解各类智能优化算法及其改进的朋友&#xff0c;可关注我的公众号&#xff1a;强盛机器学习&#xff0c;不定期会有很多免费代码分享~ 今天为大家介绍一个小众而又新颖的信号分…
阅读更多...
HyperLogLog的使用做UV统计

HyperLogLog的使用做UV统计

使用Jedis连接Redis并操作HyperLogLog import redis.clients.jedis.Jedis;public class RedisHyperLogLogExample {public static void main(String[] args) {// 连接到本地的Redis服务Jedis jedis new Jedis("localhost", 6379);String hyperLogLogKey "hll…
阅读更多...
智慧安防系统：构建更安全的社区环境

智慧安防系统：构建更安全的社区环境

随着科技的不断进步&#xff0c;人们的生活质量得到了显著提高。然而&#xff0c;与此同时&#xff0c;社会治安问题也日益凸显。为了维护社会的和谐稳定&#xff0c;提高人们的生活安全感&#xff0c;智慧安防系统应运而生。本文将为您详细介绍智慧安防系统的项目背景、需求分…
阅读更多...
默认成员函数：析构、深浅拷贝

默认成员函数：析构、深浅拷贝

析构函数 析构函数&#xff1a;与构造函数功能相反&#xff0c;析构函数不是完成对对象本身的销毁&#xff0c;局部对象销毁工作是由编译器完成的。而对象在销毁时会自动调用析构函数&#xff0c;完成对象中资源的清理工作。 特性 析构函数名时在类名前面加上字符~ class D…
阅读更多...
Python 全栈体系【四阶】（四十三）

Python 全栈体系【四阶】（四十三）

第五章 深度学习 九、图像分割 3. 常用模型 3.4 DeepLab 系列 3.4.1 DeepLab v1(2015) 3.4.1.1 概述 图像分割和图像分类不一样&#xff0c;要对图像每个像素进行精确分类。在使用CNN对图像进行卷积、池化过程中&#xff0c;会导致特征图尺寸大幅度下降、分辨率降低&…
阅读更多...
旧手机-基于Termux配置服务器（不用拿去换钢盆了）

旧手机-基于Termux配置服务器（不用拿去换钢盆了）

Hi&#xff0c;大家好&#xff0c;我是抢老婆酸奶的小肥仔。 大家用手机这么多年了&#xff0c;手上或多或少都有一两个被替换下来的旧手机&#xff0c;也不用拿去换啥钢盆了&#xff0c;使用Termux可以将旧手机改造成一个服务器。 不多说&#xff0c;直接开干。 1、安装app…
阅读更多...
Java应用程序的本地内存跟踪分析

Java应用程序的本地内存跟踪分析

本文将讨论本机内存跟踪 (NMT)&#xff0c;我们可以使用它来隔离在 VM 级别增长的任何异常内存。 1.什么是本机内存&#xff1f; 本机内存是指计算机系统上运行的应用程序或程序可直接访问的内存空间。它是程序在执行期间存储和操作数据的内存区域。本机内存不同于托管内存&a…
阅读更多...
单调栈练习

单调栈练习

最大矩形面积 如果栈为空&#xff0c;或者新的元素是大于栈顶元素的&#xff0c;那么新来的元素不会破坏栈的单调性&#xff0c;那么就把这个柱子入栈。 特别注意&#xff1a;这里的s.empty()和s.top().height < a不能调换顺序&#xff0c;包括后面的判断也要先判断栈是否为…
阅读更多...
分析 vs2019 cpp20 规范的 STL 库模板 function ，源码注释并探讨几个问题

分析 vs2019 cpp20 规范的 STL 库模板 function ，源码注释并探讨几个问题

&#xff08;1 探讨一&#xff09;第一个尝试弄清的问题是父类模板与子类模板的模板参数的对应关系&#xff0c;如下图&#xff1a; 我们要弄清的问题是创建 function 对象时&#xff0c;传递的模板参数 _Fty , 传递到其父类 _Func_class 中时 &#xff0c;父类的模板参数 _Ret…
阅读更多...
QT状态机4-使用并行状态来避免组合爆炸

QT状态机4-使用并行状态来避免组合爆炸

#include "MainWindow.h" #include "ui_MainWindow.h"MainWindow::MainWindow(QWidget *parent):
阅读更多...
基于EKF扩展卡尔曼滤波的一阶环形倒立摆控制系统simulink建模与仿真

基于EKF扩展卡尔曼滤波的一阶环形倒立摆控制系统simulink建模与仿真

目录 1.课题概述 2.系统仿真结果 3.核心程序与模型 4.系统原理简介 5.完整工程文件 1.课题概述 基于EKF扩展卡尔曼滤波的一阶环形倒立摆控制系统simulink建模与仿真。基于扩展卡尔曼滤波&#xff08;Extended Kalman Filter, EKF&#xff09;的一阶环形倒立摆控制系统&…
阅读更多...
分布式搜索-elaticsearch基础 安装es

分布式搜索-elaticsearch基础 安装es

这里是在虚拟机的Linux系统里安装es的教程: 1.创建网络 在Finashell终端输入指令 docker network create es-net 2.将es.tar安装包放入tmp的目录下 输入指令加载镜像&#xff1a;docker load -i es.tar 3.再运行docker 命令 docker run -d \--name es \-e "ES_JAVA_O…
阅读更多...
NVM安装及VUE创建项目的N种方式

NVM安装及VUE创建项目的N种方式

VUE 参考官网&#xff1a;https://cli.vuejs.org/zh/guide/ NVM安装 我们开发过程中常常遇到nodejs版本不适配的问题&#xff0c;需要切换到不同版本的nodejs&#xff0c;nodejs卸载安装麻烦&#xff0c;这就需要用到nvm了。 nvm 全名 node.js version management 顾名思义是…
阅读更多...
基于SVPWM的飞轮控制系统的simulink建模与仿真

基于SVPWM的飞轮控制系统的simulink建模与仿真

目录 1.课题概述 2.系统仿真结果 3.核心程序与模型 4.系统原理简介 5.完整工程文件 1.课题概述 基于SVPWM的飞轮控制系统的simulink建模与仿真。SVPWM的核心思想是将逆变器输出的三相电压矢量在两相静止坐标系&#xff08;αβ坐标系&#xff09;中表示&#xff0c;通过控…
阅读更多...
苹果智能戒指新专利，用于与VR头显或Vision Pro配合使用

苹果智能戒指新专利，用于与VR头显或Vision Pro配合使用

近日&#xff0c;美国专利商标局向苹果公司授予了一项新专利&#xff0c;该专利涉及一种可扩展的智能戒指配件。最新的专利指出&#xff0c;该配件专门用于与VR头显或Vision Pro配合使用&#xff0c;这比戴VR手套更准确&#xff0c;用户可以根据应用场景佩戴一个或多个戒指。 …
阅读更多...
一本书打通SLAM在智能汽车/自动驾驶领域应用

一本书打通SLAM在智能汽车/自动驾驶领域应用

自动驾驶技术已成为当今数字化时代汽车行业的热点话题之一。随着技术的不断成熟&#xff0c;越来越多的车辆采用激光SLAM&#xff08;即时定位与地图构建&#xff09;和视觉SLAM技术&#xff0c;实现更高层次的智能网联汽车。SLAM技术在智能网联汽车中的应用是非常重要的&#…
阅读更多...
数据结构——01-抽奖数人-链表-实验题目与解答

数据结构——01-抽奖数人-链表-实验题目与解答

数据结构抽奖数人链表实验题目与解答 一、**实验题目** 抽奖游戏&#xff1a; n个人围成一圈&#xff0c;由第一个人开始&#xff0c;依次报数&#xff0c;数到第m人&#xff0c;便抽出来作为中奖人&#xff0c;然后从他的下一个人数起&#xff0c;数到第m人&#xff0c;再抽…
阅读更多...
免费思维13招之十一：利润型思维

免费思维13招之十一：利润型思维

免费思维13招之十一：利润型思维 免费思维的另一大战略思维——利润型思维。 什么是利润型思维呢？就是用后期的利润来支付现在的成本。也就是“花未来的钱，办现在的事”。 我们在销售自己的产品时候，最容易犯的一个件事，就是降价，我们先来看一个案例： 前几年，有一个卖…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023