Home > Article > Web Front-end > 20 JS skills to help you improve work efficiency and never be an overtime worker again!
This article will share with you 20 JavaScript tips and tricks to improve code efficiency. I hope it will be helpful to you as a front-end person who does not work overtime.
In our daily tasks we write functions like sorting, searching, finding unique values, passing parameters, exchanging values etc. so here I have listed my A list of shorthand tips!
JavaScript is really a great language that is worth learning and using. For a given problem, there can be more than one way to arrive at the same solution. In this article, we will only discuss the fastest ones.
These methods will definitely help you:
Most of these JavaScript Hacks use ECMAScript6(ES2015) and later technologies, although the latest version is ECMAScript11(ES2020).
==Note==: All tips below have been tested on Google Chrome's console.
We can initialize an array 0 of a specific size using a default value (such as "", null or ). You may already be using these for 1D arrays, but how do you initialize a 2D array/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
We should use the reduce
method to quickly find basic mathematical operations.
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
We have built-in methods sort()
and reverse()
for Sort strings, but what about arrays of numbers or objects?
Let’s look at ascending and descending sorting techniques for numbers and objects.
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: 3
Falsy values like 0
, undefined
, null
, false
, ""
, ''
can be easily omitted by
const array = [3, 0, 6, 7, '', false]; array.filter(Boolean); // 输出 (3) [3, 6, 7]
If you want to reduce nested if...else or switch cases, you can simply use the basic logical operators 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
You may have used indexOf()
with a for loop that returns the first found index or newer includes()
Returns boolean true/false from an array to find/remove duplicates. This is where we have two faster methods.
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]
Most of the time, you need to solve the problem by creating a counter object or map that has variables as keys is tracked and its frequency/occurrence is tracked as a value.
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}
and
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}
You can avoid using the ternary operator to nest conditions 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!"
and
for..inThe index is given to you by default, but you can use arr[index].
also accepts non-numbers, so avoid it.
,
for...ofGet the element directly.
can also give you an index, but
for...of cannot.
and
for...of The holes in the array are considered, but the other 2 are not.
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 they refer to the environment in which they are defined.
const person = { name: 'Kapil', sayName() { return this.name; } } person.sayName(); // 输出 "Kapil"But
const person = { name: 'Kapil', sayName : () => { return this.name; } } person.sayName(); // 输出 ""
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() method.
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
那些神秘的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前端】
The above is the detailed content of 20 JS skills to help you improve work efficiency and never be an overtime worker again!. For more information, please follow other related articles on the PHP Chinese website!