当前位置: 首页 > news >正文

ES6 新特性

🎄欢迎来到@边境矢梦°的csdn博文🎄

 🎄本文主要梳理前端技术的JavaScript的知识点ES6 新特性文件上传下载🎄


🌈我是边境矢梦°,一个正在为秋招和算法竞赛做准备的学生🌈
🎆喜欢的朋友可以关注一下🫰🫰🫰,下次更新不迷路🎆

 Ps: 月亮越亮说明知识点越重要 (重要性或者难度越大)🌑🌒🌓🌔🌕

在这里插入图片描述

 

目录

ES6 新特性的介绍:✨

🎈ES6是什么

段落1:let声明变量 📝

段落2:const声明常量/只读变量 📝

段落3:解构赋值 📝

🌰数组结构

🌰对象结构

段落4:模板字符串 📝

段落5:箭头函数 📝

📌总结 : ​编辑


 

ES6 新特性的介绍:✨

这是每个前端开发者都应该掌握的技能。ES6是JavaScript的一个重要的版本升级,它带来了许多新特性和语法糖,让我们的代码更加简洁高效。无论你是新手还是有经验的开发者,掌握ES6都会让你的编码变得更加愉快和高效。那么,让我们开始吧!💪

🎈ES6是什么

1. ECMAScript 6.0( 以下简称 ES6) JavaScript 语言的下一代标准, 2015 6 月发布。
2. ES6 设计目标:达到 JavaScript 语言可以用来编写复杂的大型程序,成为企业级开发语
3. ECMAScript JavaScript 的关系: ECMAScript JavaScript 的规范 / 规则, JavaScript
ECMAScript 的一种实现

段落1:let声明变量 📝

ES6引入了let关键字,用于声明块级作用域的变量。相比于以前的var关键字,let在作用域上更加严格,避免了变量提升的问题。另外,使用let声明的变量可以被重新赋值,对于需要频繁变动的变量来说非常实用。😊

// let 细节 1
// (1) let 声明的变量, 在代码块中,则作用域在代码块中
// (2) var 声明的变量, 在代码块中,作用域没有限制
{
var name = "边境矢梦";
let job = "java 工程师";
console.log("name=", name);
console.log("job=", job);
}
console.log("name=", name);
//console.log("job=", job);//job is not defined// let 细节 2
// 1. var 可以声明多次
// 2. let 只能声明一次
var num1 = 100;
var num1 = 200;
console.log(num1);
let num2 = 600;
//Syntax => 语法
//let num2 = 900;//Uncaught SyntaxError: redeclaration of let num2
console.log(num2);
// let 细节 3
// 1. let 不存在变量提升
// 2. var 存在变量提升
console.log("x=", x);//undefined
var x = "tom";
//can't access lexical declaration 'z'console.log("z=", z);
let z = "mary";

通过这种方式,我们可以避免变量冲突和覆盖,更加灵活地控制变量的作用域。🌟


段落2:const声明常量/只读变量 📝

除了用于声明变量,ES6还引入了一个新的关键字const,用于声明常量或者只读变量。与使用let声明的变量不同,const声明的变量是不能被重新赋值的,一旦声明就不能被改变。const关键字在开发中常用于对于不可变的值进行定义,使我们的代码更加健壮和可维护。🔒

1. 常量在定义时,需要赋值
2. 常量赋值后不能修改

让我们看一个例子:

const PI = 3.14;
PI = 3.14159; // 尝试修改常量,会报错
console.log(PI); // 输出 3.14

在上面的代码中,我们使用const声明了一个常量PI,并尝试修改其值。由于常量不可被重新赋值,所以当我们在第二行进行赋值操作时会报错。这种机制保证了我们定义的常量不会被无意间修改,提高了代码的可读性和稳定性。🔐


段落3:解构赋值 📝

ES6的解构赋值是一种快捷的方式,可以方便地从数组或对象中提取值并赋给变量。这个特性对于处理复杂的数据结构非常有帮助,让我们的代码更加简洁易读。🔍

1. 解构赋值是对 赋值运算符的扩展
2. 是一种针对 数组或者对象 进行模式匹配,然后对其中的变量进行赋值
3. 主要有两种形式: 数组解构和对象解构

🌰数组结构

细节 : 📌

let arr = [1, 2, 3];
//如果要看某个变量的类型
console.log("arr=>", arr);
//数组解构[取出元素]
//1.传统
let x = arr[0], y = arr[1], z = arr[2];
console.log(x, y, z);
//2. ES6 风格
let [a, b, c] = arr;
console.log("==================================");
console.log(a, b, c);
let [num1, num2, num3] = [100, 200, 300];
console.log(num1, num2, num3);

🌰对象结构

细节说明
1, 对象解构时,let{name, age}中的name和 age名称需要和对象属性名保持

2, 也可解构对象部分属性,比如 let{age}

3, 还有其它的形式,比如方法上使用对象解构

ES6对象解构

1.把monster对象的属性,赋值给{name , age}

2. {name , age}的取名name 和 age要和monster对象的属性名保持一致

3.使用 {} 包括,不要使用 [ ]

4. {name , age}顺序是无所谓

让我们看一个例子:

const person = {name: '小红',age: 18,city: '上海'
};const { name, age, city } = person;
console.log(name); // 输出 '小红'
console.log(age); // 输出 18
console.log(city); // 输出 '上海'

在上面的代码中,我们通过解构赋值从person对象中提取了name、age和city的值,并分别赋给了对应的变量。这样我们就能轻松地访问和使用这些值,省去了使用冗长的对象属性访问的步骤。这种语法糖使我们的代码更加精简和可读。🪄


段落4:模板字符串 📝

在ES6之前,我们使用字符串拼接来组合字符串和变量,非常繁琐。而ES6引入了模板字符串,使得字符串的拼接更加简单和直观。使用模板字符串,我们可以在字符串中嵌入变量,只需用${}包裹变量即可。🎉

让我们看一个例子:

const name = '小红';
const age = 18;const greeting = `大家好,我是${name},今年${age}岁了。`;
console.log(greeting); // 输出 '大家好,我是小红,今年18岁了。'

在上面的代码中,我们使用模板字符串创建了一个包含变量的字符串greeting。通过使用${}包裹变量,我们可以方便地将变量嵌入到字符串中,使代码更加简洁和可读性更高。这种语法糖让我们拼接字符串的过程更加愉快!🎈

细节 : 📌

//1、字符串,换行会原生输出
let str1 = `for(int i = 0;i < 10;i++){
System.out.println("i="+i);
}`;
console.log("str1=", str1);
//2. 字符串插入变量和表达式。变量名写在 ${} 中,${} 中可以放入 JavaScript 表达式。
let name = "边境矢梦";
//老师解读
//(1) 当解析 ${name}, 就找最近的 name 遍历, 进行替换
//(2) 然后可以得到最后解析的字符串
let str2 = `博主=${name}`;
let str3 = `1+2=${1 + 2}`;
let n1 = 80;
let n2 = 20;
let str4 = `${n1}+${n2}=${n1 + n2}`;
console.log("str2=", str2);
console.log("str3=", str3);
console.log("str4=", str4);
//3. 字符串中调用函数
function sayHi(name) {
return "hi " + name;
}
let name2 = "tom";
let str5 = `sayHi() 返回的结果是=${sayHi('jack')}`;
let str6 = `sayHi() 返回的结果是=${sayHi(name2)}`;
console.log("str5=", str5);
console.log("str6=", str6);

段落5:箭头函数 📝

ES6中的箭头函数是一种更简洁的函数声明方式,提供了更短的语法。它不仅让我们的代码看起来更加简洁,还改变了this的指向,解决了传统函数中this指向问题。箭头函数通常被用于回调函数、迭代器和简单的函数定义。💫

让我们看一个例子:

const numbers = [1, 2, 3, 4, 5];const doubledNumbers = numbers.map((num) => num * 2);
console.log(doubledNumbers); // 输出 [2, 4, 6, 8, 10]

在上面的代码中,我们使用箭头函数作为map方法的参数来对数组中的每个元素进行处理,将其乘以2。通过简洁的语法,我们可以更方便地定义匿名函数,使得代码更加紧凑和可读性更高。这种函数的声明方式让我们的开发变得更加高效和灵活!🚀


📌总结 : 箭头函数

希望通过本文的介绍,你对ES6的基本特性有了更深刻的了解。记住,掌握这些语法糖和新特性将为你的开发之路带来巨大的便利和乐趣。为了更好地适应现代Web开发的需求,不断学习和探索是非常重要的。感谢大家的阅读,希望本文能对你有所帮助!如果你有任何问题或者更多的建议,欢迎在评论区留言,我会尽快回复。再见!👋

边境矢梦°_Java,数据结构与算法,数据库-CSDN博客icon-default.png?t=N6B9https://blog.csdn.net/dandelionl_?type=blog

相关文章:

ES6 新特性

&#x1f384;欢迎来到边境矢梦的csdn博文&#x1f384; &#x1f384;本文主要梳理前端技术的JavaScript的知识点ES6 新特性文件上传下载&#x1f384; &#x1f308;我是边境矢梦&#xff0c;一个正在为秋招和算法竞赛做准备的学生&#x1f308; &#x1f386;喜欢的朋友可以…...

grafana用lark发告警python3接口

1.先在lark群聊里面创建机器人&#xff0c;并获取机器人链接。 2.后台运行下面python3脚本。 3.在grafana添加告警通道&#xff0c;设置告警。 # !/usr/bin/env python # _*_ coding: utf-8 _*_from flask import Flask, request,jsonify #import smtplib #from email.mime.te…...

Java 中数据结构HashSet的用法

Java HashSet HashSet 基于 HashMap 来实现的&#xff0c;是一个不允许有重复元素的集合。 HashSet 允许有 null 值。 HashSet 是无序的&#xff0c;即不会记录插入的顺序。 HashSet 不是线程安全的&#xff0c; 如果多个线程尝试同时修改 HashSet&#xff0c;则最终结果是…...

vue3下的密码输入框(antdesignvue)

参考:vue下的密码输入框 注意:这是个半成品,有些问题(input输入框加了文字间距letter-spaceing,会导致输入到第6位的时候会往后窜出来一个空白框、光标位置页会在数字前面),建议不采用下面这种方式,用另外的(画六个input框更方便) 效果预览 实现思路 制作6个小的正方…...

鸿鹄企业工程项目管理系统 Spring Cloud+Spring Boot+前后端分离构建工程项目管理系统源代码

鸿鹄工程项目管理系统 Spring CloudSpring BootMybatisVueElementUI前后端分离构建工程项目管理系统 1. 项目背景 一、随着公司的快速发展&#xff0c;企业人员和经营规模不断壮大。为了提高工程管理效率、减轻劳动强度、提高信息处理速度和准确性&#xff0c;公司对内部工程管…...

【爬虫】5.5 Selenium 爬取Ajax网页数据

目录 AJAX 简介 任务目标 创建Ajax网站 创建服务器程序 编写爬虫程序 AJAX 简介 AJAX&#xff08;Asynchronous JavaScript And XML&#xff0c;异步 JavaScript 及 XML&#xff09; Asynchronous 一种创建交互式、快速动态网页应用的网页开发技术通过在后台与服务器进行…...

thinkphp6 入门(3)--获取GET、POST请求的参数值

一、Request对象 thinkphp提供了Request对象&#xff0c;其可以 支持对全局输入变量的检测、获取和安全过滤 支持获取包括$_GET、$_POST、$_REQUEST、$_SERVER、$_SESSION、$_COOKIE、$_ENV等系统变量&#xff0c;以及文件上传信息 具体参考&#xff1a;https://www.kanclou…...

JSON简介

JSON&#xff08;JavaScript Object Notation&#xff09;是一种轻量级的数据交换格式。它使用简洁的文本表示来存储和传输结构化数据。JSON数据由键值对组成&#xff0c;用逗号分隔。键是字符串&#xff0c;值可以是字符串、数字、布尔值、数组、对象或者null 1、JSON的优点 …...

[Java]_[初级]_[以SAX流的方式高效读取XML大文件]

场景 XML文件作为默认utf8格式的文件&#xff0c;它的作用和JSON文件相当。比如可以做为简单的数据存储格式&#xff0c;配置文件&#xff0c;网站的sitemap.xml导航等。它比json强的一点是它还有样式描述文件dtd,可以实现让XML里的结构化数据显示表格样式。 <?xml versi…...

Visual Studio中平台和配置的概念

在 Visual Studio 中&#xff0c;“平台”&#xff08;Platform&#xff09;和 “配置”&#xff08;Configuration&#xff09;是用于管理项目构建和设置的两个关键概念。在 “解决方案配置管理器” 中设置和管理 平台&#xff08;Platform&#xff09;&#xff1a; 指项目构…...

【vue2第八章】工程化开发和使用脚手架和文件结构

vue工程化开发 & 使用脚手架VUE CLI&#xff1a; 1&#xff0c;核心包传统开发模式&#xff1a;基于js/html/css直接引入核心包开发vue。 2&#xff0c;工程化开发。基于构建工具如(webpack)的环境中开发vue。 vue cli是什么&#xff1a; vue cli是一个vue官方提供的一个…...

建造者模式简介

概念&#xff1a; 建造者模式&#xff08;Builder Pattern&#xff09;是一种创建型设计模式&#xff0c;用于将复杂对象的构建过程与其表示分离。它允许您逐步构造一个复杂对象&#xff0c;同时保持灵活性和可读性。 特点&#xff1a; 将对象的构建过程封装在指导者类中&am…...

虚拟世界指南:从零开始,一步步教你安装、配置和使用VMware,镜像ISO文件!

本章目录 CentOS简介镜像下载一、新建虚拟机&#xff08;自定义&#xff09;1、进入主页&#xff0c;在主页中点击“创建新的虚拟机”2、点击创建虚拟机创建自己的虚拟机。可以选择自定义3、在“硬件兼容性(H)中选择&#xff1a;Workststion 15.x” ->下一步4、选择“稍后安…...

服务器卡顿怎么查找原因?

虽然服务器出现卡顿的现象比较少见&#xff0c;但也不排除出现的可能&#xff0c;而服务器一旦出现卡顿&#xff0c;造成的后果会严重的多。这里分享点笔记&#xff0c;希望有所帮助 1. 性能评估: 首先&#xff0c;对服务器的性能进行全面评估。检查 CPU 使用率、内存占用、磁…...

Pnpm,npm,yarn

npm 最初的npm只是简单的通过依赖去递归安装包&#xff0c;所以说每个依赖都会有自己的node_modules,node_modules是嵌套的。一个项目会存在多个包&#xff0c;多个包之间难免会有公共的依赖&#xff0c;node_modules嵌套的话&#xff0c;这样公共依赖就会下载多次。会造成磁盘…...

Kubernetes技术--使用kubeadm快速部署一个K8s集群

这里我们配置一个单master集群。(一个Master节点,多个Node节点) 1.硬件环境准备 一台或多台机器,操作系统 CentOS7.x-86_x64。这里我们使用安装了CentOS7的三台虚拟机 硬件配置:2GB或更多RAM,2个CPU或更多CPU,硬盘30GB或更多 2.主机名称和IP地址规划 3. 初始化准备工作…...

LeetCode 45题:跳跃游戏

题目 给定一个长度为 n 的 0 索引整数数组 nums。初始位置为 nums[0]。 每个元素 nums[i] 表示从索引 i 向前跳转的最大长度。换句话说&#xff0c;如果你在 nums[i] 处&#xff0c;你可以跳转到任意 nums[i j] 处: 0 < j < nums[i] i j < n 返回到达 nums[n - …...

idea中设置指定图片为项目站标

前提是准备好一张图片 在idea中创建imgs文件夹&#xff0c;放入图片 创建一个HTML文件 建立链接link标签&#xff0c;链接照片即可 <link href"../02css/imgs/2.jpg" rel"shortcut icon" type"image/x-icon"> 执行效果如下图所示&…...

【【萌新的STM32学习-27--USART异步通信配置步骤】】

萌新的STM32学习-27–USART异步通信配置步骤 USART/UART 异步通信配置步骤 1.配置串口工作参数 HAL_UART_Init() 我们会在此处调用MSP中的回调函数 2.串口底层初始化 用户定义HAL_UART_MspInit() 配置GPIO NVIC CLOCK 等 3.开启串口异步接收中断 HAL_UART_Receive_IT() 4.…...

elementplus实现左侧菜单栏收缩与展开

1.页面结构 Home.vue下包含aside.vue和menu.vue 2.TAside.vue el-menu左侧菜单栏显示 注意&#xff1a; 要使用收缩与展开&#xff0c;el-aside必须设置width"collapse"&#xff0c;否则收缩展开会出现收缩后&#xff0c;el-aside宽度不变窄需要使用动态改变展开收…...

HTML 语义化

目录 HTML 语义化HTML5 新特性HTML 语义化的好处语义化标签的使用场景最佳实践 HTML 语义化 HTML5 新特性 标准答案&#xff1a; 语义化标签&#xff1a; <header>&#xff1a;页头<nav>&#xff1a;导航<main>&#xff1a;主要内容<article>&#x…...

【机器视觉】单目测距——运动结构恢复

ps&#xff1a;图是随便找的&#xff0c;为了凑个封面 前言 在前面对光流法进行进一步改进&#xff0c;希望将2D光流推广至3D场景流时&#xff0c;发现2D转3D过程中存在尺度歧义问题&#xff0c;需要补全摄像头拍摄图像中缺失的深度信息&#xff0c;否则解空间不收敛&#xf…...

Vue2 第一节_Vue2上手_插值表达式{{}}_访问数据和修改数据_Vue开发者工具

文章目录 1.Vue2上手-如何创建一个Vue实例,进行初始化渲染2. 插值表达式{{}}3. 访问数据和修改数据4. vue响应式5. Vue开发者工具--方便调试 1.Vue2上手-如何创建一个Vue实例,进行初始化渲染 准备容器引包创建Vue实例 new Vue()指定配置项 ->渲染数据 准备一个容器,例如: …...

1.3 VSCode安装与环境配置

进入网址Visual Studio Code - Code Editing. Redefined下载.deb文件&#xff0c;然后打开终端&#xff0c;进入下载文件夹&#xff0c;键入命令 sudo dpkg -i code_1.100.3-1748872405_amd64.deb 在终端键入命令code即启动vscode 需要安装插件列表 1.Chinese简化 2.ros …...

sqlserver 根据指定字符 解析拼接字符串

DECLARE LotNo NVARCHAR(50)A,B,C DECLARE xml XML ( SELECT <x> REPLACE(LotNo, ,, </x><x>) </x> ) DECLARE ErrorCode NVARCHAR(50) -- 提取 XML 中的值 SELECT value x.value(., VARCHAR(MAX))…...

CVE-2020-17519源码分析与漏洞复现(Flink 任意文件读取)

漏洞概览 漏洞名称&#xff1a;Apache Flink REST API 任意文件读取漏洞CVE编号&#xff1a;CVE-2020-17519CVSS评分&#xff1a;7.5影响版本&#xff1a;Apache Flink 1.11.0、1.11.1、1.11.2修复版本&#xff1a;≥ 1.11.3 或 ≥ 1.12.0漏洞类型&#xff1a;路径遍历&#x…...

MacOS下Homebrew国内镜像加速指南(2025最新国内镜像加速)

macos brew国内镜像加速方法 brew install 加速formula.jws.json下载慢加速 &#x1f37a; 最新版brew安装慢到怀疑人生&#xff1f;别怕&#xff0c;教你轻松起飞&#xff01; 最近Homebrew更新至最新版&#xff0c;每次执行 brew 命令时都会自动从官方地址 https://formulae.…...

WEB3全栈开发——面试专业技能点P7前端与链上集成

一、Next.js技术栈 ✅ 概念介绍 Next.js 是一个基于 React 的 服务端渲染&#xff08;SSR&#xff09;与静态网站生成&#xff08;SSG&#xff09; 框架&#xff0c;由 Vercel 开发。它简化了构建生产级 React 应用的过程&#xff0c;并内置了很多特性&#xff1a; ✅ 文件系…...

数据分析六部曲?

引言 上一章我们说到了数据分析六部曲&#xff0c;何谓六部曲呢&#xff1f; 其实啊&#xff0c;数据分析没那么难&#xff0c;只要掌握了下面这六个步骤&#xff0c;也就是数据分析六部曲&#xff0c;就算你是个啥都不懂的小白&#xff0c;也能慢慢上手做数据分析啦。 第一…...

Win系统权限提升篇UAC绕过DLL劫持未引号路径可控服务全检项目

应用场景&#xff1a; 1、常规某个机器被钓鱼后门攻击后&#xff0c;我们需要做更高权限操作或权限维持等。 2、内网域中某个机器被钓鱼后门攻击后&#xff0c;我们需要对后续内网域做安全测试。 #Win10&11-BypassUAC自动提权-MSF&UACME 为了远程执行目标的exe或者b…...