일반적인 JavaScript 방법 요약_기본 지식

이 장에서는 이 포인터, 범위, 프로토타입과 같은 js의 일부 기본 원칙에 대해 심층적으로 설명하지 않습니다. 여기에는 일상적인 개발 중에 코드를 단순화하고 실행 효율성을 높이는 데 도움이 되는 몇 가지 사항이 포함되어 있습니다. 실증적인 방법으로 활용하면 길이도 길지 않고, 글 전체를 차근차근 읽어나가며 프로그래밍의 즐거움을 경험할 수 있습니다.

두 간격 내에서 난수 얻기

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

function getRandomNum(Min, Max){ // 두 간격 내에서 난수 가져오기
// @ Backfire Crazy는 첫 번째 매개변수가 두 번째 매개변수보다 클 가능성이 있으므로 판단을 조금 더 추가하는 것이 더 안정적이라고 제안했습니다
(최소 > 최대)
Max = [Min, Min = Max][0] // 두 변수 값을 빠르게 교환 ​​
 
var 범위 = 최대 - 최소 1;
var Rand = Math.random();
Min Math.floor(Rand * Range)를 반환합니다.
};

양수/음수 매개변수를 무작위로 반환

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

function getRandomXY(num){ // 양수/음수 매개변수를 무작위로 반환합니다
num = 새 숫자(num);
If (Math.random() <= 0.5)
         num = -num;
반환 번호;
}

setInterval() 또는 setTimeOut() 타이머 함수 전달 매개변수

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

var s = '나는 매개변수입니다';
함수 fn(args) {
console.log(args);
}
var a = setInterval(fn(s),100); // xxxxxx 오류 xxxxx
var b = setInterval(function(){ // 정확합니다. 익명 함수를 사용하여 시간 제한 함수를 호출하세요
fn(들);
}, 100);

setInterval() 또는 setTimeOut() 타이머가

을 재귀적으로 호출합니다.

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

var s = true;
함수 fn2(a, b){                // 3단계
만약 (들) {
         ClearInterval(a);
        clearInterval(b);
}
};
function fn(a){ // 2단계
var b = setInterval(함수(){
              fn2(a, b) // 타이머 2개 전달
}, 200)
};
var a = setInterval(function(){ // 1단계
fn(a); // b는 타이머 자체를 나타내며 좌석 매개변수로 전달될 수 있습니다
}, 100);

문자열을 숫자로 변환

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

// 새로운 Number(String)나 Number(String)가 필요하지 않습니다. 문자열
에서 0을 빼면 됩니다. var str = '100'; // 문자열: 문자열
var num = str - 0;// num: 숫자

무효값 판단

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

var s = ''; // 빈 문자열
if(!s) // 빈 문자열은 기본적으로 Boolean false로 변환되어 판단문에 직접 쓸 수 있습니다
if(s != null) // 그러나 빈 문자열 != null
if(s != 정의되지 않음) // 빈 문자열도 != 정의되지 않음

IE 브라우저의 ParseInt() 메소드

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

// 다음 변환은 IE에서는 0이고 다른 브라우저에서는 1입니다. 이는 IE 브라우저에서 숫자를 해석하는 데 사용하는 기본 시스템과 관련이 있습니다.
var iNum =parseInt(01);
// 따라서 호환되는 쓰기 방식은
var num = parsInt(new Number(01));

JS 코드를 편리하게 디버깅하는 Firebug

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

//Firebug에는 정보를 표시하는 내장 메소드를 제공하는 내장 콘솔 객체가 있습니다
/**
* 1: Alert() 또는 document.write()를 대체하는 데 사용할 수 있는 console.log()는 자리 표시자 출력, 문자(%s), 정수(%d 또는 %i), 부동 소수점 숫자(%f)를 지원합니다. ) 및 개체(%o). 예: console.log("%d년 %d월 %d일", 2011,3,26)
*2: 정보가 너무 많으면 그룹으로 표시될 수 있습니다. 사용되는 메소드는 console.group() 및 console.groupEnd()
*3: console.dir()은 객체의 모든 속성과 메서드를 표시할 수 있습니다
* 4: console.dirxml()은 웹 페이지의 노드에 포함된 html/xml 코드를 표시하는 데 사용됩니다.
* 5: 표현식이나 변수가 참인지 확인하는 데 사용되는 console.assert() 어설션
* 6: console.trace()는 함수 호출 추적을 추적하는 데 사용됩니다.
* 7: console.time() 및 console.timeEnd(), 코드의 실행 시간을 표시하는 데 사용
* 8: 성능 분석(Profiler)은 프로그램의 각 부분의 실행 시간을 분석하여 병목 현상이 발생한 위치를 찾는 것입니다. 사용되는 방법은 console.profile()....fn....console.profileEnd( )
​*/

현재 시간을 밀리초 단위로 빠르게 가져옵니다.

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

// t == 현재 시스템 밀리초 값, 이유: 부호 연산자는 Date의 valueOf() 메서드를 호출합니다.
var t = 새로운 날짜()

소수점 자리를 빠르게 가져오기

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

// x == 2, 다음 x 값은 모두 2, 음수도 변환 가능
변수 x = 2.00023 0;
// x = '2.00023' 0;

두 변수의 값을 교환합니다(중간수량은 사용하지 않음)

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

var a = 1;
var b = 2;
a = [b, b=a][0]
Alert(a '_' b) // 결과 2_1, a와 b의 값이 바뀌었습니다.

논리 OR '||' 연산자

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

// b는 null이 아닙니다: a=b, b는 null입니다: a=1.
var a = b || 1;
// 더 일반적인 사용법은 매개변수를 플러그인 메소드에 전달하고 이벤트 대상 요소를 얻는 것입니다. event = event || // IE에는 window.event 개체가 있지만 FF에는 없습니다.

메서드 객체에만 프로토타입 속성이 있습니다

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

// 메소드에는 객체 프로토타입 프로토타입 속성이 있지만 원본 데이터에는 이 속성이 없습니다. 예를 들어 var a = 1, a에는 프로토타입 속성이 없습니다.
function Person() {} // 사람 생성자
Person.prototype.run = function() { Alert('run...') } // 프로토타입 실행 방법
Person.run(); // 오류
var p1 = new Person(); // new 연산자를 사용할 때만 프로토타입 실행 메소드가 p1에 할당됩니다
p1.run(); // 실행...

요일 빠르게 확인

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

// 현재 시스템 시간이 요일인지 계산
var week = "오늘은: 주" "1일, 2일, 3일, 4일, 5일, 6일".charat(new date().getDay());

폐쇄편향

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

/**
* 클로저: 모든 js 메소드 본문을 클로저라고 부를 수 있습니다. 이는 인라인 함수가 외부 함수의 매개변수나 속성을 참조할 때만 발생하는 것이 아닙니다.
* 이 안에는 여러 하위 범위(즉, 메서드 중첩 메서드)가 있을 수 있는 독립적인 범위가 있습니다. 결국 클로저 범위는 가장 바깥쪽 메서드의 범위입니다. * 자체 메소드 매개변수와 모든 내장 함수의 메소드 매개변수를 포함하므로 내장 함수에 외부 참조가 있는 경우 참조 범위는 참조 함수가 위치한 (최상위) 메소드 범위가 됩니다
​*/
함수 a(x) {
함수 b(){
Alert(x); // 외부 함수 매개변수 참조
}
반품b;
}
var run = a('실행...')
// 범위 확장으로 인해 외부 함수 a의 변수를 참조하여 표시할 수 있게 되었습니다
실행(); // 경고(): 실행..

주소 매개변수 문자열을 가져오고 정기적으로 새로 고침

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

// 물음표를 얻으시겠습니까? 다음 내용에는 물음표가 포함되어 있습니다
var x = window.location.search
// #번호를 포함하여 경찰번호 #뒤의 내용을 가져옵니다
var y = window.location.hash
// 타이머를 사용하여 웹페이지를 자동으로 새로고침합니다
window.location.reload();

Null 및 정의되지 않음

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

/**
* 정의되지 않은 유형에는 정의되지 않은 값이 하나만 있습니다. 선언된 변수가 초기화되지 않은 경우 변수의 기본값은 정의되지 않습니다.
* Null 유형에는 null 값이 하나만 있습니다. Null은 아직 존재하지 않는 개체를 나타내는 데 사용됩니다. 함수가 존재하지 않는 개체를 반환하려고 시도함을 나타내는 데 자주 사용됩니다.
* ECMAScript는 undefound가 null에서 파생된 것으로 간주하므로 동일하게 정의됩니다.
* 그런데 어떤 경우에는 이 두 가치를 구별해야 한다면 어떻게 해야 할까요? 다음 두 가지 방법을 사용할 수 있습니다
* 판단할 때, 객체에 값이 있는지 판단할 때는 '===' 강형 판단을 활용하는 것이 가장 좋습니다.
​*/
var a;
Alert(a === null); // false, a는 빈 객체가 아니기 때문입니다
Alert(a === undefine); // true, a가 초기화되지 않았기 때문에 값이 정의되지 않았습니다
// 확장
Alert(null == undefine); // '==' 연산자가 유형 변환을 수행하므로 true입니다.
//마찬가지로
경보(1 == '1'); // 참
Alert(0 == false); // true, false는 숫자 유형 0으로 변환됩니다

메소드에 매개변수를 동적으로 추가하세요

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

// 메소드 a에는 매개변수 2가 하나 더 있습니다
함수 a(x){
var arg = Array.prototype.push.call(arguments,2);
경고(인수[0] '__' 인수[1]);
}

맞춤형 SELECT 테두리 스타일

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

<!-- 페이지에 복사하여 효과를 시험해 보세요. 스타일을 원하는 대로 맞춤 설정할 수 있습니다. -->
<span style="border:1px 단색 빨간색; 위치:절대; 오버플로:숨김;" >
<select style="margin:-2px;">
& Lt; 옵션 & gt; SELECT 테두리 스타일 사용자 정의 & lt;/option & gt; > > </선택>
</스팬>



가장 단순한 색상 팔레트

코드 복사

코드는 다음과 같습니다. <!-- JS를 사용하여 값을 추출하고 객체에 색상을 설정하세요 --> <입력 유형=색상 />

함수, 객체가 배열인가요?

코드 복사

코드는 다음과 같습니다.

var anObject = {}; //객체
anObject.aProperty = “객체의 속성”; //객체의 속성
anObject.aMethod = function(){alert(“객체의 메서드”)}; //객체의 메서드
//주로 다음 내용을 살펴보세요.
Alert(anObject[“aProperty”]); //객체를 배열로 사용할 수 있고 속성 이름을 아래 첨자로 사용하여 속성에 액세스할 수 있습니다
anObject[“aMethod”](); //객체를 배열로 사용하고 메소드 이름을 첨자로 사용하여 메소드를 호출할 수 있습니다
for( var s in anObject) //반복 처리를 위해 객체의 모든 속성과 메서드를 탐색합니다
경고(s ”는 ” typeof(anObject[s]));
// 함수 유형의 객체에도 마찬가지입니다:
var aFunction = function() {}; //함수
aFunction.aProperty = “함수 속성”; //함수 속성
aFunction.aMethod = function(){alert(“함수 메서드”)}; //함수 메서드
//주로 다음 내용을 살펴보세요.
Alert(aFunction[“aProperty”]); //함수를 배열로 사용하고 속성 이름을 아래 첨자로 사용하여 속성에 액세스할 수 있습니다
aFunction[“aMethod”](); //함수를 배열로 사용하고 메소드 이름을 첨자로 사용하여 메소드를 호출할 수 있습니다
for(var s in aFunction) //반복 처리를 위해 함수의 모든 속성과 메서드를 탐색합니다
경고(s ”는 ” typeof(aFunction[s]));

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

/**
* 예, 객체와 함수는 속성 이름이나 메소드 이름을 첨자로 사용하여 배열처럼 액세스하고 처리할 수 있습니다.
* 그렇다면 배열로 봐야 할까요, 아니면 객체로 봐야 할까요? 우리는 배열이 선형 데이터 구조로 간주되어야 한다는 것을 알고 있습니다. 선형 데이터 구조는 일반적으로 특정 규칙을 가지며 통합 배치 반복 작업에 적합합니다.
* 객체는 개별 데이터 구조로, 입자와 같이 분산되고 개인화된 사물을 설명하는 데 적합합니다.
* 그러므로 우리는 다음과 같이 질문할 수도 있습니다. JavaScript의 객체는 파동인가 입자인가? 물체에 대한 양자 이론이 있다면 대답은 파동-입자 이중성이어야 합니다!
* 따라서 자바스크립트의 함수와 객체는 객체와 배열의 특성을 모두 가지고 있습니다. 여기서 배열은 임의로 확장할 수 있는 이름-값 쌍의 모음인 "사전"이라고 합니다. 실제로 객체와 함수의 내부 구현은 사전 구조인데, 이 사전 구조는 엄격하고 절묘한 구문을 통해 풍부한 모습을 보여줍니다. 양자 역학이 입자를 사용하여 어떤 곳에서는 문제를 설명하고 처리하고 다른 곳에서는 파동을 사용하는 것과 같습니다. 필요할 때 문제를 설명하고 처리하기 위해 객체나 배열을 자유롭게 선택할 수도 있습니다. JavaScript의 이러한 놀라운 기능을 잘 이해하는 한 간결하고 강력한 코드를 많이 작성할 수 있습니다.
​*/

빈 공간을 클릭하면 특정 요소가 닫히거나 숨겨질 수 있습니다

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

/**
* 때로는 페이지에 드롭다운 메뉴나 기타 효과가 있어서 사용자가 빈 공간을 클릭하거나 다른 요소를 클릭하여 숨겨야 하는 경우도 있습니다.
* 전역 문서 클릭 이벤트에 의해 트리거될 수 있습니다
* @param {Object} "대상 객체"
​*/
$(문서).click(함수(e){
$("대상 객체").hide();
});
/**
* 하지만 한 가지 단점은 요소를 클릭하면 표시되기를 원한다는 것입니다
* 전역 시작 문서 객체까지 이벤트가 버블링되는 것을 시간 내에 막지 않으면 위 메소드가 실행됩니다
​*/
$("대상 개체").click(function(event){
이벤트 = 이벤트 || window.event;
Event.stopPropagation(); // 대상 객체를 클릭하면 시간에 따른 이벤트 버블링을 중지합니다.
$("대상 객체").toggle();
});

위 내용은 제가 직접 개발하는 동안 쉽게 사용할 수 있도록 컴파일한 몇 가지 자주 사용되는 자바스크립트 방법입니다. 또한 도움이 필요한 친구들에게도 추천합니다.

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.