ES6 、ESNext 规范、编译工具babel

ES6 、ESNext 规范、编译工具简介

  • ES6
    • ES(ECMAScript) vs JS
    • 常量
        • 进一步探讨 obj对象的扩展
        • 面试:使对象属性也不能更改——Object.freeze(obj)
    • 解构deconstruction
      • 变量的解构赋值:
      • 数组解构赋值:
      • 对象解构赋值:
      • 字符串解构赋值:
      • 数值和布尔值的解构赋值:
      • 函数参数的解构赋值:
    • 箭头函数 arrow_function
        • 箭头函数this指向的规则:
        • 应用:
    • class
      • 属性定义
        • 变量的只读
        • 如何实现私有属性
        • 适配器模式
      • 静态属性
  • 编译 babel

ES6

ES(ECMAScript) vs JS

ES(ECMAScript)是JS(JavaScript)的一个规范或者标准,而JS则是ES的实现。
JS类似方言,ES是一个统一规范。

具体来说:

JavaScript是一种在浏览器中运行的脚本语言,用于实现网页的交互功能。
ECMAScript 是 JavaScript 的标准化版本,由欧洲计算机制造商协会(ECMA)制定并维护

//ECMA概念与JS的发展史

常量

发展路径var => defineProperty => const

1.不允许重复声明 / 不能更改常量
在ES5中:Object.defineProperty()

Object.defineProperty(window,'arg2',{value:'yy',writable: false
})
console.log(arg2);  // yy
arg2 = 'student'// =>不会报error
console.log(arg2)// yy

在ES6中:

const arg3 = 'yy'
console.log(arg3)
arg3 ='student'  // ERROR: arg3 => 禁止更改常量

2.const无变量声明提升/ dead zone—暂时性死区

if(true){console.log(arg3)  // errorconst arg3= 'yy'
}

3.const对象—不变的是地址:
在vue3中,const a = ref(5)创建的是一个对象,可改变a.value
在这里插入图片描述

进一步探讨 obj对象的扩展

在大佬开发中,只要是对象类型,大部分使用const声明可变属性的对象。
在这里插入图片描述
只要地址不改变,都是常量。
对象更改可使用let newObj = Object.assign(obj1空对象,obj2)来实现。

Object.assign 对象的合并(相同属性后者会覆盖前者)

面试:使对象属性也不能更改——Object.freeze(obj)

浅冻结对象or数组
在这里插入图片描述
在这里插入图片描述
不能修改属性,不能删除属性,不能添加属性。
冻结后,对象可执行属性的增改等代码,但不算数。

追问:只能冻结当前层级 => 如何破局?=> 递归每一层冻结
现象如下:
在这里插入图片描述
处理如下:
在这里插入图片描述

解构deconstruction

提高开发效率,减少代码重复书写。

变量的解构赋值:

解构不成功:变量的值等于undefined;

//解构不成功:
let [x] = []
console.log(x)  => undefined

不完全解构:等号左边匹配右边一部分。
默认值:当右侧严格等于undefined时,取默认值。默认值可以引用解构赋值的其它变量,但该变量必须已经声明。
只要有可能,就不要在模式中放置圆括号()
在这里插入图片描述

数组解构赋值:

数组的元素按次序排列,变量取值由他的位置决定;

对象解构赋值:

对象的属性没有次序,变量须与属性同名才能取到正确值(否则等于undefined)。
对象解构赋值是下面简写:(实际内部机制先找到同名属性,再赋值给对应变量。真正赋值的是后者,非前者。)
在这里插入图片描述
在这里插入图片描述

字符串解构赋值:

字符串被转换成了类似数组的对象。
const [a,b,c,d,e] = ‘hello’;
类似数组的对象都有一个length属性,因此还可以对length属性进行解构赋值。
let {length: len} = ‘hello’; // len :5

数值和布尔值的解构赋值:

如果等号右边是数值和布尔值,则会先转换为对象。
在这里插入图片描述
解构赋值的规则是:只要等号右边的值不是对象数组,就先将其转为对象

由于undefined和null无法转为对象,所以对它们进行解构赋值会报错。

函数参数的解构赋值:

函数参数可以使用解构赋值;也可以使用默认值。

箭头函数 arrow_function

箭头函数没有自己的this,它所谓的this捕获的是它所在上下文的this值(this指向函数声明时所在作用域下的this值。)

不能作为构造函数。无法new。不能使用arguments变量。

简写:当形参只有一个时可省略小括号;当代码体只有一条语句时可省略花括号,此时return也必需省略。

箭头函数this指向的规则:
  1. ‌继承外层函数的this‌:箭头函数没有自己的this,它的this是继承自外层第一个普通函数的this。例如,在一个函数中定义箭头函数,箭头函数的this将继承自该普通函数的this‌2。‌
  2. 全局环境‌:在全局环境下,箭头函数的this指向全局对象(如window)。但在严格模式下,全局普通函数的this指向undefined‌34。‌
  3. 定时器‌:在setTimeout或setInterval中,箭头函数的this指向全局对象(如window)‌
是一个泛式,它不具备独立上下文
getCourse中this指向的是windowconst obj = {teacher:'yy',getTeacher:function(){console.log('function',this.teacher)},course:'es',getCourse:()=>{ console.log('course',this)}}
应用:

适合与this无关的回调,定时器数组的方法回调
arr.map()
不适合与this有关的回调,事件回调对象的方法
例如不适合:
dom操作:
在这里插入图片描述

不适合作为构造函数—类操作。

class

助力了js更加面向对象的能力。

在 es5中:通过构造函数
在这里插入图片描述

在 es6中:通过class
本质还是一个方法,更面向对象,易读
请添加图片描述

属性定义

变量的只读
如何实现私有属性

在这里插入图片描述

适配器模式

在这里插入图片描述

静态属性

编译 babel

新语法老古董浏览器不去主动兼容,我们怎么办
思路转变: 写浏览器友好的代码 => 写开发者友好的代码

如何在项目中使用和集成babel翻译官

  1. 手动挡 过程编译、脚本打包
  2. 管道型工具 监听变化加工
  3. 工程化继承

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

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

相关文章

阿里数字人工作 Emote Portrait Alive (EMO):基于 Diffusion 直接生成视频的数字人方案

TL;DR 2024 年 ECCV 阿里智能计算研究所的数字人工作,基于 diffusion 方法来直接的从音频到视频合成数字人,避免了中间的三维模型或面部 landmark 的需求,效果很好。 Paper name EMO: Emote Portrait Alive - Generating Expressive Portra…

candence: 如何快速设置SUBCLASS 的颜色

如何快速设置SUBCLASS 的颜色 一、一般操作 正常情况下修改SUBCLASS,需要如下步骤进行设置: 二、快速操作 右键,选择一个颜色即可

多目标优化算法:多目标海星优化算法(MOSFOA)求解ZDT1、ZDT2、ZDT3、ZDT4、ZDT6,提供完整MATLAB代码

一、海星优化算法 海星优化算法(Starfish Optimization Algorithm ,SFOA)是2024年提出的一种元启发式算法,该算法模拟了海星的行为,包括探索、捕食和再生。 算法灵感: SFOA的灵感来源于海星的捕食行为&…

实时质检-静音检测分析流程(运维人员使用)

前言 用户在实时质检时,开启了主叫或被叫静音检测功能,但是听录音时,主叫或被叫明明没有任何声音,但是通话没有被挂断。 说明主叫或被叫的静音阈值太低,导致系统没有把很小的声音认定为静音;或者检测非静音…

了解Redis(第一篇)

目录 Redis基础 什么事Redis Redis为什么这么快 除了 Redis,你还知道其他分布式缓存方案吗? 说-下 Redis 和 Memcached 的区别和共同点 为什么要用Redis? 什么是 Redis Module?有什么用? Redis基础 什么事Redis Redis (REmote DIctionary S…

D77【 python 接口自动化学习】- python基础之HTTP

day77 postman接口请求 学习日期:20241123 学习目标:http 定义及实战﹣﹣postman接口请求 学习笔记: get请求 post请求 总结 get请求用于查询数据post请求用于添加数据

Element-Ui组件(icon组件)

一、前言 本篇文章主要是对官网的Icon组件进行总结归纳Icon 图标 | Element Plus 在现代Web应用开发中,图标是用户界面设计中不可或缺的一部分。它们不仅提升了用户体验,还使得信息的传达更加直观和高效。本文主要对Element Plus 官方提供的Icon组件进行…

SpringMVC——简介及入门

SpringMVC简介 看到SpringMVC这个名字,我们会发现其中包含Spring,那么SpringMVC和Spring之间有怎样的关系呢? SpringMVC隶属于Spring,是Spring技术中的一部分。 那么SpringMVC是用来做什么的呢? 回想web阶段&#x…

应急响应靶机——linux2

载入虚拟机,打开虚拟机: 居然是没有图形化界面的那种linux,账户密码:root/Inch957821.(注意是大写的i还有英文字符的.) 查看虚拟机IP,192.168.230.10是NAT模式下自动分配的 看起来不是特别舒服&…

《Python 股票交易分析:开启智能投资新时代》(二)

Python 进行股票交易分析的优势 简洁易读:Python 的语法简洁明了,即使是编程新手也能较快上手,降低了股票交易分析的门槛。 Python 的简洁易读是其在股票交易分析中受欢迎的重要原因之一。Python 的语法简洁明了,与其他编程语言相…

ECharts柱状图-带圆角的堆积柱状图,附视频讲解与代码下载

引言: 在数据可视化的世界里,ECharts凭借其丰富的图表类型和强大的配置能力,成为了众多开发者的首选。今天,我将带大家一起实现一个柱状图图表,通过该图表我们可以直观地展示和分析数据。此外,我还将提供…

【刷题21】BFS解决FloodFill算法专题

目录 一、图像渲染二、岛屿数量三、岛屿的最大面积四、被环绕的区域 一、图像渲染 题目: 思路: 如果起始位置的颜色(数值)与color相同,直接返回该数组上下左右一层一层的找与当前位置颜色相同的,并且该位置不越界,然…

【大数据技术基础】 课程 第8章 数据仓库Hive的安装和使用 大数据基础编程、实验和案例教程(第2版)

第8章 数据仓库Hive的安装和使用 8.1 Hive的安装 8.1.1 下载安装文件 访问Hive官网(http://www.apache.org/dyn/closer.cgi/hive/)下载安装文件apache-hive-3.1.2-bin.tar.gz 下载完安装文件以后,需要对文件进行解压。按照Linux系统使用的…

C++设计模式行为模式———中介者模式

文章目录 一、引言二、中介者模式三、总结 一、引言 中介者模式是一种行为设计模式, 能让你减少对象之间混乱无序的依赖关系。 该模式会限制对象之间的直接交互, 迫使它们通过一个中介者对象进行合作。 中介者模式可以减少对象之间混乱无序的依赖关系&…

泥石流灾害风险评估与模拟丨AI与R语言、ArcGIS、HECRAS融合,提升泥石流灾害风险预测的精度和准确性

目录 第一章 理论基础 第二章 泥石流风险评估工具 第三章 数据准备与因子提取 第四章 泥石流灾害评价 第五章 HECRAS软件的应用 第六章 操作注意事项与模型优化 泥石流灾害的频发与严重后果,已成为全球范围内防灾减灾工作的重大挑战。随着科技的不断进步&…

HarmonyOS:使用ArkWeb构建页面

一、简介 页面加载是Web组件的基本功能。根据页面加载数据来源可以分为三种常用场景,包括加载网络页面、加载本地页面、加载HTML格式的富文本数据。 页面加载过程中,若涉及网络资源获取,需要配置ohos.permission.INTERNET网络访问权限。 二、…

MATLAB的语音信号采集与处理分析

1、基本描述 本文描述的系统是一个全面而精细的语音信号处理平台,核心组件由MATLAB的高级功能模块构建而成。系统的核心交互界面,借助于MATLAB的uifigure函数搭建,为用户提供了一个直观且响应迅速的操作环境。通过设计的GUI按钮,如…

opencv undefined reference to `cv::noarray()‘ 。window系统配置opencv,找到opencv库,但连接不了

之前都是在ubuntu里用opencv,今天为了方便在平时用Window10系统也用下c版的cv,就想配置一下vscode的cv环境,直接下载了一个编译好的opencv库(带build文件夹的),刚开始用的是visual studio的编译器&#xff…

经典游戏:飞机大战游戏python设计与实现

《飞机大战》是一款经典的二维飞行射击游戏,其核心玩法是控制玩家飞机与敌机作战,通过击落敌机获取分数并尽量避免被敌机击中。根据提供的代码,飞机大战的设计和实现可以分为以下几个主要部分:游戏初始化、游戏界面设计、玩家控制…

填补覆盖空白,小型机器人让智能清洁再“净”一步!

尽管不同商用场景的大多区域都十分相似,但非标准化的场景属性无法避免的导致了不少corner case。面对狭窄场景,“强悍”的商用清洁机器人迎来了自己的“职业危机”。 随着城市化进程的推进和服务业比重提升,商场、写字楼等细分场景不断扩容&a…