目录
一、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
2、ECMAScript
3、什么是 ECMA-262
4、ECMA-262 历史
第 1 版 | 1997 年 | 制定了语言的基本语法 |
第 2 版 | 1998 年 | 较小改动 |
第 3 版 | 1999 年 | 引入正则、异常处理、格 式化输出等。IE 开始支持 |
第 4 版 | 2007 年 | 过于激进,未发布 |
第 5 版 | 2009 年 | 引入严格模式、JSON,扩 展对象、数组、原型、字符串、日期方法 |
第 6 版 | 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、对象拓展运算符
// 展开对象
let person = { name: '路飞', age: 25 }
// let someone = person // 引用赋值,此时对someone修改就是对person修改
let someone = { ...person } // 对象拷贝
someone.name = '索隆'
console.log(person)
console.log(someone)
9、箭头函数
参数 => 函数体
//声明一个函数
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,可以使异步操作中的成功和失败的处理函数独立出来。