献县做网站,代理网址ag80hncom,制作网页前端,登封免费网站建设文章目录 前言数组方法手写pushpopshiftunshiftcancatslicespliceforEachmapreducefind 手写订阅发布手写单例模式后言 前言 hello world欢迎来到前端的新世界 #x1f61c;当前文章系列专栏#xff1a;javaScript #x1f431;#x1f453;博主在前端领域还有很多知识和… 文章目录 前言数组方法手写pushpopshiftunshiftcancatslicespliceforEachmapreducefind 手写订阅发布手写单例模式后言 前言 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
后言 创作不易要是本文章对广大读者有那么一点点帮助 不妨三连支持一下您的鼓励就是博主创作的动力
