前言

hello world欢迎来到前端的新世界

---

😜当前文章系列专栏：javaScript
🐱‍👓博主在前端领域还有很多知识和技术需要掌握，正在不断努力填补技术短板。(如果出现错误，感谢大家指出)🌹
💖感谢大家支持！您的观看就是作者创作的动力

数组方法手写

push

Array.prototype.myPush = function(...elements) {// 获取当前数组的长度const currentLength = this.length;// 遍历要添加的元素，并逐个添加到数组末尾elements.forEach((element) => {this[currentLength] = element;currentLength++;});// 返回新数组的长度return this.length;
};// 使用示例
const arr = [1, 2, 3];
arr.myPush(4, 5);
console.log(arr); // [1, 2, 3, 4, 5]

pop

// 定义一个pop函数
function myPop(arr) {// 如果数组为空，直接返回undefinedif (arr.length === 0) {return undefined;}// 获取数组最后一个元素const poppedItem = arr[arr.length - 1];// 删除数组最后一个元素arr.length = arr.length - 1;// 返回被删除的元素return poppedItem;
}// 示例用法
const myArray = [1, 2, 3, 4, 5];
const poppedItem = myPop(myArray);
console.log(poppedItem); // 输出 5
console.log(myArray); // 输出 [1, 2, 3, 4]

shift

// 定义一个shift函数
function myShift(arr) {// 如果数组为空，直接返回undefinedif (arr.length === 0) {return undefined;}// 获取数组第一个元素const shiftedItem = arr[0];// 移除数组第一个元素for (let i = 0; i < arr.length - 1; i++) {arr[i] = arr[i + 1];}arr.length = arr.length - 1;// 返回被删除的元素return shiftedItem;
}// 示例用法
const myArray = [1, 2, 3, 4, 5];
const shiftedItem = myShift(myArray);
console.log(shiftedItem); // 输出 1
console.log(myArray); // 输出 [2, 3, 4, 5]

unshift

// 定义一个unshift函数
function myUnshift(arr, ...items) {// 获取items的长度const len = items.length;// 将数组中的元素向后移动，为新的元素腾出位置for (let i = arr.length - 1; i >= 0; i--) {arr[i + len] = arr[i];}// 将新元素插入到数组的开头for (let i = 0; i < len; i++) {arr[i] = items[i];}// 返回新的数组长度return arr.length;
}// 示例用法
const myArray = [1, 2, 3, 4, 5];
const newLength = myUnshift(myArray, 0, -1);
console.log(newLength); // 输出 7
console.log(myArray); // 输出 [0, -1, 1, 2, 3, 4, 5]

cancat

function myConcat(arr, ...args) {// 创建一个新数组，初始值为原数组的所有元素const newArr = arr.slice();// 遍历参数数组for (let i = 0; i < args.length; i++) {// 如果参数是数组，将数组中的每个元素添加到新数组中if (Array.isArray(args[i])) {for (let j = 0; j < args[i].length; j++) {newArr.push(args[i][j]);}} else {// 如果参数不是数组，直接添加到新数组中newArr.push(args[i]);}}// 返回新数组return newArr;
}// 示例用法
const arr1 = [1, 2];
const arr2 = [3, 4];
const newArr = myConcat(arr1, arr2, 5, [6, 7]);
console.log(newArr); // 输出 [1, 2, 3, 4, 5, 6, 7]

slice

function mySlice(arr, start = 0, end = arr.length) {// 创建一个新数组const newArr = [];// 处理负数的情况if (start < 0) {start = arr.length + start;}if (end < 0) {end = arr.length + end;}// 处理 start 和 end 超出数组范围的情况start = Math.max(0, start);end = Math.min(arr.length, end);// 循环从原数组中取出指定范围的元素并添加到新数组中for (let i = start; i < end; i++) {newArr.push(arr[i]);}// 返回新数组return newArr;
}// 示例用法
const arr = [1, 2, 3, 4, 5];
const slicedArr = mySlice(arr, 1, 4);
console.log(slicedArr); // 输出 [2, 3, 4]

splice

function mySplice(arr, index, count, ...elements) {// 处理负数的情况if (index < 0) {index = arr.length + index;}// 计算需要删除的元素的个数const numToDelete = Math.min(count, arr.length - index);// 创建一个新数组，初始值为原数组中需要删除的元素const deletedElements = [];for (let i = 0; i < numToDelete; i++) {deletedElements.push(arr[index + i]);}// 从原数组中删除需要删除的元素for (let i = index + numToDelete - 1; i >= index; i--) {arr.splice(i, 1);}// 将新元素添加到原数组中指定的位置for (let i = 0; i < elements.length; i++) {arr.splice(index + i, 0, elements[i]);}// 返回被删除的元素组成的新数组return deletedElements;
}// 示例用法
const arr = [1, 2, 3, 4, 5];
const deletedElements = mySplice(arr, 1, 2, 6, 7);
console.log(arr); // 输出 [1, 6, 7, 4, 5]
console.log(deletedElements); // 输出 [2, 3]

forEach

function myForEach(arr, callback) {for (let i = 0; i < arr.length; i++) {// 调用回调函数，传入当前元素、当前索引和原数组callback(arr[i], i, arr);}
}// 示例用法
const arr = [1, 2, 3];
myForEach(arr, (item, index, array) => {console.log(item); // 输出每个元素console.log(index); // 输出每个元素的索引console.log(array); // 输出原数组
});

map

function myMap(arr, callback) {const result = [];for (let i = 0; i < arr.length; i++) {// 调用回调函数，传入当前元素、当前索引和原数组const newItem = callback(arr[i], i, arr);// 将回调函数的返回值添加到新数组中result.push(newItem);}return result;
}// 示例用法
const arr = [1, 2, 3];
const doubled = myMap(arr, (item, index, array) => {return item * 2;
});
console.log(doubled); // 输出 [2, 4, 6]

reduce

function myReduce(arr, callback, initialValue) {let accumulator = initialValue === undefined ? arr[0] : initialValue;for (let i = initialValue ? 0 : 1; i < arr.length; i++) {// 调用回调函数，传入累加器、当前元素、当前索引和原数组accumulator = callback(accumulator, arr[i], i, arr);}return accumulator;
}// 示例用法
const arr = [1, 2, 3, 4, 5];
const sum = myReduce(arr, (accumulator, item, index, array) => {return accumulator + item;
});
console.log(sum); // 输出 15

find

function myFind(arr, callback) {for (let i = 0; i < arr.length; i++) {if (callback(arr[i], i, arr)) {return arr[i];}}return undefined;
}// 示例用法
const arr = [1, 2, 3, 4, 5];
const result = myFind(arr, (item) => {return item > 3;
});
console.log(result); // 输出 4

手写订阅发布

class Subject {constructor() {this.observe = [];}// 添加观察者addObserver(observer){this.observe.push(observer)}// 删除观察者removeObserver(observer){this.observe = this.observe.filter(obs => obs !== observer)}// 状态变化notfiy(data){this.observe.forEach(observer=>{observer.update(data)})}
}class Observer {update(data){console.log(`数据：${data}`)}
}const subject = new Subject()const objectone = new Observer()
const objecttwo = new Observer()subject.addObserver(objectone)
subject.addObserver(objecttwo)subject.removeObserver(objecttwo)subject.notfiy("hello word lpz")

手写单例模式

var Singleton = (function() {// 实例变量，用于存储单例实例var instance;// 单例对象的构造函数function Singleton() {// 在这里可以初始化单例对象this.name = "Singleton Instance";}// 获取单例实例的方法Singleton.getInstance = function() {// 如果实例不存在，则创建新实例并赋值给 instanceif (!instance) {instance = new Singleton();}// 返回单例实例return instance;};// 返回构造函数，使其可以像类一样使用，但无法通过 new Singleton() 实例化return Singleton;
})();// 测试单例模式
var instance1 = Singleton.getInstance();
var instance2 = Singleton.getInstance();// 由于是单例模式，instance1 和 instance2 应该是相同的实例
console.log(instance1 === instance2); // 输出 true

后言

创作不易，要是本文章对广大读者有那么一点点帮助 不妨三连支持一下，您的鼓励就是博主创作的动力