Commit 22524797 authored by liyan's avatar liyan
parents 8e002071 9ddc2305
Pipeline #17555 failed with stage
```javascript
title: Map和WeakMap
date: 2022/11/14 18:00:00
author: 张润
```
### 1、class类的私有变量
在ES11 之前js是没有class类的私有变量的概念, 我们程序员一般使用 '_' 开始符号代表了私有变量,列如 _name 代表了class类中name属性为私有的,而Typescript使用private 前缀代表私有属性或者方法. ES11 中使用# 代表类中的属性为私有变量.
```javascript
daclass Dog {
#name = 'owen'
age = 18
getInfo(){
console.log(`dog name is ${this.#name} age is ${this.age}`)
}
}
const dogInstance = new Dog() // dog name is owen age is 18
dogInstance.getInfo()
console.log(dogInstance.#name) // Uncaught SyntaxError: Private field
'#name' must be declared in an enclosing class
```
### 2、Promise.allSettled
ES6引入Promise以来, Promise支持的组合型传入类型的方法只有: promise.all 和promise.race , 而这两种方法都会因为 当promise被reject或者报错的时候发生短路,导致之后的promise不会执行. 引入了Promise.allSettled之后,无论promise数组中任何一个promise状态是reslove还是reject,都会执行完毕,最后返回一个状态数组.
```javascript
const promise1 = new Promise((reslove,reject)=>{
setTimeout(()=>{
reslove('promise success')
},1000)
})
const promise2 = new Promise((reslove,reject)=>{
setTimeout(()=>{
reject('promise fail')
},1000)
})
const proResult = Promise.allSettled([promise1,promise2]).then(data=> {
console.log(data)
})
/*
[
{ status: 'fulfilled', value: 'promise success' },
{ status: 'rejected', reason: 'promise fail' }
]
*/
```
### 3、String.prototye.matchAll
语法: str.machAll(reg)
给定一个字符串和一个正则表达式,machAll可以返回所有的与该字符串匹配正则结果的迭代器.下面是mach() 和 machAll() 的对比
- 注意: Reg正则必须是设置了全局模式g的形式,否则会抛出异常TypeError
```javascript
const reg = /name(\d?)/g
const nameGroup = 'name1name2,name3'
console.log(nameGroup.match(reg))
// [ 'name1', 'name2', 'name3' ]
console.log(nameGroup.matchAll(reg))
// Object [RegExp String Iterator] {}
console.log(...nameGroup.matchAll(reg))
/*
[
'name1',
'1',
index: 0,
input: 'name1name2,name3',
groups: undefined
] [
'name2',
'2',
index: 5,
input: 'name1name2,name3',
groups: undefined
] [
'name3',
'3',
index: 11,
input: 'name1name2,name3',
groups: undefined
]
*/
```
### 4、BigInt任意精度的整数
JavaScript对数字大小有严格的固定限制范围, 当大于2的53次方的时候精度就会消失,举个简单的例子:
```javascript
console.log(2**53) // 9007199254740992
console.log(2**53 === 2**53 + 1) // true
```
Biglnt是一种新的数据类型,所以现在js有八种数据类型了 分别是:
- number
- string
- boolean
- null
- undefined
- symbol
- object
- bigInt
BigInt 产生原因是为了解决js中超过2**53 - 1 的整数精度失效问题. 要创建BigInt只需要在数字的末尾加上一个 'n' 即可. 如下示例:
```javascript
constbigNumber = 900719925474099211n
console.log(bigNumber + 1n) // 900719925474099212n
console.log(bigNumber + 1)
// TypeError: Cannot mix BigInt and other types, use explicit conversions
```
注意BigInt 类型无法跟Number类型互相运算.
### 5、空值合并运算符??
对TypeScript了解的人,大概很早就开始使用??号符号. 在ES11 新特性之后,?? 号符号可以在我们直接书写js时候使用. 当我们要判断某个对象的属性不存在那么就取另外一个对象的时候,列如以下情况:
```javascript
const obj = {
a: 1,
b: 0
}
console.log(obj.a || 3) // 1
console.log(obj.b || 3) // 3
```
如果我们只是想判断obj对象中有那个属性然后取值属性值,没有的话就取值为3 ,这里就会需要多余的判断. 为了避免这种运算,我们使用?? 运算符
```javascript
console.log(obj.a ?? 3) // 1
console.log(obj.b ?? 3) // 0
```
解析: 空值运算符检查所有值的属性是否为undefined或null。如果不是null或undefined,它将返回初始值,否则将返回??后面的值。
### 6、按需获取动态import
同样TypeScript 也已经有了这个运算符,当我们有如下一个对象:
众所周知,ES Module是一种静态加载模块,静态体现在如下信息:
- 静态模块: import/export声明只能出现在顶层作用域,不支持按需加载、懒加载
- 静态标识: 模块标识只能是字符串字面量,不支持运行时动态计算而来的模块名
严格的静态加载,有益于基于源码的静态分析,编译优化,但也同时存在以下的问题:
- 首屏需要加载所有import引入的模块,不利于首屏优化
- 模块较多的时候难以确定每个模块加载的含义
- 仅在特殊情况下需要加载的模块,首次就直接加载影响性能优化.
针对于此, ES11 添加新特性 获取动态import:
```javascript
import(specifier)
```
import函数传入参数模块标识specifier ,返回promise,列如以下示例:
```javascript
// lib.js
function add(a, b) {
return a + b
}
exports.add = add
exports.test = 1
// main.js
const loadAdd = () => {
import('./lib.js').then(res=>{
console.log(res.default.add) // [Function: add]
console.log(res.default.test) // 1
})
}
loadAdd()
```
### 7、globalThis
ES11 在语言标准的层面,引入globalThis作为顶层对象。也就是说,任何环境下,globalThis都是存在的,都可以从它拿到顶层对象,指向全局环境下的this。
列如:
- 在浏览器中它是 window
- 在 worker 中它是 self
- 在 Node.js 中它是global ...... 所以在ES11之后在任何情况下使用globalThis 都能拿到其顶层对象
---
title: JavaScript中的IndexedDB使用(一)
date: 2022/12/12 16:40:00
author: 张顺
---
## 什么是IndexedDB?
IndexedDB是一种在浏览器端存储数据的方式,它丰富了客户端的查询方式,并且因为是本地存储,可以有效的减少网络数据对页面的影响。
## 有什么特点?
- 键值对储存:indexDB采用对象仓库存放数据,所有类型的数据都可以存入。
- 异步:indexDB操作不会锁死浏览器
- 支持事务:操作步骤中一步失败,整个事务取消,不存在只改写一部分数据的情况
- 同源限制:不能访问跨域数据库,只能访问自身域名下的数据库。
- 储存空间大:一般来说不少于250MB,没上限
- 支持二进制储存:可以存储字符串,而且可以存储二进制数据。
### IndexDB中的对象
- 数据库:IDBDatabase对象
- 对象仓库:IDBObjectStore对象
- 索引:IDBIndex
- 事务:IDBTransaction对象
- 操作请求:IDBRequest对象
- 指针:IDBCursor对象
- 键集合:IDBKeyRange对象
### 如何使用
``` JS
1. //打开一个数据库
var db ;
var reqDB = window.indexedDB.open("dbName", 'version');
2. //新建数据库
reqDB.onsuccess = function (event) { // 监听数据库创建成功事件
let db = event.target.result // 数据库对象
console.log('数据库打开成功')
}
reqDB.onerror = function (error) {
console.log('数据库打开报错')
}
reqDB.onupgradeneeded = function (event) {
// 数据库创建或升级的时候会触发
db = event.target.result
let storeName = '表名' // 表名
if (!db.objectStoreNames.contains(storeName)) { // 判断表是否存在
let objectStore = db.createObjectStore(storeName, { keyPath: '主键',autoIncrement: true }) //autoIncrement z主键是否自增
}
}
//dbName:数据库名字,数据库不存在就新建数据库,新建数据库默认版本为1;
//version:表示数据库的版本,整数,如果省略,默认为当前版本。
// indexDB.open()方法返回一个IDBRequest对象。这个对象通过error,success,upgradeneeded处理打开数据库的操作结果。
// db.createObjectStore可以创建一张表,param1 表名,param2 配置对象,keyPath为主键,autoIncrement是自动生成一个自增主键,一般keyPath和autoIncrement只需要一个,两个都存在的话,自动生成一个自增主键,并且keyPath设置的字段必须要存在
// upgradeneedend数据库升级
// 如果指定的版本号大于数据库实际版本号,就会发生数据库升级事件
3,//建索引
//建索引为了进行搜索
reqDB.onupgradeneeded = function (event) {
// 数据库创建或升级的时候会触发
db = event.target.result
let storeName = '表名' // 表名
if (!db.objectStoreNames.contains(storeName)) { // 判断表是否存在
let objectStore = db.createObjectStore(storeName, { keyPath: '主键',autoIncrement: true })
objectStore.createIndex('name', 'name', { unique: false,multiEntry:true }) // 创建索引 可以让你搜索任意字段
}
}
//unique 唯一
//multiEntry 对于有多个值的主键数组,每个值将在索引里面新建一个条目,否则主键数组对应一个条目
4,//添加数据
//需要通过事务对象IDBTransaction 来获取到对象仓库(表),然后通过对象仓库的add()方法向表中添加数据
// 2. 创建事务对象
const t = reqDB.transaction(['表名'], 'readwrite') // readwrite 读写权限模式
// 3. 拿到对象仓库
const objectStore = t.objectStore('表名')
// 4. 添加数据
const req = objectStore.add({xxx: 123456, yyy: '7890'}) // 添加的数据
// 5. 操作成功
req.success = function (e) {}
// 6. 操作失败
req.success = function (e) {}
// 注:1234 可使用点操作符连写
const req = reqDB.transaction(['表名'], 'readwrite')
.objectStore('表名')
.add({xxx: 123456, yyy: '7890'})
5,//修改数据
//同添加流步骤一样,使用对象仓库的put方法,修改表中数据,更新id为1的数据
objectStore.put({id: 1, xxx: 123456, yyy: '7890'})
5,//删除数据
//使用对象仓库的delete方法,删除表中数据,根据id删除
objectStore.delete(1)
6,//获取数据
//使用对象仓库的get方法,获取对应主键的数据,获取id为1的数据
objectStore.get(1)
```
......@@ -16,7 +16,7 @@ tags:
方括号查询范围内符合的内容,在方括号中可以包含多个字符,表示匹配其中任意一个字符。如果多个字符的编码顺序是连续的,可以仅指定开头和结尾字符,省略中间字符,仅使用连字符~表示。如果在方括号内添加脱字符^前缀,还可以表示范围之外的字符。例如: (注意:中括号内不能有空格 ,否则会误解为还要匹配空格)
| 正则表达式模式 | 说明 |
| ---- | ---- |
| ---- | ---- | ----|
| `(x|y)` | 查找任何以 `|`分隔的选项。 |
| [abc] | 查找方括号内任意一个字符。 |
| [^abc]| 查找不在方括号内的字符。|
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment