Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Contribute to GitLab
Sign in / Register
Toggle navigation
Y
yifu-study-front-share
Project
Project
Details
Activity
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Board
Labels
Milestones
CI / CD
CI / CD
Pipelines
Schedules
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Commits
Issue Boards
Open sidebar
yifu-study
front
yifu-study-front-share
Commits
22524797
Commit
22524797
authored
Jan 17, 2023
by
liyan
Browse files
Options
Browse Files
Download
Plain Diff
Merge branch 'master' of
ssh://192.168.1.113:10022/yifu-study/front/yifu-study-front-share
parents
8e002071
9ddc2305
Pipeline
#17555
failed with stage
Changes
3
Pipelines
1
Hide whitespace changes
Inline
Side-by-side
Showing
3 changed files
with
323 additions
and
1 deletion
+323
-1
ES11新特性.md
source/_posts/ES11新特性.md
+194
-0
JavaScript中的IndexedDB使用(一).md
source/_posts/JavaScript中的IndexedDB使用(一).md
+128
-0
JavaScript中的正则表达式(二).md
source/_posts/JavaScript中的正则表达式(二).md
+1
-1
No files found.
source/_posts/ES11新特性.md
0 → 100644
View file @
22524797
```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
=
900719925474099211
n
console
.
log
(
bigNumber
+
1
n
)
// 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 都能拿到其顶层对象
source/_posts/JavaScript中的IndexedDB使用(一).md
0 → 100644
View file @
22524797
---
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)
```
source/_posts/JavaScript中的正则表达式(二).md
View file @
22524797
...
...
@@ -16,7 +16,7 @@ tags:
方括号查询范围内符合的内容,在方括号中可以包含多个字符,表示匹配其中任意一个字符。如果多个字符的编码顺序是连续的,可以仅指定开头和结尾字符,省略中间字符,仅使用连字符~表示。如果在方括号内添加脱字符^前缀,还可以表示范围之外的字符。例如: (注意:中括号内不能有空格 ,否则会误解为还要匹配空格)
| 正则表达式模式 | 说明 |
| ---- | ---- |
| ---- | ---- |
----|
|
`(x|y)`
| 查找任何以
`|`
分隔的选项。 |
|
[
abc
]
| 查找方括号内任意一个字符。 |
|
[
^abc
]
| 查找不在方括号内的字符。|
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment