5 | 6 | display: block/inline/inline-block 7 | ``` 8 | 9 | 元素根据显示方式分为块级元素和行内元素，通过 `display` 属性改变元素的默认行为 10 | 11 | 块级元素：用于创建页面结构，可包含块级/行内元素，在盒模型中设置 `width`、`height`、`padding` 和 `margin`，默认情况下占据其父容器的全部宽度，总是新开一行，其后元素被挤至下一行 12 | 行内元素：用于包裹文本，可包含行内元素，在盒模型中无法设置 `width` 和 `height`，不占一行，按行内顺序依次排列直至无法放置后另起一行 13 | -------------------------------------------------------------------------------- /JS(practical aspects)/Array.prototype.fill.md: -------------------------------------------------------------------------------- 1 | ```JavaScript 2 | Array.prototype._fill = function(value, start = 0, end = this.length) { 3 | if(this == null || typeof this[Symbol.iterator] !== 'function') throw new TypeError(`${this} is not a iterator`); 4 | start = Math.max(Math.min(start, this.length), 0); 5 | end = Math.max(Math.min(end, this.length), 0); 6 | // 原生方法直接修改调用它的数组或类数组 7 | for(let i = start;i < end;++i) this[i] = value; 8 | // 原生方法就地改变数组或类数组 9 | return this; 10 | }; 11 | ``` -------------------------------------------------------------------------------- /JS(practical aspects)/Array.prototype.flat.md: -------------------------------------------------------------------------------- 1 | ```JavaScript 2 | const flattenArray = (arr) => { 3 | const ans = []; 4 | const flatten = (arr) => { 5 | for (const item of arr) { 6 | if (Array.isArray(item)) flatten(item); 7 | else ans.push(item); 8 | } 9 | }; 10 | flatten(arr); 11 | return ans; 12 | }; 13 | 14 | console.log(flattenArray([1, 2, 3, [4, [5]], 1, 2, 6, 7])); 15 | ``` 16 | 17 | ```js 18 | const flattenArray = (arr) => { 19 | const stk = [...arr], 20 | ans = []; 21 | while (stk.length) { 22 | const next = stk.pop(); 23 | if (Array.isArray(next)) stk.push(...next); 24 | else ans.unshift(next); 25 | } 26 | return ans; 27 | }; 28 | 29 | console.log(flattenArray([1, 2, 3, [4, [5]], 1, 2, 6, 7])); 30 | ``` 31 | -------------------------------------------------------------------------------- /JS(practical aspects)/Array.prototype.flatMap.md: -------------------------------------------------------------------------------- 1 | ```js 2 | Array.prototype._flatMap = function (callback, thisArg) { 3 | const res = []; 4 | this.forEach((item, index, arr) => { 5 | const mappedValue = callback.call(thisArg, item, index, arr); 6 | if (Array.isArray(mappedValue)) res.push(...mappedValue); 7 | else res.push(mappedValue); 8 | }); 9 | return res; 10 | }; 11 | ``` 12 | 13 | 测试用例： 14 | 15 | ```js 16 | const arr = [1, 2, 3, 4]; 17 | const res = arr._flatMap((x) => [x, x * 2]); 18 | console.log(res); // [1, 2, 2, 4, 3, 6, 4, 8] 19 | ``` -------------------------------------------------------------------------------- /JS(practical aspects)/Array.prototype.includes.md: -------------------------------------------------------------------------------- 1 | ```JavaScript 2 | Array.prototype._myincludes = function(searchElement, fromIndex = 0) { 3 | if(this == null || typeof this[Symbol.iterator] !== 'function') throw new TypeError(`${this} is not an iterator`); 4 | fromIndex = Math.max(fromIndex, 0); 5 | for(let i = fromIndex;i < this.length;++i) { 6 | if(this[i] === searchElement || (isNaN(searchElement) && isNaN(this[i]))) return true; 7 | } 8 | return false; 9 | }; 10 | ``` 11 | 12 | 测试代码 13 | 14 | ```JavaScript 15 | let arr = [1, 2, 3, NaN]; 16 | console.log(arr._myincludes(2)); // true 17 | console.log(arr._myincludes(4)); // false 18 | console.log(arr._myincludes(NaN)); // true 19 | ``` 20 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /JS(practical aspects)/Array.prototype.reduce.md: -------------------------------------------------------------------------------- 1 | ```JavaScript 2 | Array.prototype._myreduce = function (callback, initialVal) { 3 | if (typeof callback !== "function") 4 | throw new TypeError(`${callback} is not a function`); 5 | if (this == null || typeof this[Symbol.iterator] !== "function") 6 | throw new TypeError(`${this} is not an iterator`); 7 | const arr = [...this]; 8 | let accumulator; 9 | if (initialVal !== undefined) accumulator = initialVal; 10 | else { 11 | if (arr.length === 0) 12 | throw new TypeError("Reduce of empty array with no initial value"); 13 | accumulator = arr.shift(); 14 | } 15 | for (let i = 0; i < arr.length; ++i) 16 | accumulator = callback(accumulator, arr[i], i, this); 17 | return accumulator; 18 | }; 19 | ``` 20 | 21 | 测试用例： 22 | 23 | ```JavaScript 24 | const numbers = [1, 2, 3, 4, 5]; 25 | const sum = numbers._myreduce((acc, num) => acc + num, 0); 26 | console.log(sum); // 15 27 | const product = numbers._myreduce((acc, num) => acc * num, 1); 28 | console.log(product); // 120 29 | ``` 30 | 31 | 32 | -------------------------------------------------------------------------------- /JS(practical aspects)/Array.prototype.reverse.md: -------------------------------------------------------------------------------- 1 | ```js 2 | Array.prototype._myReverse = function () { 3 | if (this == null || typeof this[Symbol.iterator] !== "function") 4 | throw new TypeError(`${this} is not an iterator`); 5 | const arr = [...this]; 6 | for (let left = 0, right = arr.length - 1; left < right; ++left, --right) 7 | [arr[left], arr[right]] = [arr[right], arr[left]]; 8 | for (let i = 0; i < arr.length; ++i) this[i] = arr[i]; 9 | return this; 10 | }; 11 | ``` 12 | 13 | 测试用例： 14 | 15 | ```js 16 | const numbers = [1, 2, 3, 4, 5]; 17 | console.log(numbers._myReverse()); // [ 5, 4, 3, 2, 1 ] 18 | ``` -------------------------------------------------------------------------------- /JS(practical aspects)/ArrayReader.md: -------------------------------------------------------------------------------- 1 | 为 Array 实现一个 Reader，通过接口 getReader 获取，Reader 有一个接口 read（n），每次调用按顺序读取数组的 n（默认为 1）个元素，调用不会改变数组本身的值，若数组已全部读取完则返回空数组，若传入的参数不为正整数则抛出异常 2 | 3 | ```js 4 | class ArrayReader { 5 | constructor(arr) { 6 | this.arr = arr; 7 | this.idx = idx; 8 | } 9 | getReader() { 10 | return this; 11 | } 12 | read(n = 1) { 13 | if (!Number.isInteger(n) || n <= 0) 14 | throw new Error("Parameter must be a positive integer"); 15 | if (this.idx >= this.arr.length) return []; 16 | const res = this.arr.slice(this.idx, this.idx + n); 17 | this.idx += n; 18 | return res; 19 | } 20 | } 21 | ``` 22 | -------------------------------------------------------------------------------- /JS(practical aspects)/DOM 节点查找.md: -------------------------------------------------------------------------------- 1 | ```js 2 | const parentNode = (node1, node2) => { 3 | while (true) { 4 | if (node1.contains(node2)) return node1; 5 | node1 = node1.parentNode; 6 | } 7 | }; 8 | ``` -------------------------------------------------------------------------------- /JS(practical aspects)/JSON to DOM.md: -------------------------------------------------------------------------------- 1 | ```js 2 | const render = (vnode) => { 3 | const el = document.createElement(vnode.tag.toLocaleLowerCase()); 4 | for (const item in vnode.attrs) el.setAttribute(item, vnode.attrs[item]); 5 | if (typeof vnode.children === "string") { 6 | const textNode = document.createTextNode(vnode.children); 7 | el.appendChild(textNode); 8 | } 9 | if (Array.isArray(vnode.children) && vnode.children.length) { 10 | vnode.children.forEach((child) => el.appendChild(render(child, el))); 11 | } 12 | return el; 13 | }; 14 | ``` -------------------------------------------------------------------------------- /JS(practical aspects)/JSON.parse.md: -------------------------------------------------------------------------------- 1 | `JSON.parse` 不能解析的数据： 2 | 3 | * undefined 4 | * Function 5 | * Date,RegExp, Map, Set,Error 6 | * 稀疏数组，缺失项解析为 `null` 7 | * 循环引用，原型链上的属性 8 | 9 | ```JavaScript 10 | let json = '{"name":"Clown", "age":21}'; 11 | let obj = eval("(" + json + ")"); 12 | ``` 13 | 14 | -------------------------------------------------------------------------------- /JS(practical aspects)/JSONP.md: -------------------------------------------------------------------------------- 1 | ```js 2 | const _jsonp = (url, params, callbackName) => { 3 | return new Promise((resolve, reject) => { 4 | const script = document.createElement("script"); 5 | window[callbackName] = (data) => { 6 | resolve(data); 7 | document.body.removeChild(script); 8 | }; 9 | params = { ...params, callback: callbackName }; 10 | const arr = Object.keys(params).map((key) => `${key}=${params[key]}`); 11 | script.src = `${url}?${arr.join("&")}`; 12 | document.body.appendChild(script); 13 | }); 14 | }; 15 | ``` -------------------------------------------------------------------------------- /JS(practical aspects)/O(n)时间查找数组排序后的最大差值.md: -------------------------------------------------------------------------------- 1 | ```js 2 | const maxGap = (nums) => { 3 | if (nums.length < 2) return 0; 4 | let min = Math.min(...nums), 5 | max = Math.max(...nums); 6 | if (min === max) return 0; 7 | const len = nums.length; 8 | const bucketSize = Math.ceil((max - min) / (len - 1)); 9 | const bucketCount = Math.floor((max - min) / bucketSize) + 1; 10 | const buckets = new Array(bucketCount) 11 | .fill(null) 12 | .map(() => ({ min: Infinity, max: -Infinity, used: false })); 13 | for (const num of nums) { 14 | const idx = Math.floor((num - min) / bucketSize); 15 | buckets[idx].used = true; 16 | buckets[idx].min = Math.min(buckets[idx].min, num); 17 | buckets[idx].max = Math.max(buckets[idx].max, num); 18 | } 19 | let maxGap = 0, 20 | preMax = min; 21 | for (const bucket of buckets) { 22 | if (!bucket.used) continue; 23 | maxGap = Math.max(maxGap, bucket.min - preMax); 24 | preMax = bucket.max; 25 | } 26 | return maxGap; 27 | }; 28 | 29 | const arr = [3, 6, 9, 1]; 30 | console.log(maxGap(arr)); // 3 31 | ``` 32 | 33 | -------------------------------------------------------------------------------- /JS(practical aspects)/Object.assign.md: -------------------------------------------------------------------------------- 1 | ```JavaScript 2 | function _myobjectAssign(target, ...sources) { 3 | if(target == null) { 4 | throw new TypeError(`cannot convert undefined or null to object`); 5 | } 6 | const to = Object(target); 7 | // 第一次 `forEach` 遍历所有提供的源对象 8 | sources.forEach((source) => { 9 | if(source !== null) { 10 | Object.keys(source).forEach(key => { 11 | to[key] = source[key]; 12 | }) 13 | } 14 | }) 15 | return to; 16 | }; 17 | ``` 18 | 19 | 将一个或多个源对象的自身可枚举属性复制到目标对象上并返回这个目标对象 20 | -------------------------------------------------------------------------------- /JS(practical aspects)/Object.create.md: -------------------------------------------------------------------------------- 1 | ```JavaScript 2 | function _objectCreate(proto, propertiesObject) { 3 | if (typeof proto !== "object" && typeof proto !== "function") 4 | throw new TypeError(`${proto} is not an object or null`); 5 | const fn = function () {}; 6 | fn.prototype = proto; 7 | const obj = new fn(); 8 | if (propertiesObject !== undefined) 9 | Object.defineProperties(obj, propertiesObject); 10 | return obj; 11 | } 12 | ``` 13 | 14 | 测试用例： 15 | 16 | 验证能创建具有正确原型的对象： 17 | 18 | ```JavaScript 19 | const prototype = { foo: 'bar' }; 20 | const obj = _objectCreate(prototype); 21 | console.assert(Object.getPrototypeOf(obj) === prototype, "Test 1 failed: Incorrect prototype."); 22 | ``` 23 | 24 | 验证可在新对象上定义属性： 25 | 26 | ```JavaScript 27 | const properties = { 28 | prop: { 29 | value: 42, 30 | writable: true 31 | } 32 | }; 33 | const objWithProps = _objectCreate(prototype, properties); 34 | console.assert(objWithProps.prop === 42, "Test 2 failed: Property value is incorrect."); 35 | ``` 36 | -------------------------------------------------------------------------------- /JS(practical aspects)/Object.freeze.md: -------------------------------------------------------------------------------- 1 | `Object.freeze`：对象属性的值不可更改，无法添加新的属性，且已有的属性不可删除或重新配置 2 | 3 | ```JavaScript 4 | const _myobjectFreeze = object => { 5 | if(object == null || (typeof object !== 'function' && typeof object !== 'object')) { 6 | return object; 7 | } 8 | const properties = Object.getOwnPropertyNames(object); 9 | for(let property of properties) { 10 | if(typeof object[property] === 'object' && object[property] != null) { 11 | _myobjectFreeze(object[property]); 12 | } 13 | let descriptor = Object.getOwnPropertyDescriptor(object, property); 14 | if(descriptor.writable) { 15 | descriptor.writable = false; 16 | } 17 | if(descriptor.configurable) { 18 | descriptor.configurable = false; 19 | } 20 | Object.defineProperty(object, property, descriptor); 21 | } 22 | Object.preventExtensions(object); 23 | return object; 24 | }; 25 | ``` 26 | 27 | 28 | 29 | -------------------------------------------------------------------------------- /JS(practical aspects)/Object.is.md: -------------------------------------------------------------------------------- 1 | `Object.is` 判断两者是否为相同的值，其与 `==` 和 `===` 不同，它认为 NaN 与自身相等，且认为 +0 和 -0 不相等 2 | 3 | ```JavaScript 4 | function _myobjectIs(x, y) { 5 | if(x === y) return x !== 0 || 1 / x === 1 / y; 6 | else return x !== x && y !== y; 7 | }; 8 | ``` 9 | -------------------------------------------------------------------------------- /JS(practical aspects)/Promise.race.md: -------------------------------------------------------------------------------- 1 | ```js 2 | Promise._race = (promises) => { 3 | return new Promise((resolve, reject) => { 4 | if (promises == null || typeof promises[Symbol.iterator] !== "function") 5 | throw new TypeError(`${promises} is not an iterator`); 6 | promises = [...promises]; 7 | promises.forEach((promise) => 8 | Promise.resolve(promise).then(resolve).catch(reject) 9 | ); 10 | }); 11 | }; 12 | 13 | Promise._race([ 14 | new Promise((resolve, reject) => setTimeout(() => reject("A"), 1000)), 15 | new Promise((resolve, reject) => setTimeout(() => resolve("B"), 2000)), 16 | new Promise((resolve, reject) => setTimeout(() => resolve("C"), 3000)), 17 | ]) 18 | .then((res) => console.log(res)) 19 | .catch((err) => console.log(err)); // A 20 | ``` 21 | -------------------------------------------------------------------------------- /JS(practical aspects)/String.prototype.includes.md: -------------------------------------------------------------------------------- 1 | ```js 2 | String.prototype._includes = function (word) { 3 | if (word === "") return true; 4 | for (let i = 0; i < this.length - word.length + 1; ++i) { 5 | let subStr = ""; 6 | for (let j = i; j < i + word.length; ++j) subStr += this[j]; 7 | if (subStr === word) return true; 8 | } 9 | return false; 10 | }; 11 | console.log("Hello world"._includes("Hello ")); // true 12 | ``` -------------------------------------------------------------------------------- /JS(practical aspects)/String.prototype.repeat.md: -------------------------------------------------------------------------------- 1 | ```js 2 | String.prototype._repeat = function (n) { 3 | if (n < 0) throw new RangeError(`${n} must be non-negative`); 4 | let repeatStr = ""; 5 | for (let i = 0; i < n; ++i) repeatStr += this; 6 | return repeatStr; 7 | }; 8 | ``` -------------------------------------------------------------------------------- /JS(practical aspects)/String.prototype.trim.md: -------------------------------------------------------------------------------- 1 | ```js 2 | const myTrim = str => str.replace(/^\s+|\s+$/g, ''); 3 | ``` -------------------------------------------------------------------------------- /JS(practical aspects)/apply & call & bind.md: -------------------------------------------------------------------------------- 1 | ```JavaScript 2 | Function.prototype._apply = function (thisArg, args = []) { 3 | thisArg = 4 | thisArg !== null && thisArg !== undefined ? Object(thisArg) : window; 5 | const fn = Symbol(); 6 | thisArg[fn] = this; 7 | const res = thisArg[fn](args); 8 | delete thisArg[fn]; 9 | return res; 10 | }; 11 | ``` 12 | 13 | ```JavaScript 14 | Function.prototype._call = function (thisArg, ...args) { 15 | thisArg = 16 | thisArg !== null && thisArg !== undefined ? Object(thisArg) : window; 17 | const fn = Symbol(); 18 | thisArg[fn] = this; 19 | const res = thisArg[fn](args); 20 | delete thisArg[fn]; 21 | return res; 22 | }; 23 | ``` 24 | 25 | ```JavaScript 26 | Function.prototype._bind = function (thisArg, ...args) { 27 | const _this = this; 28 | thisArg = 29 | thisArg !== null && thisArg !== undefined ? Object(thisArg) : window; 30 | return (...newArgs) => { 31 | const fn = Symbol(); 32 | thisArg[fn] = _this; 33 | const res = thisArg[fn](...args, ...newArgs); 34 | delete thisArg[fn]; 35 | return res; 36 | }; 37 | }; 38 | ``` 39 | -------------------------------------------------------------------------------- /JS(practical aspects)/async & await.md: -------------------------------------------------------------------------------- 1 | ```JavaScript 2 | function generatorToAsync(generatorFn) { 3 | return function () { 4 | const gen = generatorFn.apply(this, arguments); 5 | return new Promise((resolve, reject) => { 6 | function go(key, arg) { 7 | let res; 8 | try { 9 | res = gen[key](arg); 10 | } catch (err) { 11 | return reject(err); 12 | } 13 | const { value, done } = res; 14 | return done 15 | ? resolve(value) 16 | : Promise.resolve(value).then( 17 | (val) => go("next", val), 18 | (err) => go("throw", err) 19 | ); 20 | } 21 | go("next"); 22 | }); 23 | }; 24 | } 25 | 26 | const fn = (num) => new Promise((resolve) => setTimeout(() => resolve(num * 2), 1000)); 27 | 28 | function* gen() { 29 | const num1 = yield fn(1); 30 | console.log(num1); 31 | const num2 = yield fn(num1); 32 | console.log(num2); 33 | const num3 = yield fn(num2); 34 | console.log(num3); 35 | return num3; 36 | } 37 | 38 | generatorToAsync(gen)().then((res) => console.log(res)); 39 | ``` 40 | -------------------------------------------------------------------------------- /JS(practical aspects)/compose.md: -------------------------------------------------------------------------------- 1 | ```js 2 | function compose(arr) { 3 | return function (ctx) { 4 | function next() { 5 | if (arr.length) { 6 | let func = arr.shift(); 7 | func(ctx, next); 8 | } 9 | } 10 | if (arr.length) { 11 | let func = arr.shift(); 12 | func(ctx, next); 13 | } 14 | }; 15 | } 16 | 17 | function func1(ctx, next) { 18 | ctx.index++; 19 | next(); 20 | } 21 | 22 | function func2(ctx, next) { 23 | setTimeout(function () { 24 | ctx.index++; 25 | next(); 26 | }); 27 | } 28 | 29 | function func3(ctx, next) { 30 | console.log(ctx.index); 31 | } 32 | 33 | compose([func1, func2, func3])({ index: 0 }); // 2 34 | ``` 35 | 36 | `compose` 函数接收一个函数数组 `arr`，其中每个函数均接收两个参数即 `ctx` 上下文和 `next` 指向下一个中间件的函数， 37 | `next` 函数递归调用自己从数组中取出并异步执行每个中间件，使用 `shift` 方法从数组中移除元素，使每个中间件只能执行一次 38 | -------------------------------------------------------------------------------- /JS(practical aspects)/curry.md: -------------------------------------------------------------------------------- 1 | 柯里化：将接收多个参数的函数转换为接收单一参数的函数，且返回接收剩余参数的新函数 2 | 3 | ```JavaScript 4 | function _curry(fn) { 5 | function curried(...args) { 6 | const context = this; 7 | if (fn.length >= args.length) { 8 | return fn.apply(context, args); 9 | } else { 10 | return function (...newArgs) { 11 | return curried.apply(context, args.concat(newArgs)); 12 | }; 13 | } 14 | } 15 | return curried; 16 | } 17 | ``` 18 | 19 | 测试用例： 20 | 21 | ```js 22 | function add(a, b, c) { 23 | return a + b + c; 24 | } 25 | const curriedAdd = _curry(add); 26 | console.log(curriedAdd(1)(2)(3)); // 6 27 | console.log(curriedAdd(1, 2)(3)); // 6 28 | console.log(curriedAdd(1)(2, 3)); // 6 29 | ``` 30 | 31 | -------------------------------------------------------------------------------- /JS(practical aspects)/findDuplicate.md: -------------------------------------------------------------------------------- 1 | ```js 2 | Array.prototype.findDuplicate = function (n) { 3 | const map = this.reduce((acc, item) => { 4 | acc[item] = (acc[item] || 0) + 1; 5 | return acc; 6 | }, {}); 7 | return Object.keys(map).filter((key) => map[key] >= n); 8 | }; 9 | 10 | const arr1 = [1, 2, 3, 1, 2, 1]; 11 | console.log(arr1.findDuplicate(2)); // [ '1', '2' ] 12 | 13 | const arr2 = ["apple", "banana", "apple", "apple", "banana", "cherry"]; 14 | console.log(arr2.findDuplicate(3)); // [ 'apple' ] 15 | 16 | const arr3 = [true, false, true, true]; 17 | console.log(arr3.findDuplicate(2)); // [ 'true' ] 18 | ``` -------------------------------------------------------------------------------- /JS(practical aspects)/instanceof.md: -------------------------------------------------------------------------------- 1 | `instanceof` 用于检测构造函数的 prototype 属性是否出现在某个实例对象的原型链上 2 | 3 | ```JavaScript 4 | const _instanceof = (target, fn) => { 5 | let proto = Object.getPrototypeOf(target); 6 | while (proto) { 7 | if (proto === fn.prototype) return true; 8 | proto = Object.getPrototypeOf(proto); 9 | } 10 | return false; 11 | }; 12 | ``` -------------------------------------------------------------------------------- /JS(practical aspects)/isString.md: -------------------------------------------------------------------------------- 1 | ```js 2 | const _isString = (value) => 3 | typeof value === "string" || value instanceof String; 4 | 5 | console.log(_isString("Hello World")); // true 6 | console.log(_isString(123)); // false 7 | console.log(_isString(new String("Hello World"))); // true 8 | ``` -------------------------------------------------------------------------------- /JS(practical aspects)/localStorage 存储数据.md: -------------------------------------------------------------------------------- 1 | ```JavaScript 2 | const setItemWithExpiry = (key, value, ttl) => { 3 | const item = { 4 | value: value, 5 | expiry: Date.now().getTime() + ttl, 6 | }; 7 | localStorage.setItem(key, JSON.stringify(item)); 8 | }; 9 | 10 | const getItemWithExpiry = (key) => { 11 | const itemStr = localStorage.getItem(key); 12 | if (!itemStr) return null; 13 | const item = JSON.parse(itemStr); 14 | if (item.expiry < Date.now().getItem()) { 15 | localStorage.removeItem(key); 16 | return null; 17 | } 18 | return item.value; 19 | }; 20 | 21 | setItemWithExpiry("myKey", "myValue", 3600000); 22 | console.log(getItemWithExpiry("myKey")); // myValue 23 | ``` 24 | 25 | ![[1699858192700.png]] 26 | -------------------------------------------------------------------------------- /JS(practical aspects)/mergePromise.md: -------------------------------------------------------------------------------- 1 | ```js 2 | const mergePromise = (promisesFn) => { 3 | let sequence = Promise.resolve(); 4 | const ans = []; 5 | promisesFn.forEach( 6 | (promiseFn) => 7 | (sequence = sequence.then(() => promiseFn()).then((res) => ans.push(res))) 8 | ); 9 | return sequence.then(() => ans); 10 | }; 11 | 12 | const timeout = (time) => 13 | new Promise((resolve) => setTimeout(() => resolve(), time)); 14 | const promise1 = () => timeout(2000).then(() => "promise1"); 15 | const promise2 = () => timeout(1000).then(() => "promise2"); 16 | const promise3 = () => timeout(3000).then(() => "promise3"); 17 | mergePromise([promise1, promise2, promise3]).then((res) => console.log(res)); 18 | ``` -------------------------------------------------------------------------------- /JS(practical aspects)/new.md: -------------------------------------------------------------------------------- 1 | ```js 2 | const _new = function (fn, ...args) { 3 | // 构造一个新的空对象 4 | // 将其原型设置为构造函数的 `prototype` 5 | const obj = Object.create(fn.prototype); 6 | // `apply` 确保 `this` 在构造函数内部指向新创建的对象 `obj` 7 | const res = fn.apply(obj, args); 8 | return typeof res === "object" && res !== null ? res : obj; 9 | }; 10 | ``` 11 | 12 | 为实现上述操作，`_new` 函数需知道两件事： 13 | 14 | 1. 哪个构造函数应被调用 -> `fn` 15 | 2. 构造函数的参数是什么 -> `...args` 16 | -------------------------------------------------------------------------------- /JS(practical aspects)/requestAddition.md: -------------------------------------------------------------------------------- 1 | ```js 2 | const requestAddition = (a, b) => 3 | new Promise((resolve) => setTimeout(() => resolve(a + b), 1000)); 4 | const calculate = (...nums) => { 5 | if (nums.length === 0) return Promise.resolve(0); 6 | if (nums.length === 1) return Promise.resolve(nums[0]); 7 | let promiseChain = requestAddition(nums[0], nums[1]); 8 | for (let i = 2; i < nums.length; ++i) 9 | promiseChain = promiseChain.then((res) => requestAddition(res, nums[i])); 10 | return promiseChain; 11 | }; 12 | 13 | calculate(1, 2, 3, 4) 14 | .then((res) => console.log(res)) 15 | .catch((err) => console.error(err)); 16 | ``` -------------------------------------------------------------------------------- /JS(practical aspects)/setTimeout 实现 setInterval.md: -------------------------------------------------------------------------------- 1 | ```JavaScript 2 | function _setInterval(fn, delay, ...args) { 3 | let cancel = false; 4 | const task = () => { 5 | setTimeout(() => { 6 | if (!cancel) { 7 | fn.apply(this, args); 8 | task(); 9 | } 10 | }, delay); 11 | }; 12 | task(); 13 | return () => (cancel = true); 14 | } 15 | ``` 16 | 17 | 测试用例: 18 | 19 | ```JavaScript 20 | const stopHello = _setInterval(() => console.log("Hello"), 1000); 21 | setTimeout(() => stopHello(), 5000); 22 | ``` 23 | 24 | ![[1697509242812.png]] 25 | 26 | -------------------------------------------------------------------------------- /JS(practical aspects)/sleep.md: -------------------------------------------------------------------------------- 1 | ```js 2 | const sleep = (delay) => 3 | new Promise((resolve) => setTimeout(() => resolve(), delay)); 4 | ``` -------------------------------------------------------------------------------- /JS(practical aspects)/util.promisify.md: -------------------------------------------------------------------------------- 1 | `util.promisify` 将基于回调的函数转换为返回 Promise 的函数 2 | 3 | ```js 4 | function promisify(fn) { 5 | if (typeof fn !== "function") throw new TypeError(`${fn} is not a function`); 6 | return function (...args) { 7 | return new Promise((resolve, reject) => { 8 | // Node.js 标准回调格式 err + result 9 | function callback(err, ...results) { 10 | if (err) return reject(err); 11 | if (results.length === 1) return resolve(results[0]); 12 | return resolve(results); 13 | } 14 | args.push(callback); 15 | fn.call(this, ...args); 16 | }); 17 | }; 18 | } 19 | 20 | const fs = require("fs"); 21 | const readFileAsync = promisify(fs.readFile); 22 | readFileAsync("./index.html", "utf8") 23 | .then((data) => console.log(data)) 24 | .catch((err) => console.error(err)); 25 | ``` 26 | 27 | -------------------------------------------------------------------------------- /JS(practical aspects)/一次 setState 一次更新.md: -------------------------------------------------------------------------------- 1 | ```jsx 2 | class MyComponent extends React.Component { 3 | state = { count: 0 }; 4 | 5 | updateStateMultipleTimes = async () => { 6 | await this.setStateAsync({ count: this.state.count + 1 }); 7 | console.log(this.state.count); 8 | await this.setStateAsync({ count: this.state.count + 1 }); 9 | console.log(this.state.count); 10 | }; 11 | 12 | setStateAsync(state) { 13 | return new Promise(resolve => this.setState(state, resolve)); 14 | } 15 | 16 | render() { 17 | return ( 18 |
19 |
22 | );
23 | }
24 | }
25 | ```
--------------------------------------------------------------------------------
/JS(practical aspects)/三进制转十进制.md:
--------------------------------------------------------------------------------
1 | ```js
2 | const three2Ten = (s) => {
3 | let ans = 0;
4 | for (const ch of s) ans = ans * 3 + Number(ch);
5 | return ans;
6 | };
7 |
8 | console.log(three2Ten("102")); // 11
9 | console.log(parseInt(102, 3)); // 11
10 | ```
--------------------------------------------------------------------------------
/JS(practical aspects)/两数之和最大的所有组合数.md:
--------------------------------------------------------------------------------
1 | ```js
2 | const findMaxSum = (arr) => {
3 | if (arr.length < 2) return [];
4 | const ans = [];
5 | let max1 = -Infinity,
6 | max2 = -Infinity;
7 | for (const num of arr) {
8 | if (num > max1) {
9 | max2 = max1;
10 | max1 = num;
11 | } else if (num > max2) {
12 | max2 = num;
13 | }
14 | }
15 | const maxSum = max1 + max2;
16 | for (let i = 0; i < arr.length; ++i) {
17 | for (let j = i + 1; i < arr.length; ++j) {
18 | if (arr[i] + arr[j] === maxSum) ans.push([arr[i], arr[j]]);
19 | }
20 | }
21 | return { maxSum, ans };
22 | };
23 | ```
--------------------------------------------------------------------------------
/JS(practical aspects)/串行 pipeline.md:
--------------------------------------------------------------------------------
1 | ```js
2 | function createPipeline(...tasks) {
3 | return function (initialValue) {
4 | return tasks.reduce(
5 | (pre, cur) => Promise.resolve(pre).then(cur),
6 | initialValue
7 | );
8 | };
9 | }
10 |
11 | const addOne = (x) => x + 1;
12 | const asyncMultiplyTwo = (x) =>
13 | new Promise((resolve) => setTimeout(() => resolve(x * 2), 500));
14 | const subtractThree = (x) => x - 3;
15 | const pipeline = createPipeline(addOne, asyncMultiplyTwo, subtractThree);
16 | pipeline(5)
17 | .then((res) => console.log(res)) // 9
18 | .catch((err) => console.error(err));
19 | ```
--------------------------------------------------------------------------------
/JS(practical aspects)/串行网络请求.md:
--------------------------------------------------------------------------------
1 | ```js
2 | const serialFetch = async (urls) => {
3 | const ans = [];
4 | for (const url of urls) {
5 | const response = await fetch(url);
6 | if (!response.ok) throw new Error(`${url}`, `${response.status}`);
7 | const data = await response.json();
8 | ans.push(data);
9 | }
10 | return ans;
11 | };
12 |
13 | const urls = [
14 | "https://jsonplaceholder.typicode.com/posts/1",
15 | "https://jsonplaceholder.typicode.com/posts/2",
16 | "https://jsonplaceholder.typicode.com/invalid-url",
17 | "https://jsonplaceholder.typicode.com/posts/3",
18 | ];
19 |
20 | serialFetch(urls)
21 | .then((res) => console.log(res))
22 | .catch((err) => console.error(err));
23 | ```
--------------------------------------------------------------------------------
/JS(practical aspects)/事件委托.md:
--------------------------------------------------------------------------------
1 | ```JavaScript
2 | function _addEventListener(element, type, fn, selector) {
3 | if(!selector) element.addEventListener(type, fn)
4 | else {
5 | element.addEventListener(type, function(event) {
6 | const target = event.target;
7 | if(target.matches(selector)) fn.call(target, event);
8 | })
9 | }
10 | };
11 | ```
12 |
13 | 请补全 JavaScript 代码，要求如下：
14 |
15 | 1. 给"ul"标签添加点击事件
16 | 2. 当点击某"li"标签时，该标签内容拼接"."符号。如：某"li"标签被点击时，该标签内容为".."
17 |
18 | 注意：
19 |
20 | 1. 必须使用 DOM0 级标准事件（onclick）
21 |
22 | ```js
23 | document.querySelector("ul").onclick = (event) => {
24 | const target = event.target;
25 | if (target.tagName.toLowerCase() === "li") target.innerHTML += ".";
26 | };
27 | ```
28 |
--------------------------------------------------------------------------------
/JS(practical aspects)/二分查找.md:
--------------------------------------------------------------------------------
1 | ```js
2 | const binarySearch = (arr, target) => {
3 | let left = 0,
4 | right = arr.length - 1;
5 | while (left <= right) {
6 | const mid = Math.floor((left + right) / 2);
7 | if (arr[mid] === target) return mid;
8 | else if (arr[mid] < target) left = mid + 1;
9 | else right = mid - 1;
10 | }
11 | return -1;
12 | };
13 | ```
14 |
15 |
--------------------------------------------------------------------------------
/JS(practical aspects)/倒计时.md:
--------------------------------------------------------------------------------
1 | ```js
2 | import { useState, useEffect } from "react";
3 |
4 | function CountdownTimer({ initialMinutes = 0, initialSeconds = 0 }) {
5 | const [minutes, setMinutes] = useState(initialMinutes);
6 | const [seconds, setSeconds] = useState(initialSeconds);
7 | useEffect(() => {
8 | const myInterval = setInterval(() => {
9 | if (seconds > 0) {
10 | setSeconds(seconds - 1);
11 | } else if (seconds === 0) {
12 | if (minutes === 0) {
13 | clearInterval(myInterval);
14 | } else {
15 | setMinutes(minutes - 1);
16 | setSeconds(59);
17 | }
18 | }
19 | }, 1000);
20 | return () => clearInterval(myInterval);
21 | });
22 | return (
23 | Count: {this.state.count}
20 | 21 |
24 | {minutes === 0 && seconds === 0 ? (
25 |
32 | );
33 | }
34 |
35 | export default CountdownTimer;
36 | ```
--------------------------------------------------------------------------------
/JS(practical aspects)/函数缓存.md:
--------------------------------------------------------------------------------
1 | ```js
2 | function memorize(fn) {
3 | const cache = {};
4 | return function (...args) {
5 | const key = JSON.stringify(args);
6 | if (cache[key]) return cache[key];
7 | const result = fn(...args);
8 | cache[key] = result;
9 | return result;
10 | };
11 | }
12 | ```
--------------------------------------------------------------------------------
/JS(practical aspects)/分红包.md:
--------------------------------------------------------------------------------
1 | 总金额不变 + 每个人都分到红包 + 红包金额随机且保留两位小数
2 |
3 | ```js
4 | const divideRedPocket = (total, num) => {
5 | let remain = total;
6 | const ans = [];
7 | for (let i = 0; i < num - 1; ++i) {
8 | let maxRed = remain - (num - 1 - i) * 0.01; // 每人至少分到 0.01 元
9 | let amount = (Math.random() * maxRed).toFixed(2);
10 | ans.push(amount);
11 | remain -= amount;
12 | }
13 | ans.push(remain.toFixed(2));
14 | return ans;
15 | };
16 |
17 | console.log(divideRedPocket(100, 10));
18 | ```
19 |
20 | 若不采取以下策略，采用上述所谓之完全随机，先前两个人拿到的红包已是大头，完全丧失公平性
21 |
22 | ```js
23 | const divideRedPocket = (totalAmount, num) => {
24 | let remain = totalAmount;
25 | const ans = [];
26 | for (let i = 0; i < num - 1; ++i) {
27 | let maxRed = (remain / (num - i)) * 2;
28 | let amount = Math.floor(Math.random() * maxRed).toFixed(2);
29 | ans.push(amount);
30 | remain -= amount;
31 | }
32 | ans.push(remain.toFixed(2));
33 | return ans;
34 | };
35 | console.log(divideRedPocket(100, 10));
36 | ```
--------------------------------------------------------------------------------
/JS(practical aspects)/判断对象是否为空.md:
--------------------------------------------------------------------------------
1 | ```js
2 | const isObjEmpty = (obj) => {
3 | if (typeof obj !== "object" || obj === null) return false;
4 | for (const key in obj) {
5 | if (obj.hasOwnProperty(key)) {
6 | // 发现一个非空对象
7 | if (
8 | typeof obj[key] === "object" &&
9 | obj[key] !== null &&
10 | !isObjEmpty(obj[key])
11 | )
12 | return false;
13 | // 发现一个非空值
14 | else if (obj[key] !== null && obj[key] !== undefined && obj[key] !== "")
15 | return false;
16 | }
17 | }
18 | return true; // 所有属性均为空
19 | };
20 | ```
--------------------------------------------------------------------------------
/JS(practical aspects)/判断数组是否为等差数列.md:
--------------------------------------------------------------------------------
1 | ```js
2 | const isArithmetic = (arr) => {
3 | if (arr.length < 2) return true;
4 | arr.sort((a, b) => a - b);
5 | const diff = arr[1] - arr[0];
6 | for (let i = 2; i < arr.length; ++i) {
7 | if (arr[i] - arr[i - 1] !== diff) return false;
8 | }
9 | return true;
10 | };
11 |
12 | console.log(isArithmetic([3, 5, 7, 9])); // true
13 | console.log(isArithmetic([1, 2, 4])); // false
14 | ```
15 |
16 |
--------------------------------------------------------------------------------
/JS(practical aspects)/判断数组是否含重复值.md:
--------------------------------------------------------------------------------
1 | 值位于 0 至 n-1 间，以数组本身作为哈希表，通过将对应索引处的值标记为负数来记录访问状态，若某个值的索引已访问过，再次访问则说明有重复值
2 |
3 | ```js
4 | const hasDuplicates = (arr) => {
5 | for (let i = 0; i < arr.length; ++i) {
6 | const val = Math.abs(arr[i]);
7 | if (arr[val] < 0) return true;
8 | arr[val] = -arr[val];
9 | }
10 | return false;
11 | };
12 | ```
13 |
14 | ```js
15 | const hasDuplicates = (arr) => {
16 | let i = 0;
17 | while (i < arr.length) {
18 | if (arr[i] === i || arr[i] < 0 || arr[i] >= arr.length) {
19 | ++i;
20 | continue;
21 | }
22 | if (arr[i] === arr[arr[i]]) return true;
23 | [arr[i], arr[arr[i]]] = [arr[arr[i]], arr[i]];
24 | }
25 | return false;
26 | };
27 | ```
--------------------------------------------------------------------------------
/JS(practical aspects)/判断数组里各天的微信步数是否满足传入时间范围内的微信步数.md:
--------------------------------------------------------------------------------
1 | ```js
2 | const checkDailyStep = (data, start, end, total) => {
3 | const startDate = new Date(start),
4 | endDate = new Date(end);
5 | const filtered = data.filter((item) => {
6 | const itemDate = new Date(item.date);
7 | return itemDate >= startDate && itemDate <= endDate;
8 | });
9 | return filtered.every((item) => item.step >= total);
10 | };
11 |
12 | const testData = [
13 | { date: "2025-03-20", step: 8000 },
14 | { date: "2025-03-21", step: 10000 },
15 | { date: "2025-03-22", step: 6000 },
16 | ];
17 |
18 | const result = checkDailyStep(testData, "2025-03-20", "2025-03-22", 7000);
19 | console.log(result); // false
20 | ```
--------------------------------------------------------------------------------
/JS(practical aspects)/判断点是否在矩形内.md:
--------------------------------------------------------------------------------
1 | 已知左下角坐标 x1、y1 和右上角的坐标 x2、y2
2 |
3 | ```js
4 | const isInside = (x1, y1, x2, y2, px, py) =>
5 | x1 <= px && px <= x2 && y1 <= py && py <= y2;
6 | ```
--------------------------------------------------------------------------------
/JS(practical aspects)/千分位转化.md:
--------------------------------------------------------------------------------
1 | 1. 正则
2 |
3 | ```js
4 | const formatToThousands = (num) => {
5 | const item = num.toString().split(".");
6 | item[0] = item[0].replace(/(\d)(?=(\d{3})+(?!\d))/g, "$1,");
7 | return `${item[0]}.${item[1]}`;
8 | };
9 |
10 | console.log(formatToThousands(123456789.123456789));
11 | ```
12 |
13 | 2. 数组 API
14 |
15 | ```js
16 | const formatToThousands = (num) => {
17 | const item = num.toString().split(".");
18 | const reversed = item[0].split("").reverse();
19 | const chunks = [];
20 | for (let i = 0; i < reversed.length; i += 3)
21 | chunks.push(reversed.slice(i, i + 3).join(""));
22 | const formatted = chunks.join(",").split("").reverse().join("");
23 | return `${formatted}.${item[1]}`;
24 | };
25 |
26 | console.log(formatToThousands(123456789.123456789));
27 | ```
28 |
29 | 3. `toLocaleString`
30 |
31 | ```js
32 | const formatToThousands = (num) =>
33 | num.toLocaleString("en-US", {
34 | minimumFractionDigits: 0,
35 | maximumFractionDigits: 20,
36 | });
37 |
38 | console.log(formatToThousands(123456789.123456789));
39 | ```
40 |
--------------------------------------------------------------------------------
/JS(practical aspects)/单例模式.md:
--------------------------------------------------------------------------------
1 | ```js
2 | class Singleton {
3 | constructor(name, age) {
4 | if (!Singleton.instance) {
5 | this.name = name;
6 | this.age = age;
7 | Singleton.instance = this;
8 | }
9 | return Singleton.instance;
10 | }
11 | }
12 |
13 | console.log(new Singleton("Clown", 21) === new Singleton("Rainyrou", 18)); // true
14 | ```
15 |
--------------------------------------------------------------------------------
/JS(practical aspects)/合并对象.md:
--------------------------------------------------------------------------------
1 | ```js
2 | const isObject = (obj) =>
3 | Object.prototype.toString.call(obj) === "[Object object]";
4 |
5 | const merge = (obj1, obj2) => {
6 | let result = { ...obj1 }; // 浅拷贝
7 | for (const key in obj2)
8 | result[key] =
9 | isObject(result[key]) && isObject(obj2[key])
10 | ? merge(result[key], obj2[key])
11 | : obj2[key];
12 | return result;
13 | };
14 |
15 | const a = { b: { c: { d: { e: 1 } } } };
16 | const x = { y: { z: 2, t: 521 } };
17 | console.log(JSON.stringify(merge(a, x))); // {"b":{"c":{"d":{"e":1}}},"y":{"z":2,"t":521}}
18 | ```
--------------------------------------------------------------------------------
/JS(practical aspects)/合法 URL.md:
--------------------------------------------------------------------------------
1 | [learn-regex/translations/README-cn.md at master · ziishaned/learn-regex · GitHub](https://github.com/ziishaned/learn-regex/blob/master/translations/README-cn.md)
2 |
3 | ```js
4 | const isUrl = (url) =>
5 | /^((https|http)?:\/\/)((([A-Za-z0-9]+-[A-Za-z0-9]+|[A-Za-z0-9]+)\.)+([A-Za-z]{2,6})|(\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}))(:\d+)?(\/.*)?(\?.*)?(#.*)?$/.test(
6 | url
7 | );
8 |
9 | console.log(isUrl("http://114.132.167.29:5021/")); // true
10 | console.log(
11 | isUrl(
12 | "https://github.com/ziishaned/learn-regex/blob/master/translations/README-cn.md"
13 | ) // true
14 | );
15 | ```
--------------------------------------------------------------------------------
/JS(practical aspects)/后端返回的对象数组属性名转换.md:
--------------------------------------------------------------------------------
1 | ```js
2 | const data = [
3 | { name: "苹果", price: "1.0" },
4 | { name: "香蕉", price: null },
5 | { name: "", price: "2.0" },
6 | { name: "橘子", price: undefined },
7 | { name: "葡萄", price: "" },
8 | ];
9 |
10 | const transformData = data
11 | .filter((item) => item.name && item.name.trim() !== "")
12 | .map((item) => ({
13 | label: item.name,
14 | value: item.price ? parseFloat(item.price) : 0,
15 | }));
16 | console.log(transformData);
17 | ```
--------------------------------------------------------------------------------
/JS(practical aspects)/大数相加.md:
--------------------------------------------------------------------------------
1 | ```js
2 | const bigNumberAddition = (a, b) => {
3 | let i = a.length - 1,
4 | j = b.length - 1,
5 | carry = 0,
6 | ans = "";
7 | while (i >= 0 || j >= 0 || carry > 0) {
8 | let x = i >= 0 ? parseInt(a[i], 10) : 0,
9 | y = j >= 0 ? parseInt(b[j], 10) : 0;
10 | let sum = x + y + carry;
11 | carry = Math.floor(sum / 10);
12 | sum %= 10;
13 | ans = sum.toString() + ans;
14 | --i;
15 | --j;
16 | }
17 | return ans;
18 | };
19 | const a = "987654321987654321";
20 | const b = "123456789123456789";
21 | console.log(bigNumberAddition(a, b)); // 1111111111111111110
22 | ```
--------------------------------------------------------------------------------
/JS(practical aspects)/字符串转小写后按字典序并去重.md:
--------------------------------------------------------------------------------
1 | ```js
2 | const sortAndUnique = (arr) => {
3 | const lowerCaseArr = arr.map((item) => item.toLowerCase());
4 | return [...new Set(lowerCaseArr.sort())];
5 | };
6 |
7 | const inputArray = ["Apple", "banana", "apple", "Banana", "Cherry"];
8 | console.log(sortAndUnique(inputArray)); // ["apple", "banana", "cherry"]
9 | ```
--------------------------------------------------------------------------------
/JS(practical aspects)/字符串转嵌套对象.md:
--------------------------------------------------------------------------------
1 | ```js
2 | const convert = (path) => {
3 | const keys = path.split(".");
4 | let obj = {},
5 | cur = obj;
6 | keys.forEach((key, index) => {
7 | cur[key] = index === keys.length - 1 ? null : {};
8 | cur = cur[key];
9 | });
10 | return obj;
11 | };
12 |
13 | const path = "a.b.c.d";
14 | console.log(JSON.stringify(convert(path), null, 2));
15 | ```
16 |
17 | ```
18 | {
19 | "a": {
20 | "b": {
21 | "c": {
22 | "d": null
23 | }
24 | }
25 | }
26 | }
27 | ```
--------------------------------------------------------------------------------
/JS(practical aspects)/定时器.md:
--------------------------------------------------------------------------------
1 | ```js
2 | class Timer {
3 | constructor(callback, interval) {
4 | this.timerId = null;
5 | this.callback = callback;
6 | this.interval = interval;
7 | }
8 | start() {
9 | if (!this.timerId) this.timerId = setInterval(this.callback, this.interval);
10 | }
11 | stop() {
12 | if (this.timerId) {
13 | clearInterval(this.timerId);
14 | this.timerId = null;
15 | }
16 | }
17 | }
18 |
19 | const timer = new Timer(() => console.log("tick per 3s"), 3000);
20 | timer.start();
21 | setTimeout(() => {
22 | timer.stop();
23 | console.log("stop");
24 | }, 10000);
25 | ```
--------------------------------------------------------------------------------
/JS(practical aspects)/寄生组合式继承.md:
--------------------------------------------------------------------------------
1 | 请补全 JavaScript 代码，要求通过寄生组合式继承使"Chinese"构造函数继承于"Human"构造函数。要求如下：
2 |
3 | 1. 给"Human"构造函数的原型上添加"getName"函数，该函数返回调用该函数对象的"name"属性
4 | 2. 给"Chinese"构造函数的原型上添加"getAge"函数，该函数返回调用该函数对象的"age"属性
5 |
6 | ```JavaScript
7 | function Human(name) {
8 | this.name = name;
9 | this.kingdom = "animal";
10 | this.color = ["yellow", "white", "brown", "black"];
11 | }
12 |
13 | Human.prototype.getName = function () {
14 | return this.name;
15 | };
16 |
17 | function Chinese(name, age) {
18 | Human.call(this, name);
19 | this.age = age;
20 | this.color = "yellow";
21 | }
22 |
23 | Chinese.prototype = Object.create(Human.prototype);
24 | Chinese.prototype.constructor = Chinese;
25 | Chinese.prototype.getAge = function () {
26 | return this.age;
27 | };
28 | ```
29 |
30 |
31 |
32 |
--------------------------------------------------------------------------------
/JS(practical aspects)/对象拍平.md:
--------------------------------------------------------------------------------
1 | ```js
2 | const flattenObj = (target, prefix = "") => {
3 | const obj = {};
4 | for (const key in target) {
5 | if (target.hasOwnProperty(key)) {
6 | const newKey = prefix ? `${prefix}.${key}` : key;
7 | if (Array.isArray(target[key])) {
8 | target[key].forEach(
9 | (item, index) => (obj[`${newKey}[${index}]`] = item)
10 | );
11 | } else if (typeof target[key] === "object" && target[key] !== null) {
12 | Object.assign(obj, flattenObj(target[key], newKey));
13 | } else {
14 | obj[newKey] = target[key];
15 | }
16 | }
17 | }
18 | return obj;
19 | };
20 |
21 | const obj = {
22 | a: "hello",
23 | b: 111,
24 | c: {
25 | d: "world",
26 | e: [1, 2, 3],
27 | },
28 | };
29 |
30 | console.log(flattenObj(obj));
31 | ```
32 |
33 |
--------------------------------------------------------------------------------
/JS(practical aspects)/对象数组重叠区间.md:
--------------------------------------------------------------------------------
1 | ```JavaScript
2 | const isOverlap = (intervals) => {
3 | intervals.sort((a, b) => a.s - b.s);
4 | for (let i = 0; i < intervals.length - 1; ++i) {
5 | if (intervals[i].e > intervals[i + 1].s) return true;
6 | }
7 | return false;
8 | };
9 | const intervals = [
10 | { s: 1, e: 3 },
11 | { s: 2, e: 4 },
12 | { s: 3, e: 6 },
13 | ];
14 | console.log(isOverlap(intervals)); // true
15 | ```
--------------------------------------------------------------------------------
/JS(practical aspects)/对象转换为路径数组.md:
--------------------------------------------------------------------------------
1 | ```js
2 | const flattenObj = (obj, prePath = []) => {
3 | const ans = [];
4 | for (const key in obj) {
5 | if (obj.hasOwnProperty(key)) {
6 | const curPath = [...prePath, ...key];
7 | if (
8 | typeof obj[key] === "object" &&
9 | obj[key] !== null &&
10 | Object.keys(obj[key]).length > 0
11 | ) {
12 | ans.push(...flattenObj(obj[key], curPath));
13 | } else {
14 | ans.push(curPath);
15 | }
16 | }
17 | }
18 | return ans;
19 | };
20 |
21 | const obj = {
22 | a: { b: { c: {} } },
23 | d: { e: {} },
24 | };
25 |
26 | console.log(flattenObj(obj));
27 | ```
28 |
29 |
--------------------------------------------------------------------------------
/JS(practical aspects)/微信红包.md:
--------------------------------------------------------------------------------
1 | [微信红包](https://www.nowcoder.com/practice/fbcf95ed620f42a88be24eb2cd57ec54)
2 |
3 | 春节期间小明使用微信收到很多个红包，非常开心。在查看领取红包记录时发现，某个红包金额出现的次数超过红包总数的一半。请帮小明找到该红包金额。写出具体算法思路和代码实现，要求算法尽可能高效
4 |
5 | 给定一个红包的金额数组 gifts 及它的大小 n ，请返回所求红包的金额，若没有金额超过总数的一半，返回 0
6 |
7 | 数据范围： 1 ≤n≤ 1000，红包金额满足 1 ≤ gifti ≤100000
8 |
9 | 示例 1
10 |
11 | 输入：[1,2,3,2,2],5
12 |
13 | 返回值：2
14 |
15 | 示例 2
16 |
17 | 输入：[1,1,2,2,3,3],6
18 |
19 | 返回值：0
20 |
21 | ```js
22 | const getValue = (gifts, n) => {
23 | let candidate = null,
24 | count = 0;
25 | for (const gift of gifts) {
26 | if (count === 0) {
27 | candidate = gift;
28 | count = 1;
29 | } else if (gift === candidate) {
30 | ++count;
31 | } else {
32 | --count;
33 | }
34 | }
35 | let ans = 0;
36 | for (const gift of gifts) {
37 | if (gift === candidate) ++ans;
38 | }
39 | return ans > n / 2 ? candidate : 0;
40 | };
41 | ```
--------------------------------------------------------------------------------
/JS(practical aspects)/快速幂.md:
--------------------------------------------------------------------------------
1 | ```js
2 | const fastPow = (x, n) => {
3 | if (n < 0) {
4 | x = 1 / x;
5 | n = -n;
6 | }
7 | let ans = 1;
8 | while (n > 0) {
9 | if (n % 2 === 1) ans *= x;
10 | x *= x;
11 | n = Math.floor(n / 2);
12 | }
13 | return ans;
14 | };
15 |
16 | console.log(fastPow(2, 10)); // 1024
17 | console.log(fastPow(2, -3)); // 0.125
18 | ```
--------------------------------------------------------------------------------
/JS(practical aspects)/找出两个数组或对象数组中不共有的元素.md:
--------------------------------------------------------------------------------
1 | ###### 简单数组
2 |
3 | ```JavaScript
4 | const findUniqueElements = (arr1, arr2) =>
5 | arr1
6 | .filter((item) => !arr2.includes(item))
7 | .concat(arr2.filter((item) => !arr1.includes(item)));
8 |
9 | const arr1 = [1, 2, 3, 4];
10 | const arr2 = [3, 4, 5, 6];
11 | console.log(findUniqueElements(arr1, arr2));
12 | ```
13 |
14 | ###### 对象数组
15 |
16 | ```JavaScript
17 | const findUniqueElements = (arr1, arr2, key) => {
18 | const set2 = new Set(arr2.map((item) => item[key]));
19 | return arr1
20 | .filter((item) => !set2.has(item[key]))
21 | .concat(arr2.filter((item) => !arr1.some((i) => i[key] === item[key])));
22 | };
23 |
24 | const arr1 = [
25 | { id: 1, name: "Boss" },
26 | { id: 2, name: "Rainy" },
27 | ];
28 | const arr2 = [
29 | { id: 2, name: "Rainy" },
30 | { id: 3, name: "Clown" },
31 | ];
32 |
33 | console.log(findUniqueElements(arr1, arr2, "id"));
34 | ```
--------------------------------------------------------------------------------
/JS(practical aspects)/找到毒药的最少次数.md:
--------------------------------------------------------------------------------
1 | 16 瓶药中有 1 瓶毒药，有 4 只老鼠，1 次可喝 1 或多瓶，找到毒药的最少次数？
2 |
3 | 由于有四只老鼠，每只老鼠有生死两种结果，可获得16 种不同结果，恰与药瓶数量相匹配，即每瓶药均可分配一个唯一的四位二进制数，从 0000 到 1111，其中每一位代表一只老鼠是否应该喝这瓶药：0 表示该老鼠不喝，1 表示该老鼠喝
4 |
5 | 1. 为每瓶药分配一个编号，从 0 到 15，将这些编号转换为二进制形式，如编号 0 对应的二进制为 0000，编号 15 对应的二进制为 1111
6 | 2. 根据二进制编号决定老鼠的喝药方案，如一瓶药的二进制编号是 1010，则第一只和第三只老鼠需喝这瓶药，第二只和第四只老鼠不喝
7 | 3. 进行一次测试，等待足够时间观察老鼠反应
8 | 4. 根据老鼠的生死情况来确定毒药瓶，四个老鼠的生死情况共同组成一个四位二进制数，其对应的十进制数即为毒药瓶的编号
9 |
--------------------------------------------------------------------------------
/JS(practical aspects)/数组乱序.md:
--------------------------------------------------------------------------------
1 | 1. `Math.random` + `sort`
2 |
3 | ```JavaScript
4 | const shuffle = (arr) => arr.sort(() => Math.random() - 0.5);
5 | ```
6 |
7 | 非均匀分布 + 性能问题
8 |
9 | 2. Fisher-Yates/Knuth 洗牌算法：
10 |
11 | ```js
12 | const shuffle = (arr) => {
13 | for (let i = arr.length - 1; i > 0; --i) {
14 | const j = Math.floor(Math.random() * (i + 1));
15 | [arr[i], arr[j]] = [arr[j], arr[i]];
16 | }
17 | return arr;
18 | };
19 | ```
20 |
21 | 时间复杂度 O(n)
22 |
--------------------------------------------------------------------------------
/JS(practical aspects)/数组元素奇前偶后.md:
--------------------------------------------------------------------------------
1 | ```js
2 | const sortArray = (array) =>
3 | array.sort((a, b) => (a % 2 === 0) - (b % 2 === 0) || a - b);
4 | const array = [1, 2, 3, 4, 5];
5 | console.log(sortArray(array)); // [ 1, 3, 5, 2, 4 ]
6 | ```
7 |
8 | `a` 为偶 `b` 为奇 -> `a` 排 `b` 后
9 | `a` 为奇 `b` 为偶 -> `a` 排 `b` 前
10 | `a` 和 `b` 同为奇/偶 -> `a - b`
11 |
--------------------------------------------------------------------------------
/JS(practical aspects)/数组转换为对象.md:
--------------------------------------------------------------------------------
1 | ```js
2 | const arrayToObject = (arr) => {
3 | const obj = {};
4 | for (const item of arr) {
5 | const { name, value } = item;
6 | obj[name] = value;
7 | }
8 | return obj;
9 | };
10 |
11 | const list = [
12 | { name: "clown", value: 666 },
13 | { name: "Alice", value: 30 },
14 | { name: "Bob", value: 40 },
15 | { name: "Charlie", value: 50 },
16 | ];
17 |
18 | console.log(arrayToObject(list)); // { clown: 666, Alice: 30, Bob: 40, Charlie: 50 }
19 | ```
--------------------------------------------------------------------------------
/JS(practical aspects)/日期格式化.md:
--------------------------------------------------------------------------------
1 | ```JavaScript
2 | const formatDate = (date, format) => {
3 | const addZero = (n) => (Number(n) < 10 ? "0" + n : String(n));
4 | const convert = {
5 | YYYY: date.getFullYear(),
6 | MM: addZero(date.getMonth() + 1),
7 | DD: addZero(date.getDate()),
8 | HH: addZero(date.getHours()),
9 | mm: addZero(date.getMinutes()),
10 | ss: addZero(date.getSeconds()),
11 | };
12 | return format.replace(
13 | /(YYYY|MM|DD|HH|mm|ss)/g,
14 | (matched) => convert[matched]
15 | );
16 | };
17 | ```
18 |
19 | ```js
20 | const formatData = (input, separator) =>
21 | input.replace(/\[(\d{4})(\d{2})(\d{2})\]/g, `$1${separator}$2${separator}$3`);
22 |
23 | const date = "[20240517]";
24 | console.log(formatData(date, "."));
25 | console.log(formatData(date, "-"));
26 | console.log(formatData(date, "/"));
27 | ```
--------------------------------------------------------------------------------
/JS(practical aspects)/日期转化：一年第几天.md:
--------------------------------------------------------------------------------
1 | ```js
2 | function getDayOfYear(dateString) {
3 | const year = parseInt(dateString.substring(0, 4));
4 | const month = parseInt(dateString.substring(4, 6)) - 1;
5 | const day = parseInt(dateString.substring(6, 8));
6 | const date = new Date(year, month, day);
7 | const start = new Date(date.getFullYear(), 0, 0);
8 | const diff = date - start;
9 | const oneDay = 1000 * 60 * 60 * 24;
10 | const dayOfYear = Math.floor(diff / oneDay);
11 | return dayOfYear;
12 | }
13 | ```
--------------------------------------------------------------------------------
/JS(practical aspects)/时间地区转换.md:
--------------------------------------------------------------------------------
1 | ```js
2 | const formatTime = (dateStr, timeZone) => {
3 | const date = new Date(dateStr);
4 | const convert = new Intl.DateTimeFormat("en-US", {
5 | timeZone,
6 | year: "numeric",
7 | month: "2-digit",
8 | day: "2-digit",
9 | hour: "2-digit",
10 | minute: "2-digit",
11 | second: "2-digit",
12 | hour12: false,
13 | });
14 | const [month, day, year, hour, minute, second] = convert
15 | .format(date)
16 | .match(/\d+/g);
17 | return `${year}-${month}-${day} ${hour}-${minute}-${second}`;
18 | };
19 |
20 | const dataStr = "2024-05-17T12:00:00Z"; // UTC 时间
21 | const timeZone = "America/New_York"; // 目标时区
22 | console.log(formatTime(dataStr, timeZone)); // 2024-05-17 08-00-00
23 | ```
--------------------------------------------------------------------------------
/JS(practical aspects)/时间格式化输出.md:
--------------------------------------------------------------------------------
1 | ```JavaScript
2 | const formatDate = (date, format) => {
3 | const addZero = data => data < 10 ? '0' + data : data;
4 | const obj = {
5 | 'yyyy': date.getFullYear(),
6 | 'yy': date.getFullYear() % 100,
7 | 'MM': addZero(date.getMonth() + 1),
8 | 'M': date.getMonth() + 1,
9 | 'dd': addZero(date.getDate()),
10 | 'd': date.getDate(),
11 | 'HH': addZero(date.getHours()),
12 | 'H': date.getHours(),
13 | 'hh': addZero(date.getHours() % 12),
14 | 'h': date.getHours() % 12,
15 | 'mm': addZero(date.getMinutes()),
16 | 'm': date.getMinutes(),
17 | 'ss': addZero(date.getSeconds()),
18 | 's': date.getSeconds(),
19 | 'w': () {
20 | const arr = ['日', '一', '二', '三', '四', '五', '六'];
21 | return arr[date.getDay()];
22 | }
23 | }
24 | for(let i in obj) format = format.replace(i, obj[i]);
25 | return format;
26 | }
27 | ```
--------------------------------------------------------------------------------
/JS(practical aspects)/构造小于给定数的最大数.md:
--------------------------------------------------------------------------------
1 | 题意：给定一个整数如 `n = 1234` 和一个排序后的常数数组如 `digits = [1, 2, 3]`，构造一个小于 `n` 的最大数
2 |
3 | ```js
4 | const largestNumberLessThanN = (n, digits) => {
5 | let maxNum = -Infinity;
6 | const dfs = (curNum) => {
7 | if (curNum >= n) return;
8 | maxNum = Math.max(maxNum, curNum);
9 | for (const digit of digits) dfs(curNum + digit);
10 | };
11 | for (const digit of digits) {
12 | if (digit !== 0) dfs(digit.toString());
13 | }
14 | return maxNum;
15 | };
16 |
17 | console.log(largestNumberLessThanN(1234, [1, 2, 3])); // 1233
18 | console.log(largestNumberLessThanN(1000, [1, 2, 3])); // 333
19 | console.log(largestNumberLessThanN(5678, [1, 3, 5])); // 5555
20 | console.log(largestNumberLessThanN(4321, [1, 2, 3, 4])); // 4314
21 | console.log(largestNumberLessThanN(500, [1, 2, 3])); // 333
22 | ```
--------------------------------------------------------------------------------
/JS(practical aspects)/查找 24 小时制时间列表中最小时间差.md:
--------------------------------------------------------------------------------
1 | ```js
2 | const findMinDiff = (list) => {
3 | const mins = list
4 | .map((time) => {
5 | const [hour, min] = time.split(":").map(Number);
6 | return hour * 60 + min;
7 | })
8 | .sort((a, b) => a - b);
9 | let ans = Infinity;
10 | for (let i = 1; i < list.length; ++i)
11 | ans = Math.min(ans, mins[i] - mins[i - 1]);
12 | const circularDiff = 1440 + mins[0] - mins[list.length - 1];
13 | ans = Math.min(ans, circularDiff);
14 | return ans;
15 | };
16 |
17 | console.log(findMinDiff(["23:59", "00:00"])); // 1
18 | console.log(findMinDiff(["00:00", "23:59", "00:00"])); // 0
19 | ```
20 |
21 |
--------------------------------------------------------------------------------
/JS(practical aspects)/栈.md:
--------------------------------------------------------------------------------
1 | ```js
2 | function Stack() {
3 | let stk = [];
4 | this.push = function (item) {
5 | stk.push(item);
6 | };
7 | this.pop = function () {
8 | if (stk.length === 0) throw new Error("Stack is empty");
9 | return stk.pop();
10 | };
11 | this.peek = function () {
12 | if (stk.length === 0) throw new Error("Stack is empty");
13 | return stk[stk.length - 1];
14 | };
15 | Object.defineProperty(this, "length", {
16 | get: function () {
17 | return stk.length;
18 | },
19 | enumerable: true,
20 | configurable: false,
21 | });
22 | }
23 | ```
24 |
25 |
--------------------------------------------------------------------------------
/JS(practical aspects)/树的 DFS & BFS.md:
--------------------------------------------------------------------------------
1 | ```js
2 | class TreeNode {
3 | constructor(value) {
4 | this.value = value;
5 | this.children = [];
6 | }
7 | addChild(child) {
8 | this.children.add(child);
9 | }
10 | }
11 |
12 | const dfs = (node) => {
13 | if (!node) return;
14 | console.log(node);
15 | for (const child of node.children) dfs(child);
16 | };
17 |
18 | const bfs = (node) => {
19 | if (!node) return;
20 | const queue = [node];
21 | while (queue.length) {
22 | const cur = queue.shift();
23 | console.log(cur);
24 | for (const child of cur.children) queue.push(child);
25 | }
26 | };
27 | ```
--------------------------------------------------------------------------------
/JS(practical aspects)/根据给定字符串获取对象属性值.md:
--------------------------------------------------------------------------------
1 | ```js
2 | const getValueByStr = (obj, str) => {
3 | if (!obj || typeof obj !== "object") return undefined;
4 | if (typeof str !== "string") return undefined;
5 | const keys = str.split(".");
6 | let res = obj;
7 | for (const key of keys) {
8 | if (res && typeof res === "object" && key in res) res = res[key];
9 | else return undefined;
10 | }
11 | return res;
12 | };
13 |
14 | const data = {
15 | user: {
16 | name: "John Doe",
17 | address: {
18 | city: "New York",
19 | zip: "10001",
20 | },
21 | contact: {
22 | email: "john.doe@example.com",
23 | phone: "123-456-7890",
24 | },
25 | },
26 | };
27 |
28 | console.log(getValueByStr(data, "user.name")); // John Doe
29 | console.log(getValueByStr(data, "user.address.city")); // New York
30 | console.log(getValueByStr(data, "user.contact.email")); // john.doe@example.com
31 | console.log(getValueByStr(data, "user.age")); // undefined
32 | console.log(getValueByStr(data, "user.address.country")); // undefined
33 | ```
--------------------------------------------------------------------------------
/JS(practical aspects)/检测数组是否有序.md:
--------------------------------------------------------------------------------
1 | ```js
2 | const isSorted = (arr) => {
3 | if (arr.length <= 1) return true;
4 | let isAscending = true,
5 | isDescending = true;
6 | for (let i = 1; i < arr.length; ++i) {
7 | if (arr[i - 1] < arr[i]) isDescending = false;
8 | if (arr[i - 1] > arr[i]) isAscending = false;
9 | }
10 | return isAscending || isDescending;
11 | };
12 |
13 | console.log(isSorted([])); // true
14 | console.log(isSorted([1])); // true
15 | console.log(isSorted([1, 2, 3, 4, 5])); // true
16 | console.log(isSorted([5, 4, 3, 2, 1])); // true
17 | console.log(isSorted([1, 3, 2, 4, 5])); // false
18 | ```
--------------------------------------------------------------------------------
/JS(practical aspects)/深度比较.md:
--------------------------------------------------------------------------------
1 | ```js
2 | const deepEqual = (obj1, obj2) => {
3 | if (obj1 === obj2) return true;
4 | if (
5 | typeof obj1 !== "object" ||
6 | obj1 === null ||
7 | typeof obj2 !== "object" ||
8 | obj2 === null
9 | )
10 | return false;
11 | const key1 = Object.keys(obj1),
12 | key2 = Object.keys(obj2);
13 | if (key1.length !== key2.length) return false;
14 | for (const key of key1) {
15 | if (!key2.includes(key) || !deepEqual(obj1[key], obj2[key])) return false;
16 | }
17 | return true;
18 | };
19 |
20 | const obj1 = { a: 1, b: { c: 2 } };
21 | const obj2 = { a: 1, b: { c: 2 } };
22 | const obj3 = { a: 1, b: { c: 3 } };
23 | const obj4 = { a: 1, b: { c: 3, d: 4 } };
24 | const obj5 = 5;
25 |
26 | console.log(deepEqual(obj1, obj2)); // true
27 | console.log(deepEqual(obj1, obj3)); // false
28 | console.log(deepEqual(obj3, obj4)); // false
29 | console.log(deepEqual(obj1, obj5)); // false
30 | console.log(deepEqual(obj1, null)); // false
31 | console.log(deepEqual(null, null)); // true
32 | console.log(deepEqual(obj1, { a: 1, b: { c: 2 }, e: undefined })); // false
33 | ```
--------------------------------------------------------------------------------
/JS(practical aspects)/牛顿法求根号 n.md:
--------------------------------------------------------------------------------
1 | ```js
2 | const sqrtNewton = (n) => {
3 | if (n === 0) return 0;
4 | let x = n;
5 | while (true) {
6 | const nextX = 0.5 * (x + n / x);
7 | if (Math.abs(nextX - x) < 1e-7) return nextX;
8 | x = nextX;
9 | }
10 | };
11 |
12 | console.log(sqrtNewton(25)); // 5
13 | console.log(sqrtNewton(2)); // 1.414213562373095
14 | console.log(sqrtNewton(0)); // 0
15 | console.log(sqrtNewton(0.01)); // 0.1
16 | ```
--------------------------------------------------------------------------------
/JS(practical aspects)/生成区间 (left, rigth) 的 n 个不重复的数字.md:
--------------------------------------------------------------------------------
1 | 包括 left 和 right
2 |
3 | ```JavaScript
4 | const generateUnique = (n, left, right) => {
5 | if (n > right - left + 1)
6 | throw new Error("Not enough unique numbers can be generated in the range.");
7 | const set = new Set();
8 | while (set.size < n) {
9 | const num = Math.floor(Math.random() * (right - left + 1) + left);
10 | set.add(num);
11 | }
12 | return [...set];
13 | };
14 | ```
15 |
--------------------------------------------------------------------------------
/JS(practical aspects)/短横线与驼峰转化.md:
--------------------------------------------------------------------------------
1 | 短横线转驼峰：
2 |
3 | ```JavaScript
4 | const toCamelCase = (str) =>
5 | str.replace(/-([a-z])/g, (all, char) => char.toUpperCase());
6 | ```
7 |
8 | - `all` 即整个匹配到的字符串如输入为 `"background-color"`，则 `all` 为 `-c`
9 | - `char` 即匹配到的捕获组中之字符如输入为 `"background-color"`，则 `char` 为 `c`
10 |
11 | 驼峰转短横线：
12 |
13 | ```JavaScript
14 | const toKebabCase = (str) =>
15 | str.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase();
16 | ```
17 |
--------------------------------------------------------------------------------
/JS(practical aspects)/给定字符串, 找出所有长度 Num 的重复子串.md:
--------------------------------------------------------------------------------
1 | ```JavaScript
2 | const findRepeat = (str, num) => {
3 | const seen = new Set(),
4 | ans = new Set();
5 | for (let i = 0; i <= str.length - num; ++i) {
6 | const sub = str.slice(i, i + num);
7 | if (seen.has(sub)) ans.add(sub);
8 | else seen.add(sub);
9 | }
10 | return [...ans];
11 | };
12 |
13 | const string = "ababbaba";
14 | const number = 2;
15 | console.log(findRepeat(string, number));
16 | ```
--------------------------------------------------------------------------------
/JS(practical aspects)/统计所有 url 中每天访问的 url.md:
--------------------------------------------------------------------------------
1 | ```js
2 | class urlTracker {
3 | constructor() {
4 | this.visited = {};
5 | }
6 | record(url, date) {
7 | if (!this.visited[date]) this.visited[date] = new Set();
8 | this.visited[date].add(url);
9 | }
10 | getVisitedUrls(date) {
11 | return this.visited[date] ? Array.from(this.visited[date]) : [];
12 | }
13 | }
14 |
15 | const tracker = new urlTracker();
16 | tracker.record("https://github.com/Rainyrou/FE-Clown", "2024-04-05");
17 | tracker.record("https://github.com/Rainyrou", "2024-04-05");
18 | tracker.record("https://github.com/Rainyrou/Pocket-React", "2024-04-06");
19 |
20 | console.log(tracker.getVisitedUrls("2024-04-05")); // [ 'https://github.com/Rainyrou/FE-Clown', https://github.com/Rainyrou' ]
21 | console.log(tracker.getVisitedUrls("2024-04-06")); // [ 'https://github.com/Rainyrou/Pocket-React' ]
22 | ```
--------------------------------------------------------------------------------
/JS(practical aspects)/翻转字符串中的每个单词.md:
--------------------------------------------------------------------------------
1 | ```js
2 | const reverseWords = (s) => {
3 | const words = s.split(" ");
4 | const reversedWords = words.map((word) => word.split("").reverse().join(""));
5 | return reversedWords.join(" ");
6 | };
7 |
8 | const input = "Let's take LeetCode contest";
9 | const output = reverseWords(input);
10 | console.log(output); // s'teL ekat edoCteeL tsetnoc
11 | ```
--------------------------------------------------------------------------------
/JS(practical aspects)/荷兰国旗问题.md:
--------------------------------------------------------------------------------
1 | ```js
2 | const sortColors = (nums) => {
3 | let left = 0,
4 | right = nums.length - 1,
5 | i = 0;
6 | while (i <= right) {
7 | if (nums[i] === 1) {
8 | [nums[i], nums[left]] = [nums[left], nums[i]];
9 | ++left;
10 | ++i;
11 | } else if (nums[i] === 2) {
12 | [nums[i], nums[right]] = [nums[right], nums[i]];
13 | --right;
14 | } else {
15 | ++i;
16 | }
17 | }
18 | return nums;
19 | };
20 |
21 | console.log(sortColors([2, 0, 2, 1, 1, 0])); // [ 1, 1, 0, 0, 2, 2 ]
22 | console.log(sortColors([1, 2, 0])); // [ 1, 0, 2 ]
23 | ```
--------------------------------------------------------------------------------
/JS(practical aspects)/观察者模式.md:
--------------------------------------------------------------------------------
1 | ```JavaScript
2 | class Subject {
3 | constructor() {
4 | this.observers = [];
5 | }
6 | add(observer) {
7 | this.observers.push(observer);
8 | }
9 | delete(observer) {
10 | const index = this.observers.indexOf(observer);
11 | if (index > -1) this.observers.splice(index, 1);
12 | }
13 | notify(data) {
14 | this.observers.forEach((observer) => observer.update(data));
15 | }
16 | }
17 |
18 | class Observer {
19 | update(data) {
20 | console.log(`receive data: ${data}`);
21 | }
22 | }
23 | ```
24 |
25 | 测试用例：
26 |
27 | ```JavaScript
28 | const subject = new Subject();
29 | const observer1 = new Observer();
30 | const observer2 = new Observer();
31 |
32 | subject.add(observer1);
33 | subject.add(observer2);
34 | subject.notify('Hello world!');
35 | subject.delete(observer1);
36 | subject.notify('Goodbye world!');
37 | ```
38 |
39 | 正确输出：
40 |
41 | ![[1697670839501.png]]
42 |
--------------------------------------------------------------------------------
/JS(practical aspects)/解决回调地狱.md:
--------------------------------------------------------------------------------
1 | ```js
2 | let t1 = setTimeout(() => {
3 | console.log(111);
4 | let t2 = setTimeout(() => {
5 | console.log(222);
6 | let t3 = setTimeout(() => {
7 | console.log(333);
8 | }, 3000);
9 | }, 2000);
10 | }, 1000);
11 | ```
12 |
13 | ```js
14 | const delay = (time) =>
15 | new Promise((resolve) => setTimeout(() => resolve(), time));
16 |
17 | const run = async () => {
18 | await delay(1000);
19 | console.log(111);
20 | await delay(2000);
21 | console.log(222);
22 | await delay(3000);
23 | console.log(333);
24 | };
25 | run();
26 | ```
27 |
28 | ```js
29 | const delay = (time) =>
30 | new Promise((resolve) => setTimeout(() => resolve(), time));
31 |
32 | delay(1000)
33 | .then(() => {
34 | console.log(111);
35 | return delay(2000);
36 | })
37 | .then(() => {
38 | console.log(222);
39 | return delay(3000);
40 | })
41 | .then(() => console.log(333));
42 | ```
--------------------------------------------------------------------------------
/JS(practical aspects)/解析 URL 的查询字符串为对象.md:
--------------------------------------------------------------------------------
1 | ```js
2 | const parseQuery = (url) => {
3 | const queryString = url.includes("?") ? url.split("?")[1].split("#")[0] : "";
4 | const obj = {};
5 | if (!queryString) return obj;
6 | queryString.split("&").forEach((part) => {
7 | const [key, val = ""] = part.split("=");
8 | const decodedKey = decodeURIComponent(key);
9 | const decodedVal = decodeURIComponent(val.replace(/\+/g, " "));
10 | obj[decodedKey] = obj[decodedKey]
11 | ? [].concat(obj[decodedKey], decodedVal)
12 | : decodedVal;
13 | });
14 | return obj;
15 | };
16 | ```
17 |
18 | 若 `obj[decodedKey]` 存在，`[].concat` 将 `obj[decodedKey]` 的值与 `decodedVal` 合并成一个新数组：
19 | * 如果 `obj[decodedKey]` 为一个值如字符串 `"Alice"`，则变成数组如 `[].concat("Alice", "Bob")` 会得到 `["Alice", "Bob"]`
20 | - 如果 `obj[decodedKey]` 已为数组，则直接添加 `decodedVal`
21 | 若 `obj[decodedKey]` 不存在，直接将 `decodedVal` 赋值给 `obj[decodedKey]`，无需合并数组
22 |
--------------------------------------------------------------------------------
/JS(practical aspects)/解析依赖顺序.md:
--------------------------------------------------------------------------------
1 | 打包工具解析文件间的依赖关系，在加载各个模块时确保其依赖已加载
2 |
3 | 输入：依赖树
4 |
5 | ```
6 | {
7 | name: "page.js",
8 | require: [
9 | {
10 | name: "A.js",
11 | require: [{ name: "C.js", require: [{ name: "F.js" }] }],
12 | },
13 | {
14 | name: "B.js",
15 | require: [
16 | {
17 | name: "D.js",
18 | require: [{ name: "F.js" }],
19 | },
20 | {
21 | name: "E.js",
22 | require: [],
23 | },
24 | ],
25 | },
26 | ],
27 | };
28 | ```
29 |
30 | 输出：`["F.js","E.js","D.js","C.js","B.js","A.js","page.js"]`
31 |
--------------------------------------------------------------------------------
/JS(practical aspects)/计算异步函数执行时间.md:
--------------------------------------------------------------------------------
1 | ```js
2 | function measureTime(fn) {
3 | return async function (...args) {
4 | const start = performance.now();
5 | const result = await fn(...args);
6 | const end = performance.now();
7 | const time = end - start;
8 | console.log(`execute ${time} ms`);
9 | return result;
10 | };
11 | }
12 |
13 | async function fn(x, y) {
14 | return new Promise((resolve) => setTimeout(() => resolve(x + y), 1000));
15 | }
16 |
17 | const asyncFn = measureTime(fn);
18 | asyncFn(5, 10).then((res) => console.log(`result: ${res}`));
19 | ```
--------------------------------------------------------------------------------
/JS(practical aspects)/请求 5s 内无结果则提示超时.md:
--------------------------------------------------------------------------------
1 | 同时执行 2 个 Promise：一个为实际的异步请求，另一个为在 5 秒后 resolved 的 Promise，接着使用 `Promise.race` 竞争此二者，以先 resolved 的 Promise 结果为准
2 |
3 | ```JavaScript
4 | const fetchData = () =>
5 | new Promise((resolve) => setTimeout(() => resolve("request success"), 4000));
6 | const timeOut = (delay) =>
7 | new Promise((resolve, reject) =>
8 | setTimeout(() => reject("request fail"), delay)
9 | );
10 | Promise.race([fetchData(), timeOut(5000)])
11 | .then((res) => console.log(res))
12 | .catch((err) => console.error(err));
13 | ```
14 |
--------------------------------------------------------------------------------
/JS(practical aspects)/请求失败重试.md:
--------------------------------------------------------------------------------
1 | ```js
2 | const requestWithRetry = async (fn, maxCount = 5, interval = 1000) => {
3 | let count = 0;
4 | const execute = async () => {
5 | try {
6 | ++count;
7 | const result = await fn();
8 | return result;
9 | } catch (err) {
10 | if (count < maxCount) {
11 | console.warn(`${count}`, `${err}`);
12 | await new Promise((resolve) => setTimeout(() => resolve(), interval));
13 | return execute();
14 | } else {
15 | throw new Error(`${err}`);
16 | }
17 | }
18 | };
19 | return execute();
20 | };
21 |
22 | const simulateRequest = () =>
23 | new Promise((resolve, reject) =>
24 | setTimeout(() => reject("request fail"), 1000)
25 | );
26 |
27 | requestWithRetry(simulateRequest)
28 | .then((res) => console.log(res))
29 | .catch((err) => console.warn(err));
30 | ```
31 |
32 | ```
33 | 1 request fail
34 | 2 request fail
35 | 3 request fail
36 | 4 request fail
37 | Error: request fail
38 | ```
--------------------------------------------------------------------------------
/JS(practical aspects)/调用一次函数获取下一质数.md:
--------------------------------------------------------------------------------
1 | ```js
2 | const isPrime = (n) => {
3 | if (n < 2) return false;
4 | for (let i = 2; i <= Math.sqrt(n); ++i) {
5 | if (n % i === 0) return false;
6 | }
7 | return true;
8 | };
9 |
10 | function createPrimeGenerator() {
11 | let cur = 1;
12 | return function getNext() {
13 | ++cur;
14 | while (!isPrime(cur)) ++cur;
15 | return cur;
16 | };
17 | }
18 |
19 | const nextPrime = createPrimeGenerator();
20 | console.log(nextPrime()); // 2
21 | console.log(nextPrime()); // 3
22 | console.log(nextPrime()); // 5
23 | console.log(nextPrime()); // 7
24 | ```
--------------------------------------------------------------------------------
/JS(practical aspects)/递增数组格式化输出.md:
--------------------------------------------------------------------------------
1 | ```js
2 | const getArray = (arr) => {
3 | const len = arr.length,
4 | ans = [];
5 | let i = 0;
6 | while (i < len) {
7 | let cur = i;
8 | while (i + 1 < len && arr[i] === arr[i + 1] - 1) ++i;
9 | if (cur !== i) ans.push(`${arr[cur]}->${arr[i]}`);
10 | else ans.push(`${arr[cur]}`);
11 | ++i;
12 | }
13 | return ans;
14 | };
15 |
16 | const arr = [0, 1, 2, 4, 5, 7, 11, 13, 14];
17 | console.log(getArray(arr));
18 | ```
--------------------------------------------------------------------------------
/JS(practical aspects)/链式调用 add 函数.md:
--------------------------------------------------------------------------------
1 | ```js
2 | function add(...args) {
3 | const sum = args.reduce((a, b) => a + b, 0);
4 | return function (...newArgs) {
5 | return newArgs.length ? add(sum, ...newArgs) : sum;
6 | };
7 | }
8 |
9 | console.log(add(1, 2, 3)(4, 5)(6)()); // 21
10 | ```
11 |
12 | ```js
13 | function sum(...args) {
14 | const allArgs = [...args];
15 | const fn = (...newArgs) => {
16 | allArgs.push(...newArgs);
17 | return fn;
18 | };
19 | fn.sumoff = () => allArgs.reduce((a, b) => a + b, 0);
20 | return fn;
21 | }
22 |
23 | console.log(sum(1, 2).sumoff()); // 3
24 | console.log(sum(1, 2)(3).sumoff()); // 6
25 | console.log(sum(1)(2)(3)(4).sumoff()); // 10
26 | ```
27 |
28 |
29 |
--------------------------------------------------------------------------------
/JS(practical aspects)/链式调用实现加减乘除.md:
--------------------------------------------------------------------------------
1 | ```js
2 | function myCalculator(num) {
3 | const calc = {
4 | value: num,
5 | add(x) {
6 | this.value += x;
7 | return this;
8 | },
9 | minus(x) {
10 | this.value -= x;
11 | return this;
12 | },
13 | multi(x) {
14 | this.value *= x;
15 | return this;
16 | },
17 | div(x) {
18 | this.value /= x;
19 | return this;
20 | },
21 | valueOf() {
22 | return this.value;
23 | },
24 | };
25 | return calc;
26 | }
27 |
28 | console.log(myCalculator(1).add(4).minus(2).multi(3).div(3).value); // 3
29 | ```
--------------------------------------------------------------------------------
/JS(practical aspects)/闭包实现计数器.md:
--------------------------------------------------------------------------------
1 | ```js
2 | function Counter() {
3 | let count = 0;
4 | return {
5 | increment: function () {
6 | ++count;
7 | return count;
8 | },
9 | decrement: function () {
10 | --count;
11 | return count;
12 | },
13 | reset: function () {
14 | count = 0;
15 | return count;
16 | },
17 | getCount: function () {
18 | return count;
19 | },
20 | };
21 | }
22 |
23 | const counter = Counter();
24 | console.log(counter.increment()); // 1
25 | console.log(counter.increment()); // 2
26 | console.log(counter.getCount()); // 2
27 | console.log(counter.decrement()); // 1
28 | console.log(counter.reset()); // 0
29 | ```
--------------------------------------------------------------------------------
/JS(practical aspects)/隔 1 秒输出 1，持续输出至隔 10 秒输出 10.md:
--------------------------------------------------------------------------------
1 | ```js
2 | const logWithDelay = (num, delay) =>
3 | new Promise((resolve) =>
4 | setTimeout(() => {
5 | console.log(num);
6 | resolve();
7 | }, delay * 1000)
8 | );
9 |
10 | const sequentialLog = async (num, max = 10) => {
11 | for (let i = num; i <= max; i++) await logWithDelay(i, 1);
12 | };
13 |
14 | sequentialLog(1);
15 | ```
--------------------------------------------------------------------------------
/JS(practical aspects)/隔 s 秒执行一次，共执行 n 次.md:
--------------------------------------------------------------------------------
1 | ```js
2 | function repeatFunction(fn, s, n) {
3 | let count = 0;
4 | const interval = setInterval(() => {
5 | if (count < n) {
6 | fn();
7 | ++count;
8 | } else {
9 | clearInterval(interval);
10 | }
11 | }, s * 1000);
12 | }
13 |
14 | repeatFunction(() => console.log("Hello"), 2, 5);
15 | ```
--------------------------------------------------------------------------------
/JS(theoretical aspects)/Array & Object & Map & Set & WeakMap & WeakSet.md:
--------------------------------------------------------------------------------
1 | Array：有序集合，JavaScript 引擎在 Array 底层结合动态数组和 Object 的特性，Array 可根据所需自动增长，数组元素按顺序存储且可通过索引访问，Array 允许稀疏存储即数组元素可为空如 `[1, , 3]`
2 | Object：键值对的集合，其键唯一，其值可为任何数据类型，JavaScript 引擎在 Object 底层使用哈希表来存储数据，每个 Object 的属性均有一个属性描述符（可通过 `Object.getOwnPropertyDescriptor` 获取），包含该属性的配置如可写性、可枚举性和可配置性，此外 Object 支持原型继承
3 | Map：键值对的集合，类似 Object，但其键可为任何数据类型，JavaScript 引擎在 Map 底层使用哈希表来存储数据，执行增删查找操作的时间复杂度为 O(1)，若 Map 添加已存在的键，新值覆盖旧值，Map 依照元素的插入顺序进行遍历
4 | Set：允许存储任何数据类型唯一值的集合，JavaScript 引擎在 Set 底层使用哈希表来存储数据，确保存储值均唯一，执行增删查找操作的时间复杂度为 O(1)，若 Set 添加已存在的值，直接忽略
5 | WeakMap：键值对的集合，其键为弱引用对象即引用数据类型，当无对 WeakMap 键的强引用时，这些键对应的对象可被垃圾回收，因为其键为弱引用对象，WeakMap 不支持枚举操作如 `forEach` 和迭代器等，因为键随时可能被垃圾回收，从而导致无法遍历所有键。JavaScript 引擎在 WeakMap 底层使用弱引用表来存储数据，弱引用表可跟踪对象的生命周期并在对象被垃圾回收时自动清理相应的键值对
6 | WeakSet：允许存储任何数据类型唯一值的集合，其对象为弱引用即引用数据类型，当无对 WeakSet 对象的强引用时，它们可被垃圾回收，因为其键为弱引用对象，WeakSet 不支持枚举操作如 `forEach` 和迭代器等，因为键随时可能被垃圾回收，从而导致无法遍历所有键。JavaScript 引擎在 WeakSet 底层使用弱引用表来存储数据，弱引用表可跟踪对象的生命周期并在对象被垃圾回收时自动清理相应的键值对
7 |
--------------------------------------------------------------------------------
/JS(theoretical aspects)/ES6 & ES7.md:
--------------------------------------------------------------------------------
1 | ###### ES6
2 |
3 | 1. `let` & `const`
4 | 2. Promise：用于处理异步操作，可替代回调
5 | 3. 箭头函数：不绑定自己的 `this`
6 | 4. 模板字符串：通过反引号实现字符串插值
7 | 5. 解构赋值：允许从数组或对象中提取值并赋值给新变量
8 | 6. 扩展操作符 `...`：用于函数调用和数组字面量中，用于扩展或收集元素
9 | 7. 类：提供基于类的面向对象编程的语法
10 | 8. 模块系统 `import/export`：允许模块化的代码组织和模块的导入/导出
11 | 9. `Generator`、`Proxy`、`Map`、`Set`、`WeakMap`、`WeakSet`、`Symbol` 等
12 |
13 | ###### ES7
14 |
15 | 1. async/await
16 | 2. `Array.prototype.includes`
17 | 3. 指数操作符 `**`：用于数学的幂运算
18 |
19 |
20 |
--------------------------------------------------------------------------------
/JS(theoretical aspects)/Generator & Async & Await.md:
--------------------------------------------------------------------------------
1 | Generator 即 ES6 关于协程的实现，其为一个封装的异步任务，以 `yield` 暂停执行函数，函数名前加星号。调用它不会立即执行函数体中的代码，而是返回指针对象。Generator 对象是一个迭代器对象，其 `next` 方法用于遍历函数内部的 `yield` 表达式，即分阶段执行 Generator 函数，每次调用 `next` 方法，均返回一个表示当前阶段信息的对象。`value` 是 `yield` 语句后表达式的值，表示当前阶段的值；`done` 为布尔值，表示函数是否执行完，`next` 方法返回的 `value` 是 Generator 函数的输出数据，`next` 方法接受的参数是外部向 Generator 函数的输入数据
2 |
3 | Async/Await 在实现上结合 Generator 与 Promise，简化使用多个 Promise 时的同步行为，无需关心某个操作是否为异步操作
4 |
--------------------------------------------------------------------------------
/JS(theoretical aspects)/JS 单线程.md:
--------------------------------------------------------------------------------
1 | JavaScript 在 1995 年发明，设计之初是为浏览器提供页面轻量交互功能，当时的 Web 页面无需复杂逻辑，单线程足以应付绝大多数情况，同时确保执行环境不必处理复杂的并发和数据一致性问题。在多线程环境中，共享资源如 DOM 元素的并发访问需要复杂的同步机制，这些机制涉及锁和阻塞，可能导致死锁和竞争条件，操作 UI DOM 可能出现冲突如两个线程同时操作同一 DOM，一个执行修改操作一个执行删除操作，可通过锁解决上述问题，但为避免引入锁而带来的复杂性，JS 在设计之初选择单线程的形式，简化前端开发者对于事件处理流程和执行流程的理解而无需考虑多线程的问题。此外 JavaScript 的执行环境通过事件循环支持异步编程，允许 JavaScript 进行非阻塞 I/O 操作如网络请求和文件操作等，即使是在单线程中也能执行高效的操作。尽管 JavaScript 是单线程的，但现代 JavaScript 已发展出多种方法来模拟多线程处理如 Web Workers，Web Workers 允许我们创建可以执行在背景线程中的 JavaScript 脚本，执行计算密集或时间长的任务而不会阻塞主线程
2 |
--------------------------------------------------------------------------------
/JS(theoretical aspects)/JS 设计模式及原则.md:
--------------------------------------------------------------------------------
1 | 1. 模块化模式：通过 IIFE 和闭包实现数据私有化和暴露公共接口，而 ES6 引入 ES Modules
2 | 2. 观察者模式 & 发布订阅模式：观察者模式定义对象间的依赖关系，观察者与主题直接通信，观察者知道主题的存在，当主题状态变化时，主题遍历所有观察者并逐一通知，观察者在接收到通知后执行相应操作。而发布者将消息发布于某主题上，订阅者通过事件通道订阅某主题，事件通道接收到消息后，查找该主题对应的订阅者列表并将消息传递给所有订阅者，事件通道解耦发布者和订阅者，发布者无需知道订阅者的存在及哪些订阅者接收消息，订阅者无需直接与发布者交互
3 | 3. 装饰器模式：为对象动态拓展属性和方法而不改变对象原有结构
4 | 4. 单例模式：通过静态变量或闭包保证类或模块只创建单一实例，后续获取实例时直接返回
5 | 5. 工厂模式：通过函数作用域和 `new` 动态分配内存，提供统一接口根据入参创建不同对象实例，无需关心对象创建的具体细节
6 | 6. 策略模式：通过闭包和高阶函数封装算法为独立的策略对象实现算法的动态切换
7 |
--------------------------------------------------------------------------------
/JS(theoretical aspects)/NaN && === && ==.md:
--------------------------------------------------------------------------------
1 | - `==`：宽松相等，若两者类型不同，JavaScript 尝试转换其数据类型接着比较
2 | - `===`：严格相等，若两者类型不同，直接返回 `false`
3 | - `null == undefined` 为 `true`，`null === undefined` 为 `false`，`NaN === NaN` 为 `false`，`{} === {} `为 `false`，`{} == {}` 为 `false`
4 | - `1 + '2'` 为 `'12'`，当数字和字符串相加时，数字被转换为字符串，然后进行字符串连接
5 | - `1 - '2'` 为 `-1`，当数字和字符串相减时，字符串被转换为数字，然后进行数学运算
6 | - `NaN` 非数字，其表示数学运算返回值无效，`typeof NaN` 返回 `"number"`，`Number.isNaN` 检测一个值是否为 `NaN`
--------------------------------------------------------------------------------
/JS(theoretical aspects)/TS 与类型体操.md:
--------------------------------------------------------------------------------
1 | TypeScript 的「类型体操」概念源于其图灵完备的类型系统，这是一种工程化的防御手段，随项目对类型安全要求越来越高，前端开始探索如何在类型层面"编程"，即用类型系统来解决实际问题如实现 Deep Readonly、Omit 甚至 Promise.all 等。我们从演变、原理和场景三个维度作为切入点：
2 |
3 | 1. 类型能力的演变
4 |
5 | | 阶段 | 特征 | TS 版本 | 关键能力 |
6 | | ------ | -------- | ----- | ------------- |
7 | | 基础类型 | 简单类型标注 | 1.0+ | 接口、联合类型 |
8 | | 泛型编程 | 参数化类型 | 2.0+ | 泛型约束、条件类型 |
9 | | 类型元编程 | 类型层面逻辑运算 | 4.1+ | 模板字面量类型、递归类型 |
10 | | 类型图灵完备 | 模拟任意计算 | 4.8+ | 深度模式匹配、类型级控制流 |
11 | | | | | |
12 |
13 | 2. 图灵完备的证明（只是编译阶段）
14 |
15 | 通过实现类型层面的 SKI 组合子演算：
16 |
17 | ```ts
18 | type S =