1、独特的数组技巧过滤掉数组中的重复值。 const arr = ["a", "b", "c", "d", "d", "c", "e"] const uniqueArray = Array.from(new Set(arr));
console.log(uniqueArray); // ['a', 'b', 'c', 'd', 'e'] 2、独特的对象数组技巧该Set 对象不允许您过滤掉重复的对象,因为每个对象都不同。 JSON.stringify 在这里对我们有用。 const arr = [{ key: 'value' }, { key2: 'value2' }, { key: 'value' }, { key3: 'value3' }]; const uniqueObjects = Array.from( new Set( arr.map(JSON.stringify) ) ).map(JSON.parse)
console.log(uniqueObjects); 3、数组迭代器索引技巧使用.map 和.forEach javascript迭代函数,你可以得到每个项目的索引。 const arr = ['a', 'b', 'c']; const letterPositions = arr.map( (char, index) => `${char} is at index ${index}` ) 4、按字符数拆分字符串技巧我们可以使用.match 正则表达式函数按字符拆分字符串n 。 const str = "asdfghjklmnopq"; const splitPairs = str.match(/.{1,2}/g);
console.log(splitPairs); // ['as', 'df', 'gh', 'jk', 'lm', 'no', 'pq'] 5、用不同的字符拆分字符串技巧另一个 regex hack.match 允许你将像“aabbc”这样的字符串拆分成一个数组["aa", "bb", "c"] 。 const str = "abbcccdeefghhiijklll"; const splitChars = str.match(/(.)\1*/g);
console.log(splitChars); // ['a', 'bb', 'ccc', 'd', 'ee', 'f', 'g', 'hh', 'ii', 'j', 'k', 'lll'] 6、将键值数组转换成对象技巧您可以将“ Object.entryified ”键值数组转换回对象Object.fromEntries const entryified = [ ["key1", "value1"], ["key2", "value2"], ["key3", "value3"] ];
const originalObject = Object.fromEntries(entryified);
console.log(originalObject); // { key1: 'value1', ... } 7、计数技巧您可能想计算一个项目在数组中出现的次数。我们可以使用.filter 带有迭代器的函数来完成此操作。 const occurrences = ["a", "b", "c", "c", "d", "a", "a", "e", "f", "e", "f", "g", "f", "f", "f"]; // creating a unique array to avoid counting the same char more than once const unique = Array.from(new Set(occurrences));
const occurrenceCount = Object.fromEntries( unique.map(char => { const occurrenceCount = occurrences.filter(c => c === char).length; return [char, occurrenceCount] }) )
console.log(occurrenceCount); // { a: 3, b: 1, c: 2, ... } 8、回调替换技巧该.replace 功能并不限制您只能用固定字符串替换。您可以将回调传递给它并使用匹配的子字符串。 const string = "a dog went to dig and dug a doggone large hole"; const replacedString = string.replace(/d.g/g, str => str + "gy")
console.log(replacedString); // a doggy went to diggy and duggy a doggygone large hole 9、条件链技巧你们中的许多人都熟悉在 JS 中遇到未定义的错误,条件链接可以防止很多这种情况的发生。 可选的链接( )运算?. 符访问对象的属性或调用函数。如果使用此运算符访问的对象或调用的函数未定义或为空,则表达式短路并计算为未定义,而不是抛出错误。
const obj = { "a": "aaaaaaa", "b": null };
console.log(obj.b.d); // throws an error
console.log(obj.b?.d); // returns undefined 10、数字限制技巧通常,您可能需要将数字限制在特定范围内。每次需要时都用三元运算符来做是一件很痛苦的事情。函数要干净得多。 const constrain = (num, min, max) => { if(num < min) return min; else if(num > max) return max; else return num; }
constrain(5, 1, 3) // 3 constrain(2, 1, 5) // 2 constrain(0, -100, 100) // 0 一个更好的方法是使用Math.min 并Math.max 像这样: const constrain = (num, min, max) => Math.min(Math.max(num, min), max) 11、数组前后索引技巧该.at 函数允许您使用正数和负数从头到尾索引数组。 const arr = [1, 2, 3, 4, 5];
arr.at(0) // 1 arr.at(1) // 2 arr.at(-1) // 5 arr.at(-2) // 4 12、字母排序技巧按字母顺序对字符串数组进行排序 const words = ["javascript", "typescript", "python", "ruby", "swift", "go", "clojure"]; const sorted = words.sort((a, b) => a.localeCompare(b));
console.log(sorted); // ['clojure', 'go', 'javascript', 'python', 'ruby', 'swift', 'typescript'] 💡提示a.localeCompare(b) :您可以通过切换到在升序和降序之间切换顺序b.localeCompare(a) 13、对象遍历技巧Object.entries 允许我们将 JSON 对象转换为键值对数组,从而使我们能够使用循环或数组迭代器对其进行迭代。
const obj = { "key1": "value1", "key2": "value2", "key3": "value3" }; const iteratedObject = Object.entries(obj) .map(([key, value]) => `${key} = ${value}`);
console.log(iteratedObject); // ['key1 = value1', 'key2 = value2', 'key3 = value3'] 14、根据 Truthy/Falsy 值排序技巧您可以按真值/假值对数组进行排序,将具有真值的值放在最前面,然后是假值。 const users = [ { "name": "john", "subscribed": false }, { "name": "jane", "subscribed": true }, { "name": "jean", "subscribed": false }, { "name": "george", "subscribed": true }, { "name": "jelly", "subscribed": true }, { "name": "john", "subscribed": false } ];
const subscribedUsersFirst = users.sort((a, b) => Number(b.subscribed) - Number(a.subscribed)) Number(false) 等于零,Number(true) 等于一。这就是我们如何通过排序函数传递它。
15、四舍五入至小数点后 n 位技巧您可以使用 . 将小数舍入为n 数字.toFixed 。请注意,.toFixed 将数字转换为字符串,因此我们必须将其重新解析为数字。 console.log(Math.PI); // 3.141592653589793 console.log(Number(Math.PI.toFixed(2))) 对你有用吗,如果有用记得点赞支持! |