搜索

得不学的25个JavaScript技巧,让你成为高效开发达人!

2025-1-3 01:13| 发布者: admin| 查看: 17| 评论: 0

 

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.forEachjavascript迭代函数,你可以得到每个项目的索引。

const arr = ['a''b''c'];
const letterPositions = arr.map(
(charindex=> `${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 [charoccurrenceCount]
})
)

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/gstr => 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 = (numminmax=> {
 if(num < minreturn min;
 else if(num > maxreturn max;
 else return num;
}

constrain(513// 3
constrain(215// 2
constrain(0-100100// 0

一个更好的方法是使用Math.minMath.max像这样:

const constrain = (numminmax=> Math.min(Math.max(nummin), max)

11、数组前后索引技巧

.at函数允许您使用正数和负数从头到尾索引数组。

const arr = [12345];

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((ab=> 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(([keyvalue]) => `${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((ab=> 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)))

对你有用吗,如果有用记得点赞支持!


鲜花

握手

雷人

路过

鸡蛋
返回顶部