【前端】--- ES6下篇（带你深入了解ES6语法）_es6传参

前言：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 对象可以处于以下三种状态之一：

1. Pending（等待中）：初始状态，既不是成功也不是失败。
2. Fulfilled（已成功）：表示异步操作成功完成。
3. 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