In diesem Artikel erfahren Sie 20 JavaScript-Tipps und -Tricks zur Verbesserung der Code-Effizienz. Seien Sie ein Front-End-Mensch, der keine Überstunden macht. Ich hoffe, dass er für alle hilfreich ist.
In unseren täglichen Aufgaben schreiben wir Funktionen wie Sortieren, Suchen, Finden eindeutiger Werte, Übergeben von Parametern, Austauschen von Werten usw. Deshalb habe ich hier eine Liste meiner Kurzschrifttipps erstellt!
JavaScript ist wirklich eine großartige Sprache, die es wert ist, erlernt und verwendet zu werden. Für ein bestimmtes Problem kann es mehr als einen Weg geben, zur gleichen Lösung zu gelangen. In diesem Artikel werden wir nur die schnellsten besprechen.
Diese Methoden werden Ihnen auf jeden Fall helfen:
Die meisten dieser JavaScript-Hacks verwenden ECMAScript6 (ES2015) und spätere Technologien, obwohl die neueste Version ECMAScript11 (ES2020) ist.
==Hinweis==: Alle folgenden Tipps wurden auf der Google Chrome-Konsole getestet.
Wir können ein Array einer bestimmten Größe 0 mit Standardwerten (z. B. „“, null oder ) initialisieren. Möglicherweise verwenden Sie diese bereits für 1D-Arrays, aber wie initialisieren Sie ein 2D-Array/eine 2D-Matrix?
const array = Array(5).fill(''); // 输出 (5) ["", "", "", "", ""] const matrix = Array(5).fill(0).map(()=>Array(5).fill(0)); // 输出 (5) [Array(5), Array(5), Array(5), Array(5), Array(5)] 0: (5) [0, 0, 0, 0, 0] 1: (5) [0, 0, 0, 0, 0] 2: (5) [0, 0, 0, 0, 0] 3: (5) [0, 0, 0, 0, 0] 4: (5) [0, 0, 0, 0, 0] length: 5
Wir sollten die Methode reduce verwenden, um schnell grundlegende mathematische Operationen zu finden. reduce方法来快速找到基本的数学运算。
const array = [5,4,7,8,9,2];
array.reduce((a,b) => a+b); // 输出: 35
array.reduce((a,b) => a>b?a:b); // 输出: 9
array.reduce((a,b) => a<b?a:b); // 输出: 2
我们有内置的方法sort()和reverse()用于对字符串进行排序，但是数字或对象数组呢？
让我们看看数字和对象的升序和降序排序技巧。
const stringArr = ["Joe", "Kapil", "Steve", "Musk"] stringArr.sort(); // 输出 (4) ["Joe", "Kapil", "Musk", "Steve"] stringArr.reverse(); // 输出 (4) ["Steve", "Musk", "Kapil", "Joe"]
const array = [40, 100, 1, 5, 25, 10]; array.sort((a,b) => a-b); // 输出 (6) [1, 5, 10, 25, 40, 100] array.sort((a,b) => b-a); // 输出 (6) [100, 40, 25, 10, 5, 1]
const objectArr = [
{ first_name: 'Lazslo', last_name: 'Jamf' },
{ first_name: 'Pig', last_name: 'Bodine' },
{ first_name: 'Pirate', last_name: 'Prentice' }
];
objectArr.sort((a, b) => a.last_name.localeCompare(b.last_name));
// 输出
(3) [{…}, {…}, {…}]
0: {first_name: "Pig", last_name: "Bodine"}
1: {first_name: "Lazslo", last_name: "Jamf"}
2: {first_name: "Pirate", last_name: "Prentice"}
length: 3Falsy值喜欢0，undefined，null，false，""，''可以很容易地通过以下方法省略
const array = [3, 0, 6, 7, '', false]; array.filter(Boolean); // 输出 (3) [3, 6, 7]
如果你想减少嵌套 if…else 或 switch case，你可以简单地使用基本的逻辑运算符AND/OR。
function doSomething(arg1){
arg1 = arg1 || 10;
// 如果尚未设置，则将 arg1 设置为 10 作为默认值
return arg1;
}
let foo = 10;
foo === 10 && doSomething();
// is the same thing as if (foo == 10) then doSomething();
// 输出: 10
foo === 5 || doSomething();
// is the same thing as if (foo != 5) then doSomething();
// 输出: 10您可能已经将 indexOf() 与 for 循环一起使用，该循环返回第一个找到的索引或较新的 includes() 从数组中返回布尔值 true/false 以找出/删除重复项。 这是我们有两种更快的方法。
const array = [5,4,7,8,9,2,7,5]; array.filter((item,idx,arr) => arr.indexOf(item) === idx); // or const nonUnique = [...new Set(array)]; // 输出: [5, 4, 7, 8, 9, 2]
大多数情况下，需要通过创建计数器对象或映射来解决问题，该对象或映射将变量作为键进行跟踪，并将其频率/出现次数作为值进行跟踪。
let string = 'kapilalipak';
const table={};
for(let char of string) {
table[char]=table[char]+1 || 1;
}
// 输出
{k: 2, a: 3, p: 2, i: 2, l: 2}和
const countMap = new Map();
for (let i = 0; i < string.length; i++) {
if (countMap.has(string[i])) {
countMap.set(string[i], countMap.get(string[i]) + 1);
} else {
countMap.set(string[i], 1);
}
}
// 输出
Map(5) {"k" => 2, "a" => 3, "p" => 2, "i" => 2, "l" => 2}您可以避免使用三元运算符嵌套条件 if…elseif…elseif。
function Fever(temp) {
return temp > 97 ? 'Visit Doctor!'
: temp < 97 ? 'Go Out and Play!!'
: temp === 97 ? 'Take Some Rest!';
}
// 输出
Fever(97): "Take Some Rest!"
Fever(100): "Visit Doctor!"for并for..in默认为您提供索引，但您可以使用 arr[index]。for..in 也接受非数字，所以避免它。forEach,for...of直接获取元素。forEach也可以为您提供索引，但for...of不能。for并for...of考虑阵列中的孔，但其他 2 个不考虑。通常我们需要在日常任务中合并多个对象。
const user = {
name: 'Kapil Raghuwanshi',
gender: 'Male'
};
const college = {
primary: 'Mani Primary School',
secondary: 'Lass Secondary School'
};
const skills = {
programming: 'Extreme',
swimming: 'Average',
sleeping: 'Pro'
};
const summary = {...user, ...college, ...skills};
// 输出
gender: "Male"
name: "Kapil Raghuwanshi"
primary: "Mani Primary School"
programming: "Extreme"
secondary: "Lass Secondary School"
sleeping: "Pro"
swimming: "Average"箭头函数表达式是传统函数表达式的紧凑替代品，但有局限性，不能在所有情况下使用。由于它们具有词法范围（父范围）并且没有自己的范围this，arguments因此它们指的是定义它们的环境。
const person = {
name: 'Kapil',
sayName() {
return this.name;
}
}
person.sayName();
// 输出
"Kapil"但
const person = {
name: 'Kapil',
sayName : () => {
return this.name;
}
}
person.sayName();
// 输出
""可选的链接 ?.如果值在 ? 之前，则停止评估。为 undefined 或 null 并返回
undefined。
const user = {
employee: {
name: "Kapil"
}
};
user.employee?.name;
// 输出: "Kapil"
user.employ?.name;
// 输出: undefined
user.employ.name
// 输出: VM21616:1 Uncaught TypeError: Cannot read property 'name' of undefined利用内置Math.random()
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 foo = null ?? 'my school'; // 输出: "my school" const baz = 0 ?? 42; // 输出: 0
maximum
🎜function myFun(a, b, ...manyMoreArgs) {
return arguments.length;
}
myFun("one", "two", "three", "four", "five", "six");
// 输出: 6const parts = ['shoulders', 'knees']; const lyrics = ['head', ...parts, 'and', 'toes']; lyrics; // 输出: (5) ["head", "shoulders", "knees", "and", "toes"]
sort() und reverse() zum Sortieren von Zeichenfolgen, aber was ist mit Arrays aus Zahlen oder Objekten? 🎜🎜Sehen wir uns die auf- und absteigenden Sortiertechniken für Zahlen und Objekte an. 🎜🎜🎜String-Array sortieren🎜🎜const search = (arr, low=0,high=arr.length-1) => {
return high;
}
search([1,2,3,4,5]);
// 输出: 4const num = 10; num.toString(2); // 输出: "1010" num.toString(16); // 输出: "a" num.toString(8); // 输出: "12"
let a = 5; let b = 8; [a,b] = [b,a] [a,b] // 输出 (2) [8, 5]
0, undefiniert, null, false, "", '' kann einfach durch 🎜function checkPalindrome(str) {
return str == str.split('').reverse().join('');
}
checkPalindrome('naman');
// 输出: trueAND/OR verwenden. 🎜使用Object.entries(),Object.keys()和Object.values()
const obj = { a: 1, b: 2, c: 3 };
Object.entries(obj);
// 输出
(3) [Array(2), Array(2), Array(2)]
0: (2) ["a", 1]
1: (2) ["b", 2]
2: (2) ["c", 3]
length: 3
Object.keys(obj);
(3) ["a", "b", "c"]
Object.values(obj);
(3) [1, 2, 3]indexOf() mit einer for-Schleife verwendet, die den ersten gefundenen Index zurückgibt oder neuer includes() gibt boolesche Werte wahr/falsch aus einem Array zurück, um Duplikate zu finden/entfernen. Hier haben wir zwei schnellere Methoden. 🎜rrreeefor und for..in</code > Der Index wird Ihnen standardmäßig bereitgestellt, Sie können jedoch auch arr[index] verwenden. 🎜🎜<code>for..in akzeptiert auch Nicht-Zahlen, also vermeiden Sie es. 🎜🎜forEach, for...of holen sich das Element direkt. 🎜🎜forEach kann Ihnen auch einen Index geben, for...of jedoch nicht. 🎜🎜for und for...of berücksichtigen die Löcher im Array, aber nicht die anderen 2. 🎜🎜dies, Argumente haben, verweisen sie auf die Umgebung, in der sie definiert sind. 🎜rrreee🎜aber🎜rrreeeMath.random(). 🎜rrreee🎜🎜14. Null-Koaleszenzoperator🎜🎜🎜Der Null-Koaleszenzoperator (??) ist ein logischer Operator, der seinen rechten Operanden zurückgibt, wenn sein linker Operand leer oder undefiniert ist, andernfalls gibt er seine linken Operanden zurück. 🎜const foo = null ?? 'my school'; // 输出: "my school" const baz = 0 ?? 42; // 输出: 0
那些神秘的3点...可以休息或传播！?
function myFun(a, b, ...manyMoreArgs) {
return arguments.length;
}
myFun("one", "two", "three", "four", "five", "six");
// 输出: 6和
const parts = ['shoulders', 'knees']; const lyrics = ['head', ...parts, 'and', 'toes']; lyrics; // 输出: (5) ["head", "shoulders", "knees", "and", "toes"]
const search = (arr, low=0,high=arr.length-1) => {
return high;
}
search([1,2,3,4,5]);
// 输出: 4在解决问题的同时，我们可以使用一些内置的方法，例如.toPrecision()或.toFixed()来实现许多帮助功能。
const num = 10; num.toString(2); // 输出: "1010" num.toString(16); // 输出: "a" num.toString(8); // 输出: "12"
let a = 5; let b = 8; [a,b] = [b,a] [a,b] // 输出 (2) [8, 5]
嗯，这不是一个整体的速记技巧，但它会让你清楚地了解如何使用弦乐。
function checkPalindrome(str) {
return str == str.split('').reverse().join('');
}
checkPalindrome('naman');
// 输出: true使用Object.entries(),Object.keys()和Object.values()
const obj = { a: 1, b: 2, c: 3 };
Object.entries(obj);
// 输出
(3) [Array(2), Array(2), Array(2)]
0: (2) ["a", 1]
1: (2) ["b", 2]
2: (2) ["c", 3]
length: 3
Object.keys(obj);
(3) ["a", "b", "c"]
Object.values(obj);
(3) [1, 2, 3]【相关推荐：javascript视频教程、web前端】
Das obige ist der detaillierte Inhalt von20 JS-Fähigkeiten, die Ihnen helfen, die Arbeitseffizienz zu verbessern und nie wieder Überstunden zu machen!. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
