蓝桥杯Web题小知识总结

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();