9개의 JavaScript 일상적인 개발 팁

1. 지정된 범위의 숫자 생성하기

어떤 경우, 우리는 두 수 사이에 있는 그룹을 만들 것이다.가령 우리가 누군가의 생일이 어느 범위의 연내에 있는지 아닌지를 판단해야 한다면, 다음은 그것을 실현하는 매우 간단한 방법이다

let start = 1900, end = 2000;
[...new Array(end + 1).keys()].slice(start);
// [ 1900, 1901, ..., 2000]
//  ， 

Array.from({ length: end - start + 1 }, (_, i) => start + i);

2. 함수의 매개 변수로 값 그룹을 사용

어떤 경우, 우리는 값을 수조에 수집한 다음 함수의 매개 변수로 전달해야 한다.ES6를 사용하여 확장 연산자(...)를 사용할 수 있습니다.그리고 [arg1,arg2]>(arg1,arg2)에서 수조를 추출합니다.

const parts = {
 first: [0, 2],
 second: [1, 3],
}

["Hello", "World", "JS", "Tricks"].slice(...parts.second)
// ["World", "JS"]

3. 값을 Math 메서드의 매개변수로 사용

우리가 배열에서 Math를 사용해야 할 때.max 또는 Math.min에서 최대 또는 최소 값을 찾으면 다음과 같이 조작할 수 있습니다.

const elementsHeight = [...document.body.children].map(
 el => el.getBoundingClientRect().y
);
Math.max(...elementsHeight);
// 474

const numbers = [100, 100, -1000, 2000, -3000, 40000];
Math.min(...numbers);
// -3000

4. 수조의 수조를 합치거나 펴기

Array는 Array라고 불리는 좋은 방법이 있습니다.flat, 이것은 depth 매개 변수가 필요합니다. 그룹 삽입의 깊이를 나타냅니다. 기본값은 1입니다.그러나 우리가 깊이를 모르면 그것을 모두 펴야 한다. Infinity를 매개 변수로 하면 된다😎

const arrays = [[10], 50, [100, [2000, 3000, [40000]]]]

arrays.flat(Infinity)
// [ 10, 50, 100, 2000, 3000, 40000 ]

5. 코드 충돌 방지

코드에 예측할 수 없는 행동이 나타나는 것은 좋지 않지만, 만약 당신이 이런 행동을 한다면, 당신은 그것을 처리해야 합니다.
예를 들어 흔히 볼 수 있는 오류 TypeError, undefined/null 등 속성을 가져오면 이 오류를 보고합니다.

const found = [{ name: "Alex" }].find(i => i.name === 'Jim')

console.log(found.name)
// TypeError: Cannot read property 'name' of undefined

우리는 이렇게 그것을 피할 수 있다.

const found = [{ name: "Alex" }].find(i => i.name === 'Jim') || {}

console.log(found.name)
// undefined

6. 매개 변수를 전달하는 좋은 방법

이 방법에 있어서 좋은 용례는 바로 styled-components이다. ES6에서 우리는 템플릿 문자에서 함수의 매개 변수로 전달할 수 있고 네모난 괄호를 사용하지 않아도 된다.텍스트 포맷/변환 기능을 구현하려면 다음과 같은 유용한 방법이 있습니다.

const makeList = (raw) =>
 raw
  .join()
  .trim()
  .split("
")
  .map((s, i) => `${i + 1}. ${s}`)
  .join("
");

makeList`
Hello, World
Hello, World
`;
// 1. Hello,World
// 2. World,World

7. 교환 변수

해구부치 문법을 사용하면 우리는 변수를 쉽게 교환하고 해구부치 문법을 사용할 수 있다😬:

let a = "hello"
let b = "world"

//  
a = b
b = a
// { a: 'world', b: 'world' }

//  
[a, b] = [b, a]
// { a: 'world', b: 'hello' }

8. 알파벳순으로 정렬

국제적인 프로젝트에서 사전 순서에 따라 비교적 특수한 언어에 문제가 발생할 수 있습니다. 아래와 같습니다.😨

//  
["a", "z", "ä"].sort((a, b) => a - b);
// ['a', 'z', 'ä']

//  
["a", "z", "ä"].sort((a, b) => a.localeCompare(b));
// [ 'a', 'ä', 'z' ]

localeCompare (): 두 문자열을 로컬 순서로 비교합니다.

9. 프라이버시 숨기기

마지막 기교는 문자열을 차단하는 것이다. 변수를 차단해야 할 때 (비밀번호가 아니라) 다음과 같은 방법으로 신속하게 도와줄 수 있다.

const password = "hackme";
password.substr(-3).padStart(password.length, "*");
// ***kme

이러한 팁을 익히면 일상적인 개발 과정에서 불필요한 오류를 피할 수 있습니다. 자바스크립트의 일상적인 개발 팁에 대해서는 아래의 링크를 보십시오.