牙叔教程 简单易懂
1 LOC
Favorite JavaScript Utilities
30秒
Popular Snippets
判断除了0以为的假值
const value = 0; if (value || value === 0) { // 👇️ this runs console.log('✅ value is truthy or 0'); } else { console.log('⛔️ value is falsy'); }
reduce
// 计算数组所有数字的和 const arr = [1, 2, 3, 4]; const total = arr.reduce((acc, cur, index, array) => { console.log(acc, cur); // 1 2 // 3 3 // 6 4 return acc + cur; }); console.log(total); // 输出：10 // 将二维数组转换为一维数组 const res = [1, [2, 3], 4].reduce((acc, cur) => { if (typeof cur === "object") { acc = acc.concat(cur); } else { acc.push(cur); } return acc; }, []); console.log(res); // 计算数组中每个元素出现的次数 const arr = ['kobe', 'james', 'kobe', 'jim', 'wade', 'wade', 'kobe']; const res = arr.reduce((acc, cur) => { if(cur in acc) { acc[cur]++; } else { acc[cur] = 1; } return acc }, {}) console.log(res) // 输出：{ kobe: 3, james: 1, jim: 1, wade: 2 } // 按属性对object进行分类 const players = [ { name: 'kobe', number: 24 }, { name: 'James', number: 23 }, { name: 'Jordon', number: 23 }, { name: 'George', number: 24 } ]; const groupe = players.reduce((acc, item) => { if(!(item.number in acc)) { acc[item.number] = []; } acc[item.number].push(item); return acc }, {}) console.log(groupe) // 输出 { 23: [ { name: 'James', number: 23 }, { name: 'Jordon', number: 23 }, ], 24: [ { name: 'kobe', number: 24 }, { name: 'George', number: 24 } ] } // 计算数组中的最大值 const arr = [3, 4, 9, 6, 10, 2]; const max = arr.reduce((pre, cur) => Math.max(pre, cur)); console.log(max) // 输出：10 // 数组去重 const arr = [3, 4, 3, 6, 10, 4, 5]; const newArr = arr.reduce((retArr, cur) => { if(retArr.indexOf(cur) === -1) { retArr.push(cur); } return retArr }, []) console.log(newArr) // 输出：[3, 4, 6, 10, 5]
使用解构简单交换两值
let a = 5; let b = 8; [a,b] = [b,a] [a,b] // 输出 (2) [8, 5]
将十进制转换为二进制或十六进制
const num = 10; num.toString(2); // 输出: "1010" num.toString(16); // 输出: "a" num.toString(8); // 输出: "12"
打乱数组
const list = [1, 2, 3, 4, 5, 6, 7, 8, 9]; list.sort(() => { return Math.random() - 0.5; }); // 输出 (9) [2, 5, 1, 6, 9, 8, 4, 3, 7] // Call it again (9) [4, 1, 7, 5, 3, 8, 2, 9, 6]
- 找出总和、最小值和最大值
const array = [5, 4, 7, 8, 9, 2]; let 总和 = array.reduce((a, b) => a + b); console.log("总和 = " + 总和); // 输出: 35 let 最大值 = array.reduce((a, b) => (a > b ? a : b)); console.log("最大值 = " + 最大值); // 输出: 9 let 最小值 = array.reduce((a, b) => (a < b ? a : b)); console.log("最小值 = " + 最小值); // 输出: 2
- 删除重复值
const array = [5,4,7,8,9,2,7,5]; array.filter((item,idx,arr) => arr.indexOf(item) === idx); // 输出: [5, 4, 7, 8, 9, 2]
- 数组过滤空值
const groceries = ['apple', null, 'milk', undefined, 'bread', '']; const cleanList = groceries.filter(Boolean); console.log(cleanList); // 'apple', 'milk', 'bread';
- 数组去重
arr = [2, 3, 3, 3, 4, 4, 5, 5, 6]; arr = arr.sort(); var arr2 = [arr[0]]; //先把第一个元素放进新数组，其次相邻两个一一对比，不相等就把当前遍历值放进新数组 for (var i = 1; i < arr.length; i++) { if (arr[i] !== arr[i - 1]) { arr2.push(arr[i]); } } console.log(arr2); // [2, 3, 4, 5, 6]
- 直接运行模块commonjs, 检查是不是模块
if (typeof module === "object" && module.exports) { module.exports = showBall; } else { showBall(); }
- 初始化数组
// 第一种 let arr = Array(20) .fill(null) .map((_, _) => 0); console.log(arr); // 第二种 let arr = Array(20).fill(0); console.log(arr);
- 交换数组中的元素
let arr = [1, 2, 3, 4, 5, 6]; swap(arr, 3, 5); console.log(arr); function swap(arr, sourceIndex, targetIndex) { arr[sourceIndex] = arr.splice(targetIndex, 1, arr[sourceIndex])[0]; }
- 数字转字符串, 字符串转数字
// 数字转字符串 str += ""; // 字符串转数字 num = +"123";
- 对象转换为数组
var argArray = Array.prototype.slice.call(arguments);
- 打乱数字数组的顺序
var numbers = [5, 458, 120, -215, 228, 400, 122205, -85411]; numbers = numbers.sort(function () { return Math.random() - 0.5; });
- 判断奇偶
for (var i = 0; i < 10; i++) { if ((i & 1) === 0) { console.log(i + "是偶数"); } else { console.log(i + "是奇数"); } }
- 元素是否在数组中
let arr = [1, 2, 3, 4, 5, 6]; let num = 3; if (~arr.indexOf(num)) { console.log(num + "在数组中"); } else { console.log(num + "不在数组中"); }
- 汉字转unicode
// 判断字符是否为汉字， function isChinese(s) { return /[\u4e00-\u9fa5]/.test(s); } // 把字符串中的汉字转换成Unicode function ch2Unicdoe(str) { if (!str) { return; } var unicode = ""; for (var i = 0; i < str.length; i++) { var temp = str.charAt(i); if (isChinese(temp)) { unicode += "\\u" + temp.charCodeAt(0).toString(16); } else { unicode += temp; } } return unicode; }
- 多次复制一个字符串
let str = "牙叔教程".repeat(3); console.log(str);
- 判断字符串是否以特定序列开头或结尾
let b = "牙叔教程".startsWith("牙叔"); console.log(b); // endsWith;
- 防抖
function debounce(fn, delay = 500) { let timer; return function () { if (timer) { clearTimeout(timer) } const args = arguments timer = setTimeout(() => { fn.apply(this, args) // 改变this指向为调用debounce所指的对象 }, delay) } }
- 节流
function throttle(fn, delay = 200) { let flag = true return function () { if (!flag) return flag = false const args = arguments setTimeout(() => { fn.apply(this, args) flag = true }, delay) } }
- 数组去重
function quchong1(arr) { const newArr = [] arr.reduce((pre, next) => { if (!pre[next]) { pre[next] = 1 newArr.push(next) } return pre }, {}) return newArr }
- 获取当前调用栈
function firstFunction() { secondFunction(); } function secondFunction() { thridFunction(); } function thridFunction() { console.log(new Error().stack); } firstFunction(); //=> Error // at thridFunction (<anonymous>:2:17) // at secondFunction (<anonymous>:5:5) // at firstFunction (<anonymous>:8:5) // at <anonymous>:10:1
从 Date 对象中获取时间
// 20:14:22 GMT+0800 (GMT+08:00) const timeFromDate = date => date.toTimeString().slice(0, 8); console.log(timeFromDate(new Date(2021, 0, 10, 17, 30, 0))); // Result: "17:30:00" console.log(timeFromDate(new Date()));
随机生成十六进制颜色
// 方法一 // #887033 function randomHexColor() { return "#" + ("00000" + ((Math.random() * 0x1000000) << 0).toString(16)).substr(-6); } // 方法二 function generateRandomHexColor() { return "#" + Math.floor(Math.random() * 0xffffff).toString(16); }
替换原数组
Array.prototype.splice.apply(appList, arr);
参考
史上最全！熬夜整理56个JavaScript高级的手写知识点！！专业扫盲！
名人名言
思路是最重要的, 其他的百度, bing, stackoverflow, github, 安卓文档, autojs文档, 最后才是群里问问
--- 牙叔教程
声明
部分内容来自网络
本教程仅用于学习, 禁止用于其他用途
