JavaScript는 세계에서 가장 인기 있는 프로그래밍 언어이며 웹 개발, 모바일 애플리케이션 개발(PhoneGap, Appcelerator), 서버측 개발(Node.js 및 Wakanda) 등에 사용될 수 있습니다. JavaScript는 많은 초보자가 프로그래밍 세계에 입문하는 첫 번째 언어이기도 합니다. 브라우저에 간단한 프롬프트 상자를 표시하거나 nodebot 또는 nodruino를 통해 로봇을 제어하는 데 사용할 수 있습니다. 명확한 구조와 고성능으로 JavaScript 코드를 작성할 수 있는 개발자는 이제 채용 시장에서 가장 인기 있는 사람들입니다.
이 기사에서는 몇 가지 예외를 제외하고 브라우저의 JavaScript 엔진과 서버측 JavaScript 인터프리터 모두에 적용되는 몇 가지 JavaScript 팁, 비밀 및 모범 사례를 공유하겠습니다.
이 글의 샘플 코드는 최신 버전의 Google Chrome 30(V8 3.20.17.15)에서 테스트를 통과했습니다.
1. 처음 변수에 값을 지정할 때는 반드시 var 키워드를 사용하세요
변수를 선언하지 않고 직접 할당하면 기본적으로 새로운 전역 변수로 사용됩니다. 전역 변수 사용을 피하세요.
2. ===를 사용하여 ==
바꾸기
== 및 != 연산자는 필요할 때 자동으로 데이터 유형을 변환합니다. 그러나 === 및 !==는 그렇지 않습니다. 값과 데이터 유형을 동시에 비교하므로 == 및 !=보다 빠릅니다.
[10] === 10 // is false [10] == 10 // is true '10' == 10 // is true '10' === 10 // is false [] == 0 // is true [] === 0 // is false '' == false // is true but true == "a" is false '' === false // is false
3. underfined, null, 0, false, NaN, 빈 문자열의 논리 결과는 모두 false
4. 줄 끝에 세미콜론을 사용하세요
실제로는 세미콜론을 사용하는 것이 가장 좋습니다. 작성하는 것을 잊어버리더라도 대부분의 경우 JavaScript 인터프리터가 자동으로 추가합니다. 세미콜론이 사용되는 이유에 대한 자세한 내용은 JavaScript의 세미콜론에 관한 진실 기사를 참조하세요.
5. 객체 생성자를 사용하세요
function Person(firstName, lastName){ this.firstName = firstName; this.lastName = lastName; } var Saad = new Person("Saad", "Mousliki");
6. typeof, instanceof 및 생성자를 신중하게 사용하세요
•typeof: 문자열 형식으로 변수의 원래 유형을 반환하는 데 사용되는 JavaScript 단항 연산자입니다. typeof null은 대부분의 개체 유형(배열 배열, 시간 날짜 등)도 반환합니다. 반환 개체
•constructor: 내부 프로토타입 속성, 코드를 통해 재정의 가능
•instanceof: JavaScript 연산자, 프로토타입 체인의 생성자에서 검색하여 발견되면 true를 반환하고, 그렇지 않으면 false를 반환합니다
var arr = ["a", "b", "c"]; typeof arr; // 返回 "object" arr instanceof Array // true arr.constructor(); //[]
7. 자기 호출 기능을 활용하라
함수는 생성 직후 자동으로 실행되며, 일반적으로 자체 호출 익명 함수(Self-Invoked Anonymous Function) 또는 직접 호출되는 함수 표현식(Immediately Invoked Function Expression)이라고 합니다. 형식은 다음과 같습니다.
(function(){ // 置于此处的代码将自动执行 })(); (function(a,b){ var result = a+b; return result; })(10,20)
8. 배열에서 멤버를 무작위로 획득
var items = [12, 548 , 'a' , 2 , 5478 , 'foo' , 8852, , 'Doe' , 2145 , 119]; var randomItem = items[Math.floor(Math.random() * items.length)];
9. 지정된 범위 내에서 난수 얻기
이 기능은 특정 범위 내의 급여 등 테스트용 가짜 데이터를 생성할 때 특히 유용합니다.
var x = Math.floor(Math.random() * (max - min + 1)) + min;
10. 0부터 지정된 값까지 숫자 배열을 생성합니다
var numbersArray = [] , max = 100; for( var i=1; numbersArray.push(i++) < max;); // numbers = [1,2,3 ... 100]
11. 임의의 영숫자 문자열 생성
function generateRandomAlphaNum(len) { var rdmString = ""; for( ; rdmString.length < len; rdmString += Math.random().toString(36).substr(2)); return rdmString.substr(0, len); }
12. 디지털 배열의 질서를 깨뜨린다
var numbers = [5, 458 , 120 , -215 , 228 , 400 , 122205, -85411]; numbers = numbers.sort(function(){ return Math.random() - 0.5}); /* numbers 数组将类似于 [120, 5, 228, -215, 400, 458, -85411, 122205] */
여기서는 JavaScript에 내장된 배열 정렬 기능을 사용합니다. 더 좋은 방법은 특수 코드(예: Fisher-Yates 알고리즘)를 사용하는 것입니다. StackOverFlow에서 이 토론을 볼 수 있습니다.
13. 문자열에서 공백 제거
Java, C# 및 PHP와 같은 언어에는 특수 문자열 공백 제거 기능이 구현되어 있지만 JavaScript에는 이러한 기능이 없습니다. 다음 코드를 사용하여 String 객체에 대한 트림 기능을 수행할 수 있습니다.
String.prototype.trim = function(){return this.replace(/^\s+|\s+$/g, "");};
새로운 JavaScript 엔진에는 이미 Trim()의 기본 구현이 있습니다.
14. 배열 사이에 추가
var array1 = [12 , "foo" , {name "Joe"} , -2458]; var array2 = ["Doe" , 555 , 100]; Array.prototype.push.apply(array1, array2); /* array1 值为 [12 , "foo" , {name "Joe"} , -2458 , "Doe" , 555 , 100] */
15. 객체를 배열로 변환
var argArray = Array.prototype.slice.call(arguments);
16. 숫자인지 확인하세요
function isNumber(n){ return !isNaN(parseFloat(n)) && isFinite(n); }
17. 배열인지 확인하세요
function isArray(obj){ return Object.prototype.toString.call(obj) === '[object Array]' ; }
但如果toString()方法被重写过得话,就行不通了。也可以使用下面的方法:
Array.isArray(obj); // its a new Array method
如果在浏览器中没有使用frame,还可以用instanceof,但如果上下文太复杂,也有可能出错。
var myFrame = document.createElement('iframe'); document.body.appendChild(myFrame); var myArray = window.frames[window.frames.length-1].Array; var arr = new myArray(a,b,10); // [a,b,10] // myArray 的构造器已经丢失,instanceof 的结果将不正常 // 构造器是不能跨 frame 共享的 arr instanceof Array; // false
18、获取数组中的最大值和最小值
var numbers = [5, 458 , 120 , -215 , 228 , 400 , 122205, -85411]; var maxInNumbers = Math.max.apply(Math, numbers); var minInNumbers = Math.min.apply(Math, numbers);
19、清空数组
var myArray = [12 , 222 , 1000 ]; myArray.length = 0; // myArray will be equal to [].
20、不要直接从数组中delete或remove元素
如果对数组元素直接使用delete,其实并没有删除,只是将元素置为了undefined。数组元素删除应使用splice。
切忌:
var items = [12, 548 ,'a' , 2 , 5478 , 'foo' , 8852, , 'Doe' ,2154 , 119 ]; items.length; // return 11 delete items[3]; // return true items.length; // return 11 /* items 结果为 [12, 548, "a", undefined × 1, 5478, "foo", 8852, undefined × 1, "Doe", 2154, 119] */
而应:
var items = [12, 548 ,'a' , 2 , 5478 , 'foo' , 8852, , 'Doe' ,2154 , 119 ]; items.length; // return 11 items.splice(3,1) ; items.length; // return 10 /* items 结果为 [12, 548, "a", 5478, "foo", 8852, undefined × 1, "Doe", 2154, 119]
删除对象的属性时可以使用delete。
21、使用length属性截断数组
前面的例子中用length属性清空数组,同样还可用它来截断数组:
var myArray = [12 , 222 , 1000 , 124 , 98 , 10 ]; myArray.length = 4; // myArray will be equal to [12 , 222 , 1000 , 124].
与此同时,如果把length属性变大,数组的长度值变会增加,会使用undefined来作为新的元素填充。length是一个可写的属性。
myArray.length = 10; // the new array length is 10 myArray[myArray.length - 1] ; // undefined
22、在条件中使用逻辑与或
var foo = 10; foo == 10 && doSomething(); // is the same thing as if (foo == 10) doSomething(); foo == 5 || doSomething(); // is the same thing as if (foo != 5) doSomething();
逻辑或还可用来设置默认值,比如函数参数的默认值。
function doSomething(arg1){ arg1 = arg1 || 10; // arg1 will have 10 as a default value if it's not already set }
23、使得map()函数方法对数据循环
var squares = [1,2,3,4].map(function (val) { return val * val; }); // squares will be equal to [1, 4, 9, 16]
24、保留指定小数位数
var num =2.443242342; num = num.toFixed(4); // num will be equal to 2.4432
注意,toFixec()返回的是字符串,不是数字。
25、浮点计算的问题
0.1 + 0.2 === 0.3 // is false 9007199254740992 + 1 // is equal to 9007199254740992 9007199254740992 + 2 // is equal to 9007199254740994
为什么呢?因为0.1+0.2等于0.30000000000000004。JavaScript的数字都遵循IEEE 754标准构建,在内部都是64位浮点小数表示,具体可以参见JavaScript中的数字是如何编码的.
可以通过使用toFixed()和toPrecision()来解决这个问题。
26、通过for-in循环检查对象的属性
下面这样的用法,可以防止迭代的时候进入到对象的原型属性中。
for (var name in object) { if (object.hasOwnProperty(name)) { // do something with name } }
27、逗号操作符
var a = 0; var b = ( a++, 99 ); console.log(a); // a will be equal to 1 console.log(b); // b is equal to 99
28、临时存储用于计算和查询的变量
在jQuery选择器中,可以临时存储整个DOM元素。
var navright = document.querySelector('#right'); var navleft = document.querySelector('#left'); var navup = document.querySelector('#up'); var navdown = document.querySelector('#down');
29、提前检查传入isFinite()的参数
isFinite(0/0) ; // false isFinite("foo"); // false isFinite("10"); // true isFinite(10); // true isFinite(undefined); // false isFinite(); // false isFinite(null); // true,这点当特别注意
30、避免在数组中使用负数做索引
var numbersArray = [1,2,3,4,5]; var from = numbersArray.indexOf("foo") ; // from is equal to -1 numbersArray.splice(from,2); // will return [5]
注意传给splice的索引参数不要是负数,当是负数时,会从数组结尾处删除元素。
31、用JSON来序列化与反序列化
var person = {name :'Saad', age : 26, department : {ID : 15, name : "R&D"} }; 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 consturctor)的开销较大,每次调用,JavaScript引擎都要将源代码转换为可执行的代码。
var func1 = new Function(functionCode); var func2 = eval(functionCode);
32、不要使用eval()或者函数构造器
eval()和函数构造器(Function consturctor)的开销较大,每次调用,JavaScript引擎都要将源代码转换为可执行的代码。
var func1 = new Function(functionCode); var func2 = eval(functionCode);
33、避免使用with()
使用with()可以把变量加入到全局作用域中,因此,如果有其它的同名变量,一来容易混淆,二来值也会被覆盖。
34、不要对数组使用for-in
避免:
var sum = 0; for (var i in arrayNumbers) { sum += arrayNumbers[i]; }
而是:
var sum = 0; for (var i = 0, len = arrayNumbers.length; i < len; i++) { sum += arrayNumbers[i]; }
另外一个好处是,i和len两个变量是在for循环的第一个声明中,二者只会初始化一次,这要比下面这种写法快:
for (var i = 0; i < arrayNumbers.length; i++)
35、传给setInterval()和setTimeout()时使用函数而不是字符串
如果传给setTimeout()和setInterval()一个字符串,他们将会用类似于eval方式进行转换,这肯定会要慢些,因此不要使用:
setInterval('doSomethingPeriodically()', 1000); setTimeout('doSomethingAfterFiveSeconds()', 5000);
而是用:
setInterval(doSomethingPeriodically, 1000); setTimeout(doSomethingAfterFiveSeconds, 5000);
36、使用switch/case代替一大叠的if/else
当判断有超过两个分支的时候使用switch/case要更快一些,而且也更优雅,更利于代码的组织,当然,如果有超过10个分支,就不要使用switch/case了。
37、在switch/case中使用数字区间
其实,switch/case中的case条件,还可以这样写:
function getCategory(age) { var category = ""; switch (true) { case isNaN(age): category = "not an age"; break; case (age >= 50): category = "Old"; break; case (age <= 20): category = "Baby"; break; default: category = "Young"; break; }; return category; } getCategory(5); // 将返回 "Baby"
38、使用对象作为对象的原型
下面这样,便可以给定对象作为参数,来创建以此为原型的新对象:
function clone(object) { function OneShotConstructor(){}; OneShotConstructor.prototype = object; return new OneShotConstructor(); } clone(Array).prototype ; // []
39、HTML字段转换函数
function escapeHTML(text) { var replacements= {"<": "<", ">": ">","&": "&", "\"": """}; return text.replace(/[<>&"]/g, function(character) { return replacements[character]; }); }
40、不要在循环内部使用try-catch-finally
try-catch-finally中catch部分在执行时会将异常赋给一个变量,这个变量会被构建成一个运行时作用域内的新的变量。
切忌:
var object = ['foo', 'bar'], i; for (i = 0, len = object.length; i <len; i++) { try { // do something that throws an exception } catch (e) { // handle exception } }
而应该:
var object = ['foo', 'bar'], i; try { for (i = 0, len = object.length; i <len; i++) { // do something that throws an exception } } catch (e) { // handle exception }
41、使用XMLHttpRequests时注意设置超时
XMLHttpRequests在执行时,当长时间没有响应(如出现网络问题等)时,应该中止掉连接,可以通过setTimeout()来完成这个工作:
var xhr = new XMLHttpRequest (); xhr.onreadystatechange = function () { if (this.readyState == 4) { clearTimeout(timeout); // do something with response data } } var timeout = setTimeout( function () { xhr.abort(); // call error callback }, 60*1000 /* timeout after a minute */ ); xhr.open('GET', url, true); xhr.send();
同时需要注意的是,不要同时发起多个XMLHttpRequests请求。
42、处理WebSocket的超时
通常情况下,WebSocket连接创建后,如果30秒内没有任何活动,服务器端会对连接进行超时处理,防火墙也可以对单位周期没有活动的连接进行超时处理。
为了防止这种情况的发生,可以每隔一定时间,往服务器发送一条空的消息。可以通过下面这两个函数来实现这个需求,一个用于使连接保持活动状态,另一个专门用于结束这个状态。
var timerID = 0; function keepAlive() { var timeout = 15000; if (webSocket.readyState == webSocket.OPEN) { webSocket.send(''); } timerId = setTimeout(keepAlive, timeout); } function cancelKeepAlive() { if (timerId) { cancelTimeout(timerId); } }
keepAlive()函数可以放在WebSocket连接的onOpen()方法的最后面,cancelKeepAlive()放在onClose()方法的最末尾。
43、时间注意原始操作符比函数调用快,使用VanillaJS
比如,一般不要这样:
var min = Math.min(a,b); A.push(v);
可以这样来代替:
var min = a < b ? a : b; A[A.length] = v;
44、开发时注意代码结构,上线前检查并压缩JavaScript代码
别忘了在写代码时使用一个代码美化工具。使用JSLint(一个语法检查工具)并且在上线前压缩代码(比如使用JSMin)。注:现在代码压缩一般推荐 UglifyJS (https://github.com/mishoo/UglifyJS2)
45、JavaScript博大精深,这里有些不错的学习资源
•Code Academy资源:http://www.codecademy.com/tracks/javascript
•Marjin Haverbekex编写的Eloquent JavaScript:http://eloquentjavascript.net/
•John Resig编写的Advanced JavaScript:http://ejohn.org/apps/learn/

Python과 JavaScript는 커뮤니티, 라이브러리 및 리소스 측면에서 고유 한 장점과 단점이 있습니다. 1) Python 커뮤니티는 친절하고 초보자에게 적합하지만 프론트 엔드 개발 리소스는 JavaScript만큼 풍부하지 않습니다. 2) Python은 데이터 과학 및 기계 학습 라이브러리에서 강력하며 JavaScript는 프론트 엔드 개발 라이브러리 및 프레임 워크에서 더 좋습니다. 3) 둘 다 풍부한 학습 리소스를 가지고 있지만 Python은 공식 문서로 시작하는 데 적합하지만 JavaScript는 MDNWebDocs에서 더 좋습니다. 선택은 프로젝트 요구와 개인적인 이익을 기반으로해야합니다.

C/C에서 JavaScript로 전환하려면 동적 타이핑, 쓰레기 수집 및 비동기 프로그래밍으로 적응해야합니다. 1) C/C는 수동 메모리 관리가 필요한 정적으로 입력 한 언어이며 JavaScript는 동적으로 입력하고 쓰레기 수집이 자동으로 처리됩니다. 2) C/C를 기계 코드로 컴파일 해야하는 반면 JavaScript는 해석 된 언어입니다. 3) JavaScript는 폐쇄, 프로토 타입 체인 및 약속과 같은 개념을 소개하여 유연성과 비동기 프로그래밍 기능을 향상시킵니다.

각각의 엔진의 구현 원리 및 최적화 전략이 다르기 때문에 JavaScript 엔진은 JavaScript 코드를 구문 분석하고 실행할 때 다른 영향을 미칩니다. 1. 어휘 분석 : 소스 코드를 어휘 단위로 변환합니다. 2. 문법 분석 : 추상 구문 트리를 생성합니다. 3. 최적화 및 컴파일 : JIT 컴파일러를 통해 기계 코드를 생성합니다. 4. 실행 : 기계 코드를 실행하십시오. V8 엔진은 즉각적인 컴파일 및 숨겨진 클래스를 통해 최적화하여 Spidermonkey는 유형 추론 시스템을 사용하여 동일한 코드에서 성능이 다른 성능을 제공합니다.

실제 세계에서 JavaScript의 응용 프로그램에는 서버 측 프로그래밍, 모바일 애플리케이션 개발 및 사물 인터넷 제어가 포함됩니다. 1. 서버 측 프로그래밍은 Node.js를 통해 실현되며 동시 요청 처리에 적합합니다. 2. 모바일 애플리케이션 개발은 재교육을 통해 수행되며 크로스 플랫폼 배포를 지원합니다. 3. Johnny-Five 라이브러리를 통한 IoT 장치 제어에 사용되며 하드웨어 상호 작용에 적합합니다.

일상적인 기술 도구를 사용하여 기능적 다중 테넌트 SaaS 응용 프로그램 (Edtech 앱)을 구축했으며 동일한 작업을 수행 할 수 있습니다. 먼저, 다중 테넌트 SaaS 응용 프로그램은 무엇입니까? 멀티 테넌트 SAAS 응용 프로그램은 노래에서 여러 고객에게 서비스를 제공 할 수 있습니다.

이 기사에서는 Contrim에 의해 확보 된 백엔드와의 프론트 엔드 통합을 보여 주며 Next.js를 사용하여 기능적인 Edtech SaaS 응용 프로그램을 구축합니다. Frontend는 UI 가시성을 제어하기 위해 사용자 권한을 가져오고 API가 역할 기반을 준수하도록합니다.

JavaScript는 현대 웹 개발의 핵심 언어이며 다양성과 유연성에 널리 사용됩니다. 1) 프론트 엔드 개발 : DOM 운영 및 최신 프레임 워크 (예 : React, Vue.js, Angular)를 통해 동적 웹 페이지 및 단일 페이지 응용 프로그램을 구축합니다. 2) 서버 측 개발 : Node.js는 비 차단 I/O 모델을 사용하여 높은 동시성 및 실시간 응용 프로그램을 처리합니다. 3) 모바일 및 데스크탑 애플리케이션 개발 : 크로스 플랫폼 개발은 개발 효율을 향상시키기 위해 반응 및 전자를 통해 실현됩니다.

JavaScript의 최신 트렌드에는 Typescript의 Rise, 현대 프레임 워크 및 라이브러리의 인기 및 WebAssembly의 적용이 포함됩니다. 향후 전망은보다 강력한 유형 시스템, 서버 측 JavaScript 개발, 인공 지능 및 기계 학습의 확장, IoT 및 Edge 컴퓨팅의 잠재력을 포함합니다.


핫 AI 도구

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

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

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

Clothoff.io
AI 옷 제거제

AI Hentai Generator
AI Hentai를 무료로 생성하십시오.

인기 기사

뜨거운 도구

SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.

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

Dreamweaver Mac版
시각적 웹 개발 도구

안전한 시험 브라우저
안전한 시험 브라우저는 온라인 시험을 안전하게 치르기 위한 보안 브라우저 환경입니다. 이 소프트웨어는 모든 컴퓨터를 안전한 워크스테이션으로 바꿔줍니다. 이는 모든 유틸리티에 대한 액세스를 제어하고 학생들이 승인되지 않은 리소스를 사용하는 것을 방지합니다.

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