1、确定变量的具体类型函数
function GetType(value){
return Object.prototype.toString.call(value).slice(8,-1);
}
console.log(GetType(111)); // Number
console.log(GetType('111')); // String
console.log(GetType({})); // Object
console.log(GetType([])); // Array
console.log(GetType(true)); // Boolean
console.log(GetType(new Date())); // Date
console.log(GetType(/^a?$/)); // RegExp2、缓存函数计算结果
缓存函数操作的结果， 稍后调用时，如果参数相同，则不再执行该函数，而是直接返回缓存中的结果。
// 缓存函数计算结果。
function cached(fn){
const cache = Object.create(null);
return function cachedFn(str){
// 在函数进行运行前进行函数结果检查，如果在缓存中存在。则直接取出缓存中的结果。而不再次重新执行。
if(!cache[str]){
let result = fn(str);
cache[str] = result
}
return cache[str];
}
}
// 需执行的函数
function computed(str){
console.log('2000s have passed')
return 'a result'
}
var cachedComputed = cached(computed);
console.log(cachedComputed('ss')); // 2000s have passed a result
console.log(cachedComputed('ss')); // a result
console.log(cachedComputed('11')); // 2000s have passed a result
console.log(cachedComputed('11')); // a result
console.log(cachedComputed('ss')); // a result3、实现Array.prototype.map函数
// 实现Array.prototype.map功能
const mapHandle= function(fn,context){
let arr = Array.prototype.slice.call(this);
let newArray= new Array();
for(let i = 0 ; i<arr.length; i++){
if(!arr.hasOwnProperty(i)) continue;
newArray[i] = fn.call(context,arr[i],i,this);
}
return newArray
}
Array.prototype.mapHandle = mapHandle;
console.log([1,2,3].mapHandle(item =>item * 2)) // [2,4,6]4、实现Array.prototype.filter
// 实现Array.prototype.filter功能
const filterHandle= function(fn,context){
let arr = Array.prototype.slice.call(this);
let newArray= new Array();
for(let i = 0 ; i<arr.length; i++){
if(!arr.hasOwnProperty(i)) continue;
fn.call(context,arr[i],i,this) && newArray.push(arr[i])
}
return newArray
}
Array.prototype.filterHandle = filterHandle;
console.log([1,2,3].filterHandle(item=>item > 1)) // [2,3]5、实现Array.prototype.some
// 实现Array.prototype.some功能
const someHandle= function(fn,context){
let arr = Array.prototype.slice.call(this);
if(!arr.length) return false;
for(let i = 0 ; i<arr.length; i++){
if(!arr.hasOwnProperty(i)) continue;
let result = fn.call(context,arr[i],i,this)
if(result) return true
}
return false
}
Array.prototype.someHandle = someHandle;
console.log([1,2,3].someHandle(item => item == 0)) // false
console.log([1,2,3].someHandle(item => item == 1)) // true6、实现Array.prototype.reduce
const reduceHandle = function(fn,initialValue){
let arr = Array.prototype.slice.call(this);
let result, startIndex;
if(initialValue === undefined){
result = 0
}else{
result = initialValue
}
for(let i = ++startIndex || 0; i < arr.length ; i++){
if(!arr.hasOwnProperty(i)) continue;
result = fn.call(null,result,arr[i],i,this)
}
return result
}
Array.prototype.reduceHandle = reduceHandle;
console.log([1,2,3].reduceHandle((previousValue, currentValue) => previousValue + currentValue)) // 6
console.log([1,2,3].reduceHandle((previousValue, currentValue) => previousValue + currentValue,10)) // 16
console.log([1,2,3].reduceHandle(item=> item > 1)) // false7.实现 Array.prototype.flat
const flatHandle = function(depth = 1){
let arr = Array.prototype.slice.call(this)
if(depth === 0) return arr;
return arr.reduce((pre,cur)=>{
if(Array.isArray(cur)){
return [...pre,...flatHandle.call(cur,depth-1)];
}else{
return [...pre,cur]
}
},[]);
}
Array.prototype.flatHandle = flatHandle;
console.log([1,2,[3,4],5,6].flatHandle(1)); // 1,2,3,4,5,6
console.log([1,2,[3,4,[5,6]]].flatHandle(2)); // 1,2,3,4,5,68.柯里化
柯里化（Currying），部分求值，为实现多参数函数提供一个递归降解的实现思路——把接受多个参数的函数变成接受单一参数的函数，并且返回接受余下参数而且返回结果的新函数。
// const curry = (fn, arr = []) => (...args) => (
// arg => arg.length === fn.length ? fn(...arg): curry(fn, arg)
// )([...arr, ...args])
function curry(fn) {
if (fn.length <= 1) return fn;
const generator = (...args) => {
if (fn.length === args.length) {
return fn(...args)
} else {
return (...args2) => {
return generator(...args, ...args2)
}
}
}
return generator
}
const display = (a,b,c,d,e)=>a+b+c+d+e
curriedDisplay = curry(display)(1)(2)
console.log(curriedDisplay(3)(4)(5)); //15
console.log(curriedDisplay(3,4)(5)); //15
console.log(curriedDisplay(3,4,5)); //159、图片延迟加载
// 延迟加载图片
let imgList1 = [...document.querySelectorAll(".get_bounding_rect")]
let num = imgList1.length
let lazyLoad1 = (function () {
let count = 0
return function () {
let deleteIndexList = []
imgList1.forEach((img,index) => {
let rect = img.getBoundingClientRect()
if (rect.top < window.innerHeight) {
img.src = img.dataset.src
// Add picture to delete list after loading successfully
deleteIndexList.push(index)
count++
if (count === num) {
//When all pictures are loaded, unbind scroll event
document.removeEventListener('scroll',lazyLoad1)
}
}
})
// Delete loaded pictures
imgList1 = imgList1.filter((_,index)=>!deleteIndexList.includes(index))
}
})()10、数组乱序
const shuffleArray = (arr) => arr.sort(() => Math.random() - 0.5);
let array = [0,1,2,3,4,5,6,7,8,9];
console.log(shuffleArray(array)) // [2, 1, 3, 0, 8, 6, 7, 4, 5, 9]11、复制到剪贴板
// 复制到剪贴板
const copyToClipboard = (text) =>
navigator.clipboard?.writeText && navigator.clipboard.writeText(text)
// 测试
copyToClipboard("Hello World!")
12、数组去重
const deduplication = (arr) => [...new Set(arr)];
console.log(deduplication([1,2,3,3,5,4,6,4,7,9,5,7])) // [1, 2, 3, 5, 4, 6, 7, 9]13、检测暗黑模式
const isDarkMode = () => window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches
console.log(isDarkMode()) // false14、滚动到顶部
const scrollToTop = (element) => element.scrollIntoView({ behavior: "smooth", block: "start" })15、滚动到底部
const scrollToBottom = (element) => element.scrollIntoView({ behavior: "smooth", block: "end" })16、生成随机颜色
let color = `#${Math.floor(Math.random() * 0xffffff).toString(16)}`;
console.log('颜色：',color)本篇文中示例均参考网上案列。
956
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
