发布时间：2024-11-24 11:01
ES6共有六种变量声明方法：var、function、const、let、import、class
顶层对象属性：在浏览器中，顶层对象指window,在node中，顶层对象指global,用var、function命令声明的顶层的全局变量，依旧是顶层对象的属性（原ES5中，顶层对象的属性赋值与全局变量赋值为同一件事）,用let 、const、class命令声明的全局变量，不属于顶层对象的属性
ES6新增globalThis顶层对象，在任何环境下都是存在的，globalThis指向全局环境下的this.
const sym = Symbol('foo');
sym.description // "foo"
const promise = new Promise(function(resolve, reject) {
// ... some code
if (/* 异步操作成功 */){
resolve(value);
} else {
reject(error);
}
});
//Promise异步加载图片
function loadImageAsync(url) {
return new Promise(function(resolve, reject) {
const image = new Image();
image.onload = function() {
resolve(image);
};
image.onerror = function() {
reject(new Error('Could not load image at ' + url));
};
image.src = url;
});
}
// 写法一(注意try{}catch(){}的用法）
const promise = new Promise(function(resolve, reject) {
try {
throw new Error('test');
} catch(e) {
reject(e);
}
});
promise.catch(function(error) {
console.log(error);
});
// 写法二
const promise = new Promise(function(resolve, reject) {
reject(new Error('test'));
});
promise.catch(function(error) {
console.log(error);
});
（1）可捕获的错误有：Promise对象状态变为rejected时抛出的错误；.then（）方法抛出的错误
（2）Promise错误特性：
const p = Promise.all([p1, p2, p3]);
Promise.resolve().then(f)
//创建一个Promise的类
class Promise{
constructor(executer){//构造函数constructor里面是个执行器
this.status = 'pending';//默认的状态 pending
this.value = undefined//成功的值默认undefined
this.reason = undefined//失败的值默认undefined
//状态只有在pending时候才能改变
let resolveFn = value =>{
//判断只有等待时才能resolve成功
if(this.status == pending){
this.status = 'resolve';
this.value = value;
}
}
//判断只有等待时才能reject失败
let rejectFn = reason =>{
if(this.status == pending){
this.status = 'reject';
this.reason = reason;
}
}
try{
//把resolve和reject两个函数传给执行器executer
executer(resolve,reject);
}catch(e){
reject(e);//失败的话进catch
}
}
then(onFufilled,onReject){
//如果状态成功调用onFufilled
if(this.status = 'resolve'){
onFufilled(this.value);
}
//如果状态失败调用onReject
if(this.status = 'reject'){
onReject(this.reason);
}
}
}
新的数据结构，类似于数组，但成员的值都是唯一的，实现iterator接口，所以可使用扩展运算符与for…of…进行遍历
Set构造函数可用任一具有iterator接口的数据作为参数生成Set结构
特点：
1.向Set中加入值时，不会发生类型转换，内部判断方法类似于 严格相等===，
但是=== 与==中，NaN不等于自身，Set中等于自身
2.Array.from()将Set结构转为数组,可用于数组去重
set的属性与方法:
1.size 返回集合元素与个数
2. add 增加新元素并返回新集合
3. delete 删除元素，返回布尔值
4. has 检测集合中是否包含某个元素，返回布尔值
5. clear 清空集合，返回undefined
6. 四个遍历方法：
（1） Set.prototype.keys()：返回键名的遍历器 注：Set的键名与键值相同
（2）Set.prototype.values()：返回键值的遍历器
（3）Set.prototype.entries()：返回键值对的遍历器
（4）Set.prototype.forEach()：使用回调函数遍历每个成员
//声明一个 set
let s = new Set();
let s2 = new Set(['大事儿','小事儿','好事儿','坏事儿','小事儿']);
//元素个数
// console.log(s2.size);
//添加新的元素
// s2.add('喜事儿');
//删除元素
// s2.delete('坏事儿');
//检测
// console.log(s2.has('糟心事'));
//清空
// s2.clear();
// console.log(s2);
for(let v of s2){
console.log(v);
}
集合操作：
let arr1 = [1,2,3,4,5,4,3,2,1];
//1. 数组去重
let result1 = [...new Set(arr)];
console.log(result1);
//2. 交集
let arr2 = [4,5,6,5,6];
let result2 = [...new Set(arr1)].filter(item => {
let s2 = new Set(arr2);// 4 5 6
if(s2.has(item)){
return true;
}else{
return false;
}
});
//简化写法
let result22 = [...new Set(arr1)].filter(item => new Set(arr2).has(item));
console.log(result);
//3. 并集
let union = [...new Set([...arr, ...arr2])];
console.log(union);
//4. 差集
let diff = [...new Set(arr1)].filter(item => !(new Set(arr2).has(item)));
console.log(diff);
与Set类似，也是不重复的值的集合，
与Set不同的点：该数据结构成员只能是对象，而不能是其他类型的值;该数据结构中的对象为弱引用，即垃圾回收机制不考虑weakSet对该对象的引用，该结构只适用于存放临时对象及其信息，不适合被引用，该结构不可被遍历
三个方法：
WeakSet.prototype.add(value)：向 WeakSet 实例添加一个新成员。
WeakSet.prototype.delete(value)：清除 WeakSet 实例的指定成员。
WeakSet.prototype.has(value)：返回一个布尔值，表示某个值是否在WeakSet实例中
WeakSet 没有size属性，没有办法遍历它的成员。
它类似于对象，也是键值对的集合。但是“键”范围不限于字符串，各种类型的值（包括对象）都可以当作键。Map 也实现了iterator 接口，所以可以使用扩展运算符和for…of…进行遍历。对同一个键进行多次赋值，后面的值将覆盖前面的值。Map的键读取的是该值的内存地址,只要两个值严格相等，则将其视为同一个键。（NaN例外，虽然NaN与自身不严格相等，但Map会当成同一个键）
Map 的属性和方法：
1.size（） 返回集合Map个数
//声明 Map
let m = new Map();
//添加元素
m.set('name','尚硅谷');
m.set('change', function(){
console.log("我们可以改变你!!");
});
let key = {
school : 'ATGUIGU'
};
m.set(key, ['北京','上海','深圳']);
//size
console.log(m.size);
//删除
m.delete('name');
//获取
console.log(m.get('change'));
console.log(m.get(key));
//清空
m.clear();
//遍历
for(let v of m){
console.log(v);
}
/*与其他数据结构相互转换*/
//转换为数组 ...扩展运算符
const myMap = new Map()
.set(true, 7)
.set({foo: 3}, ['abc']);
[...myMap]
//数组转为Map
new Map([
[true, 7],
[{foo: 3}, ['abc']]
])
//Map转为对象
function strMapToObj(strMap) {
let obj = Object.create(null);
for (let [k,v] of strMap) {
obj[k] = v;
}
return obj;
}
const myMap = new Map()
.set('yes', true)
.set('no', false);
strMapToObj(myMap)
//对象转为Map Object.entries()或者自己构造转换函数
let obj = {"a":1, "b":2};
let map = new Map(Object.entries(obj))
//Map转为JSON
//(1)Map 的键名都是字符串，这时可以选择转为对象 JSON。
function strMapToJson(strMap) {
return JSON.stringify(strMapToObj(strMap));
}
let myMap = new Map().set('yes', true).set('no', false);
strMapToJson(myMap)
//(2)Map 的键名有非字符串，这时可以选择转为数组 JSON
function mapToArrayJson(map) {
return JSON.stringify([...map]);
}
let myMap = new Map().set(true, 7).set({foo: 3}, ['abc']);
mapToArrayJson(myMap)
与Map结构相似，用于生成键值对的集合
区别：
（1) WeakMap只接受对象作为键名（null除外），其键名所指向的对象，不计入垃圾回收机制，与WeakSet类似，WeakMap的专用场合就是，它的键所对应的对象，可能会在将来消失。
(2) 没有遍历操作（即没有keys()、values()和entries()方法），也没有size属性。不支持clear()
属性与方法：get()、set()、has()、delete()。
用途： DOM 节点作为键名；部署私有属性
WeakRef（） 构造函数直接创建对象的弱引用(创建对象）
WeakRef实例对象有方法：deref()
作用：作为缓存，未被清除时可以从缓存取值，一旦清除缓存就自动失效。
var it = makeIterator(['a', 'b']);
it.next() // { value: "a", done: false }
it.next() // { value: "b", done: false }
it.next() // { value: undefined, done: true }
function makeIterator(array) {
var nextIndex = 0;
return {
next: function() {
return nextIndex < array.length ?
{value: array[nextIndex++], done: false} :
{value: undefined, done: true};
}
};
}
function* iterTree(tree) {
if (Array.isArray(tree)) {
for(let i=0; i < tree.length; i++) {
yield* iterTree(tree[i]);
}
} else {
yield tree;
}
}
const tree = [ 'a', ['b', 'c'], ['d', 'e'] ];
async本质为Generaor函数的语法糖：async函数就是将 Generator 函数的星号（*）替换成async，将yield替换成await，仅此而已
清理注册表功能
用于修改某些操作默认行为，属于元编程
Proxy（target,handler）构造函数，用来生Proxy实例，target为拦截目标对象，handler为定制拦截行为的对象（操作）
const handler = {
construct (target, args, newTarget) {
return new target(...args);
}
};
(10) deleteProperty() ,拦截delete操作，如果这个方法抛出错误或者返回false，当前属性就无法被delete命令删除
(11) defineProperty()，拦截了Object.defineProperty()操作。
注：，如果目标对象不可扩展（non-extensible），则defineProperty()不能增加目标对象上不存在的属性，否则会报错。另外，如果目标对象的某个属性不可写（writable）或不可配置（configurable），则defineProperty()方法不得改变这两个设置。
（12）**preventExtensions（）**拦截Object.preventExtensions()。该方法必须返回一个布尔值，否则会被自动转为布尔值。只有目标对象不可扩展时（即Object.isExtensible(proxy)为false proxy.preventExtensions 才能返回true，否则会报错。
(13)this的指向，proxy代理的情况下，this指向proxy代理。
应用：代理服务器
将Object对象的一些明显属于语言内部的方法，放在Reflect对象上；修改某些Object方法的返回结果，让其变得更合理； 让Object操作都变成函数行为；Reflect对象的方法与Proxy对象的方法一一对应，只要是Proxy对象的方法，就能在Reflect对象上找到对应的方法
(1)静态方法：13个静态方法，与Proxy一一对应
Reflect.apply(target, thisArg, args)
Reflect.construct(target, args)
Reflect.get(target, name, receiver)
Reflect.set(target, name, value, receiver)
注：
a. 若name属性设置了赋值set、读取get函数，则赋值/读取函数的this指向receiver
b.如果 Proxy对象和 Reflect对象联合使用，前者拦截赋值操作，后者完成赋值的默认行为，而且传入了receiver，那么Reflect.set会触发Proxy.defineProperty拦截。
Reflect.defineProperty(target, name, desc)
Reflect.deleteProperty(target, name)
Reflect.has(target, name)
Reflect.ownKeys(target)
Reflect.isExtensible(target)
Reflect.preventExtensions(target)
Reflect.getOwnPropertyDescriptor(target, name)
Reflect.getPrototypeOf(target)
Reflect.setPrototypeOf(target, prototype)
(2）应用：使用 Proxy 实现观察者模式
const queuedObservers = new Set();
const observe = fn => queuedObservers.add(fn);
const observable = obj => new Proxy(obj, {set});
function set(target, key, value, receiver) {
const result = Reflect.set(target, key, value, receiver);
queuedObservers.forEach(observer => observer());
return result;
}
作为对象的模板，通过class关键字，可以定义类
class 实例：
//class
class Shouji{
//构造方法 名字不能修改
constructor(brand, price){
this.brand = brand;
this.price = price;
}
//方法必须使用该语法, 不能使用 ES5 的对象完整形式
call(){
console.log("我可以打电话!!");
}
}
let onePlus = new Shouji("1+", 1999);
console.log(onePlus);
关键点：
class Phone{
//静态属性
static name = '手机';
static change(){
console.log("我可以改变世界");
}
}
let nokia = new Phone();
console.log(nokia.name);//输出为undefined
console.log(Phone.name);//输出为手机
class A {
use(obj) {
try {
obj.#foo;
} catch {
// 私有属性 #foo 不存在
}
}
}
const a = new A();
a.use(a); // 报错
(2) in运算符也可以判断是否有私有属性（对于Object.Create()、Object.setPrototypeof()形成的继承是无效的，因为这两种继承无法传递私有属性）
class A {
use(obj) {
if (#foo in obj) {
// 私有属性 #foo 存在
} else {
// 私有属性 #foo 不存在
}
}
}
class Phone{
//构造方法
constructor(brand, price){
this.brand = brand;
this.price = price;
}
//父类的成员属性
call(){
console.log("我可以打电话!!");
}
}
class SmartPhone extends Phone {
//构造方法
constructor(brand, price, color, size){
super(brand, price);// Phone.call(this, brand, price)
this.color = color;
this.size = size;
}
photo(){
console.log("拍照");
}
playGame(){
console.log("玩游戏");
}
call(){
console.log('我可以进行视频通话');
}
}
const xiaomi = new SmartPhone('小米',799,'黑色','4.7inch');
// console.log(xiaomi);
xiaomi.call();
xiaomi.photo();
xiaomi.playGame();
// get 和 set
class Phone{
get price(){
console.log("价格属性被读取了");
return 'iloveyou';
}
set price(newVal){
console.log('价格属性被修改了');
}
}
//实例化对象
let s = new Phone();
// console.log(s.price);
s.price = 'free';
class A {
}
class B extends A {
}
B.__proto__ === A // true
B.prototype.__proto__ === A.prototype // true
Number.EPSILON 是 JavaScript 表示的最小精度
二进制（0b）与八进制(0o)
Number.isFinite( )检测数值是否为有限
Number.isNaN( )检测一个数值是否为NaN
Number.parseInt( )将字符串提取为整数
Number.parseFloat( )将字符串提取为浮点数
Number.isInteger（ ） 判断一个数是否为整数
Math.sign 判断一个数到底为正数 负数 还是零
Math.trunc( ) 去除小数部分，返回整数部分
//0. Number.EPSILON 是 JavaScript 表示的最小精度
EPSILON 属性的值接近于 2.2204460492503130808472633361816E-16
// function equal(a, b){
// if(Math.abs(a-b) < Number.EPSILON){
// return true;
// }else{
// return false;
// }
// }
// console.log(0.1 + 0.2 === 0.3);
// console.log(equal(0.1 + 0.2, 0.3))
//1. 二进制和八进制
let b = 0b1010;
// let o = 0o777;
// let d = 100;
// let x = 0xff;
// console.log(x);
//2. Number.isFinite 检测一个数值是否为有限数
console.log(Number.isFinite(100));
// console.log(Number.isFinite(100/0));
// console.log(Number.isFinite(Infinity));
//3. Number.isNaN 检测一个数值是否为 NaN
console.log(Number.isNaN(123));
//4. Number.parseInt Number.parseFloat字符串转整数
console.log(Number.parseInt('5211314love'));
// console.log(Number.parseFloat('3.1415926神奇'));
//5. Number.isInteger 判断一个数是否为整数
console.log(Number.isInteger(5));
// console.log(Number.isInteger(2.5));
//6. Math.trunc 将数字的小数部分抹掉
console.log(Math.trunc(3.5));
//7. Math.sign 判断一个数到底为正数 负数 还是零
console.log(Math.sign(100));
console.log(Math.sign(0));
console.log(Math.sign(-20000));
1.Object.is（a, b） 判断a,b两个值是否完全相等, 与===不同之处可以比较NaN
2.Object.assign（obj1, obj2） 对象的合并(实际为obj2将obj1覆盖）
3. Object.setPrototypeOf （obj1,obj2）设置原型对象(将obj2设置为obj1的原型对象）
//1. Object.is 判断两个值是否完全相等
console.log(Object.is(120, 120));//
console.log(Object.is(NaN, NaN));//
console.log(NaN === NaN);//
//2. Object.assign 对象的合并
const config1 = {
host: 'localhost',
port: 3306,
name: 'root',
pass: 'root',
test: 'test'
};
const config2 = {
host: 'http://atguigu.com',
port: 33060,
name: 'atguigu.com',
pass: 'iloveyou',
test2: 'test2'
}
// console.log(Object.assign(config1, config2));
//3. Object.setPrototypeOf 设置原型对象 Object.getPrototypeof
const school = {
name: '尚硅谷'
}
const cities = {
xiaoqu: ['北京','上海','深圳']
}
Object.setPrototypeOf(school, cities);
console.log(Object.getPrototypeOf(school));
console.log(school);
优势：防止命名冲突；代码复用；高维护性
模块化语法：
//2. 解构赋值形式
import {school, teach} from "./src/js/m1.js";
// 当导入时有两个相同的内容名，使用别名
import {school as guigu, findJob} from "./src/js/m2.js";
//对于直接暴露的内容的引入，有相同的内容名，也使用别名
import {default as m3} from "./src/js/m3.js";
直接引入（针对直接暴露）：import 文件名（去除扩展名）from “路径”
模块引入的另一种方法
a.建立单独的js文件，将所有需要引入的模块在这个文件中引入
b.再在真正需要引入模块的文件里将1建立的js文件用src方法引入
//需要设置类型
<script src="./src/js/app.js" type="module"></script>
Babel的使用（主要是解决兼容性问题）：
5. 安装工具 npm i babel-cli babel-preset-env browserify(webpack) -D
6. 编译 npx babel src/js -d dist/js --presets=babel-preset-env
7. 打包 npx browserify dist/js/app.js -o dist/bundle.js
Array.prototype.includes用来检测数组中是否包含某个元素，返回布尔类型值
const mingzhu = ['西游记','红楼梦','三国演义','水浒传'];
//判断
console.log(mingzhu.includes('西游记'));//输出true
console.log(mingzhu.includes('金瓶梅'));
**为指数运算符 用来实现幂运算，与Math.pow功能一致
// **
console.log(2 ** 10);//
console.log(Math.pow(2, 10));
async 函数的返回值为 promise 对象
若返回结果不是promise: 该函数的返回值除了主动抛出错误（此时为rejected），其余情况下返回值都是resolved Promise对象,即此时返回的promise对象无论如何都成功
若返回结果为promise： 则返回值promise对象的成功与否取决于返回结果promise的成功
await 必须写在 async 函数中
await 右侧的表达式一般为 promise 对象
await 返回的是 promise 成功的值
await 的 promise 失败了, 就会抛出异常, 需要通过 try…catch 捕获处理
.async 与await相结合可以使异步类似于同步？？？（没理解）
案例：async与await结合进行读取数据
//1. 引入 fs 模块
const fs = require("fs");
//读取『为学』
function readWeiXue() {
return new Promise((resolve, reject) => {
fs.readFile("./resources/为学.md", (err, data) => {
//如果失败
if (err) reject(err);
//如果成功
resolve(data);
})
})
}
function readChaYangShi() {
return new Promise((resolve, reject) => {
fs.readFile("./resources/插秧诗.md", (err, data) => {
//如果失败
if (err) reject(err);
//如果成功
resolve(data);
})
})
}
function readGuanShu() {
return new Promise((resolve, reject) => {
fs.readFile("./resources/观书有感.md", (err, data) => {
//如果失败
if (err) reject(err);
//如果成功
resolve(data);
})
})
}
//声明一个 async 函数
async function main(){
//获取为学内容
let weixue = await readWeiXue();
//获取插秧诗内容
let chayang = await readChaYangShi();
// 获取观书有感
let guanshu = await readGuanShu();
console.log(weixue.toString());
console.log(chayang.toString());
console.log(guanshu.toString());
}
main();
案例2：async与awit结合进行封装ajax请求
// 发送 AJAX 请求, 返回的结果是 Promise 对象
function sendAJAX(url) {
return new Promise((resolve, reject) => {
//1. 创建对象
const x = new XMLHttpRequest();
//2. 初始化
x.open('GET', url);
//3. 发送
x.send();
//4. 事件绑定
x.onreadystatechange = function () {
if (x.readyState === 4) {
if (x.status >= 200 && x.status < 300) {
//成功啦
resolve(x.response);
}else{
//如果失败
reject(x.status);
}
}
}
})
}
//promise then 方法测试
// sendAJAX("https://api.apiopen.top/getJoke").then(value=>{
// console.log(value);
// }, reason=>{})
// async 与 await 测试 axios
async function main(){
//发送 AJAX 请求
let result = await sendAJAX("https://api.apiopen.top/getJoke");
//再次测试
let tianqi = await sendAJAX('https://www.tianqiapi.com/api/?version=v1&city=%E5%8C%97%E4%BA%AC&appid=23941491&appsecret=TXoD5e8P')
console.log(tianqi);
}
main();
Object.keys()方法返回一个给定对象的所有可枚举键值的数组
Object.values()方法返回一个给定对象的所有可枚举属性值的数组
Object.entries()方法返回一个给定对象自身可遍历属性 [key,value] 的数组，返回数组的每个元素又是一个数组
Object.getOwnPropertyDescriptors()方法返回一个给定对象自身可遍历属性的描述对象
const school = {
name:"尚硅谷",
cities:['北京','上海','深圳'],
xueke: ['前端','Java','大数据','运维']
};
//获取对象所有的键
console.log(Object.keys(school));
//获取对象所有的值
console.log(Object.values(school));
//entries
console.log(Object.entries(school));
//创建 Map
const m = new Map(Object.entries(school));
console.log(m.get('cities'));
rest 参数与 spread 扩展运算符在 ES6 中已经引入，不过 ES6 中只针对于数组，在 ES9 中为对象提供了像数组一样的 rest 参数和扩展运算符
ript>
//rest 参数
function connect({host, port, ...user}){
console.log(host);
console.log(port);
console.log(user);
}
//此时输出为host: '127.0.0.1',
//port: 3306,
//user: username: 'root',password: 'root',type: 'master'
connect({
host: '127.0.0.1',
port: 3306,
username: 'root',
password: 'root',
type: 'master'
});
//对象合并
const skillOne = {
q: '天音波'
}
const skillTwo = {
w: '金钟罩'
}
const skillThree = {
e: '天雷破'
}
const skillFour = {
r: '猛龙摆尾'
}
const mangseng = {...skillOne, ...skillTwo, ...skillThree, ...skillFour};
console.log(mangseng)
便于数据的捕获，实际相当于给没项正则匹配的数据命名（用该命名来存储）
//通用方法
//声明一个字符串
// let str = '<a href="http://www.atguigu.com">尚硅谷</a>';
// //提取 url 与 『标签文本』
// const reg = /<a href="(.*)">(.*)<\\/a>/;
// //执行
// const result = reg.exec(str);
console.log(result);//此时输出的对象里group值为undefined
console.log(result[1]);//输出等于console.log(result.groups.url)
console.log(result[2]);//同上
let str = '<a href="http://www.atguigu.com">尚硅谷</a>';
//分组命名
const reg = /<a href="(?<url>.*)">(?<text>.*)<\\/a>/;
const result = reg.exec(str);
console.log(result.groups.url);
console.log(result.groups.text);
//声明字符串
let str = 'JS5211314你知道么555啦啦啦';
//正向断言
const reg = /\\d+(?=啦)/;
const result = reg.exec(str);
//反向断言
const reg = /(?<=么)\\d+/;
const result = reg.exec(str);
console.log(result);
/dot . 元字符 除换行符以外的任意单个字符
let str = `
<ul>
<li>
<a>肖生克的救赎</a>
<p>上映日期: 1994-09-10</p>
</li>
<li>
<a>阿甘正传</a>
<p>上映日期: 1994-07-06</p>
</li>
</ul>`;
//一般的提取方法；声明正则，？为懒惰匹配，阻止继续后面匹配
// const reg = /<li>\\s+<a>(.*?)<\\/a>\\s+<p>(.*?)<\\/p>/;
//dotAll模式 gs为全局匹配
const reg = /<li>.*?<a>(.*?)<\\/a>.*?<p>(.*?)<\\/p>/gs;
//执行匹配
// const result = reg.exec(str);
let result;
let data = [];
while(result = reg.exec(str)){
data.push({title: result[1], time: result[2]});
}
//输出结果
console.log(data);
Object.fromEntries（）将二维数组转换成对象，是Object.Entries（）（将对象转换成二维数组）的逆运算
trim（）本来用作去除字符串中的空字符串
trimStart() trimEnd()用作从（左侧）（右侧）位置剔除空字符串
let str = ' iloveyou ';
console.log(str);
console.log(str.trimStart());//输出 iloveyou
console.log(str.trimEnd());//输出 iloveyou
flat(n）方法将数组降维,参数n为深度（相当于展开层数），默认为1
flatMap（）相当于是flat 与 map的结合
该属性输出symbol的描述符字符串
//创建 Symbol
let s = Symbol('尚硅谷');
console.log(s.description);//输出为尚硅谷
案例：私有属性的设置与调用
class Person{
//公有属性
name;
//私有属性#
#age;
#weight;
//构造方法
constructor(name, age, weight){
this.name = name;
this.#age = age;
this.#weight = weight;
}
intro(){
console.log(this.name);
console.log(this.#age);
console.log(this.#weight);
}
}
//实例化
const girl = new Person('晓红', 18, '45kg');
//下列方法无法成功，不能用平常方法查看私有属性
// console.log(girl.name);
// console.log(girl.#age);
// console.log(girl.#weight);
girl.intro();
Promise.allSettled返回值为promise对象，该promise的结果为成功，并且值为数组，每个数组成功的值为每个调用的promise对象的状态与值
Promise.all（ ）与之类似，区别在于返回的状态与值promise对象的值取决于调用的promise对象的返回值（失败值）
//声明两个promise对象
const p1 = new Promise((resolve, reject)=>{
setTimeout(()=>{
resolve('商品数据 - 1');
},1000)
});
const p2 = new Promise((resolve, reject)=>{
setTimeout(()=>{
resolve('商品数据 - 2');
// reject('出错啦!');
},1000)
});
//调用 allsettled 方法
// const result = Promise.allSettled([p1, p2]);
const res = Promise.all([p1, p2]);
console.log(res);
数据批量匹配方法
let str = `<ul>
<li>
<a>肖生克的救赎</a>
<p>上映日期: 1994-09-10</p>
</li>
<li>
<a>阿甘正传</a>
<p>上映日期: 1994-07-06</p>
</li>
</ul>`;
//声明正则
const reg = /<li>.*?<a>(.*?)<\\/a>.*?<p>(.*?)<\\/p>/sg
//调用方法,一次性匹配字符串里符合正则表达式的数据
const result = str.matchAll(reg);
// ?.
function main(config){
// const dbHost = config && config.db && config.db.host;
//不用层层做判断
const dbHost = config?.db?.host;
console.log(dbHost);
}
main({
db: {
host:'192.168.1.100',
username: 'root'
},
cache: {
host: '192.168.1.200',
username:'admin'
}
})
动态import实现懒加载
//常规静态导入
// import * as m1 from "./hello.js";
//获取元素
const btn = document.getElementById('btn');
btn.onclick = function(){
import('./hello.js').then(module => {
module.hello();
});
}
用于大整数表示与运算
//大整形,使用方法：整数后面+n
// let n = 521n;
// console.log(n, typeof(n));
//BigInt函数
// let n = 123;
console.log(BigInt(n));//输出123n
console.log(BigInt(1.2));//报错
//大数值运算
let max = Number.MAX_SAFE_INTEGER;
console.log(max);
console.log(max + 1);
console.log(max + 2);//输出和上面输出一致
console.log(BigInt(max))
console.log(BigInt(max) + BigInt(1))
console.log(BigInt(max) + BigInt(2))//大整数只能与大整数型做运算