1、简介

（1）ECMAScript和JavaScript的关系

ECMAScript 也是一门脚本语言，缩写为ES，通常看做JavaScript的标准化规范ECMAScript6.0是JavaScript语言的下一代标准，它的目标是使得JavaScript语言可以用来编写复杂的大型应用程序，成为企业级开发语言。

但实际上JavaScript是ECMAScript的扩展语言，因为ECMAScript只提供了最基本的语法，通俗点说只是约定了我们的代码如何编写，比如定义变量和函数，循环和分支…它只是停留在语言层面，并不能用来完成我们应用中的实际功能开发。

在浏览器环境中，JavaScript = ECMAScript + BOM + DOM

2、基本语法

ES标准中不包含DOM和BOM的定义，只涵盖基本数据类型、关键词、语句、运算符、内建对象、内建函数等通用语法。

（1）let声明变量

// var 声明的变量没有局部作用域
// let 声明的变量 有局部作用域
{
var a = 0
let b = 1
}
console.log(a) // 0
console.log(b) // ReferenceError: b is not defined// var 可以声明多次
// let 只能声明一次
var m = 1
var m = 2
let n = 3
let n = 4
console.log(m) // 2
console.log(n) // Identifier 'n' has already been declared// var 会变量提升
// let 不存在变量提升
console.log(x) //undefined
var x = "apple"
console.log(y) //ReferenceError: y is not defined
let y = "banana"

（2）const声明常量

// 1、声明之后不允许改变
const PI = "3.1415926"
PI = 3 // TypeError: Assignment to constant variable.// 2、一但声明必须初始化，否则会报错
const MY_AGE // SyntaxError: Missing initializer in const declaration

（3）解构赋值

解构赋值是对赋值运算符的扩展。它是一种针对数组或者对象进行模式匹配，然后对其中的变量进行赋值。在代码书写上简洁且易读，语意更加清晰明了，也方便了复杂对象中数据字段获取。

//1、数组解构
// 传统
let a = 1, b = 2, c = 3
console.log(a, b, c)
// ES6
let [x, y, z] = [1, 2, 3]
console.log(x, y, z)//2、对象解构
let user = {name: 'Helen', age: 18}
// 传统
let name1 = user.name
let age1 = user.age
console.log(name1, age1)
// ES6
let { name, age } = user//注意：解构的变量必须是user中的属性
console.log(name, age)

（4）模板字符串

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

// 1、多行字符串
let string1 = `Hey,
can you stop angry now?`
console.log(string1)
// Hey,
// can you stop angry now?// 2、字符串插入变量和表达式。变量名写在 ${} 中，${} 中可以放入 JavaScript 表达式。
let name = "Mike"
let age = 27
let info = `My Name is ${name},I am ${age+1} years old next year.`
console.log(info)
// My Name is Mike,I am 28 years old next year.// 3、字符串中调用函数
function f(){return "have fun!"
}
let string2 = `Game start,${f()}`
console.log(string2); // Game start,have fun!

（5）声明对象简写

const age = 12
const name = "Amy"
// 传统
const person1 = {age: age, name: name}
console.log(person1)
// ES6
const person2 = {age, name}
console.log(person2) //{age: 12, name: "Amy"}

（6）定义方法简写

// 传统
const person1 = {sayHi:function(){console.log("Hi")}
}
person1.sayHi();//"Hi"// ES6
const person2 = {sayHi(){console.log("Hi")}
}
person2.sayHi() //"Hi"

（7）对象拓展运算符

拓展运算符（...）用于取出参数对象所有可遍历属性然后拷贝到当前对象。

// 1、拷贝对象
let person1 = {name: "Amy", age: 15}
let someone = { ...person1 }
console.log(someone) //{name: "Amy", age: 15}// 2、合并对象
let age = {age: 15}
let name = {name: "Amy"}
let person2 = {...age, ...name}
console.log(person2) //{age: 15, name: "Amy"}

（8）函数的默认参数

function showInfo(name, age = 17) {console.log(name + "," + age)
}
// 只有在未传递参数，或者参数为 undefined 时，才会使用默认参数
// null 值被认为是有效的值传递。
showInfo("Amy", 18) // Amy,18
showInfo("Amy", "") // Amy,
showInfo("Amy", null) // Amy, null
showInfo("Amy")       // Amy,17
showInfo("Amy", undefined) // Amy,17

（9）不定参数

不定参数用来表示不确定参数个数，形如，...变量名，由...加上一个具名参数表示符组成。具名参数只能放在参数列表的最后，并且有且只有一个不定参数。

function f(...values) {console.log(values.length)
}
f(1, 2) //2
f(1, 2, 3, 4) //4

（10）箭头函数

箭头函数提供了一种更加简洁的函数书写方式。

基本语法是：参数 => 函数体

settimeout(() => {},1000)// 传统
var f1 = function(a){return a
}
console.log(f1(1))// ES6
var f2 = a => a
console.log(f2(1))// 当箭头函数没有参数或者有多个参数，要用 () 括起来。
// 当箭头函数函数体有多行语句，用 {} 包裹起来，表示代码块，
// 当只有一行语句，并且需要返回结果时，可以省略 {} , 结果会自动返回。
var f3 = (a,b) => {let result = a+breturn result
}
console.log(f3(6,2)) // 8
// 前面代码相当于：
var f4 = (a,b) => a+b

（11）Promise承诺

在JavaScript的世界中，所有代码都是单线程执行的。由于这个“缺陷”，导致JavaScript的所有网络操作，浏览器事件，都必须是异步执行。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="js/jquery-3.6.0.min.js"></script>
</head>
<body></body>
</html>
<script>
/*页面需要在服务器上运行最开始open in browser 访问是本地磁盘的文件安装live Server 插件运行 选择 open with live server
*/
/**/
/*问题:所有的请求都是异步 异步的问题:第二个请求需要用到第一个请求的返回值有可能第二个请求先会返回数据解决:通过请求的嵌套来解决将请求2嵌套在请求1成功的回调函数里面问题:如果请求过多，只能在成功的回调函数继续嵌套， 前端人员嵌套的噩梦代码的可读性非常的差使用promise，来解决嵌套的噩梦promise解决代码格式问题
*/
console.log("请求开始----------------------");
setTimeout(() => {//请求1 student.json$.ajax({url:"json/student.json",data:{},type:"get",dataType:"json",success(obj) {console.log("请求1执行完成---------------");console.log(obj);//请求2 user.json$.get("json/user.json",obj1 => {console.log("请求2执行完成---------------");console.log(obj1);},"json")}})
}, 2000);</script>

Promise是异步编程的一种解决方案。从语法上说，Promise是一个对象，从它可以获取异步操作的响应消息。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="js/jquery-3.6.0.min.js"></script>
</head>
<body></body></html>
<script>console.log("请求开始----------------------");//创建一个promis对象var p = new Promise((resolve, reject) => {//两秒过后执行请求1 student.jsonsetTimeout(() => {//请求1 student.json$.ajax({url: "json/student.json",data: {},type: "get",dataType: "json",//成功的回调函数success(obj) {console.log("请求1执行完成---------------");console.log(obj);resolve(obj);},//失败的回调函数error() {console.log("请求1失败了-----------------");reject();}})}, 2000)})//请求1执行成功 会执行.thenp.then(data => {console.log("a()执行了");console.log(data);//请求2 user.json$.get("json/user.json", obj => {console.log("请求2执行成功--------------------");console.log(obj);}, "json")}).catch(_ => {// 请求1失败 会执行.catchconsole.log("b()执行了");})console.log("请求结束----------------------");
</script>

ECMAScript6详解相关推荐

2.ECMAScript6详解
文章目录 ECMAScript6详解 1.ECMAScript6 简介 1.1 ECMAScript 和 JavaScript 的关系 1.2 ES6 与 ECMAScript 2015 的关系 2. ...
【ES6】 let与const详解
[ES6] let与const详解 ES6,全称为ECMAScript6.ES6与js的关系是:前者是后者的规格,后者是前者的实现.换句话说,ES是js的国际化版本,js是ES的子集. 1. let ...
JavaScript数据结构与算法——链表详解（上）
注:与之前JavaScript数据结构与算法系列博客不同的是,从这篇开始,此系列博客采用es6语法编写,这样在学数据结构的同时还能对ECMAScript6有进一步的认识,如需先了解es6语法请浏览ht ...
angularjs详解
1 前言前端技术的发展是如此之快,各种优秀技术.优秀框架的出现简直让人目不暇接,紧跟时代潮流,学习掌握新知识自然是不敢怠慢. AngularJS是google在维护,其在国外已经十分火热,可是国内的 ...
javaScript函数模块详解
javaScript函数模块详解函数实际上是对象,每个函数都是Function类型的实例,而Function也有属性和方法,和其他引用类型一样可以将函数名想象成指针,函数想象成对象注意, ...
vue-cli脚手架配置基础文件详解/新手入门必看
vue-cli 脚手架中webpack 配置基础文件详解需要Word版本的小伙伴可以发我邮件2445478193@qq.com 一.前言 vue-cli是构建vue单页应用的脚手架,输入一串指定的 ...
从命令行到IDE，版本管理工具Git详解（远程仓库创建+命令行讲解+IDEA集成使用）
首先,Git已经并不只是GitHub,而是所有基于Git的平台,只要在你的电脑上面下载了Git,你就可以通过Git去管理"基于Git的平台"上的代码,常用的平台有GitHub.Gi ...
JVM年轻代，老年代，永久代详解
秉承不重复造轮子的原则,查看印象笔记分享连接↓↓↓↓ 传送门:JVM年轻代,老年代,永久代详解速读摘要最近被问到了这个问题,解释的不是很清晰,有一些概念略微模糊,在此进行整理和记录,分享给大家.在 ...
docker常用命令详解
docker常用命令详解本文只记录docker命令在大部分情境下的使用,如果想了解每一个选项的细节,请参考官方文档,这里只作为自己以后的备忘记录下来. 根据自己的理解,总的来说分为以下几种: Doc ...

ECMAScript6详解