JavaScript 초보자를 위한 10가지 간단한 팁

이전 프로그래밍 언어 순위에서는 곧 바뀔 JavaScript 언어를 소개했습니다. 기사에서 설명했듯이 JavaScript는 가장 역동적인 스크립팅 언어일 뿐만 아니라 가장 유용한 프로그래밍 언어 중 하나입니다. 대부분의 브라우저가 호환되므로 이러한 브라우저에서 사용할 수 있습니다. JavaScript는 매우 간단하고 널리 사용되기 때문에 매우 빠르게 수용되고 있습니다. 많은 프로그래머들은 JavaScript를 "장난감 언어"라고 생각했습니다. 그러나 AJAX는 시장에 진출한 후 완전히 다른 기능을 보여주었습니다.
이 발명 덕분에 이제 프로그래머는 데스크톱 애플리케이션의 효과를 갖는 웹 애플리케이션을 만들 수 있으며, 이는 데이터를 더 빠르게 변경할 수 있다는 점에서 유익합니다. 다음은 초보자가 JavaScript를 더 잘 사용하는 데 도움이 되는 몇 가지 간단한 팁입니다. 자바스크립트는 다양한 방식으로 사용되며, 스타일이 너무 많아서 많은 트릭을 수행할 수 있습니다. 또한, 프로그래밍 방법은 많지만 초보자가 자바스크립트를 이해하기 좋은 출발점이 될 수 있는 기술 10가지만 선정했습니다.
1, 배열 끝에 요소 추가
이 트릭을 사용하면 Length 속성을 사용하여 배열 끝에 요소를 추가할 수 있습니다. 배열의 마지막 요소를 1개 더 표시합니다. 이 방법은 "푸시" 방법과 동일합니다. 예:

var myArray = []; 
myArray[myArray.length] = 'New Element';

2, 배열의 길이를 조정합니다.
Length 속성은 읽기 전용이 아니므로 Length 속성의 값을 설정할 수 있습니다. 또한 이를 사용하여 배열 길이를 늘리거나 줄일 수 있습니다. 예:

var myArray = [1,2,3]; 
myArray.length // 3 
myArray.length = 2; //Delete the last element 
myArray.length = 20 // add 18 elements to the array; the elements have the undefined value.

3, "!!"를 사용하여 모든 데이터 유형을 부울로 변환합니다.
이 기술을 사용하면 "!!"를 사용하여 모든 데이터 유형을 변환할 수 있습니다. (예: 문자열, 숫자 또는 정수)를 부울로 변환합니다. 예:

var myString = '23255'; 
typeof myString; //String 
myString = !!myString; 
typeof myString //Boolean

4, 숫자를 문자열로 변환
이 트릭을 사용하면 숫자 끝에 빈 문자열을 추가하여 숫자를 문자열로 변환할 수 있습니다. 예:

var mynumber = 234; 
typeof mynumber; //Number 
mynumber += ''; 
typeof mynumber; //String

5. 함수에 얼마나 많은 변수가 필요한지 알아보세요
이것은 함수에 얼마나 많은 변수가 필요한지 정확히 알 수 있는 훌륭한 트릭입니다. 예:

function add_nums(num1, num2){ 
return num1 + num2; 
} 
add_nums.length // 2 is the amount of parameters expected by the function add_nums

6, 함수가 얼마나 많은 매개변수를 받는지 이해하려면 "인수" 개체를 사용하세요.
이 기술을 사용하면 "인수" 개체를 사용하여 이해할 수 있습니다. 함수 수신된 매개변수 수입니다. 예:

function add_nums(){ 
return arguments.length; 
} 
add_nums(23,11,32,56,89,89,89,44,6); //this return the number 9

이 기술은 매개변수 수의 유효성을 확인해야 하거나 불확실한 수의 매개변수를 사용하여 함수를 생성해야 할 때 유용합니다.

function sum_three_nums( ){ 
if(arguments.length!=3) throw new Error('received ' + arguments.length + ' parameters and should work with 3'); 
} 
sum_three_nums(23,43); //Return the error message 
function sum_num(){ 
var total = 0; 
for(var i=0;i<arguments .length;i++){ 
total+=arguments[i]; 
} 
return total; 
} 
sum_num(2,34,45,56,56);

7. 객체를 매개변수로 사용하여 기능 구성 및 개선
현대 웹 개발에서 객체의 가장 일반적인 용도 중 하나는 객체를 함수의 매개변수로 사용하는 것입니다. . 함수 매개변수에 대해 이 규칙을 기억하는 것은 항상 어렵습니다. 그러나 객체를 사용하면 더 이상 매개변수 규칙에 대해 걱정할 필요가 없기 때문에 매우 유익합니다. 더욱이, 이는 더욱 체계화되어 사용자가 우리가 하려는 작업을 더 잘 이해할 수 있게 해줍니다. 이 방법을 사용하면 객체를 매개변수로 사용하여 기능을 구성하고 개선할 수 있습니다. 예를 들면 다음과 같습니다.

function insertData(name,lastName,phone,address){ 
code here; 
}

리팩터링된 코드는 다음과 같습니다.

function insertData(parameters){ 
var name = parameters.name; 
var 
lastName = parameters.lastName; 
var phone = parameters.phone; 
var 
address = parameters.address; 
}

기본값을 사용하려는 경우에도 매우 유용합니다. 예를 들면 다음과 같습니다.

function insertData(parameters){ 
var name = parameters.name; 
var 
lastName = parameters.lastName; 
var phone = parameters.phone; 
var 
address = parameters.address; 
var status = parameters.status || 'single' 
//If status is not defined as a property 
//in the object the variable status 
take single as value 
}

이제 이 함수를 사용하는 것은 매우 간단합니다. 두 가지 방법으로 데이터를 보낼 수 있습니다.

//Example 1 
insertData({name:'Mike', lastName:'Rogers', 
phone:'555-555-5555',address:'the address', status:'married'}); 

//Example 2 
var myData = { name:'Mike', 
lastName:'Rogers', 
phone:'555-555-5555', 
address:'the address', 
status:'married' 
}; 
insertData(myData);

8, 함수는 데이터입니다.
함수는 함수 매개변수로 전달할 수 있는 문자열이나 숫자와 같은 데이터로, 매우 놀랍고 "멋진" 웹 애플리케이션을 만들 수 있습니다. 이 방법은 매우 유용하며 거의 모든 주류 프레임워크에서 사용됩니다. 예:

function byId(element, event, f){ 
Document.getElementById(element).['on'+event] = f; //f is the function that 
we pass as parameter 
} 
byId('myBtn','click',function(){alert('Hello 
World')}); 
Another example of functions as data: 
//Example 1 
function msg(m){ 
Alert(m); 
} 
//Example 2 
var msg = 
function(m){ alert(m);}

이러한 기능은 거의 동일합니다. 유일한 차이점은 사용 방법입니다. 예를 들어 첫 번째 함수의 경우 선언하기 전에 사용할 수 있지만 두 번째 함수는 선언된 후에만 사용할 수 있습니다.

//Example 1 
msg('Hello world'); //This will work 
function msg(m){ 
alert(m); 
} 
//Example 2 
msg('Hello world'); //Does not work 
because JavaScript cannot find the function msg because is used before is been 
declared. 
var msg = function(m){ alert(m)}

9, 로컬 객체 확장

일부 JavaScript 리더는 이 기술을 권장하지 않지만 일부 프레임워크에서는 이미 사용하고 있습니다. JavaScript를 타겟팅할 수 있습니다. 몇 가지 보조 메서드를 생성하는 API입니다.

//We create the method prototype for our arrays 
//It only sums numeric 
elements 
Array.prototype.sum = function(){ 
var len = this.length; 
total = 0; 
for(var i=0;i<len ;i++){ 
if(typeof this[i]!= &#39;number&#39;) 
continue; 
total += this[i]; 
} 
return total; 
} 
var myArray = 
[1,2,3,&#39;hola&#39;]; 
myArray.sum(); 


Array.prototype.max = function(){ 
return Math.max.apply(&#39;&#39;,this); 
}

10, 부울
이렇게 하면 스크립트 디버깅 시간을 절약할 수 있으므로 차이점에 유의하세요.

'' == '0' // false 
0 == '' // true 
0 == '0' // true 
false == 'false' 
// false 
false == '0' // true 
false == undefined // false 
false == 
null // false 
null == undefined // true 
true == 1 // true 
'' == null 
// false 
false == '' // true

이러한 스크립트를 다른 곳에서 본 적이 있다면 이 팁을 통해 이해하는 데 도움이 될 수 있습니다. 이 팁은 JavaScript가 수행할 수 있는 작업의 겉모습만 다루지는 않지만 시작에 불과합니다! 의견, 질문, 추가 팁 또는 우려 사항을 자유롭게 남겨주세요. 단, 이 글은 초보자를 위한 글이라는 점을 기억하세요! ! 동료 개발자들의 의견을 듣고 싶습니다! 즐겨보세요!