수집할 가치가 있는 21가지 자바스크립트 팁

1 Javascript 배열을 CSV 형식으로 변환

먼저 다음 애플리케이션 시나리오를 고려하십시오. 이제 쉼표로 구분된 CSV 형식 파일로 변환해야 하는 Javscript 문자(또는 숫자) 배열이 있습니다. 그런 다음 다음 팁을 사용할 수 있습니다. 코드는 다음과 같습니다.

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

var Fruits = ['apple', ' 복숭아', '오렌지', '망고'];
var str = Fruits.valueOf();

생산량: 사과,복숭아,오렌지,망고

　 그 중 valueOf() 메소드는 Javascript 배열을 쉼표로 구분된 문자열로 변환합니다. 쉼표를 사용하여 구분하는 것을 원하지 않는 경우(예: |를 사용하여 구분)에는 다음과 같은 조인 방법을 사용하시기 바랍니다.

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

var Fruits = ['apple', ' 복숭아', '오렌지', '망고'];
var str =fruit.join("|");

출력: apple|peaches|oranges|mangoes

2 CSV 형식을 다시 Javscript 배열로 변환

그렇다면 CSV 형식의 문자열을 다시 자바스크립트 배열로 변환하는 방법은 무엇일까요? 분할() 메서드를 사용하면 지정된 문자를 사용하여 구분할 수 있습니다.

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

var str = "사과, 복숭아, 오렌지 , 망고" ;
var FruitArray = str.split(",");

출력 FruitArray[0]: 사과

3 인덱스를 기반으로 배열에서 요소 제거

Javascript 배열에서 요소를 제거해야 하는 경우 splice 메소드를 사용할 수 있습니다. 이 방법은 전달된 매개변수 n(Javascript 배열의 0번째 위치에서 계산됨)을 기반으로 배열에서 n번째 요소를 제거합니다.

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

function RemoveByIndex(arr, index) {
 arr .splice(index, 1);
}
test = new Array();
test[0] = 'Apple';
test[1] = '공';
test [2] = 'Cat';
test[3] = 'Dog';
alert("요소 제거 전 배열: " test);
removeByIndex(test, 2);
alert("요소 제거 후 배열: " test);

최종 출력은 Apple,Ball,Dog

　　4 요소의 값에 따라 배열요소의 값을 제거

다음 기술은 주어진 값을 기반으로 배열의 요소를 삭제하는 것입니다.

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

function RemoveByValue(arr, val) {
 for (var i=0; i if(arr[i] == val) {
 arr.splice(i, 1);
 break;
 } 
 }
}
var somearray = ["월", "화", "수", "목"]
removeByValue(somearray, "화");
/ /somearray will 포함될 요소는 "월", "수", "목"입니다

물론 더 좋은 방법은 다음 코드와 같이 프로토타입 방법을 사용하여 이를 달성하는 것입니다.

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

Array.prototype.removeByValue = function(val ) {
 for(var i=0; i if(this[i] == val) {
 this.splice(i, 1);
 break;
 }
 }
}
//..
var somearray = ["월", "화", "수", "목"]
somearray.removeByValue ("화요일");

5 문자열을 지정하여 동적으로 메소드 호출

런타임에 기존 메서드를 동적으로 호출하고 매개변수를 전달해야 하는 경우가 있습니다. 이것을 달성하는 방법은 무엇입니까? 다음 코드가 해당됩니다:

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

var strFun = "someFunction"; //someFunction은 정의된 메소드 이름입니다.
var strParam = "this는 매개변수입니다."; //메서드에 전달할 매개변수
var fn = window [strFun];

//메서드를 호출하고 매개변수를 전달합니다
fn(strParam);

6 1에서 N까지 난수 생성

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

varrandom=Math.floor(Math. random() * N 1); 
//1에서 10 사이의 난수 생성
var random = Math.floor(Math.random() * 10 1)//난수 생성 1~100 사이의 난수
var random = Math.floor(Math.random() * 100 1);

7 브라우저 종료 이벤트 캡처

사용자가 브라우저를 닫을 때 저장되지 않은 항목을 저장하라는 메시지를 표시하려는 경우가 많습니다. 다음 Javascript 기술은 다음과 같습니다.

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

< body onbeforeunload= "fnUnloadHandler()">
…………

onbeforeunload() 이벤트에 대한 코드를 작성하세요

8 뒤로가기 버튼 눌렸는지 확인

마찬가지로 사용자가 뒤로가기 키를 눌렀는지 확인할 수 있으며, 코드는 다음과 같습니다.

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

window.onbeforeunload = function() {
 return "당신의 작업이 손실됩니다.";
};

9 양식 데이터가 변경되었는지 확인

때로는 사용자가 양식의 내용을 수정했는지 확인해야 할 경우 다음 기술을 사용할 수 있습니다. 양식의 내용이 수정된 경우 true를 반환합니다. 수정되지 않은 경우 false를 반환합니다. 코드는 다음과 같습니다.

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

function formIsDirty(form) {
 for (var i = 0; i < form.elements.length; i ) {
 var element = form.elements[i];
 var type = element.type;
 if (type == "체크박스" || 유형 == "라디오") {
       if (element.checked != element.defaultChecked) {
                                                                                                                                                         ' || 유형 == "비밀번호" ||
 유형 == "텍스트 " || type == "textarea") {
 if (element.value != element.defaultValue) {
 return true ;
 }
 }
 else if (type == " select-one" || 유형 == "select-multiple") {
 for (var j = 0; j < element.options.length; j ) {
                                              ~ > return false;

window.onbeforeunload = function(e) {
 e = e || window.event 
 if (formIsDirty (document.forms["someForm"] )) {
 // IE 및 Firefox
 if (e) {
 e.returnValue = "저장되지 않은 변경 사항이 있습니다.";
 }
 // Safari 브라우저
 return " 저장되지 않은 변경 사항이 있습니다.";
 }
};




10 뒤로 키 사용을 완전히 비활성화합니다
 


 경우에 따라 사용자가 뒤로 버튼을 클릭하는 것을 방지하기 위해 다음 팁을 페이지에 배치할 수 있습니다. 코드는 다음과 같습니다. 