前言:ECMAScript是 JavaScript 的标准化版本,由 ECMA 国际组织制定。ECMAScript 定义了 JavaScript 的语法、类型、语句、关键字、保留字等。
ES6 是 ECMAScript 的第六个版本,于 2015 年发布,引入了许多重要的新特性,使 JavaScript 更加现代化。
进制
ES6 中增加了二进制和八进制的写法: 二进制使用前缀 '0b' 或 '0B' , 八进制使用前缀 '0o' 或 '0O'
二进制:
前缀: 0b
或 0B:
let binary = 0b1010; // 二进制 1010console.log(binary); // 输出: 10
八进制:
前缀: 0o
或 0O:
let octal = 0o12; // 八进制 12console.log(octal); // 输出: 10
symbol
主要用于创建唯一且不可变的标识符(主要用于创建不重复的键) 如下面的sym1和sym2可以当做键,也不会报错
const sym1 = Symbol('description');const sym2 = Symbol('description'); // sym1 和 sym2 不相等console.log(sym1 === sym2); // 输出: false
class
类是一种蓝图或模板,用于创建对象。它定义了一组属性(状态)和方法(行为),可以被多个对象共享
class Parent { constructor(name) { this.name = name; } greet() { console.log(`Hello, my name is ${this.name}.`); }}
class继承 :
当你在子类中定义构造函数时,必须调用 super( ) ,否则将无法访问 this 关键字,并且会抛出错误。
class Child extends Parent { constructor(name) { // 如果没有 super(),将无法使用 this super(name); // 必须调用 super() 来访问父类的构造函数 }}const child = new Child('Alice');child.greet(); // 输出: Hello, my name is Alice.
set和map
Set和Map主要的应用场景在于数据重组和数据储存。Set是一种叫做集合的数据类型,Map是一种叫做字典的数据类型
Set和Map是ES6新增的一种数据结构,类似于数组,成员唯一。并且使用键对数据排序即顺序存储,Set本身是一种构造函数,用来生成Set数据结构,Set对象允许你储存任何类型唯一值,无论是原始值还是对象引用
set的一些方法:
创建set对象,然后将元素添加到里面,之后判断该has有没有该元素,size判断该对象当中有几个元素,delete用来进行元素的删除
const mySet = new Set();mySet.add(1);mySet.add(5);mySet.add(5); // 不会添加重复项console.log(mySet.has(5)); // trueconsole.log(mySet.size); // 2mySet.delete(5);console.log(mySet.size); // 1
map的一些方法:
map当中存放的是键值对,然后比set方法当中多了可以通过健名来查找元素
const myMap = new Map();myMap.set('name', 'Alice');myMap.set('age', 30);console.log(myMap.get('name')); // Aliceconsole.log(myMap.has('age')); // trueconsole.log(myMap.size); // 2myMap.delete('age');console.log(myMap.size); // 1
Generator
Generator(生成器)是 JavaScript 中的一种特殊类型的函数,它允许你暂停和恢复函数的执行
let tell = function* () { console.log('1') yield 'a' console.log('2') yield 'b' console.log('3') } let it = tell() it.next() //输出1 it.next() //输出2 it.next() //输出3
next传参第一个参数是没有意义的
{ //yield传参(第一个参数是没有意义的) let tell = function* () { console.log('1') let res1 = yield console.log('2', res1) let res2 = yield console.log('3', res2) } let it = tell() it.next(10) //1 it.next(20) //2,20 it.next(30) //3,30 }
通过Symbol.iterator可使一个普通对象变成一个可迭代对象,从而可以使用let of迭代方法,然后进行输出
//需求 使用for...of输出对象属性值 let obj = { name: 'zhangsan', age: 29, address: 'tianjin' } obj[Symbol.iterator] = function* () { yield obj.name yield obj.age yield obj.address } for (let i of obj) { console.log(i) }
promise
Promise 是异步编程的一种解决方案, 它的构造 函数 是 同步 执行的,then 方法是 异步 执行的,所以Promise创建后里面的函数会立即执行, 构造函数 中的resolve和reject只有第一次执行有效,,也就是说 Promise状态一旦改变就不能再变 promise主要是用来解决 回调地狱 的问题,通过使用.then来使得代码成链式调用,方便维护和使用。
promise的三种状态:
一个 Promise 对象可以处于以下三种状态之一:
Pending(等待中):初始状态,既不是成功也不是失败。Fulfilled(已成功):表示异步操作成功完成。Rejected(已失败):表示异步操作失败。一旦 Promise 的状态从 "pending" 变为 "fulfilled" 或 "rejected",它的状态就不可再改变,这种特性被称为不可变性(Immutability)。
let promise = new Promise((resolve, reject) => { console.log('chengnou') setTimeout(() => { // resolve('zaiyiqi') reject('fensuo') }, 2000); }) promise.then(res => { console.log('res', res) }, err => { console.log('err', err) })
promise的一些方法:
all([p1, p2, p3]) 等待多个请求完成后触发then,有一个失败,则catch
race([p1, p2, p3]) 哪个先完成就先完成哪个
allSettled([p1, p2, p3]) 不管这些请求是否会成功,都会执行then方法
any([p1, p2, p3]) 只要有一个先完成执行then,等所有都失败再catch,一个对就对,全错才错
let p1 = new Promise((resolve, reject) => { setTimeout(resolve, 1000, 'p1') }) let p2 = new Promise((resolve, reject) => { setTimeout(reject, 3000, 'p2') }) let p3 = new Promise((resolve, reject) => { setTimeout(resolve, 2000, 'p3') }) Promise.all([p1, p2, p3]).then(res => { console.log('success', res) //返回p1 }).catch(err => { console.log('err', err)//err AggregateError: All promises were rejected })
module
ES6 中的模块(module)机制是一个现代化的 JavaScript 模块系统,用于更好地组织和管理代码。它的特点是基于 文件级模块作用域,并使用export和import关键字来定义和使用模块
模块的核心特点
文件级作用域: 每个模块都有独立的作用域,模块中的变量和函数默认是私有的,除非显式导出。严格模式: ES6 模块默认启用严格模式,不需要手动添加"use strict"。静态分析: ES6 模块在编译时就会确定模块依赖关系,不像 CommonJS 那样在运行时加载。这种特性使得编译器和工具可以进行更好的优化。单例模式: 同一模块无论被引入多少次,始终只加载一次,并且会缓存结果。导出模块:
命名导出和默认导出的最大区别就是命名导出可以导出多次,但是默认导出只能导出一次
1.命名导出:
export const pi = 3.14159;export function add(a, b) { return a + b;}
2.默认导出:
export default function log(message) { console.log(message);}
导入模块:
1.命名导入:
import { pi, add, Calculator } from './math.js';//也可以重命名导入成员import { add as sum } from './math.js';
2.默认导入:
import log from './logger.js';
3.混合导入:
import log, { pi } from './math.js';
4.导入模块当中的所有内容:
import * as math from './math.js';
ES6中新增的一些其他方法
填充字符串的方法:
1.头部进行填充:
let str = 'addsfsaf' //str.padstart(目标长度,[,填充字符串]) let s = str.padStart(10) let s1 = str.padStart(10, '2') console.log(s1) //22addsfsaf
2.尾部进行填充:
let str = 'addsfsaf' //str.padstart(目标长度,[,填充字符串]) let s = str.padEnd(10) let s1 = str.padEnd(10, '2') console.log(s1) //addsfsaf22
3.适用场景:
//使用场景 console.log('111'.padStart(6, '0'))//000111 console.log('12-12-12'.padStart(10, '0000-00-00'))
对象新增的方法:
let obj = { name: '11', age: 22 } //遍历值 console.log(Object.values(obj)) //遍历键值对 console.log(Object.entries(obj)) //遍历键 console.log(Object.keys(obj)) //将对象转换成map let map = new Map(Object.entries(obj)) console.log(map)
字符串收尾去空格:
let s = ' 1324325 4324 4532 ' console.log(s.trim()) //'1324325 4324 4532' console.log(s.trimStart()) //'1324325 4324 4532 ' console.log(s.trimEnd()) //' 1324325 4324 4532'
替换字符串:
1.替换所有的 a字符
//替换所有a字符 let s = "aflsdjflsefel" console.log(s.replaceAll('s', 'a'))
2.替换a字符当中的第一个a字符
//替换第一个 let s = "aflsdjflsefel" console.log(s.replace('s', 'a'))
3.正则替换所有字符
//正则替换所有 let s = "aflsdjflsefel" console.log(s.replace(/s/g, 'a'))
通过下标查找数组:
let arr = [12, 3, 3, 2, 56, 5] //正数 与之前数组访问下标相同 //负数 从后往前进行查找 console.log(arr.at(1)) console.log(arr.at(-1))//5