尚融宝06-ECMAScript基本介绍和使用

目录

一、ECMAScript

1、ECMA

2、ECMAScript

3、什么是 ECMA-262

4、ECMA-262 历史

5、ECMAScript 和 JavaScript 的关系

二、基本语法

1、let声明变量

2、const声明常量

3、解构赋值

4、模板字符串

5、声明对象简写

6、定义方法简写

7、参数的默认值

8、对象拓展运算符

9、箭头函数

10、Promise


一、ECMAScript

1、ECMA

ECMA(European Computer Manufacturers Association)中文名称为欧洲计算机制造商协会,这个组织的目标是评估、开发和认可电信和计算机标准。1994 年后该组织改名为 Ecma 国际。

2、ECMAScript

ECMAScript 是由 Ecma 国际通过 ECMA-262 标准化的脚本程序设计语言。

3、什么是 ECMA-262

Ecma 国际制定了许多标准,而 ECMA-262 只是其中的一个

4、ECMA-262 历史

ECMA-262(ECMAScript)历史版本查看网址
ECMA-262 - Ecma International

第 1 版

1997 年

制定了语言的基本语法

第 2 版

1998 年

较小改动

第 3 版

1999 年

引入正则、异常处理、格

式化输出等。IE 开始支持

第 

2007 年

过于激进,未发布

第 5 版

2009 年

引入严格模式、JSON,扩

展对象、数组、原型、字符串、日期方法

第 

2015 

模块化、面向对象语法、

Promise、箭头函数、let、const、数组解构赋值等等

第 7 版

2016 年

幂运算符、数组扩展、

Async/await 关键字

第 8 版

2017 年

Async/await、字符串扩展

第 9 版

2018 年

对象解构赋值、正则扩展

第 10 版

2019 年

扩展对象、数组方法

ES.next

动态指向下一个版本

5、ECMAScript 和 JavaScript 的关系

一个常见的问题是,ECMAScript 和 JavaScript 到底是什么关系?

要讲清楚这个问题,需要回顾历史。1996 年 11 月,JavaScript 的创造者 Netscape 公司,决定将 JavaScript 提交给标准化组织 ECMA,希望这种语言能够成为国际标准。次年,ECMA 发布 262 号标准文件(ECMA-262)的第一版,规定了浏览器脚本语言的标准,并将这种语言称为 ECMAScript,这个版本就是 1.0 版。

因此,ECMAScript 和 JavaScript 的关系是,前者是后者的规格,后者是前者的一种实现(另外的 ECMAScript 方言还有 Jscript 和 ActionScript)

二、基本语法

ES6相对之前的版本语法更严格,新增了面向对象的很多特性以及一些高级特性。本部分只学习项目开发中涉及到ES6的最少必要知识,方便项目开发中对代码的理解。

1、let声明变量

创建文件夹02-ES6-demo,创建 01-let.js

// 1、var可以重复声明,let不可以
var a = 1;
var a = true
console.log(a);
let a = 1;
let a = true; // 未编译已经提示出错
console.log(a)

// 2、var没用块级作用域,let具备块级作用域
var f = true;
if (f) {
    var a = 'yes'
    console.log(a);
}
console.log(a);  // 这里也可以输出yes

var f = true;
if (f) {
    let a = 'yes'
    console.log(a);
}
console.log(a); // let报错

3.var和let都具备函数作用域

function check() {
    var a = "yes"
    let b = "no"
}
console.log(a) // 报错
console.log(b) // 报错

// 4.不存在变量提升

console.log(a) // 输出undefined
var a

console.log(a) // 报错:Cannot access 'a' before initialization
let a

可以使用visual studio 打开集成终端

 使用 node 文件名 执行脚本

2、const声明常量

创建 02-const.js

//1. 初始化时需要赋值
const A = "yes"
//2. 初始化后值不能改变
//A = "no" // 报错:Assignment to constant variable.
//3. 命名规范:大写字母和下划线
const CONSOLE_OUT = "out"

//4. 当常量的地址不变时,可以添加值
const TAME = ['zyt', 'zjy', 'czh']
TAME.push('zyj')
console.log(TAME)

TAME = 100 // 报错:TypeError: Assignment to constant variable.

3、解构赋值

创建 03-解构赋值.js

// 1.数组结构
const F4 = ['小沈阳', '刘能', '赵四', '宋小宝']
// let shenyang = F4[0]  //这种方式也可以,但是如果数组有多个元素需要解析并赋值的话那样太麻烦了
// let liunneng = F4[1]
let [shenyang, liunneng, zhaosi, songxiaobao] = F4 // 使用中括号
console.log(shenyang)
console.log(liunneng)
console.log(zhaosi)
console.log(songxiaobao)

// 2.对象解析
const zbs = {
    username: '赵本山',
    age: '不详',
    sex: '男',
    xiaopin: function () {
        console.log("演小品")
    }
}
// let username1 = zbs.username  // 这种方式取值不需要相同的变量名也可以,但是如果对象有多个元素需要解析并赋值的话那样太麻烦了
let { username, sex, xiaopin } = zbs;  // 使用大括号,设置对应同名属性获取值,不同名获取不到值
// console.log(username1)
console.log(username)
console.log(sex)
xiaopin()

4、模板字符串

创建 04-模板字符串.js

模板字符串相当于加强版的字符串,用反引号 `,除了作为普通字符串,还可以用来定义多行字符串,还可以在字符串中加入变量和表达式。

// ES6 引入新的声明字符串的方式 『``』 '' ""
//1. 声明
let str1 = '我是一个字符串'
let str2 = `我也是一个字符串`

console.log(str1, typeof str1)
console.log(str2, typeof str2)

// 2.内容中可以直接出现换行符
let list1 = `<ul>
<li>沈腾</li>
<li>玛丽</li>
<li>贾玲</li>
</ul>`
// 使用单引号换行会报错
let list2 = '<ul><li>沈腾</li><li>玛丽</li><li>贾玲</li></ul>' 
console.log(list1)
console.log(list2)

// 3.变量拼接
let name = '贾玲'
let out = `我喜欢${name}这个演员`

console.log(out)

5、声明对象简写

创建 05-声明对象简写.js

let username = 'Tom'
let age = 25
let sing = function () {
    console.log('唱歌')
}

// 传统
let person1 = {
    username: username,
    age: age,
    sing: sing
}
console.log(person1)
person1.sing()

// ES6:这样的书写更加简洁
let person2 = {
    username,
    age,
    sing
}
console.log(person2)
person2.sing()

6、定义方法简写

创建 06-定义方法简写.js

// 传统
let person1 = {
  sayHi: function () {
    console.log('Hi')
  },
}
person1.sayHi()

// ES6
let person2 = {
  sayHi() {
    console.log('Hi')
  },
}
person2.sayHi()

7、参数的默认值

注意:函数在JavaScript中也是一种数据类型,JavaScript中没有方法的重载

创建 07-参数的默认值.js

//ES6 允许给函数参数赋值初始值
//1. 形参初始值 具有默认值的参数
function add(a, b, c = 0) {
  return a + b + c
}
let result = add(1, 2)
console.log(result)

//2. 与解构赋值结合
function connect({ host = '127.0.0.1', username, password, port }) {
  console.log(host)
  console.log(username)
  console.log(password)
  console.log(port)
}
connect({
  host: 'atguigu.com',
  username: 'root',
  password: 'root',
  port: 3306,
})

8、对象拓展运算符

创建 08-对象扩展运算符.js
扩展运算符(spread)也是三个点(...)。它好比 rest 参数的逆运算,将一个数组转为用逗号分隔的参数序列,对数组进行解包。
// 展开对象
let person = { name: '路飞', age: 25 }

// let someone = person // 引用赋值,此时对someone修改就是对person修改
let someone = { ...person }  // 对象拷贝
someone.name = '索隆'
console.log(person)
console.log(someone)

9、箭头函数

创建 09-箭头函数.js
箭头函数提供了一种更加简洁的函数书写方式。基本语法是:
参数 => 函数体
箭头函数多用于匿名函数的定义
//声明一个函数
let fn = function(a){
  return a + 100
}

//箭头函数
let fn = (a) => {
  return a + 100
}

//简写
let fn = a => a + 100

//调用函数
let result = fn(1)
console.log(result)

10、Promise

Promise 是ES6 引入的异步编程的新解决方案。语法上 Promise 是一个构造函数, 用来封装异步操作并可以获取其成功或失败的结果。

创建 10-Promise基本语法.js

const fs = require('fs')


// 实例化Promise对象:
// Promise对象有三个状态:初始化,成功,失败
// resolve:函数类型的参数,可以将Promise的状态改为成功
// rejecg:函数类型的参数,可以将Promise的状态改为失败
const p = new Promise((resolve, reject) => {
    // 调用readFile方法读取磁盘文件,异步操作
    // 第一个参数:读取的文件路径
    // 第二个参数:读取过程中对响应结果的处理
    fs.readFile('./1.txt', (err, data) => {
        // 当文件读取失败时,可以获取到失败的信息
        if (err) reject(err) // 将Promise的状态修改为失败

        resolve(data) // 将Promise的状态修改为成功
    })
})

// 调用Promise的方法
// then:当Promise状态成功时调用执行
// catch:当Promise状态失败时调用执行
p.then(response => {
    console.log(response.toString())
}).catch(error => {
    console.log('出错了')
    console.error(error)
})

总结:借助于Promise,可以使异步操作中的成功和失败的处理函数独立出来。

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

QT常用位置函数区别

目录1、引言2、实验代码3、位置函数3.1 x()3.2 y()3.3 frame()3.4 pos()3.5 geometry()3.6 width()3.7 height()3.8 rect()3.9 size()1、引言 QT有众多图形绘制函数&#xff0c;包括x()、y()、frame()、pos()、geometry()、width()、height()、rect()、size()&#xff0c;它们…

【Java学习笔记】多线程与线程池

多线程与线程池一、多线程安全与应用1、程序、进程与线程的关系2、创建多线程的三种方式&#xff08;1&#xff09;继承Thread类创建线程【不推荐】&#xff08;2&#xff09;实现Runnable接口创建线程&#xff08;3&#xff09;Callable接口创建线程3、线程的生命周期4、初识线…

基础入门 HTTP数据包Postman构造请求方法请求头修改状态码判断

文章目录数据-方法&头部&状态码请求requestResponse状态码案例-文件探针&登录爆破工具-Postman自构造使用数据-方法&头部&状态码 请求request 1、常规请求-Get 2、用户登录-Post •get&#xff1a;向特定资源发出请求&#xff08;请求指定页面信息&#x…

为什么这么NB?huatuo革命Unity热更新

最近huatuo(华佗)热更新解决方案火爆了unity开发圈,起初我觉得热更新嘛&#xff0c;不就是内置一个脚本解释器脚本语言开发&#xff0c;如xLua, ILRuntime, puerts。Huatuo又能玩出什么花样&#xff0c;凭什么会这么NB&#xff0c;引起了那么多程序员的关注与称赞呢&#xff1f…

单片机——IIC协议与24C02

1、基础知识 1.1、IIC串行总线的组成及工作原理 I2C总线只有两根双向信号线。一根是数据线SDA&#xff0c;另一根是时钟线SCL。 1.2、I2C总线的数据传输 I2C总线进行数据传送时&#xff0c;时钟信号为高电平期间&#xff0c;数据线上的数据必须保持稳定&#xff0c;只有在时钟…

Linux实操之进程管理

文章目录一、基本介绍二、显示系统执行的进程基本介绍三、ps详解四、终止进程kill和killall介绍:●基本语法常用选项五、查看进程树pstree基本语法常用选项一、基本介绍 1&#xff0e;在LINUX中&#xff0c;每个执行的程序都称为一个进程。每一个进程都分配一个ID号(pid,进程号…

【SCL】实现简单算法--冒泡排序

使用SCL语言实现一个冒泡排序的简单算法 文章目录 目录 文章目录 前言 二、实现排序 1.读取存储器地址&#xff08;PEEK&#xff09;指令 2.编写程序 总结 前言 本文我们来一起使用SCL来实现一个简单的算法——冒泡排序&#xff1b;它可以对少量数据进行从小到大或从大到小排序…

【Linux】GDB的安装与使用

安装安装gdb的具体步骤如下&#xff1a;1、查看当前gdb安装情况rpm -qa | grep gdb如果有&#xff0c;则可以先删除&#xff1a;rpm -e --nodeps 文件名如果没有&#xff0c;则进行下一步。2、下载gdb源码包或者直接apt安装。apt命令安装&#xff1a;sudo apt install gdb源码包…

Qt之QPainter绘制多个矩形/圆形(含源码+注释)

一、绘制示例图 下图绘制的是矩形对象&#xff0c;但是将绘制矩形函数&#xff08;drawRect&#xff09;更改为绘制圆形&#xff08;drawEllipse&#xff09;即可绘制圆形。 二、思路解释 绘制矩形需要自然要获取矩形数据&#xff0c;因此通过鼠标事件获取每个矩形的rect数…

一个完整的渗透学习路线是怎样的?如何成为安全渗透工程师?

前言 1/我是如何学习黑客和渗透&#xff1f; 我是如何学习黑客和渗透测试的&#xff0c;在这里&#xff0c;我就把我的学习路线写一下&#xff0c;让新手和小白们不再迷茫&#xff0c;少走弯路&#xff0c;拒绝时间上的浪费&#xff01; 2/学习常见渗透工具的使用 注意&…

SpringBoot集成 SpringSecurity安全框架

文章目录一、CSRF跨站请求伪造攻击二、项目准备三、认识 SpringSecurity3.1 认证&#x1f380;①直接认证&#x1f380;②使用数据库认证3.2 授权&#x1f361;①基于角色授权&#x1f361;②基于权限的授权&#x1f361;③使用注解判断权限3.3 "记住我"3.4 登录和注…

【JavaEE】如何将JavaWeb项目部署到Linux云服务器?

写在前面 大家好&#xff0c;我是黄小黄。不久前&#xff0c;我们基于 servlet 和 jdbc 完善了博客系统。本文将以该系统为例&#xff0c;演示如何将博客系统部署到 Linux 云服务器。 博客系统传送门&#xff1a; 【JavaEE】前后端分离实现博客系统&#xff08;页面构建&#…

arcpy基础篇(3)-处理空间数据

ArcPy的数据访问模块arcpy.da&#xff0c;可以控制会话、编辑操作、游标、表或要素类与NumPy数组之间相互转换的函数以及对版本化和复本工作流的支持。 1.使用游标访问数据 游标是一个数据库术语&#xff0c;它主要用于访问表格中的每一行记录或者向表中插入新的记录。在ArcG…

【数据结构】Java实现单链表

目录 1. ArrayList的缺陷 2. 链表 2.1 链表的概念及结构 2.2 接口的实现 3. 动手实现单链表 3.1 重写SeqList接口方法 3.2 在当前链表头部添加节点&#xff08;头插&#xff09; 3.3 在 第index位置添加节点&#xff08;任意位置&#xff09; 3.4 在当前链表尾部添加…

Python|蓝桥杯进阶第四卷——图论

欢迎交流学习~~ 专栏&#xff1a; 蓝桥杯Python组刷题日寄 蓝桥杯进阶系列&#xff1a; &#x1f3c6; Python | 蓝桥杯进阶第一卷——字符串 &#x1f50e; Python | 蓝桥杯进阶第二卷——贪心 &#x1f49d; Python | 蓝桥杯进阶第三卷——动态规划 ✈️ Python | 蓝桥杯进阶…

四、快速上手 ODM 操作 Mongodb

文章目录一、ODM 的选择和安装二、MongoEngine 模型介绍三、文档的嵌套模型四、使用 ODM 查询数据4.1 查询一个文档4.2 条件查询4.3 统计、排序和分页五、使用 ODM 新增数据六、使用 ODM 修改和删除数据一、ODM 的选择和安装 MongoEngine&#xff1a; 使用最为广泛的 ODM。htt…

【C++】命名空间

&#x1f3d6;️作者&#xff1a;malloc不出对象 ⛺专栏&#xff1a;C的学习之路 &#x1f466;个人简介&#xff1a;一名双非本科院校大二在读的科班编程菜鸟&#xff0c;努力编程只为赶上各位大佬的步伐&#x1f648;&#x1f648; 目录前言一、命名空间产生的背景二、命名空…

基础篇:07-Nacos注册中心

1.Nacos安装部署 1.1 下载安装 nacos官网提供了安装部署教程&#xff0c;其下载链接指向github官网&#xff0c;选择合适版本即可。如访问受阻可直接使用以下最新稳定版压缩包&#xff1a;&#x1f4ce;nacos-server-2.1.0.zip&#xff0c;后续我们也可能会更改为其他版本做更…

图论学习(五)

极图 l部图的概念与特征 定义&#xff1a;若简单图G的点集V有一个划分&#xff1a; 且所有的Vi非空&#xff0c;Vi内的点均不邻接&#xff0c;设G是一个l部图。 如果l2&#xff0c;则G就是偶图。n阶无环图必是n部图。若l1<l2≤n&#xff0c;则任意的l1部图也是l2部图。…

【毕业设计】基于SpringBoot+Vue论坛管理系统【源码(完整源码请私聊)+论文+演示视频+包运行成功】

您好&#xff0c;我是码农飞哥&#xff0c;感谢您阅读本文&#xff0c;欢迎一键三连哦。 &#x1f4aa;&#x1f3fb; 1. Python基础专栏&#xff0c;基础知识一网打尽&#xff0c;9.9元买不了吃亏&#xff0c;买不了上当。 Python从入门到精通 &#x1f601; 2. 毕业设计专栏&…