아시다시피 JavaScript는 세계 최고의 프로그래밍 언어이며, 웹 언어이자 모바일 하이브리드 앱(예: PhoneGap 또는 Appcelerator)의 언어이며, 서버 측 언어(예: NodeJS)입니다. 또는 Wakanda) 등 다양한 구현이 있습니다. 동시에 브라우저에 간단한 경고 메시지를 표시할 수 있을 뿐만 아니라 로봇을 제어하는 데에도 사용할 수 있기 때문에(nodebot 또는 nodruino 사용) 많은 초보자를 위한 계몽 언어이기도 합니다. JavaScript를 마스터하고 체계적이고 표준화되었으며 성능이 뛰어난 효율적인 코드를 작성할 수 있는 개발자는 인재 시장에서 인기를 얻고 있습니다.
이 문서의 코드 조각은 V8 JavaScript 엔진(V8 3.20.17.15)을 사용하는 최신 Google Chrome(버전 번호 30)에서 테스트되었습니다.
1 – 처음 변수에 값을 할당할 때 var 키워드를 사용하는 것을 잊지 마세요.
정의되지 않은 변수에 값을 할당하면 전역 변수가 생성됩니다. . 전역 변수를 피하세요.
2 – ==
==(또는 !=) 대신 ===를 사용하면 필요할 때 자동으로 유형 변환이 수행됩니다. ===(또는 !==) 작업은 변환을 수행하지 않습니다. 값과 유형을 비교하며 ==보다 빠른 것으로 간주됩니다.
[10] === 10 // 거짓
[10] == 10 // 참
'10' == 10 // 참
'10' === 10 // 거짓
[] == 0 // is true
[] === 0 // false
'' == false // true이지만 true == "a"는 false
'' === false // is false
3 – 클로저를 사용하여 개인 변수 구현
function Person(이름, 나이) {
this.getName = function() { return name };
this.setName = function(newName) { name = newName; } ;
this.getAge = function() { return age };
this.setAge = function(newAge) { age = newAge };
// 생성자에서 초기화됨 속성
var 직업;
this.getOccupation = function() { return 직업 };
this.setOccupation = function(newOcc) { 직업 =
newOcc };
}
4 – 문장 끝에 세미콜론을 사용하세요
문 끝에 세미콜론을 사용하는 것이 좋습니다. 대부분의 경우 JavaScript 인터프리터가 세미콜론을 추가해 주기 때문에 작성하는 것을 잊어버리더라도 경고가 표시되지 않습니다.
5 – 객체 생성자 생성
this.firstName = firstName;
this.lastName = lastName;
}
var Saad = new Person("Saad", "Mousliki") ;
6 – typeof, instanceof 및 생성자를 신중하게 사용하세요
typeof arr; // return "object"
arr instanceof Array // true
arr.constructor(); / /[]
7 – 자체 호출 함수 생성
이를 종종 자체 호출 익명 함수 또는 즉시 호출 함수 표현식이라고 합니다. (IIFE-즉시 호출 함수 표현). 생성 직후 자동으로 실행되는 함수로 보통 다음과 같습니다.
(function(){
// 자동으로 실행될 일부 비공개 코드
})();
(function(a,b){
var result = a b;
결과 반환;
})(10,20)
8- 배열에서 임의의 항목 가져오기
var randomItem = items[ Math.floor( Math.random() * items.length)];[code]
9 – 특정 범위의 난수 가져오기
이 코드 조각은 원하는 경우 매우 유용합니다. 테스트 데이터를 생성하는 데 유용합니다(예: 최소값과 최대값 사이의 임의 급여 값).
[코드]var x = Math.floor(Math.random() * (max - min 1)) min;
10 – 0과 설정된 최대값 사이에서 생성됨 배열 숫자
for( var i=1; numberArray.push(i )
11 – 임의의 영숫자 문자열 생성
var rdmstring = "";
for( ; rdmString.length return rdmString.substr(0, len);
}
12 – 숫자 배열을 뒤섞습니다
numbers = number.sort( function(){ return Math.random() - 0.5});
/* 배열 숫자는 예를 들어 [120, 5, 228, -215, 400, 458, -85411, 122205] */
13 – 문자열의 다듬기 기능
Java, C#, PHP 및 기타 여러 언어에는 문자열에서 공백을 제거하는 데 사용되는 고전적인 다듬기 함수가 있습니다. JavaScript에는 그러한 함수가 없으므로 이 함수를 String 개체에 추가해야 합니다.
String.prototype.trim = function() {return this .replace(/^s |s $/g, "");};//문자열의 내부 공백을 제외하고 문자열의 앞뒤 공백을 제거합니다.
14 – 배열 추가 다른 배열로 이동
var array2 = ["Doe" , 555 , 100];
Array.prototype.push. apply(array1, array2);
/* array1은 [12, "foo", {name "Joe"}, -2458, "Doe", 555, 100] */
//In 실제로 concat은 두 배열 연결을 직접 구현할 수 있지만 반환 값은 새 배열입니다. array1에 대한 직접적인 변경 사항은 다음과 같습니다
15 – 인수 객체를 배열로 변환
arguments 객체는 배열과 유사한 객체이지만 실제 배열은 아닙니다
16 – 다음 여부를 확인하세요. 인수가 숫자(숫자)입니다
return !isNaN(parseFloat(n)) && isFinite(n);
}
17 – 매개변수가 배열인지 확인
return Object.prototype. toString.call(obj) === '[객체 배열 ]' ;
}
참고: toString() 메서드가 재정의되면 이 기술을 사용하여 원하는 결과를 얻을 수 없습니다. 또는 다음을 사용할 수 있습니다.
Array.isArray (obj); // 새로운 배열 방식입니다
여러 프레임을 사용하지 않는 경우에는 instanceof 메소드를 사용할 수도 있습니다. 그러나 컨텍스트가 여러 개인 경우 잘못된 결과를 얻게 됩니다.
document.body.appendChild(myFrame);
var myArray = window.frames[window.frames.length-1].Array;
var arr = new myArray(a,b,10 ); / / [a,b,10]
// 인스턴스가 올바르게 작동하지 않습니다. myArray는 생성자를 잃습니다.
// 생성자는 프레임 간에 공유되지 않습니다.
arr instanceof Array;
18 – 숫자 배열에서 최대값 또는 최소값 가져오기
var maxInNumbers = Math.max.apply(Math, 숫자);
var minInNumbers = Math.min.apply(Math, 숫자);
//번역기 참고: Function.prototype.apply 메소드를 사용하여 매개변수를 전달하는 기술이 여기서 사용됩니다
19 – 배열 지우기
myArray.length = 0; // myArray는 [].
20 – 배열에서 항목을 제거하기 위해 삭제를 사용하지 마세요. .
배열에서 항목을 삭제하려면 삭제 대신 splice를 사용하세요. 삭제를 사용하면 원래 항목이 정의되지 않은 항목으로 바뀌지만 실제로 배열에서 삭제되지는 않습니다.
이 방법을 사용하지 마세요:
items.length // 11개 반환
항목 삭제[3] ; // true를 반환합니다
items.length; // 11을 반환합니다
/* 항목은 [12, 548, "a", 정의되지 않음 × 1, 5478, "foo", 8852, 정의되지 않음 × 1 , "Doe", 2154, 119] */
사용:
items.length; 11
items.splice( 3,1) ;
items.length; // 10 반환
/* 항목은 [12, 548, "a", 5478, "foo", 8852와 같습니다. , undefound × 1, "Doe" , 2154, 119] */
delete 메소드는 객체의 속성을 삭제하는 데 사용해야 합니다.
21 – 길이를 사용하여 배열 자르기
위의 배열을 지우는 방법과 유사하게 length 속성을 사용하여 배열을 자릅니다.
myArray.length = 4; // myArray는 [12, 222, 1000, 124]와 같습니다.
또한 배열의 길이를 더 크게 설정하면 현재 값보다 하나가 있으면 배열의 길이가 변경되고 정의되지 않은 새 항목이 추가됩니다. 배열의 길이는 읽기 전용 속성이 아닙니다.
myArray[myArray.length - 1] ; // 정의되지 않음
22 – 조건부 판단을 위해 논리 AND/OR 사용
var foo = 10;
foo == 10 && doSomething(); // if (foo == 10) doSomething();
foo == 5 || ; // if (foo != 5) doSomething();
논리적 AND를 사용하여 함수 매개변수의 기본값을 설정할 수도 있습니다
function doSomething(arg1){
Arg1 = arg1 || // arg1이 아닌 경우; Arg1은 기본적으로 10으로 설정됩니다
}
23 – map() 메서드를 사용하여 배열의 항목을 반복합니다
return val * val;
});
// 제곱은 [1, 4, 9, 16]
24 – 숫자를 소수점 N으로 반올림합니다. place
num = num.toFixed(4); / / num은 2.4432
25 – 부동 소수점 문제
9007199254740992 1 // 9007199254740992
9007199254740992 2 // 9007199254740994
왜 이런 일이 발생하나요? 0.1 0.2는 0.30000000000000004와 같습니다. 모든 JavaScript 숫자는 내부적으로 IEEE 754 표준을 준수하는 64비트 바이너리의 부동 소수점 숫자로 표시된다는 점을 알아야 합니다. 자세한 소개를 보려면 이 블로그 게시물을 읽어보세요. toFixed() 및 toPrecision() 메서드를 사용하여 이 문제를 해결할 수 있습니다.
26 – 객체의 내부 속성을 순회하기 위해 for-in을 사용할 때 속성 확인에 주의하세요
다음 코드 조각은 객체의 속성을 순회할 때 프로토타입 속성에 액세스하는 것을 방지할 수 있습니다
for (객체의 var 이름) {
if (object.hasOwnProperty(name)) {
// 이름으로 작업 수행
}
}
27 – 쉼표 연산자
var a = 0;
var b = ( a , 99 );
console.log(a); // a는 1과 같습니다
console.log(b); b는 99
28 – 계산이나 쿼리가 필요한 캐시 변수
jQuery 선택기의 경우 이러한 DOM 요소를 캐시하는 것이 더 좋습니다.
var navleft = document.querySelector('#left');
var navup = document.querySelector('#up');
var navdown = document.querySelector('#down');
29 – isFinite()를 호출하기 전에 매개변수 유효성 검사
isFinite("foo") // false
isFinite("10"); // true
isFinite(10) ); // 참
isFinite(정의되지 않음); // 거짓
isFinite(null) // 참 !!!
indexOf를 호출할 때 인수가 음수가 아닌지 확인하세요.
31 – JSON 기반 직렬화 및 역직렬화
var stringFromPerson = JSON.stringify(person );
/* stringFromPerson은 "{"name":"Saad","age":26,"department":{"ID":15,"name":"R&D"}}"와 같습니다. */
var personFromString = JSON.parse(stringFromPerson);
/* personFromString은 person 객체와 같습니다. */
32 – eval() 및 함수 생성자 사용을 피하세요
eval 및 Function 사용 생성자는 소스 코드를 실행 가능한 코드로 변환하기 위해 스크립트 엔진을 호출할 때마다 비용이 많이 드는 작업입니다.
var func2 = eval(functionCode);
33 – with() 사용을 피하세요
with()를 사용하면 전역 변수가 삽입됩니다. 따라서 같은 이름의 변수는 해당 값을 덮어쓰게 되어 불필요한 문제를 일으키게 됩니다.
34 – 배열을 반복하기 위해 for-in 사용을 피하세요
다음을 사용하지 마세요:
for (var i in arrayNumbers) {
sum = arrayNumbers[i];
}
더 좋은 방법은 다음과 같습니다.
for (var i = 0, len = arrayNumbers.length; i sum = arrayNumbers[i];
}
추가 이점은 다음과 같습니다. i와 len은 모두 변수의 값이 한 번만 실행되므로 다음 방법보다 효율적입니다.
왜요? arrayNumbers.length는 반복될 때마다 계산되기 때문입니다.
35 – setTimeout() 및 setInterval()을 호출할 때 문자열 대신 함수를 전달합니다.
setTimeout()이나 setInterval()에 문자열을 전달하면 마치 eval을 사용하는 것처럼 문자열을 파싱하게 되는데, 이는 시간이 많이 소요됩니다.
사용하지 마세요:
setInterval ('doSomethingPeriodically() ', 1000);
setTimeOut('doSomethingAfterFiveSeconds()', 5000)
그리고 사용:
setInterval(doSomethingPeriodically, 1000);
setTimeOut(doSomethingAfterFiveSeconds, 5000);
36 – switch/case 문을 사용하고, if/else
의 긴 목록 대신 2개 이상의 상황을 판단할 때 switch/case를 사용하는 것이 더 효율적이고 우아합니다(코드 구성이 더 쉽습니다). 단, 판단해야 할 상황이 10개 이상일 때는 스위치/케이스를 사용하지 마세요.
37 – 수치 범위 판단 시 스위치/케이스 사용
다음 상황에서는 수치 범위 판단 시 스위치/케이스를 사용하는 것이 합리적입니다.
function getCategory(age) {
var Category = "";
스위치(true) {
case isNaN(age):
Category = "연령 아님"; 반환 카테고리;
}
getCategory(5) ; // "Baby"를 반환합니다
//일반적으로 숫자 범위를 판단하려면 if/else를 사용하는 것이 더 적합합니다. 특정 값을 판단하는 데는 스위치/케이스가 더 적합합니다
38 - 생성된 객체에 프로토타입 객체를 지정
지정된 매개변수를 사용하여 객체를 생성하는 함수를 다음과 같이 작성할 수 있습니다. 프로토타입 :
코드 복사
코드는 다음과 같습니다.
function clone(object) { function OneShotConstructor(){ };
OneShotConstructor.prototype= object;
코드 복사
function escapeHTML (텍스트) { var replacements= {"": ">","&": "&", """: """};
return text.replace( /[&"]/g, function(character) {
코드 복사
코드는 다음과 같습니다.
for (i = 0, len = object.length; i
// 예외를 발생시키는 작업을 수행합니다. } catch (e) {
// 예외 처리
}
코드는 다음과 같습니다.
var object = ['foo', 'bar'], i;
try {
for (i = 0, len = object .length; i
}
catch (e) {
// 처리 예외
코드 복사
코드는 다음과 같습니다.
var xhr = new XMLHttpRequest();
xhr .onreadystatechange = function () {
clearTimeout(timeout); // 응답 데이터로 작업 수행 }
}
var timeout = setTimeout ( function () {
또한 일반적으로 동기식 Ajax 요청을 완전히 피해야 합니다.
42 - WebSocket 시간 초과 처리
일반적으로 WebSocket 연결이 생성된 후 활동이 없으면 서버는 30초 후에 연결 시간을 초과합니다. 방화벽은 일정 기간 동안 활동이 없으면 연결이 끊어집니다.
시간 초과 문제를 방지하려면 간헐적으로 빈 메시지를 서버에 보내야 할 수도 있습니다. 이렇게 하려면 다음 두 가지 기능을 코드에 추가하면 됩니다. 하나는 연결을 유지하는 기능이고 다른 하나는 연결 보류를 취소하는 기능입니다. 이 기술을 사용하면 시간 초과 문제를 제어할 수 있습니다.
timerID 사용:
function keepAlive() {
var timeout = 15000;
if (webSocket.readyState == webSocket.OPEN) {
webSocket.send('');
}
타이머Id = setTimeout( keepAlive, timeout);
}
function cancelKeepAlive() {
if (timerId) {
cancelTimeout(timerId);
}
}
keepAlive() webSOcket 연결의 onOpen() 메소드 끝에 메소드를 추가해야 하며, onClose() 메소드 끝에 cancelKeepAlive()를 추가합니다.
43 – 기본 연산자는 항상 함수 호출보다 더 효율적이라는 점을 명심하세요. 바닐라JS를 사용하세요.
예를 들어 다음을 사용하지 마십시오.
A.push(v);
사용:
44 – 인코딩 시 코드 정리 도구를 사용하는 것을 잊지 마세요. 온라인에 접속하기 전에 JSLint 및 코드 압축 도구(축소)(예: JSMin)를 사용하세요. "시간 절약 도구: 코드 미화 및 서식 지정 도구"
45 – JavaScript는 정말 놀랍습니다.
요약
그 외에도 많은 팁, 요령, 모범 사례가 있다는 것을 알고 있습니다. 제가 공유한 내용에 추가하고 싶거나 피드백 또는 수정하고 싶은 내용이 있으면 댓글로 알려주세요. .

Node.js는 크림 덕분에 효율적인 I/O에서 탁월합니다. 스트림은 메모리 오버로드를 피하고 큰 파일, 네트워크 작업 및 실시간 애플리케이션을위한 메모리 과부하를 피하기 위해 데이터를 점차적으로 처리합니다. 스트림을 TypeScript의 유형 안전과 결합하면 Powe가 생성됩니다

파이썬과 자바 스크립트 간의 성능과 효율성의 차이는 주로 다음과 같이 반영됩니다. 1) 해석 된 언어로서, 파이썬은 느리게 실행되지만 개발 효율이 높고 빠른 프로토 타입 개발에 적합합니다. 2) JavaScript는 브라우저의 단일 스레드로 제한되지만 멀티 스레딩 및 비동기 I/O는 Node.js의 성능을 향상시키는 데 사용될 수 있으며 실제 프로젝트에서는 이점이 있습니다.

JavaScript는 1995 년에 시작하여 Brandon Ike에 의해 만들어졌으며 언어를 C로 실현했습니다. 1.C Language는 JavaScript의 고성능 및 시스템 수준 프로그래밍 기능을 제공합니다. 2. JavaScript의 메모리 관리 및 성능 최적화는 C 언어에 의존합니다. 3. C 언어의 크로스 플랫폼 기능은 자바 스크립트가 다른 운영 체제에서 효율적으로 실행하는 데 도움이됩니다.

JavaScript는 브라우저 및 Node.js 환경에서 실행되며 JavaScript 엔진을 사용하여 코드를 구문 분석하고 실행합니다. 1) 구문 분석 단계에서 초록 구문 트리 (AST)를 생성합니다. 2) 컴파일 단계에서 AST를 바이트 코드 또는 기계 코드로 변환합니다. 3) 실행 단계에서 컴파일 된 코드를 실행하십시오.

Python 및 JavaScript의 미래 추세에는 다음이 포함됩니다. 1. Python은 과학 컴퓨팅 분야에서의 위치를 통합하고 AI, 2. JavaScript는 웹 기술의 개발을 촉진하고, 3. 교차 플랫폼 개발이 핫한 주제가되고 4. 성능 최적화가 중점을 둘 것입니다. 둘 다 해당 분야에서 응용 프로그램 시나리오를 계속 확장하고 성능이 더 많은 혁신을 일으킬 것입니다.

개발 환경에서 Python과 JavaScript의 선택이 모두 중요합니다. 1) Python의 개발 환경에는 Pycharm, Jupyternotebook 및 Anaconda가 포함되어 있으며 데이터 과학 및 빠른 프로토 타이핑에 적합합니다. 2) JavaScript의 개발 환경에는 Node.js, VScode 및 Webpack이 포함되어 있으며 프론트 엔드 및 백엔드 개발에 적합합니다. 프로젝트 요구에 따라 올바른 도구를 선택하면 개발 효율성과 프로젝트 성공률이 향상 될 수 있습니다.

예, JavaScript의 엔진 코어는 C로 작성되었습니다. 1) C 언어는 효율적인 성능과 기본 제어를 제공하며, 이는 JavaScript 엔진 개발에 적합합니다. 2) V8 엔진을 예를 들어, 핵심은 C로 작성되며 C의 효율성 및 객체 지향적 특성을 결합하여 C로 작성됩니다.

JavaScript는 웹 페이지의 상호 작용과 역학을 향상시키기 때문에 현대 웹 사이트의 핵심입니다. 1) 페이지를 새로 고치지 않고 콘텐츠를 변경할 수 있습니다. 2) Domapi를 통해 웹 페이지 조작, 3) 애니메이션 및 드래그 앤 드롭과 같은 복잡한 대화식 효과를 지원합니다. 4) 성능 및 모범 사례를 최적화하여 사용자 경험을 향상시킵니다.


핫 AI 도구

Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool
무료로 이미지를 벗다

Clothoff.io
AI 옷 제거제

Video Face Swap
완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

인기 기사

뜨거운 도구

Eclipse용 SAP NetWeaver 서버 어댑터
Eclipse를 SAP NetWeaver 애플리케이션 서버와 통합합니다.

MinGW - Windows용 미니멀리스트 GNU
이 프로젝트는 osdn.net/projects/mingw로 마이그레이션되는 중입니다. 계속해서 그곳에서 우리를 팔로우할 수 있습니다. MinGW: GCC(GNU Compiler Collection)의 기본 Windows 포트로, 기본 Windows 애플리케이션을 구축하기 위한 무료 배포 가능 가져오기 라이브러리 및 헤더 파일로 C99 기능을 지원하는 MSVC 런타임에 대한 확장이 포함되어 있습니다. 모든 MinGW 소프트웨어는 64비트 Windows 플랫폼에서 실행될 수 있습니다.

VSCode Windows 64비트 다운로드
Microsoft에서 출시한 강력한 무료 IDE 편집기

스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경

SublimeText3 영어 버전
권장 사항: Win 버전, 코드 프롬프트 지원!
