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

news2025/1/16 16:02:13

目录

一、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.coloradmin.cn/o/409456.html

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

相关文章

less变量

Less变量一、Less简介二、Less中的变量三、less外部引入一、Less简介 1.Less是一门css的预处理语言&#xff0c;less是一个css的增强版&#xff0c;通过less可以编写更少的代码实现更强大的样式。 变量名以两条短横线命名 例如&#xff1a; --color&#xff1a;red 2.Less特…

vue的created函数中方法执行的顺序设置方法

1.vue的created钩子函数中&#xff0c;方法的执行顺序 1.1情景&#xff1a;vue框架中通常在created钩子函数里执行访问数据库的方法&#xff0c;然后返回数据给前端&#xff0c;前端data中定义全局变量接收数据 1.2误区&#xff1a;我们可能会思考按照自己设定好的逻辑走&…

使用uni-app的uni.chooseImage获取的图片路径,存储到数据库中,无法在前端展示该路径的图片

html,js,uni-app, 首先我在uni-app中使用如下方法添加图片 uni.chooseImage({count: 1, //count: 6, //默认9sizeType: [original, compressed], //可以指定是原图还是压缩图&#xff0c;默认二者都有sourceType: [album], //从相册选择success: function(res) {console.log(…

【vue2】vue2中的性能优化(持续更新中)

⭐ v-for 遍历避免同时使用 v-if ⭐ v-for 中的key绑定唯一的值 ⭐ v-show与v-if对性能的影响 ⭐ 妙用计算属性 ⭐ 使用防抖与节流控制发送频率 ⭐ 路由守卫处理请求避免重复发送请求 ⭐ 使用第三方UI库的引入方式 【前言】 该系列是博主在使用vue2开发项目中常用上的一…

JavaScript ,18种常用数组方法,快来看看你会吗?

前言 众所周知&#xff0c;向后端请求数据&#xff0c;处理数据是前端工程师必备的技能&#xff0c;从后端请求回来的数据往往是数组的形式返回到前端&#xff0c;因此数组处理方法的重要性可想而知&#xff1b;数组的处理方法在MDN文档上很多&#xff0c;很多朋友在学习时往往…

vue配置代理服务器proxy

一、跨域。 跨域本质是浏览器基于同源策略的一种安全手段 所谓同源&#xff08;即指在同一个域&#xff09;具有以下三个相同点 协议相同&#xff08;protocol&#xff09;主机相同&#xff08;host&#xff09;端口相同&#xff08;port&#xff09; 非同源请求&#xff0c…

vue集成海康h5player实现播放

文章目录前言准备工作视频demo官方文档官方工具开源工具开始开发效果问题点前言 本篇章只针对官方提供个h5player工具&#xff0c;做播放和分屏demo。 当然本篇章也是针对已经接触了海康视频对接的开发者。 准备工作 视频demo 官方文档 API https://open.hikvision.com/d…

Not allowed to load local resource: file:///,浏览器禁止访问浏览器图片,文件解决方法

Not allowed to load local resource: file… 错误出现原因&#xff1a;浏览器出于安全考虑禁止直接读取本机文件(链接以file:///开头)&#xff0c; 解决办法&#xff1a; 创建一个web服务器&#xff0c;将文件放在这个服务器里&#xff0c;让文件有一个在线地址&#xff08…

【小程序项目开发-- 京东商城】uni-app之商品列表页面 (下)

&#x1f935;‍♂️ 个人主页: 计算机魔术师 &#x1f468;‍&#x1f4bb; 作者简介&#xff1a;CSDN内容合伙人&#xff0c;全栈领域优质创作者。 &#x1f310; 推荐一款找工作神器网站: 点击跳转牛客网 |笔试题库|面试经验|实习招聘内推| 还没有账户的小伙伴 速速点击链接…

推荐几个优秀的echarts 图表网站,让你轻松搞定全部报表

1.PPChart - 让图表更简单让图表更简单。PPChart 提供 Echarts 收录、图表制作等服务http://ppchart.com/#/ 2.https://madeapie.com/#/echarts图表制作&#xff0c;Make A Pie&#xff0c;Made A Pie&#xff0c;echarts案例分享&#xff0c;echarts教程分享https://madeapie…

PHP连接数据库MySQL打造xxx管理系统,实现简单的增删改查功能

目录 前言 概述 内容 创建数据库表 实现列表 新增用户 删除用户 编辑用户 前言 最近刚学完PHP和Mysql,历时半个多月时间完成了这样一个简单的算是人员管理系统吧&#xff0c;为了加深印象总结一下&#xff0c;还有很多不足之处&#xff0c;希望大家多多指正&#xff0c;一…

vue点击变色

vue点击一个遍历后元素改变其颜色的方法&#xff0c;有两种情况&#xff0c;第一种是点击单行元素变色&#xff0c;点击另一行元素时&#xff0c;原来变色的元素变回原来的颜色&#xff0c;始终只有一行元素是变色的&#xff0c;第二种情况是点击后永久变色&#xff0c;点击其他…

手把手教你部署前端项目

手把手教你部署前端项目 1.1 用Vue-cli构建简易前端项目 1.1.1 安装 Vue CLI 包 打开命令行工具&#xff0c;执行下列命令来安装 Vue CLI 包&#xff1a; npm install -g vue/cli可以用下面的命令查看是否安装成功&#xff1a; vue --version1.1.2 创建一个项目 新建一个…

背景图片相关应用-铺满,自适应

1.首先了解一下背景相关属性 background-color&#xff1a; 颜色。 background-position&#xff1a; 位置。 数值&#xff0c;或者top,right,bottom,left等&#xff0c;center&#xff1a;距离页面左边的定位&#xff0c;0px&#xff1a;距离页面上面的定位 background-si…

Cesium3Dtilesets 使用customShader的解读以及泛光效果示例

前言&#xff1a;光带原理在旋转弹跳四棱锥这篇文章里早已经阐述过&#xff0c;但还是有不少靓仔靓女可能会感到疑惑&#xff0c;在3Dtilesets里怎么使用&#xff1f;为啥我在网上看到的为数不多的代码示例我看不懂&#xff1f;是由于没理解透彻导致的。借此机会&#xff0c;提…

SocketIO介绍+SpringBoot整合SocketIO完成实时通信

Socket.IO笔记 即时通信是基于TCP长连接&#xff0c;建立连接之后&#xff0c;客户段/服务器可以无限次随时向对端发送数据&#xff0c;实现服务器数据发送的即时性 HTTP HTTP是短链接&#xff0c;设计的目的是减少服务器的压力 HTTP伪即时通讯 轮询 emmet长轮询 long pulling…

vue打包之后出现空白页的原因以及解决方式

路由模式 history 新建项目什么都不动&#xff0c;路由模式&#xff1a;history, 直接npm run build打包 打包之后&#xff0c;直接打开dist文件里面的ndex.html可以看到页面是空白的&#xff0c;控制台是这样的。 再看看网页源码, 对比dist文件夹结构可以看到资源路径的引入…

【前端】React使用react-markdown+antd实现引入渲染markdown文件

项目中遇见一个需求&#xff0c;要求直接在浏览器打开markdown文件进行预览&#xff0c;初次使用遇见一些坎坷&#xff0c;以下记录实现过程&#xff0c;将其封装成了一个组件。 1.下载依赖 yarn add react-markdown//其余样式插件&#xff1a; yarn add remark-gfm yarn …

vue+springboot使用文件流实现文件下载

前言 本次将使用vue和springboot通过文件流的方式教大家怎么去实现文件的下载&#xff0c;那么话不多说&#xff0c;我们直接开始 相关vue导出文件 以下链接为我其他vue进行下载导出文件文章 vue实现把字符串导出为txt 步骤 文件路径 要进行下载的话&#xff0c;我们肯定…

WEB核心【案例:文件下载,案例:点击切换验证码,几种获取properties资源方式】第十二章

目录 1.文件下载 1.1超链接下载&#xff1a; 1.2自定义servlet下载 1.3小结 2.点击切换验证码 2.1前置只是-验证码生成 2.2分析及代码实现 2.3需求2&#xff1a;点击切换验证码-绕过缓存 3.几种获取preperties资源方式 &#x1f49f;作者简介&#xff1a;大家好呀&…