Array generate array when you need to generate an array of 0-99 scenario 1 const createArr = (n) => Array.from(new Array(n), (v, i) => i) const arr = createArr(100) // 0-99 array scenario 2 const createArr = (n) => new Array(n).fill(0).map((v, i) => i) createArr(100) // 0-99 array disrupt the array when you have an array, you need to disrupt the sorting of the array const randomSort = list => list.sort(() => Math.random() - 0.5) randomSort([0,1,2,3,4,5,6,7,8,9]) // randomly arrange the results Array deduplication when you need to keep only one for all the repeating elements in the array const removeDuplicates = list => [...new Set(list)] removeDuplicates([0, 0, 2, 4, 5]) // [0,2,4,5] most groups take intersection when you need to take the intersection of multiple arrays const intersection = (a, ...arr) => [...new Set(a)].filter((v) => arr.every((b) => b.includes(v))) intersection([1, 2, 3, 4], [2, 3, 4, 7, 8], [1, 3, 4, 9]) // [3, 4] find maximum index but you need to find an index of the largest value in the array const indexOfMax = (arr) => arr.reduce((prev, curr, i, a) => (curr > a[prev] ? i : prev), 0); indexOfMax([1, 3, 9, 7, 5]); // 2 find the minimum index when you need to find the index of the lowest value in an array const indexOfMin = (arr) => arr.reduce((prev, curr, i, a) => (curr < a[prev] ? i : prev), 0) indexOfMin([2, 5, 3, 4, 1, 0, 9]) // 5 find the nearest value when you need to find the closest value in an array const closest = (arr,…

May 7, 2023 0comments 1349hotness 0likes Aaron Read all

recently I saw some useful React tool libraries, summed up and shared them with you to avoid duplicating wheels. I hope it will be helpful to you ~ I. basic 1. React Infinite Scroller React Infinite Scroller is used to load content indefinitely in a React project. npm address: www.npmjs.com/package/rea... 2. react-dnd React DnD is a set of React high-level components created by React and Dan Abramov, the core author of Redux, that can help build complex drag-and-drop interfaces while keeping components separate. It is mainly used for drag and drop of components. npm address: www.npmjs.com/package/rea... 3. react-beautiful-dnd react-beautiful-dnd is a beautiful and easy-to-use React list drag-and-drop library. ​ npm address: www.npmjs.com/package/rea... 4. react-icons using react-icons, you can easily include popular icons in React projects. ​ npm address: www.npmjs.com/package/rea... 5. react-share react-share is a React social media sharing button and sharing library. ​ npm address: www.npmjs.com/package/rea... 6. create-react-app Create React App is a command line interface tool that allows you to quickly create and run React applications without any configuration. ​ npm address: www.npmjs.com/package/cre... 7. react-intl React Intl provides a React component and Mixin for internationalizing React Web applications. It provides a description of formatted date, number, and string messages. ​ npm address: www.npmjs.com/package/rea... 8. react-router react-router is a routing solution routing solution for React.js. It can easily synchronize your app and URL while providing first-class support for nesting, transformation, and server rendering. ​ npm address: www.npmjs.com/package/rea... 9. React Virtualized react-virtualized is a responsive component that renders large list and table data efficiently and can be used to solve long…

May 4, 2023 0comments 1550hotness 0likes Aaron Read all