【前端技术】 ES6 介绍及常用语法说明

在这里插入图片描述

😄 19年之后由于某些原因断更了三年,23年重新扬帆起航,推出更多优质博文,希望大家多多支持~
🌷 古之立大事者,不惟有超世之才,亦必有坚忍不拔之志
🎐 个人CSND主页——Micro麦可乐的博客
🐥《Docker实操教程》专栏以最新的Centos版本为基础进行Docker实操教程,入门到实战
🌺《RabbitMQ》本专栏主要介绍使用JAVA开发RabbitMQ的系列教程,从基础知识到项目实战
🌸《设计模式》专栏以实际的生活场景为案例进行讲解,让大家对设计模式有一个更清晰的理解
💕《Jenkins实战》专栏主要介绍Jenkins+Docker+Git+Maven的实战教程,让你快速掌握项目CI/CD,是2024年最新的实战教程
如果文章能够给大家带来一定的帮助!欢迎关注、评论互动~

【前端技术成长之路】 ES6介绍及语法说明

  • ES6介绍
  • 1、变量声明
    • 1.1 let关键字
    • 1.2 const关键字
  • 2、箭头函数
    • 2.1 没有自己的 this 绑定
    • 2.2 没有 arguments 对象
    • 2.3 不能用作构造函数
    • 2.4 没有 prototype 属性
  • 3、模板字符串
  • 4、解构赋值
    • 4.1 数组解构
    • 4.2 对象解构
  • 5、默认参数
  • 6、扩展运算符
    • 6.1 数组展开
    • 6.2 对象展开
    • 6.3 字符串展开
  • 7、模块化
    • 7.1 导出模块
    • 7.2 导入模块
  • 8、Promise
  • 9、生成器函数
  • 总结

ES6介绍

ECMAScript 6(ES6),又称 ECMAScript 2015,是 JavaScript 的一个重要版本,引入了许多新特性,使得开发者能够编写更加简洁、优雅和高效的代码。本文将介绍 ES6 的一些关键特性,并通过代码示例展示其用法。

1、变量声明

ES6 之前,JavaScript 只有 var 用于变量声明。ES6 引入了 letconst,它们提供了块级作用域和不可变的变量。

1.1 let关键字

let关键字用于声明可变的变量,它的作用范围限定在当前的块级作用域内,包括花括号({})内部的任何代码块。在同一个作用域内,不能重复声明同名的let变量。

在以前使用 var 声明变量会存在:越域重复声明变量提升等问题,我们来看看代码演示

跨域问题

// var 越域的问题
if (true) {var x = 10;
}
console.log(x); // 输出 :10,变量 x 泄露到了全局作用域// let 的块级作用域
if (true) {let y = 20;
}
console.log(y); // ReferenceError: y is not defined

重复声明

// var 可以声明多次
// let 只能声明一次
var a = 1
var a = 2
let b = 3
let b = 4
console.log(a) // 2
console.log(b) // 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关键字

const 关键字用于声明常量,它的作用范围也是在当前的块级作用域内,const 声明的变量是不可变的

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

2、箭头函数

学过 java 的小伙伴一定知道 lambda 表达式,与之一样箭头函数提供了一种更简洁的函数定义方式,并且不会绑定自己的 this

// 传统函数
function sum(a, b) {return a + b;
}// 箭头函数
const sum = (a, b) => a + b;console.log(sum(2, 3)); // 5// 只有一个参数
const square = x => x * x;
console.log(square(4)); // 16// 没有参数
const greet = () => 'Hello, World!';
console.log(greet()); // Hello, World!

使用箭头函数需要注意以下几点:

2.1 没有自己的 this 绑定

箭头函数没有自己的 this 绑定,它会捕获其所在上下文的 this 值。对于处理回调函数中的 this 问题非常有用

function Person() {this.age = 0;// 传统函数需要额外绑定 thissetInterval(function growUp() {this.age++;}.bind(this), 1000);
}function Person() {this.age = 0;// 箭头函数自动捕获外部 thissetInterval(() => {this.age++;}, 1000);
}

2.2 没有 arguments 对象

箭头函数没有 arguments 对象,但可以使用 rest 参数(...args)代替

const showArgs = (...args) => {console.log(args);
};showArgs(1, 2, 3); // [1, 2, 3]

2.3 不能用作构造函数

箭头函数不能使用 new 关键字来实例化对象,因为它没有 [[Construct]] 方法

const Foo = () => {};
const bar = new Foo(); // TypeError: Foo is not a constructor

2.4 没有 prototype 属性

箭头函数没有 prototype 属性,因此不能用于定义类的方法。

const Foo = () => {};
console.log(Foo.prototype); // undefined

3、模板字符串

模板字符串使用反引号定义,可以嵌入变量和表达式。使用 ${} 语法,在模板字符串中嵌入表达式或变量

const name = 'John';
const age = 25;// 普通字符串拼接
let info = "你好,我的名字是:【"+name+"】,年龄是:【"+age+"】"
console.log(info);// 模板字符串的写法
let info = `你好,我的名字是:${name},年龄是:${age}`
console.log(info);

4、解构赋值

解构赋值允许从数组或对象中提取值,并赋给变量。

4.1 数组解构

let arr = [1, 2, 3];
//以前获取 通过使用角标  
console.log(arr[0]); // 1const [a, b] = [1, 2];
console.log(a); // 1
console.log(b); // 2

4.2 对象解构

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

5、默认参数

默认参数允许在函数定义时为参数指定默认值,这样可以简化函数的调用,避免出现undefined的情况

function greet(name = 'Guest') {return `Hello, ${name}!`;
}console.log(greet()); // Hello, Guest!
console.log(greet('Alice')); // Hello, Alice!//还可以使用表达式
function multiply(a, b = 2 * a) {return a * b;
}console.log(multiply(5)); // 输出:50
console.log(multiply(5,2)); // 输出:10

6、扩展运算符

展开运算符(...)可以用来展开数组或对象,主要用于将一个可迭代对象(如数组、字符串或类数组对象)展开成多个元素

6.1 数组展开

const arr1 = [1, 2, 3];
const arr2 = [...arr1, 4, 5, 6];
console.log(arr2); // [1, 2, 3, 4, 5, 6]

6.2 对象展开

const obj1 = { a: 1, b: 2 };
const obj2 = { ...obj1, c: 3 };
console.log(obj2); // { a: 1, b: 2, c: 3 }

6.3 字符串展开

const str = 'hello';
const chars = [...str];
console.log(chars); // 输出:['h', 'e', 'l', 'l', 'o']

7、模块化

ES6 模块允许将代码分割成小块,并通过 importexport 进行组织和重用,

7.1 导出模块

使用 export 暴露方法或变量等

// 假设我们有一个名为 math.js 的模块
export function add(a, b) {return a + b;
}export const PI = 3.14;

7.2 导入模块

我们可以使用 import 关键字导入 math.js 模块中的函数和变量

// main.js
import { add, PI } from './math.js';console.log(add(2, 3)); // 5
console.log(PI); // 3.14

8、Promise

Promise 是一种用于处理异步操作的对象,类似Java中的 CompletableFuture。它可以将异步操作封装成一个 Promise 对象,通过 then() 方法来添加回调函数,当异步操作完成时自动执行回调函数。

const promise = new Promise((resolve, reject) => {setTimeout(() => {resolve('Success!');}, 1000);
});promise.then((message) => {console.log(message); // Success!
}).catch((error) => {console.error(error);
});

使用 Promise 对象可以使异步操作的代码更加清晰、简洁,并且可以避免回调地狱的问题。

9、生成器函数

生成器函数使用 function* 语法,可以通过 yield 关键字多次返回值

function* generator() {yield 1;yield 2;yield 3;
}const gen = generator();
console.log(gen.next()); // { value: 1, done: false }
console.log(gen.next().value); // 2
console.log(gen.next().value); // 3

定义了一个生成器函数 myGenerator,它包含三个 yield 表达式。我们通过调用该函数得到一个迭代器对象 generator,每次调用 generator.next() 都会执行一次函数体,并返回一个包含 value 和 done 两个属性的对象

总结

ES6 引入了许多新特性和改进,使 JavaScript 更加现代化和强大。通过使用这些特性,开发者可以编写出更加简洁、高效和可维护的代码。这种变化和改进不仅提高了代码的可读性和可维护性,也使得开发者能够更轻松地实现复杂的功能。通过学习和掌握这些新特性,您将能够更加高效地编写 JavaScript 代码,适应现代 web 开发的需求。

最后希望本文对小伙伴们了解 ES6 及其语法有所帮助~ 欢迎一起评论交流!


在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

使用wheelnav.js构建酷炫的动态导航菜单

目录 前言 一、WheelNav是什么 1、项目地址 2、关于开源协议 3、相关目录介绍 二、如何使用wheelnav.js 1、新建html页面 2、设置style样式 3、创建展示元素实现动态导航 三、参数即方法介绍 1、参数列表 2、运行方法 3、实际成果 四、总结 前言 用户体验永远是一…

玩转盲盒潮流:从0到1搭建小程序平台

玩转盲盒潮流并搭建一个从0到1的小程序平台来创作内容是一个充满挑战但有趣的过程。以下是一个步骤指南,帮助你实现这一目标: 1. 市场调研与定位 了解盲盒市场:研究当前盲盒市场的趋势、消费者喜好和成功案例。确定目标用户:明确…

软件质量保障——三、四

三、黑盒测试 1.黑盒测试概述 1.1 如何理解黑盒测试? 1.2 黑盒测试有什么特点? 1.3 如何实施黑盒测试? 2. 黑盒测试用例设计和生成方法(这里还是要自己找题做) 2.1 等价类划分法 步骤: 1.选择划分准…

BI平台概述

随着数字化浪潮的推进,企业对于数据驱动决策的需求日益增长。纷享销客作为一款领先的CRM平台,一直致力于帮助企业实现销售管理的高效与智能。纷享销客一体化BI智能分析平台作为CRM平台中的重要一环,旨在为企业提供更加全面、深入的数据分析能…

HBuilderX编写APP一、获取token

一、新建项目 二、从onenet获取key.js 1、下载之后的压缩包,解压2、关键就是找到key.js 3、将这个key.js复制到刚才的目录下面去 4、这个key.js文件就是生成token的代码 5、只要调用createCommonToken(params)这个函数,就可以实现生成token了 其中onload…

Java多线程核心工具类

1.Thread类:代表一个线程。你可以通过继承Thread类或实现Runnable接口来创建线程。 2.Executor框架:java.util.concurrent.Executors和java.util.concurrent.Executor接口提供了一种创建和管理线程池的方法,可以减少在创建和销毁线程上的开销…

【TB作品】msp430g2553单片机,OLED,PCF8591,ADC,DAC

硬件 OLED PCF8591 /** OLED* VCC GND* SCL接P2^0* SDA接P2^1*//** PCF8591* VCC GND* SCL接P1^4* SDA接P1^5*//* 板子上按键 P1.3 *//* 单片机ADC输入引脚 P1.1 *//* 说明:将PCF8591的DAC输出接到单片机ADC输入引脚 P1.1,单片机采集电压并显示 */功能…

Docker run 命令常用参数详解

Docker run 命令提供了丰富的参数选项,用于配置容器的各种设置。以下是docker run命令的主要参数详解, 主要参数详解 后台运行与前台交互 -d, --detach: 在后台运行容器,并返回容器ID。-it: 分配一个伪终端(pseudo-TTY&#xff0…

RGB转LAB,HSV

Excel如下 目标 代码(改下两个地址就可以) import pandas as pd import colorspacious import colorsys# 读取Excel文件 df pd.read_excel(未分类output.xlsx)# 定义RGB到LAB和HSV的转换函数 def rgb_to_lab(rgb):lab colorspacious.cspace_convert(r…

Layui:一款强大的前端UI框架

随着互联网技术的快速发展,前端技术也在不断更新和演进。前端工程师们面临着越来越多的挑战,需要在短时间内构建出高质量、高效率的网页应用。为了提高开发效率和降低开发难度,许多前端UI框架应运而生。在这些框架中,Layui凭借其优…

Git-lfs入门使用教程

在备份我的毕设到github私有库的时候,发现git对于单文件大于100MB的会限制上传,一番折腾一下发现了git-lfs [Git LFS(Large File Storage,大文件存储)是 Github 开发的一个Git 的扩展,用于实现 Git 对大文件的支持]。 …

揭秘Linux启动的层层面纱,一文看懂从黑屏到界面的精彩之旅

从按下开机键到Linux系统界面显示,这中间究竟经历了怎样的过程?本文将为您一一揭开Linux启动的神秘面纱,详细剖析每个环节的工作原理,让你从内核出生到系统服务启动,一路见证这个过程的壮阔与精彩。 一、概述 Linux系统的启动过…

【场景题】如何排查CPU偏高的问题

为了解决CPU偏高的问题,我们首先看一下每一个进程的CPU占用情况,使用命令Top 可以看见是进程id为2266的进程里面的java程序,占用了CPU90%使用情况 所以我们需要找到是哪一个代码导致的这样的情况,由于代码是线程执行的&#xff…

测绘GIS和遥感领域比较好的公众号有哪些

测绘GIS和遥感领域,微信公众号作为信息传播和知识分享的重要渠道,为从业者提供了一个快速获取行业动态、技术进展和职业发展机会的平台。分享一些在测绘GIS和遥感领域表现突出的公众号推荐: 1. 慧天地:慧天地是一个知名的测绘公众…

【数据结构】穿梭在二叉树的时间隧道:顺序存储的实现

专栏引入 哈喽大家好,我是野生的编程萌新,首先感谢大家的观看。数据结构的学习者大多有这样的想法:数据结构很重要,一定要学好,但数据结构比较抽象,有些算法理解起来很困难,学的很累。我想让大家…

CDN(Content Delivery Network)内容分发网络原理、组成、访问过程、动静态加速、作用详解

CDN简介 什么是CND CDN(Content Delivery Network)的缩写,是一种利用分布式节点技术,在全球部署服务器,即时地将网站、应用视频、音频等静态或动态资源内容分发到用户所在的最近节点,提高用户访问这些内容…

PDF分页处理:技术与实践

引言 在数字化办公和学习中,PDF文件因其便携性和格式稳定性而广受欢迎。然而,处理大型PDF文件时,我们经常需要将其拆分成单独的页面,以便于管理和分享。本文将探讨如何使用Python编程语言和一些流行的库来实现PDF文件的分页处理。…

管道液位传感器在蒸汽清洗机的应用

管道光电液位传感器采用了先进的光学感应原理,无需机械运动,具有长久的寿命和稳定的性能。与传统的机械式和电容式传感器相比,管道光电液位传感器具有更高的精度和可靠性,解决了机械式传感器容易卡死失效和电容式传感器感度衰减的…

数据结构之初始泛型

找往期文章包括但不限于本期文章中不懂的知识点: 个人主页:我要学编程(ಥ_ಥ)-CSDN博客 所属专栏:数据结构(Java版) 目录 深入了解包装类 包装类的由来 装箱与拆箱 面试题 泛型 泛型的语法与使用…

springboot+elementui健康饮食系统

此系统是springboot健康饮食管理平台 得简化版,适合期末大作业 系统包括 管理员端和用户端 1.用户端注册即可登录到用户端,用户端包括首页轮播图,以及个人中心,个人信息修改,头像修改,后台根据用户信息&am…