前言
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) { // 如果数组为空，直接返回undefined if (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) { // 如果数组为空，直接返回undefined if (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() { // 如果实例不存在，则创建新实例并赋值给 instance if (!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
后言
创作不易，要是本文章对广大读者有那么一点点帮助 不妨三连支持一下，您的鼓励就是博主创作的动力
![[JS]面试官：你的简历上写着熟悉jsonp，那你说说它的底层逻辑是怎样的？](https://ucc.alicdn.com/3mfxe2r26qbaq/developer-article1635462/20241109/ab6c62833d4349a3b910e97f27656c88.png?x-oss-process=image/resize,h_160,m_lfit)