JavaScript 초보자가 알아야 할 10가지 팁_javascript 팁

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

코드 복사 코드는 다음과 같습니다.

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

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

코드 복사 코드는 다음과 같습니다.

var myArray = [1, 2,3] ;
myArray.length // 3
myArray.length = 2; //마지막 요소 삭제
myArray.length = 20 // 요소가 있는 배열에 18개 요소를 추가합니다.

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

코드 복사 코드는 다음과 같습니다.

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

4, 숫자를 문자열로 변환
숫자 사용 숫자를 문자열로 변환하려면 끝에 빈 문자열을 추가합니다. 예:

코드 복사 코드는 다음과 같습니다.

var mynumber = 234;
typeof mynumber; //Number
mynumber = ''
typeof mynumber; , 함수에 얼마나 많은 변수가 필요한지 이해
이것은 함수에 얼마나 많은 변수가 필요한지 정확히 알 수 있는 훌륭한 트릭입니다. 예:

코드 복사 코드는 다음과 같습니다. function add_nums(num1, num2 ){

return num1 num2;

}
add_nums.length // 2는 add_nums


6, "arguments" 객체를 사용하여 예상되는 매개변수의 양입니다. 함수가 수신한 인수 수 이해
이 기술을 사용하면 "인수" 개체를 사용하여 함수가 수신한 인수 수를 확인할 수 있습니다. 예:

코드 복사 코드는 다음과 같습니다. function add_nums(){

return 인수 .length;

}
add_nums(23,11,32,56,89,89,89,44,6) //이것은 숫자 9를 반환합니다.


필요할 때 이 기술은 인수 개수의 유효성을 확인할 때 또는 불확실한 개수의 인수를 사용하여 함수를 생성해야 할 때 유용합니다.

코드 복사 코드는 다음과 같습니다.

function sum_ three_nums( ){
if(arguments.length!=3) throw new Error('received 'args.length' 매개변수 및 3과 함께 작동해야 함')
}
sum_ three_nums(23,43); //오류 메시지 반환
function sum_num(){
var total = 0
for(var i=0;itotal =arguments[i];
}
return total;
}
sum_num(2,34,45,56,56)

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

코드 복사 코드는 다음과 같습니다.

function insertData(name,lastName ,phone,address ){
코드는 여기에
}

재구성 후의 코드는 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.

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

기본값을 사용하려는 경우에도 유용합니다. 예:

코드 복사 코드는 다음과 같습니다.

function insertData(parameters){
var 이름 = 매개변수.이름;
var lastName = 매개변수.lastName;
var 전화 = 매개변수.phone;
var 주소 = 매개변수.address; | 'single' //상태가 속성으로 정의되지 않은 경우
//객체에서 상태 변수는 단일 값을 취합니다.
}

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

코드 복사 코드는 다음과 같습니다.

//예제 1

insertData({이름:'Mike', 성:'Rogers', 전화:'555-555-5555',address:'주소', 상태:'결혼'});

/ /예 2
var myData = { 이름:'Mike',
성:'Rogers',
phone:'555-555-5555',
주소: 'the address',
status:'married'
};
insertData(myData)


8, 함수는 데이터입니다.

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

코드 복사 코드는 다음과 같습니다.

function byId(element, event , f){

Document.getElementById(element).['on' event] = f; //f는 매개변수로 전달하는 함수입니다.
}
byId('myBtn','click' ,function() {alert('Hello World')});
데이터로서의 함수의 또 다른 예:
//예 1
function msg(m){
Alert(m); 🎜>}
//예제 2
var msg = function(m){ Alert(m);}
이러한 함수는 거의 동일합니다. 유일한 차이점은 사용 방법입니다. 예를 들어 첫 번째 함수는 선언하기 전에 사용할 수 있지만 두 번째 함수는 선언한 후에만 사용할 수 있습니다.
//예제 1
msg('Hello world');
function msg(m){
alert(m);
}
//예제 2
msg('Hello world') //JavaScript가 함수를 찾을 수 없어 작동하지 않습니다. msg는 이전에 사용되었기 때문에
var msg = function(m){ Alert(m)}


9, 로컬 객체 확장
일부 JavaScript 리더는 이를 권장하지 않습니다. 기술이지만 일부 프레임워크에서는 이미 사용하고 있습니다. 이를 통해 JavaScript API용 도우미 메서드를 만들 수 있습니다.

코드 복사 코드는 다음과 같습니다.

//배열에 대한 메소드 프로토타입을 생성합니다.
//숫자 요소만 합산합니다.
Array.prototype.sum = function(){
var len = this.length; 🎜>total = 0;
for(var i=0;iif(typeof this[i]!= 'number')
total = this[i] ;
}
전체 반환;
}
var myArray = [1,2,3,'hola']
myArray.sum(); >Array.prototype.max = function(){
return Math.max.apply('',this);
}


10, Boolean
차이점에 유의하세요. , 이렇게 하면 스크립트 디버깅 시간이 절약됩니다.

코드 복사

코드는 다음과 같습니다. '' == '0' // false 0 == '' // 참

0 == '0' // 참

false == 'false' // 거짓
false == '0' // 참
false = = 정의되지 않음 // false
false == null // false
null == 정의되지 않음 // true
true == 1 // true
'' == null // false
false == '' // true


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