작업 효율성을 높이고 다시는 초과 근무를 하지 않도록 도와주는 20가지 JS 기술!

이 기사에서는 코드 효율성을 향상시키는 20가지 JavaScript 팁과 요령을 공유합니다. 초과 근무를 하지 않는 프런트 엔드 담당자가 되십시오. 모든 사람에게 도움이 되기를 바랍니다.

일상 작업에서 우리는 정렬, 검색, 고유한 값 찾기, 매개변수 전달, 값 교환 등과 같은 기능을 작성합니다. 그래서 여기에 간단한 팁 목록을 만들었습니다!

JavaScript는 정말 배우고 사용할 가치가 있는 훌륭한 언어입니다. 주어진 문제에 대해 동일한 솔루션에 도달하는 방법은 여러 가지가 있을 수 있습니다. 이 글에서는 가장 빠른 것들에 대해서만 논의할 것입니다.

다음 방법이 확실히 도움이 될 것입니다.

• LOC(코드 줄) 수 줄이기,
• 코딩 대회,
• 해커톤
• 또는 기타 시간 제한이 있는 작업.

최신 버전은 ECMAScript11(ES2020)이지만 대부분의 JavaScript Hack은 ECMAScript6(ES2015) 이상의 기술을 사용합니다.

==참고==: 아래의 모든 팁은 Google Chrome 콘솔에서 테스트되었습니다.

1. 배열 선언 및 초기화

기본값(예: "", null 또는 )을 사용하여 특정 크기 0의 배열을 초기화할 수 있습니다. 이미 1D 배열에 이를 사용하고 있을 수도 있지만 2D 배열/행렬을 어떻게 초기화합니까?

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

2. 합계, 최소값, 최대값 찾기

기본 수학 연산을 빠르게 찾으려면 reduce 메서드를 사용해야 합니다. 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

3. 对字符串、数字或对象数组进行排序

我们有内置的方法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: 3

4. 从数组中过滤出虚假值

Falsy值喜欢0，undefined，null，false，""，''可以很容易地通过以下方法省略

const array = [3, 0, 6, 7, '', false];
array.filter(Boolean);
// 输出
(3) [3, 6, 7]

5. 对各种条件使用逻辑运算符

如果你想减少嵌套 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

6. 删除重复值

您可能已经将 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]

7. 创建计数器对象或映射

大多数情况下，需要通过创建计数器对象或映射来解决问题，该对象或映射将变量作为键进行跟踪，并将其频率/出现次数作为值进行跟踪。

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}

8. 三元运算符很酷

您可以避免使用三元运算符嵌套条件 if…elseif…elseif。

function Fever(temp) {
    return temp > 97 ? 'Visit Doctor!'
      : temp < 97 ? &#39;Go Out and Play!!&#39;
      : temp === 97 ? &#39;Take Some Rest!&#39;;
}

// 输出
Fever(97): "Take Some Rest!" 
Fever(100): "Visit Doctor!"

9. 与旧版相比，for 循环更快

• for并for..in默认为您提供索引，但您可以使用 arr[index]。
• for..in 也接受非数字，所以避免它。
• forEach,for...of直接获取元素。
• forEach也可以为您提供索引，但for...of不能。
• for并for...of考虑阵列中的孔，但其他 2 个不考虑。

10.合并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"

11. 箭头函数

箭头函数表达式是传统函数表达式的紧凑替代品，但有局限性，不能在所有情况下使用。由于它们具有词法范围（父范围）并且没有自己的范围this，arguments因此它们指的是定义它们的环境。

const person = {
name: 'Kapil',
sayName() {
    return this.name;
    }
}
person.sayName();
// 输出
"Kapil"

但

const person = {
name: 'Kapil',
sayName : () => {
    return this.name;
    }
}
person.sayName();
// 输出
""

12. 可选链

可选的链接 ?.如果值在 ? 之前，则停止评估。为 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

13. 打乱数组

利用内置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");

// 输出: 6

🎜🎜minimum🎜🎜

const parts = ['shoulders', 'knees']; 
const lyrics = ['head', ...parts, 'and', 'toes']; 

lyrics;
// 输出: 
(5) ["head", "shoulders", "knees", "and", "toes"]

🎜3. 문자열, 숫자 또는 객체 배열 정렬🎜🎜🎜us이 있습니다. 문자열 정렬을 위한 내장 메소드 sort() 및 reverse()가 있지만 숫자나 객체의 배열은 어떻습니까? 🎜🎜숫자 및 객체에 대한 오름차순 및 내림차순 정렬 기술을 살펴보겠습니다. 🎜🎜🎜문자열 배열 정렬🎜🎜

const search = (arr, low=0,high=arr.length-1) => {
    return high;
}
search([1,2,3,4,5]);

// 输出: 4

🎜🎜숫자 배열 정렬🎜🎜

const num = 10;

num.toString(2);
// 输出: "1010"
num.toString(16);
// 输出: "a"
num.toString(8);
// 输出: "12"

🎜🎜객체 배열 sort🎜🎜

let a = 5;
let b = 8;
[a,b] = [b,a]

[a,b]
// 输出
(2) [8, 5]

🎜4. 배열에서 거짓 값 필터링🎜🎜 🎜 0, 정의되지 않음, null, false, "", ''는 🎜

function checkPalindrome(str) {
  return str == str.split('').reverse().join('');
}
checkPalindrome('naman');
// 输出: true

🎜5로 쉽게 생략할 수 있습니다. 다양한 조건에 논리 연산자를 사용하세요 🎜🎜🎜삽입을 줄이고 싶다면 if를 사용하세요 ...그렇지 않거나 대소문자를 바꾸려면 기본 논리 연산자 AND/OR를 사용하면 됩니다. 🎜

使用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]

🎜6. 중복 값 제거 ​​🎜🎜🎜첫 번째로 발견된 인덱스를 반환하는 for 루프와 함께 indexOf()를 사용했을 수 있습니다. 또는 최신 includes()는 배열에서 부울 true/false를 반환하여 중복 항목을 찾거나 제거합니다. 여기에는 두 가지 더 빠른 방법이 있습니다. 🎜rrreee

🎜7. 카운터 개체 또는 맵 만들기 🎜🎜🎜대부분의 경우 변수를 키로 사용하는 카운터 개체나 맵을 만들어 문제를 해결해야 합니다. , 그리고 그 빈도/발생 횟수를 값으로 나타냅니다. 🎜rrreee🎜 및 🎜rrreee

🎜8. 삼항 연산자는 훌륭합니다. 🎜🎜🎜…elseif…elseif 조건을 중첩하려면 삼항 연산자를 사용하지 마세요. 🎜rrreee

🎜9 for 루프는 이전 버전인 🎜🎜🎜🎜for 및 for..in</code에 비해 더 빠릅니다. > 인덱스는 기본적으로 제공되지만 arr[index]를 사용할 수도 있습니다. 🎜🎜<code>for..in은 숫자가 아닌 문자도 허용하므로 피하세요. 🎜🎜forEach, for...of 요소를 직접 가져옵니다. 🎜🎜forEach도 색인을 제공할 수 있지만 for...of는 제공할 수 없습니다. 🎜🎜for 및 for...of는 배열의 구멍을 고려하지만 다른 2개는 고려하지 않습니다. 🎜🎜

🎜10. 2개의 개체 병합🎜🎜🎜보통 일상 작업에서는 여러 개체를 병합해야 합니다. 🎜rrreee

🎜11. 화살표 함수 🎜🎜🎜화살표 함수 표현식은 기존 함수 표현식에 대한 간단한 대안이지만 제한 사항이 있으며 모든 상황에서 사용할 수는 없습니다. 어휘 범위(상위 범위)가 있고 자체 범위 this가 없기 때문에 인수는 자신이 정의된 환경을 참조합니다. 🎜rrreee🎜그러나 🎜rrreee

🎜12. 선택적 연결🎜🎜🎜선택적 연결 ?. 값이 앞에 오면 평가를 중지합니다. 정의되지 않았거나 null이고 🎜rrreee

🎜13을 반환합니다. 내장된 Math.random() 메서드를 사용하여 배열을 스크램블합니다 🎜🎜🎜. 🎜rrreee🎜🎜14. Null 병합 연산자🎜🎜🎜null 병합 연산자(??)는 왼쪽 피연산자가 비어 있거나 정의되지 않은 경우 오른쪽 피연산자를 반환하고, 그렇지 않으면 왼쪽 피연산자 쪽 피연산자를 반환하는 논리 연산자입니다. 🎜

const foo = null ?? 'my school';
// 输出: "my school"

const baz = 0 ?? 42;
// 输出: 0

15. Rest & Spread 运算符

那些神秘的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"]

16. 默认参数

const search = (arr, low=0,high=arr.length-1) => {
    return high;
}
search([1,2,3,4,5]);

// 输出: 4

17. 将十进制转换为二进制或十六进制

在解决问题的同时，我们可以使用一些内置的方法，例如.toPrecision()或.toFixed()来实现许多帮助功能。

const num = 10;

num.toString(2);
// 输出: "1010"
num.toString(16);
// 输出: "a"
num.toString(8);
// 输出: "12"

18. 使用解构简单交换两值

let a = 5;
let b = 8;
[a,b] = [b,a]

[a,b]
// 输出
(2) [8, 5]

19. 单行回文检查

嗯，这不是一个整体的速记技巧，但它会让你清楚地了解如何使用弦乐。

function checkPalindrome(str) {
  return str == str.split('').reverse().join('');
}
checkPalindrome('naman');
// 输出: true

20.将Object属性转成属性数组

使用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前端】

위 내용은 작업 효율성을 높이고 다시는 초과 근무를 하지 않도록 도와주는 20가지 JS 기술!의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!