3. Sort arrays of strings, numbers or objects
We have built-in methodssort()andreverse ()To sort strings, but what if it is a number or object array
String array sorting
const stringArr = ["Joe", "Kapil", "Steve", "Musk"] stringArr.sort(); // 输出 (4) ["Joe", "Kapil", "Musk", "Steve"] stringArr.reverse(); // 输出 (4) ["Steve", "Musk", "Kapil", "Joe"]
Number array sorting
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]
Object array sorting
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
4. Filter to virtual values from the array
Like0,undefined,null,false,"",''Such false values can be easily filtered out using the following trick.
const array = [3, 0, 6, 7, '', false]; array.filter(Boolean); // 输出 (3) [3, 6, 7]
5. Use logical operators to handle situations that require conditional judgment
function doSomething(arg1){ arg1 = arg1 || 10; // 如果arg1没有值，则取默认值 10 } let foo = 10; foo === 10 && doSomething(); // 如果 foo 等于 10，刚执行 doSomething(); // 输出: 10 foo === 5 || doSomething(); // is the same thing as if (foo != 5) then doSomething(); // Output: 10
6. Remove duplicate values
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)]; // Output: [5, 4, 7, 8, 9, 2]
7. Create a counter object or Map
In most cases, you can create a counter object or Map To count the frequency of certain special words.
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}
or
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}
8. The ternary operator is cool
function Fever(temp) { return temp > 97 ? 'Visit Doctor!' : temp < 97 ? 'Go Out and Play!!' : temp === 97 ? 'Take Some Rest!': 'Go Out and Play!';; } // 输出 Fever(97): "Take Some Rest!" Fever(100): "Visit Doctor!"
9. Comparison of loop methods
- ##for
andfor..inget the index by default, but you can usearr[ index].
- for..in
also accepts non-digits, so avoid using them.
- forEach
,for...ofGet the element directly. forEach can also get the index, but
- for...of
cannot.
10. Merge two objects
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"
11. Arrow function
Arrow function expressions are an alternative to traditional function expressions, but are limited and cannot be used in all situations. Because they have lexical scope (parent scope) and do not have their own
thisandargument, they refer to the environment in which they are defined.
const person = { name: 'Kapil', sayName() { return this.name; } } person.sayName(); // 输出 "Kapil"
But this:
const person = { name: 'Kapil', sayName : () => { return this.name; } } person.sayName(); // Output "
12. Optional chain
const user = { employee: { name: "Kapil" } }; user.employee?.name; // Output: "Kapil" user.employ?.name; // Output: undefined user.employ.name // 输出: VM21616:1 Uncaught TypeError: Cannot read property 'name' of undefined
13. Shuffle an array
Use the built-in
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] // 输出 (9) [4, 1, 7, 5, 3, 8, 2, 9, 6]
14. Double question mark syntax
const foo = null ?? 'my school'; // 输出: "my school" const baz = 0 ?? 42; // 输出: 0
15. Remaining and expansion syntax
function myFun(a, b, ...manyMoreArgs) { return arguments.length; } myFun("one", "two", "three", "four", "five", "six"); // 输出: 6
and
const parts = ['shoulders', 'knees']; const lyrics = ['head', ...parts, 'and', 'toes']; lyrics; // 输出: (5) ["head", "shoulders", "knees", "and", "toes"]
16. Default parameters
const search = (arr, low=0,high=arr.length-1) => { return high; } search([1,2,3,4,5]); // 输出: 4
17. Convert decimal to binary Or hexadecimal
const num = 10; num.toString(2); // 输出: "1010" num.toString(16); // 输出: "a" num.toString(8); // 输出: "12"
18. Use destructuring to exchange two numbers
let a = 5; let b = 8; [a,b] = [b,a] [a,b] // 输出 (2) [8, 5]
19. Check the number of palindromes in a single line
function checkPalindrome(str) { return str == str.split('').reverse().join(''); } checkPalindrome('naman'); // 输出: true
20. Convert Object properties to property arrays
const obj = { a: 1, b: 2, c: 3 }; Object.entries(obj); // Output (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]
For more programming-related knowledge, please visit:
Introduction to Programming! !
The above is the detailed content of 20 tips to improve the speed and efficiency of JavaScript development. For more information, please follow other related articles on the PHP Chinese website!
