JavaScript 초보자가 범하기 쉬운 몇 가지 오류

앞말

JavaScript 언어 디자인 차원의 문제는 물론이고 Brendan Eich가 그 당시 열흘 만에 설계한 것이기 때문에 약간의 결함도 불가피하다.개발자로서 우리는 어떻게 흔히 볼 수 있는 저급 오류를 피해야 합니까?본고는 몇 가지 흔히 볼 수 있는 잘못을 열거해서, 네가 일찍이 만난 적이 있는 것처럼 보이는지 좀 보아라.

undefined와null을 혼동합니다.

JavaScript의 undefined와null은 값이 없음을 나타내는 데 사용할 수 있지만 둘 사이에는 차이가 있습니다.undefined 글자의 의미는'정의되지 않음'이지만 그 의미는 변수가 정의되지 않은 범주를 넘어섰다. 대상이 존재하지 않는 속성, 리턴 문장이 없는 함수의 반환값, 성명된 후에 값을 부여하지 않은 변수, 심지어는 현식 값을 undefined로 부여하는 변수 등을 읽으려고 시도한 결과는 undefined이다.typeof로 그 형식을 테스트합니다. 문자열'undefined'입니다.null은 비교적 순수하다. 변수는null로 설정해야만 이 값이 있다.또한null은 대상 형식입니다. 즉, typeof (null) 의 값은 문자열'object'입니다.
주의해야 할 것은if로 이 두 값이 모두false라고 판단하고null==undefined는 성립된 것이기 때문에 초보자는 일반적으로 헷갈리기 쉽다는 것이다.따라서 가능한 한 통일적으로'값이 없다'를 모두undefined로 설정하면 판단 구분의 번거로움을 줄일 수 있다.
undefined 함수를 반환합니다.

const f = () => {}

변수 값을 undefined로 설정합니다.

x = undefined;

속성이 undefined인지 여부를 판단합니다.

typeof obj.prop === 'undefined'
obj.prop === undefined

변수가 undefined인지 여부를 판단합니다.

typeof x === 'undefined'

변수가 성명된 후에 값을 부여하지 않으면 자동적으로 undefined 값이 있습니다.
만약 반드시 null을 판단해야 한다면 전등으로 판단한다.

obj.prop === null
x === null

typeof를 사용하면 null을 판단할 수 없습니다. 대상 형식이기 때문입니다.

숫자 조합과 문자열 결합 혼동

JavaScript에서 더하기 기호 + 연산자는 숫자를 더하거나 문자열 결합에 사용할 수 있습니다.JavaScript는 동적 언어이기 때문에 조작자는 자동으로 변수를 같은 데이터 형식으로 바꾸어 다시 연산합니다.예:

let x = 1 + 1; // 2

결과는 2이다. 우리가 기대하는 숫자를 더하는 것이다. 왜냐하면 두 값이 모두 숫자이기 때문이다.
하지만 다음과 같은 표현식이라면:

let x = 1 + '1'; // “11”

결과는'11'입니다. 첫 번째 숫자가 문자열로 바뀌기 때문입니다.여기의 더하기 기호 + 연산자는 숫자가 아닌 문자열 결합으로 사용됩니다.여기에서 표현식의 값을 직접 볼 수 있는 것은 그런대로 분명하지만, 여러 변수로 구성된 표현식이라면 유형을 판단하기 어렵다.
이 문제를 해결하기 위해서 우리는 문자열을 모두 숫자 형식으로 바꾸어 연산할 수 있다.예:

let x = 1;  
let y = '2';  
let z = Number(x) + Number(y);

이렇게 하면 운행 결과는 3이다.Number 함수는 임의의 형식의 값을 수신합니다. 숫자로 바꿀 수 있으면 숫자로 돌아가고, 그렇지 않으면 NaN으로 돌아갑니다.new Number(...)도 사용할 수 있습니다.valueOf() 함수:

let x = 1;  
let y = '2';  
let z = new Number(x).valueOf() + new Number(y).valueOf();

new Number (...)하나의 구조 함수를 실례화하고 되돌아오는 것은 하나의 대상이며 숫자 형식이 아니다.원본 숫자 형식을 얻으려면 이 대상의valueOf 방법을 사용해야 합니다.사실 더 간결한 방법이 있다.

let x = 1;  
let y = '2';  
let z = +x + +y;

변수 앞의 + 작용은 숫자로 변환하거나 NaN으로 Number 함수와 같은 작용을 합니다.

return 문장 줄 바꾸기 문제

JavaScript 구문은 줄 바꿈의 끝 부분을 나타냅니다.예:

const add = (a, b) => {  
  return  
  a + b;  
}
add(1,2); // undefined

3을 되돌릴 줄 알았는데, 실제로는 undefined였다.이것은 a+b 이전에 함수가return을 실행했기 때문이다.이 문제를 해결하려면 두 가지 방법이 있다. 표현식과return을 한 줄에 두든지, 아니면 표현식을 괄호로 묶든지.

const add = (a, b) => {  
  return a + b;  
}
//  
const add = (a, b) => {  
  return (  
    a + b  
  );  
}

괄호를 붙이면 왜 줄을 바꿀 수 있습니까?괄호 안에 있는 것은 표현식이지 문장이 아니기 때문이다.표현식은 여러 줄로 뜯을 수 있는데, 길면.화살표 함수를 사용하면 보다 직관적입니다.

const add = (a, b) => a + b

화살표 함수의 단일 행 표현식은 return 효과를 가지며 표현식 바깥쪽에 괄호를 묶을 수도 있습니다.

const add = (a, b) => (a + b)

이 괄호는 대상의 글자 양을 되돌려주는 화살표 함수에서 약간 쓸모가 있습니다. 원괄호 () 를 넣지 않으면 {} 함수체의 시작과 끝 표시일 뿐입니다. 대상의 글자 양을 되돌려주고 리턴 {...} 을 보여 줍니다.
행 코드의 문장이 완전하지 않으면 JavaScript 해석기는 다음 줄의 문장을 함께 해석합니다.예:

const power = (a) => {  
  const  
    power = 10;  
  return a ** 10;  
}
//  ：
const power = (a) => {  
  const  power = 10;  
  return a ** 10;  
}

그러나 완전한 문장, 예를 들어return은 여러 줄을 합치지 않는다.

return으로 For Each 순환 뛰기

JavaScript 배열에는 배열 요소를 순환하는 forEach 방법이 있습니다.초보자는 for 순환의break나continue 키워드를 연상하기 쉬워 순환을 중단합니다.하지만 forEach에는 이 두 가지 키워드가 없습니다.그럼 리턴으로 하면 안 돼요?사용할 수 있지만, 함수를 미리 되돌려주는 것이 작용합니다. continue의 효과와 유사합니다. 이번 순환을 끝내는 데 사용됩니다.전체 순환에서 벗어나려면return은 할 수 없습니다.

const nums = [1, 2, 3, 4, 5, 6];
let firstEven;
nums.forEach(n => {
  if (n % 2 ===0 ) {
    firstEven = n;
    return n;
  }
});
console.log(firstEven); // 6

코드의 본뜻은 첫 번째 짝수를 찾아내고 찾으면 순환을 끝내는 것이다.그러나 실제로는 순환을 끝내지 않았기 때문에 최종 결과는 마지막 짝수였다.
해결책이 있습니까?이런 상황은 for로 순환하거나 수조 필터,find 같은 방법으로 할 수 있다.

총결산

JavaScript는 쉽게 시작할 수 있지만 주의하지 않으면 실수하기 쉽습니다.본고는 범하기 쉬운 몇 가지 잘못을 간단하게 소개하였으니, 너에게 도움이 되기를 바란다.
다음은 JavaScript 초보자가 범하기 쉬운 몇 가지 오류에 대한 상세한 내용입니다. JS에 대한 더 많은 자료는 저희 다른 관련 글을 주목해 주십시오!