实现数组的push、filter、map方法 1、实现push方法let arr = []; Array.prototype.push = function() { for( let i = 0 ; i < arguments.length ; i++){ this[this.length] = arguments[i] ; } return this.length; }2、实现filter方法Array.prototype.filter = function(fn) { if (typeof fn !== "function") { throw Error('请传入一个函数'); } const res = []; for (let i = 0, len = this.length; i < len; i++) { fn(this[i]) && res.push(this[i]); } return res; }3、实现map方法Array.prototype.map = function(fn) { if (typeof fn !== "function") { throw Error('参数是函数'); } const res = []; for (let i = 0, len = this.length; i < len; i++) { res.push(fn(this[i])); } return res; }

mock使用说明 1.下载mock.js和axios//下载mock.js npm install mockjs -D //下载axios npm install axios2.在src下创建mock目录，并在mock目录下创建index.jsimport { mock } from 'mockjs'; let data = mock({ "data|100": [ //生成100条数据 数组 { "shopId|+1": 1,//生成商品id，自增1 "shopMsg": "@ctitle(10)", //生成商品信息，长度为10个汉字 "shopName": "@cname",//生成商品名 ， 都是中国人的名字 "shopTel": /^1(5|3|7|8)[0-9]{9}$/,//生成随机电话号 "shopAddress": "@county(true)", //随机生成地址 "shopStar|1-5": "★", //随机生成1-5个星星 "salesVolume|30-1000": 30, //随机生成商品价格 在30-1000之间 "shopLogo": "@Image('100x40','#c33', '#ffffff','小北鼻')", //生成随机图片，大小/背景色/字体颜色/文字信息 "food|7": [ //每个商品中再随机生成七个food { "foodName": "@cname", //food的名字 "foodPic": "@Image('100x40','#c33', '#ffffff','小可爱')",//生成随机图片，大小/背景色/字体颜色/文字信息 "foodPrice|1-100": 20,//生成1-100的随机数 "aname|14": [ { "aname": "@cname", "aprice|30-60": 20 } ] } ] } ] }); mock(/goods\/goodAll/, 'post', () => { //三个参数。第一个路径，第二个请求方式post/get，第三个回调，返回值 return data })3.在main中引入mockimport { createApp } from 'vue' import './style.css' import App from './App.vue' import './mock/index.js' ##引入mock,让他全局可用 createApp(App).mount('#app')4.在App.vue中使用axios请求mock<template> <div> <button @click="getMessage">获取数据</button> <table border="1" cellspacing='0'> <thead> <tr> <th>销售ID</th> <th>销售描述</th> <th>销售名称</th> <th>电话</th> <th>销售星级</th> <th>卖出数量</th> <th>住址</th> </tr> </thead> <tbody> <tr v-for="item in arr[0]" :key="item.shopId"> <td>{{item.shopId}}</td> <td>{{item.shopMsg}}</td> <td>{{item.shopName}}</td> <td>{{item.shopTel}}</td> <td>{{item.shopStar}}</td> <td>{{item.salesVolume}}</td> <td>{{item.shopAddress}}</td> </tr> </tbody> </table> </div> </template> <script setup> import axios from 'axios' import { reactive } from 'vue'; //赋值给变量 let arr = reactive([]); //获取数据 const getMessage = ()=>{ axios.post("http://localhost:8080/goods/goodAll").then((res)=>{ console.log(res); arr.push(res.data.data); }); } </script> <style scoped> </style> {lamp/}

js数组的判别方法 一、Array.isArray判断 用法：Array.isArray(arr)ES5中新增了Array.isArray方法,IE8及以下不支持Array.isArray() 用于确定传递的值是否是一个[Array], 返回布尔值 true；否则它返回 false。let arr = []; console.log(Array.isArray(arr)); // true // 下面的函数调用都返回 true Array.isArray([]); Array.isArray([1]); Array.isArray(new Array()); Array.isArray(new Array('a', 'b', 'c', 'd')) // 鲜为人知的事实：其实 Array.prototype 也是一个数组。 Array.isArray(Array.prototype); {dotted startColor="#ff6c6c" endColor="#1989fa"/}二、constructor判断 用法：arr.constructor === ArrayObject的每个实例都有构造函数 constructor，用于保存着用于创建当前对象的函数let arr = []; console.log(arr.constructor === Array); // true{dotted startColor="#ff6c6c" endColor="#1989fa"/}三、instanceof 判断 用法：arr instanceof Arrayinstanceof 主要是用来判断某个实例是否属于某个对象let arr = []; console.log(arr instanceof Array); // true{dotted startColor="#ff6c6c" endColor="#1989fa"/}四、原型链上的isPrototypeOf判断 用法：Array.prototype.isPrototypeOf(arr)Array.prototype 属性表示 Array 构造函数的原型isPrototypeOf()可以用于测试一个对象是否存在于另一个对象的原型链上。let arr = []; console.log(Array.prototype.isPrototypeOf(arr)); // true{dotted startColor="#ff6c6c" endColor="#1989fa"/}五、Object.prototype.toString 用法：Object.prototype.toString.call(arr) === '[object Array]'Array继承自Object，JavaScript在Array.prototype上重写了toString，toString.call(arr)实际上是通过原型链调用了。let arr = []; console.log(Object.prototype.toString.call(arr) === '[object Array]'); // true{dotted startColor="#ff6c6c" endColor="#1989fa"/}六、Array 原型链上的 isPrototypeOf 用法：Array.prototype.isPrototypeOf(arr)Array.prototype 属性表示 Array 构造函数的原型let arr = []; console.log(Array.prototype.isPrototypeOf(arr)); // true{dotted startColor="#ff6c6c" endColor="#1989fa"/}顺便复习一下typeof的用法： 对于引用类型，不能用typeof来判断，因为返回的都是object// 基本类型 typeof 123; //number typeof "abc"; //string typeof true; //boolean typeof undefined; //undefined typeof null; //object var s = Symbol; typeof s; //symbol // 引用类型 typeof [1,2,3]; //object typeof {}; //object typeof function(){}; //function typeof Array; //function Array类型的构造函数 typeof Object; //function Object类型的构造函数 typeof Symbol; //function Symbol类型的构造函数 typeof Number; //function Number类型的构造函数 typeof String; //function String类型的构造函数 typeof Boolean; //function Boolean类型的构造函数

谷歌插件开发1 谷歌插件功能：切换不同颜色的谷歌浏览器当前页的背景颜色第一步：创建一个名为chrome的文件夹。第二步：在创建的文件夹下创建manifest.json、popup.html、popup.js。第三步：在manifest.json中写入以下代码{ “manifest_version”: 3,//开发版本 “name”: “My Popup Extension”,//插件名称 “version”: “1.0”,//插件版本 “action”: { “default_popup”: “popup.html”//默认浏览器按钮页面 }, //权限设置 “permissions”: [ “activeTab”,//浏览器当前页 “tabs”,//所有页 “scripting”//可以通过 JavaScript 代码与网页进行交互、修改页面内容和行为 ] }第四步：在popup.html中写入以下代码（html布局以及js引入），popup.html是浏览器按钮插件的弹框一般在右上角展示。<!– * @Author: liangzai * @Date: 2023-06-07 16:27:25 * @LastEditTime: 2023-06-25 13:57:10 * @LastEditors: liangzai * @Description: 页面布局 –> <!DOCTYPE html> <html lang=”en”> <head> <meta charset=”UTF-8″> <meta http-equiv=”X-UA-Compatible” content=”IE=edge”> <meta name=”viewport” content=”width=device-width, initial-scale=1.0″> <title>Document</title> <style> ul{ list-style: none; margin: 0; padding: 10px; display: flex; align-items: center; flex-direction: column; text-align: center; } body{ width: 300px; height: 200px; } div{ width: 300px; height: 200px; } li{ width: 100%; margin-top: 10px; padding: 10px; cursor: pointer; } </style> <script src=”popup.js”></script> </head> <body> <div> <ul> <li class=”li” style=”border: 1px solid gray;border-radius: 10px;”>灰色</li> <li class=”li” style=”border: 1px solid blue;border-radius: 10px;”>蓝色</li> <li class=”li” style=”border: 1px solid skyblue;border-radius: 10px;”>天空蓝</li> <li class=”li” style=”border: 1px solid green;border-radius: 10px;”>绿色</li> </ul> </div> <!– <script src=”popup.js”> –> </script> <!– <script src=”background.js”></script> –> </body> </html>第五步：在popup.js中编写以下逻辑/* * @Author: liangzai * @Date: 2023-06-25 10:45:40 * @LastEditTime: 2023-06-25 16:24:52 * @LastEditors: liangzai * @Description: 动态修改浏览器的背景颜色 */ document.addEventListener(“DOMContentLoaded”, function() { //元素加载完后再执行 var colorArr = [“gray”,”blue”,”skyblue”,”green”];//颜色切换数组 var li = document.getElementsByClassName(“li”);//获取popup.html中的li元素 for(let i = 0; i < li.length; i++) { (function(index){ li[index].addEventListener(“click”, function(){ const colorIndex = index; //获取点击元素的下标 const color = colorArr[colorIndex];//获取数组中对应的颜色 //获取当前的标签页 chrome.tabs.query({ active: true, currentWindow: true }, function(tabs) { const tabId = tabs[0].id;//当前页的tabId chrome.scripting.executeScript({ //在当前活动的标签页中执行自定义的 JavaScript 脚本 target: { tabId: tabId },//指向当前页 function:changeBackgroundColor//执行的函数 , args:[color] //函数的传值 }); }); }) })(i)//使用闭包的方式来执行这样可以获取到index } //上面方法需要定义的函数 function changeBackgroundColor(color){ //修改浏览器当前页面的背景颜色 document.body.style.backgroundColor = color; } })结束语：通过这个案例可以简单的了解下谷歌插件开发的流程。结果截图：选择不同的颜色可以切换不同的背景颜色。

vue3封装el-button 1、确认安装最新版nodenode -v2、全局安装vite，并在cmd中输出npm install -g create-vite@latest3、创建vite项目vue版本，完成后安装依赖启动项目create-vite my-projectcd my-project //切换到项目目录npm install //安装依赖npm run dev //启动项目4、在components目录下创建ELBUTTON.vue<!-- * @Author: liangzai * @Date: 2023-06-30 14:06:50 * @LastEditTime: 2023-07-07 17:19:09 * @LastEditors: liangzai * @Description: 封装el-button子组件 --> <template> <button ref="button" class="el-button" :class="[typeClass,sizeClass,disableClass]" :disabled="disabled" @click="clickButton"> <slot></slot> </button> </template> <script setup lang="ts"> import { computed ,ref} from 'vue'; //defineProps 来接收组件的传值 const props = defineProps({ type: { type:String, default:"" }, size: { type:String, default:"" }, disabled: { type:Boolean, default:"false" } }) //定义自定义click事件 const emit = defineEmits(["click"]) let typeClass = computed(()=>props.type?`el-button--${props.type}` : ""); //type字段对应的类名 let sizeClass = computed(()=>props.size?`el-button--${props.size}` : ""); //size字段对应的类名 let disableClass = computed(()=>props.disabled == true ?`el-button--disabled` : ""); //disabled字段对应的类名 //获取元素 const button = ref(null) //定义点击事件 const clickButton = ()=>{ emit('click') } </script> <style scoped> .el-button{ display: inline-block;/* 设置为行内样式 */ text-align: center; /* 文字居中 */ cursor: pointer; /* 手指形状 */ padding: 14px 20px; border-radius: 5px; /* 圆角 */ font-size: 14px; /* 字体大小 */ outline: none; /* 外部的线 */ border: none; /* 取消默认边框 */ } /* type为primary时对应的颜色 */ .el-button--primary{ background: #409EFF; color: white; } /* type为success时对应的颜色 */ .el-button--success{ background: #67C23A; color: white; } /* type为danger时对应的颜色 */ .el-button--danger{ background: #f56c6c; color: white; } /* size为large时对应的字体大小和长度宽度 */ .el-button--large{ width: 200px; height: 40px; font-size: 18px; line-height: 10px; } /* size为small时对应的字体大小和长度宽度 */ .el-button--small{ width: 100px; height: 25px; font-size: 18px; line-height: 10px; } /* disabled为禁用时对应的背景颜色 */ .el-button--disabled{ background: rgba(64,158,255,.5); } </style>5、在App.vue中引入子组件ELBUTTON.vue<!-- * @Author: liangzai * @Date: 2023-06-30 14:06:50 * @LastEditTime: 2023-07-07 17:21:40 * @LastEditors: liangzai * @Description: 主入口文件 --> <template> <div> <!-- 传递type、size、disabled，设置点击事件来控制按钮的禁用 --> <el-button type="primary" size="small" :disabled="disabled" @click="changeStatus">按钮</el-button> </div> </template> <script setup> import {ref} from "vue" import elButton from "./components/ELBUTTON.vue" //定义disabled状态 let disabled = ref(false) //改变状态 const changeStatus = ()=>{ disabled.value = true; } </script> <style> body{ margin: 0; padding: 0; } </style>6、查看界面上的效果即可//没禁用时候的效果//禁用时候的效果