네이티브 js의 일반적인 방법 구성

프론트 엔드 시장의 급속한 발전으로 현재 시장에서는 점점 더 많은 기술을 습득해야 하는 인재가 필요합니다. 오늘은 기본 JS 클로저, 상속, 프로토타입 체인 및 노드에 대해 요약하겠습니다. -end road.Help

다음은 개인적인 요약이고, 일부는 마스터들이 복사해 놓은 것입니다. 이제 나중에 쉽게 참조할 수 있도록 정리했습니다. (잘못된 부분이 있으면 지적해 주시면 수정하겠습니다. 가능한 한 빨리).

1. 강제 변환
은 판단해야 할 값이 참인지 거짓인지에 따라 판단되며, 이 경우 거짓 값을 제외하고는 나머지도 그만한 가치가 있습니다.

False 값에는 다음이 포함됩니다: ​ ​ 0​, ""​, null​, 정의되지 않음​, false​, NaN,

이 6개를 제외한 객체, 배열, 정규식을 포함한 나머지는 "true"입니다. , 기능 등
참고: '0', 'null', 'false', {}, []도 참 값입니다.
그럼 부울 값을 변환하는 방법을 살펴보겠습니다.
예:
먼저 3개의 변수를 선언합니다. x는 null, y는 비어 있음string, str은 문자열입니다. "!!"를 추가하면 결과가 어떻게 되는지 살펴보겠습니다.

var x=null; var str="abcd"; console.log(!!x) // false; console.log(!! str) // true;

위에서 언급했듯이 false 값은 false를 반환하고 true 값은 true를 반환합니다.

2. str 앞에 ➕ 기호를 추가하세요. +str은 숫자로 강제 변환합니다
문자열 앞에 +를 추가하면 숫자로 강제 변환됩니다.

var str="88"; console.log(+str) // 88 //그러나 혼합형 문자열인 경우 NaN으로 변환됩니다. var b="1606e"; / / NaN

3. Unreliable undef Reliable void 0
JavaScript에서 항목이 정의되지 않았는지 확인한다고 가정하면 일반적으로 다음과 같이 작성합니다. .... }

자바스크립트에서는 undefine이 신뢰할 수 없기 때문에

예를 들어:

undef를 function에 넣으면 다음과 같이 값을 할당할 수 있는 지역변수로 취급합니다.

function foo2(){ var undefine=1; console.log(undefine) } foo2(); // 1;

하지만 전역 변수가 함수 내에서 정의되면 값을 할당할 수 없습니다

var undefine ; function foo2(){ undefine=1; console.log(undefine) } foo2() // undefine

그런 다음 대신 void 0 또는 void (0)을 사용해 보겠습니다.

먼저 변수 a를 선언하고 값을 할당합니다. 정의되지 않은 경우 다음으로 void 0을 사용하여 판단합니다.

var a=undefine; // 판단하려면 void 0을 사용하세요. if(a===void 0){ console.log('true') } // true // 판단하려면 void(0)를 사용하세요( a== =void (0)){ console.log('true') } // true //마지막으로 이 두 가지의 반환 값을 인쇄합니다. console.log(void 0,void (0)) // 정의되지 않음 정의되지 않음

이제 void 0 연산을 통해 정의되지 않음을 얻을 수 있으며, 나중에 값이 정의되지 않았다고 판단해야 할 경우 void 0 또는 void(0)를 직접 사용할 수 있으며 이 두 값의 직접 반환 값은 ​​​​정의되지 않았으므로 매우 안정적입니다!

4. 문자열에도 길이 속성이 있습니다!

우리는 모든 배열에 길이 속성이 있다는 것을 알고 있습니다. 빈 배열이더라도 길이는 0입니다. 그러면 문자열이 있습니까? 다음으로 확인해 보겠습니다.

var str="sdfsd5565s6dfsd65sd6+d5fd5"; console.log(str.length) // 26

결과는 yes이므로 유형을 판단할 때 단순히 길이 속성을 사용하여 유형인지 여부를 판단할 수는 없습니다. array., 다음 방법을 사용하여 배열인지 확인할 수 있습니다:

var obj=[1,2]; console.log(toString.call(obj) === '[object Array]');

5. 무작위 배열을 생성하거나 기존 배열을 스크램블하는 방법은 무엇입니까?

때때로 프로젝트에 무작위로 뒤섞인 배열이 필요하므로 다음을 구현해 보겠습니다.

먼저 배열을 만듭니다.

var arr=[] for(var i=0;i<10;i++) { arr.push( i) } console.log(arr) // [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]

다음으로 중단해 보겠습니다.

arr.sort(()=> ;{ return Math.random() - 0.5 }) // [1, 0, 2, 3, 4, 6, 8, 5, 7, 9]

두 번째 유형 Random 메서드:

arr.sort( (a,b)=>{ return a>Math.random()*10; }) // [1, 2, 0, 6, 4, 3, 8, 9, 7, 5]

이전 일반적인 정렬은 다음과 같습니다:

arr.sort(function(a,b){ return b-a });

분석:
먼저 일반 정렬에 대해 이야기해 보겠습니다.
a, b는 배열의 두 요소를 나타냅니다. return > 0이면 b는 a 앞이고 reutrn < 0이면 a는 b 앞입니다. a=b이면 브라우저 호환성이 있습니다.
a-b 출력은 작은 것부터 큰 것 순으로 정렬되고, b-a 출력은 큰 것에서 작은 것 순으로 정렬됩니다.
그럼 이를 방해하는 방법에 대해 이야기해 보겠습니다.
말할 필요도 없이 배열을 만듭니다. 다음 단계는 js 정렬 메서드를 사용하여 이를 구현하는 것입니다. Math.random()은 0-1 사이의 임의의 소수를 구현한 다음 0.5를 뺍니다. 이때, 반환비교 후 얻은 값에 따라 정렬하게 되므로 큰 것에서 작은 것, 작은 것에서 큰 것 순으로 정상적이지 않은 정렬을 생성하게 됩니다.

스크램블링의 두 번째 방법도 정렬 방법을 따르고, a와 b를 전달한 다음 난수와 비교하는 것입니다.

6. 이전, 이후, 이전 및 이후 모든 공백 제거
공백 제거를 위해 특별히 작성된 방법 세트입니다. 모든 공백, 이전 및 이후 공백, 이전 및 이후 공백을 포함한 다양한 상황에 적합합니다.

var strr="    1 ad dertasdf sdfASDFDF DFG SDFG    "     //  type 1-所有空格，2-前后空格，3-前空格，4-后空格function trim(str,type){     switch (type){         case 1:return str.replace(/\s+/g,"");         case 2:return str.replace(/(^\s*)|(\s*$)/g, "");         case 3:return str.replace(/(^\s*)/g, "");         case 4:return str.replace(/(\s*$)/g, "");         default:return str;     } } console.log( trim(strr,1))      //  "1addertasdfsdfASDFDFDFGSDFG"

분석:
이 방법은 일반 매칭 형식을 사용합니다. 나중에 일반 매칭을 분리하여 시리즈를 요약할 예정이므로 계속 지켜봐 주시기 바랍니다! ! !

s: 공백 문자, 탭, 폼 피드 문자, 개행 문자 S: s를 제외한 모든 내용 /g: 전역 일치 ^: 줄 시작 부분에서 일치 $: 줄 끝 부분에서 일치 +: 개수 Repeats > 0 *: Repeat Times >=0 | : 또는

replace(a,b): 이 방법은 문자 생성 시 일부 문자를 다른 문자로 바꾸는 데 사용되며, 두 개의 값이 전달됩니다. 쉼표 앞의 값은 쉼표 뒤의 값으로 대체됩니다.

7. 대소문자 전환(정규 매칭, 대체)
이 방법은 주로 첫 글자를 대문자로, 첫 글자를 소문자로, 대소문자 변환, 모두 대문자로, 모두를 대소문자 변환이 필요한 일부 방법에 제공됩니다. 소문자.

유형: 1: 첫 글자 대문자 2: 홈페이지 소문자 3: 대소문자 변환 4: 모두 대문자 5: 모두 소문자

원본 문자열:

var str="sdfwwerasfddffddeerAasdgFegqer"; function changeCase(str,type) {    //这个函数是第三个大小写转换的方法     function ToggleCase(str) {         var itemText = ""         str.split("").forEach(                 function (item) {                  // 判断循环字符串中每个字符是否以a-z之间开头的并且重复大于0次                     if (/^([a-z]+)/.test(item)) {                     //  如果是小写，转换成大写                         itemText += item.toUpperCase();                     }                 //  判断循环字符串中每个字符是否以A-Z之间开头的并且重复大于0次                     else if (/^([A-Z]+)/.test(item)) {                    //   如果是大写，转换成小写                         itemText += item.toLowerCase();                     }                     else{                   //  如果都不符合，返回其本身                         itemText += item;                     }                 });         return itemText;     }   //下面主要根据传入的type值来匹配各个场景     switch (type) {          //当匹配         case 1:             return str.replace(/^(\w)(\w+)/, function (v, v1, v2) {                  //v=验证本身  v1=s ; v2=dfwwerasfddffddeerAasdgFegqer                 return v1.toUpperCase() + v2.toLowerCase();             });         case 2:             return str.replace(/^(\w)(\w+)/, function (v, v1, v2) {                 //v=验证本身  v1=s ; v2=dfwwerasfddffddeerAasdgFegqer                 return v1.toLowerCase() + v2.toUpperCase();             });         case 3:             return ToggleCase(str);         case 4:             return str.toUpperCase();         case 5:             return str.toLowerCase();         default:             return str;     } }  console.log(changeCase(str,1))   //SdfwwerasfddffddeerAasdgFegqer

분석:

split: 문자열을 분할하는 데 사용됩니다. 문자열 배열 w: 숫자 0-9 또는 문자 a-z 및 A-Z 또는 밑줄 W: w가 아닌, 위 이외의 특수 기호 등 toUpperCase: 대문자로 변환 toLowerCase: 소문자로 변환 대체 두 번째 매개변수는 함수일 수 있으며, 함수 매개변수 중 첫 번째는 그 자체이고, 두 번째는 정규 일치 콘텐츠, 세 번째는 나머지 콘텐츠와 일치합니다.

작은 실험을 통해 검증해보자:
교체할 수 있는 것이 온라인이라고 합니다. 4개 매개변수인데 4번째는 의미를 확인하지 못했습니다. 첫 번째 매개변수는 검증 자체이고, 두 번째 매개변수는 정규 매칭 결과이고, 세 번째 매개변수는 두 번째 이후 남은 값입니다. 성냥.

8. 들어오는 문자열을 n번 반복합니다.
str은 전달된 임의의 문자열이고 count는 루프 수입니다.

var str="abc";  var number=555; function repeatStr(str, count) {     //声明一个空字符串，用来保存生成后的新字符串     var text = &#39;&#39;;     //循环传入的count值，即循环的次数     for (var i = 0; i < count; i++) {        //循环一次就把字符串+到我们事先准备好的空字符串上         text += str;     }     return text; }   console.log(repeatStr(str, 3))         // "abcabcabc"   console.log(repeatStr(number, 3))      // "555555555"

분석: count 루프 수에 따라 루프 본문에 복사하고 return은 +=

9 이후의 값. 검색 문자열의 A 내용을 B 내용으로 바꿉니다

let str="abacdasdfsd" function replacementAll(str,AFindText,ARepText){ raRegExp = new RegExp(AFindText,"g"); return str.replace(raRegExp, ARepText); } console.log(replaceAll(str,"a","x")) // xbxcdxsdfsd
str: 편집해야 할 문자열 자체 AFindText: 편집해야 할 내용 replacement ARepText: 대체되는 콘텐츠
분석: 정규 생성, 콘텐츠 일치, 대체

10. 일반적인 형식, 이메일, 휴대폰 번호, 이름, 대문자, 소문자를 감지합니다. 양식 확인 중에 확인이 필요한 경우가 많습니다. 일부 콘텐츠에 대한 일반적인 확인 예시는 다음과 같습니다.

function checkType (str, type) {     switch (type) {         case 'email':             return /^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/.test(str);         case 'phone':             return /^1[3|4|5|7|8][0-9]{9}$/.test(str);         case 'tel':             return /^(0\d{2,3}-\d{7,8})(-\d{1,4})?$/.test(str);         case 'number':             return /^[0-9]$/.test(str);         case 'english':             return /^[a-zA-Z]+$/.test(str);         case 'chinese':             return /^[\u4E00-\u9FA5]+$/.test(str);         case 'lower':             return /^[a-z]+$/.test(str);         case 'upper':             return /^[A-Z]+$/.test(str);         default :             return true;     } } console.log(checkType ('hjkhjhT','lower'))   //false

분석:

checkType ('hjkhjhT','lower') '확인할 문자열', '일치 형식' 이메일: 확인 메일 전화: 확인 휴대폰 번호 tel: 확인 유선 전화 번호: 확인 번호 영어: 확인 영문자 중국어: 한자 확인 소문자: 소문자 확인 대문자: 대문자 확인

이 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

관련 읽기:

CSS 인코딩을 변환하는 방법

css3 파급 효과를 표시하려면 클릭하세요

캔버스를 사용하여 공과 마우스 사이의 상호 작용을 구현하는 방법

위 내용은 네이티브 js의 일반적인 방법 구성의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!