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…

Python枚举类详解:用enum模块高效管理常量数据

《Python OpenCV从菜鸟到高手》带你进入图像处理与计算机视觉的大门! 在编程中,常量的管理是一个关键环节,合理的管理常量可以提高代码的可读性和可维护性。Python的enum模块提供了一种有效的方式来组织常量数据,通过枚举类(Enum)将相关的常量值集合在一起,使代码更具结…

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

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

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

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

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

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

Android Gradle 插件和 Android Studio 兼容性

Android Gradle 插件和 Android Studio 兼容性 Android Studio 版本所需的 AGP 版本Ladybug 2024.2.13.2-8.7Ladybug 2024.2.13.2-8.7Koala 2024.1.12024.2.1Jellyfish 2023.3.12024.2.1Iguana 2023.2.13.2-8.3Hedgehog 2023.1.13.2-8.2Giraffe 2022.3.13.2-8.1Flamingo 2022.…

python中如何计算布尔值

布尔值是 Python 中的基本数据类型,只有两个值: True 表示“真”。注意首字母都是大写False 表示“假”。 那么问题来了,什么样的值是True,什么样的值是False呢? 值为True的情况有无数种,但是为False的就…

阿里云cdn配置记录和nodejs手动安装

cdn 登录阿里云 域名解析权限 开启cdn,接引导流程, 源可以设置 域名或者ip等 配置好域名解析 上传https证书 图片不显示,后端开发需要配置 回源配置的回源协议 ,配置跟随客服端【如果浏览器多次重定向错误,客服或者改…

了解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…

flink1.16+连接Elasticsearch7官方例子报错解决方案

flink输出至es&#xff0c;连接es7时使用的sink类是Elasticsearch7SinkBuilder&#xff0c;与es6链接方式不同&#xff0c;官网地址&#xff1a;fink连接es官方地址。 flink连接es7官方示例 依赖jar&#xff1a; <dependency><groupId>org.apache.flink</gro…

力扣--LRC 142.训练计划IV

题目 给定两个以 有序链表 形式记录的训练计划 l1、l2&#xff0c;分别记录了两套核心肌群训练项目编号&#xff0c;请合并这两个训练计划&#xff0c;按训练项目编号 升序 记录于链表并返回。 注意&#xff1a;新链表是通过拼接给定的两个链表的所有节点组成的。 示例 1&am…

应急响应靶机——linux2

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

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

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

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

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

算力100问☞第16问:什么是TPU?

TPU全称是Tensor Processing Unit芯片&#xff0c;中文全称是张量处理单元芯片&#xff0c;是谷歌开发的一种特殊类型的芯片&#xff0c;用于加速人工智能&#xff08;AI&#xff09;和机器学习&#xff08;ML&#xff09;工作负载。TPU主要针对张量&#xff08;tensor&#xf…

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

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

一文学习开源框架LeakCanary

LeakCanary 简介 LeakCanary 是一个由 Square 开发的开源工具&#xff0c;主要用于检测和诊断 Android 应用中的内存泄漏问题。它通过自动化的方式帮助开发者捕捉和分析可能导致内存泄漏的对象&#xff0c;简化了内存问题的排查过程。 LeakCanary 的功能 自动检测内存泄漏&a…