1.数组的深拷贝
JSON.parse(JSON.stringify(arg)) //第一种方法
structuredClone(arg) //第二种方法
2.数组转字符串 .join()
Array.join('');
3.数组的添加与删除 .push .unshift .pop .shift <影响原数组>
Array.push(value); //后添加
Array.unshift(value); //前添加
Array.pop(); //后删除
Array.shift(); //前删除
4.字符串转单字符数组 .from
Array.from(String)
5.数组内元素的排序 .sort <影响原数组> .toSorted <不影响原数组>
Array.sort((a,b) => a-b ); //升序
Array.sort((a,b) => b-a ); //降序
6.数组去重 <不影响原数组>
Array.from(new Set(arr))
7.查询数组元素
Array.includes(value) //返回bool
8.翻转数组 .reverse() <影响原数组> .toReversed() <不影响原数组>
array.reverse();
9.数组的合并 .concat()
Array.concat(value);
10.生成随机数
Math.floor(Math.random() * (max+1))
11.对象双值转数组 .entries
Object.entries(object)
12.对象左值转数组 .keys
Object.keys(object)
13.对象右值转数组 .values
Object.values(object)
14.字符串转数组 .split
String.split(分割符)
15.检测字符串的开头和结尾 (返回bool)
String.startsWith(value) //检查开头
String.endsWith(value) //检查结尾
16.正则表达式
元字符 | 描述 |
---|---|
. | 句号匹配任意单个字符除了换行符。 |
[ ] | 字符种类。匹配方括号内的任意字符。 |
[^ ] | 否定的字符种类。匹配除了方括号里的任意字符 |
* | 匹配>=0个重复的在*号之前的字符。 |
+ | 匹配>=1个重复的+号前的字符。 |
? | 标记?之前的字符为可选. |
{n,m} | 匹配num个大括号之前的字符或字符集 (n <= num <= m). |
(xyz) | 字符集,匹配与 xyz 完全相等的字符串. |
| | 或运算符,匹配符号前或后的字符. |
\ | 转义字符,用于匹配一些保留的字符 [ ] ( ) { } . * + ? ^ $ \ | |
^ | 从开始行开始匹配. |
$ | 从末端开始匹配. |
修饰符:
i -> 不区分大小写
g -> 全局匹配
m -> 多行匹配
s -> 特殊符号圆点包含换行符
元字符:
\b -> er\b 匹配er结尾单词边界 -> \B反义
\d -> 匹配数字 -> \D反义
\n -> 换行符
\r -> 回车符
\s -> 匹配任何空白字符 -> \S反义
\w -> 字符数字下划线 -> \W反义
1.匹配正则(输出bool值)
pattern.test(str)
2.找出符合正则的值
str.match(pattern)
3.替换符合正则的值
str.replace(pattern , "要替换的值")
17.proxy数据的获取
import { toRaw } from 'vue'
toRaw(arg); //第一种方法
JSON.parse(JSON.stringify(arg)) //第二种方法
18.配置简单路由
const { createRouter,createWebHistory } = VueRouter;
const router = createRouter({
history:createWebHistory(),
routes:[
{
path:'/',
component:WalletPage
},
{
path:'/deposit',
component:DepositPage
}
]
})
19.字符串以UTF-8格式解码
const encoder = new TextEncoder();
const view = encoder.encode(str);
console.log(view); // [226, 130, 172]
20.阻止冒泡事件
event.stopPropagation()
21.获取父元素标签
.parentNode
22.获取子元素标签
.children[0]
23.fetch请求
async function fetchData() {
try {
const data = await (await fetch(URL)).json();
console.log(data);
} catch {}
}
24.获取滚动高度
window.scrollY
25.跳到某一高度
document.documentElement.scrollTop = scrollTopVal
//scrollTopVal为要跳转的px值
26.数组内字符转数字
arr.map(item => Number(item))
27.获取一些宽高值
只读属性
clientWidth , clientHeight (元素padding + content)
clientTop , clientLeft (元素border)
offsetWidth , offsetHeight (元素border + padding + content)
offsetLeft , offsetTop (定位的祖先距离,没有则为body)
scrollHeight , scrollWidth (可滚动总长度/高度)
可读可写属性
scrollTop , scrollLeft (据原来位置的滚动距离)
domObj.style.(width/height) (获取宽高)
event事件属性
clientX , clientY (浏览器)
screenX , screenY (显示器)
offsetX , offsetY (原dom元素)
pageX , pageY (浏览器页)
28.文件路径修改(如果获取不到数据的话)
let path = require("path");
let publicPath = path.resolve(__dirname , "xx.txt");
//到时候读取publicPath路径就行
读文件
const fs = require("fs");
const options = "UTF-8";
fs.readFileSync("path" , options)
写文件
fs.writeFileSync("path" , data , options)
29.字符串转大小写
string.toUpperCase() //大写
string.toLowerCase() //小写
30.截取字符
string.substring(start,[end])
string.slice(start,[end])
31.查看字符以什么开头
string.startWith("searchString" , [startposition])
string.endWith()...
32.替换字符
string.replaceAll("value","replaceValue")
33.查看字符里是否有某些元素
string.includes("value" , [startposition])
34.grid布局
display:grid;
grid-template-columns: 100px 100px 100px //指定每列的宽度
grid-template-rows: 100px 100px 100px //指定每行的宽度
column-gap: 24px //列间距
row-gap: 24px //行间距
gap: 24px //都设置
grid-template-areas:
"header header header"
"sidebar content content"
"footer footer footer";
grid-area: header;
35.原子化css
<div flex="~ col">
div[flex="~ col"]{}
36.转为JSON串
JSON.stringify("value")
37.position定位
position:sticky; //超出时才固定定位
position:fixed; //从一开始就固定定位
38.pinia的使用
//引用
const store = user...Store();
//定义
const { defineStore } = Pinia;
const useHeroStore = defineStore("id", {
state: () => ({
abc: [],
}),
getters: {},
actions: {},
});
39.vue专题
torefs
<template>
<p>我是{{ number.name }} , 我值{{ number.price }}元</p>
<button @click="Add">我是加法</button>
</template>
<script setup lang="ts">
import { reactive , toRefs } from "vue"
let number = reactive({
name:"苹果",
price:100
});
let {price} = toRefs(number); //内数据ref化 ,注:此处为地址引用,
//修改的为实际number
function Add(){
price.value += 1 //所以这里要加value
}
</script>
input-v-model传值
<template>
姓:<input type="text" v-model="firstName"><br>
</template>
<script setup lang="ts">
import { ref } from "vue"
let firstName = ref("博丽")
</script>
watch
<script setup lang="ts">
import { ref, watchEffect } from "vue"
watchEffect(()=>{
if(temp.value >=60 || height.value >=80){
console.log("发出警告")
}
})
</script>
40.element-plus专题
ElNotification({
title: '发送失败',
message: `请先阅读并同意下方协议`,
type: 'error',
duration: 0
})
41.伪数组转数组
Array.from(value)
42.for...of和for...in
for...in
对象 / 数组 / 字符串
for (let key in obj) {
console.log(obj[key]); // 获取对象值
}
for (let key in obj) {
console.log(key); //获取对象key
}
for...of
对象
for (let [key, value] of Object.entries(obj)) {
console.log(key); // 输出属性名
console.log(value); // 输出属性值
}
数组 / 字符串
for (let value of obj) {
console.log(value)
}
43.截取数组
Array.slice(start,end) (取左不取右)(start,end可选)
const animals = ['ant', 'bison', 'camel', 'duck', 'elephant'];
console.log(animals.slice(2, 4));
//[ 'camel', 'duck' ]
44.特定插入或删除数组内元素 .splice() .toSpliced()
Array.splice(start,deleteCount,item,...,...)
const months = ['Jan', 'March', 'April', 'June'];
months.splice(1, 0, 'Feb');
console.log(months);
months.splice(4, 1, 'May');
console.log(months);
//[ 'Jan', 'Feb', 'March', 'April', 'June' ]
//[ 'Jan', 'Feb', 'March', 'April', 'May' ]
45.截取字符串
String.substring(startIndex,endIndex) (endIndex可选,不写默认为最后)(取左不取右)
const str = 'Mozilla';
console.log(str.substring(1, 3));
//oz
console.log(str.substring(2));
//zilla
46.清空字符串内所有空格
Str.replace(/\s+/g, "")
47.渐变的写法
background: linear-gradient(to right, #ff0000, #ffff00);
48.数据类型检测
Object.prototype.toString.call(data).slice(8, -1);
49.克隆DOM元素
this.cloneNode(true)
50.visibility:hidden和display:none的区别
如果需要占据空间但不可见,且仍然需要触发元素的事件,可以使用visibility: hidden;
如果希望隐藏元素且不占据空间,且不希望元素触发事件,可以使用display: none。
51.获取标签tag
element.getAttribute("attributeName");
52.直接移除DOM元素
element.remove()
53.获取标签元素
document.querySelector("[data-id='faf']")
54.创建简易http服务器
const http=require('http');
const app=http.createServer();
app.on('request',(req,res)=>{
res.end('hello world');
});
app.listen(8080);
55.正则匹配中间特定字符
let check = "*****"
let a = "13222222222"
console.log(a.replace(/(\d{3})\d{5}(\d{3})/g,`$1${check}$2`))
56.找出满足正则的索引
const str = 'Hello, worlod!';
const regex = /o/g;
let match;
while ((match = regex.exec(str)) !== null) {
console.log(`Found '${match[0]}' at index ${match.index}`);
}
57.创建动态正则
const pattern = "abc"; // 动态模式
const flags = "gi"; // 修饰符 g 和 i
const regex = new RegExp(pattern, flags);
58.其他
console.log(!undefined)
console.log(!null)
console.log(!0)
console.log(!NaN)
console.log(!'')
console.log(!false)
console.log(!{}) //false
console.log(![]) //false
console.log(!function () { }) //false
59.js数据的处理
eval(data)
60.axios
axios.post('/user', {
firstName: 'Fred',
lastName: 'Flintstone'
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
//axios.方法("路径",请求体).then()
61.axios附带请求头
axios({
url: '/spellone',
headers:{"Authorization":'2b58f9a8'},
params:{id:3}
})
62.获取当前时间
console.log(new Date().toLocaleString())
63.JSON.parse()和JSON.stringfy()的区别
JSON.parse() -----> JSON转对象
JSON.stringfy() -----> 对象转JSON
64.vue声明周期
onBeforeMount(()=>{}) //挂载前
onMounted(()=>{}) //挂载完毕 出生
onBeforeUpdate(()=>{}) //数据更新前
onUpdated(()=>{}) //数据更新完毕 常用
onBeforeUnmount(()=>{}) //卸载前 例如v-if不满足的时候
onUnmounted(()=>{}) //卸载完毕 常用
65.文件追加内容
fs.writeFileSync("logger.json", JSON.stringify(mm)+"\n", {
flag: 'a', //追加
encoding: 'utf-8'
});
66.其他
<!-- 目标 1 TODO Start -->
<div v-if="cardNumber[$index] && (($index > 4 && $index < 9) || ($index > 9 && $index < 14)) " :class="{'card-item__numberItem': true, '-active': n === ' '}">*</div>
<div v-else-if="cardNumber[$index]" :class="{'card-item__numberItem': true, '-active': n === ' '}">{{cardNumber[$index]}}</div>
<div v-else :class="{'card-item__numberItem': true, '-active': n === ' '}">{{n}}</div>
<!-- 目标 1 TODO End -->
67.emit子传父
如果是v-model="faaf"
emit("update:modelValue",传递的值)
如果是v-model:abc="faf"
emit("update:abc",传递的值)
68.其他
props: {
value: String, // v-model 绑定的值,这里取名为 inputValue
showMessage: String, // 是否显示消息
holder: String, // 输入框的占位符
},
setup(props, { emit }) {
const inputValue = ref(props.value);
const holder = ref(props.holder)
const origin = fs.readFileSync(path.join(__dirname, "../customized.html"), {
encoding: "utf8",
});
content = origin.replace(/<body>.*<\/body>/, `<body>${content}</body>`);
res.writeHead(200, { "Content-Type": "text/html" });
res.write(content);
res.end();