효과적인 JS 팁-JS 튜토리얼-php.cn

효과적인 JS 팁

零到壹度

풀어 주다： 2018-03-20 13:37:42

원래의

1816명이 탐색했습니다.

이 글은 주로 효과적인 JS 팁에 대해 이야기합니다. 필요한 친구들이 참고하면 도움이 될 것입니다.

1. 삼항 연산자

프로젝트에 if...else 문을 작성하려는 경우 다중 판단이 없으면 대신 삼항 연산을 고려할 수 있습니다.

let a = 1, answer = null
if( a > 5 ) {
    answer = &#39;大帅比&#39;
}else{ 
    answer = &#39;前端强无敌&#39;
}
简写：answer = a > 5 ?  &#39;大帅比&#39; : &#39;前端强无敌&#39;

로그인 후 복사

2. 제공: ES6)

for(let i = 0; i < arr.length; i++){}
简写：for (let [index, item] of arr.entries()) {
        index为下标，item为每一项内容
}

로그인 후 복사

3. 화살표 함수(es6)

function test （）{ console.info（name） }
setTimeout（function() { console.info(&#39;&#39;okay) }， 1500）
arr.forEach(function (item) {    
    console.info(item)
})
简写： let test = （args） => {  console.info(name) }
setTimeout(() => { console.info(&#39;okay&#39;) }, 1500)
arr.forEach(item => console.info(item))

로그인 후 복사

는 화살표 함수를 사용해도 바뀌지 않습니다~!

4. 확산 연산자

배열 병합:

const a = [1, 3, 5]
const nums = [2, 4, 6].concat(a);

로그인 후 복사

배열 복제: //배열은 참조 유형이므로 작업을 위해 별도의 배열을 복제해야 하는 경우가 많습니다

const arr = [1, 2, 3, 4]
cons arr2 = arr.slice()
简写： const nums = [2, 4, 6,  ...a]  // [2, 4, ...a, 6]

로그인 후 복사

a는 언제든지 삽입할 수 있습니다. 위치를 그냥 추가하는 것보다 끝에 추가하는 것이 연결하는 것보다 더 편리합니다!

객체에 사용:

const obj =  { a:1 , b:2, c:3,  ...obj2 } =  { a:1 , b:2, c:3,  d:5, e: 6}
obje = {d:5, e: 6}

로그인 후 복사

5. 객체 속성 약어

키 값이 동일한 경우

const obj = {x:x，y:y}
简写：cont obj = {x，y}

로그인 후 복사

6. 행 문자열 약어

const learn = &#39;study vue react rn nih\n\t&#39;
                     +  &#39;study vue react rn nih\n\t&#39;
                     +  &#39;study vue react rn nih\n\t&#39;
                     +  &#39;study vue react rn nih\n\t&#39;
                     +  &#39;study vue react rn nih\n\t&#39;
简写：const learn = `study vue react rn nih
                                  study vue react rn nih
                                 study vue react rn nih
                                 study vue react rn nih
                                study vue react rn nih`

로그인 후 복사

7. $ {}는 변수에 직접 넣을 수 있습니다. 사용하기가 매우 쉽습니다. 백틱을 사용하는 것을 잊지 마세요! ! !

8. Array.find

배열에서 필요한 데이터를 찾으려면 ES6

const url = &#39;http://ab.cc.com/&#39; + data + &#39;/beta/info&#39;
简写：const url = `http://ab.cc.com/${data}/beta/info`

로그인 후 복사

9에서 Find 작업을 단순화해야 합니다. (의사 배열에는 인터레이터 인터페이스가 없습니다.)

cont data = [
{&#39;type&#39;: &#39;dog&#39;,  &#39;color&#39;: &#39;red&#39;},
{&#39;type&#39;: &#39;cat&#39;, &#39;color: &#39;white&#39;},
{&#39;type&#39;: &#39;bird&#39;, &#39;color&#39;: &#39;blue&#39;}
]
function findeClor(color) {
        for(let i = 0; i < data.length; i ++ ) {
                if(data[i].type== &#39;cat&#39; && data[i].color== color) {
                        return data[i]
                } 
        }
}
简写：let cat = data.find(item => item.type == &#39;cat&#39; && item.color== &#39;red&#39;)

로그인 후 복사

p는 의사 배열이며 forEach와 같은 메서드를 사용하여 탐색할 수 없습니다. 더 까다로운 for 루프만 사용할 수 있습니다.

let p = document.getElementById(&#39;p&#39;)

로그인 후 복사

이때 p는 실제로 탐색 가능한 배열입니다.

10. 배열 중복 제거, Set

let a = [2, 3, 1, 2]

new Set()은 의사 배열을 반환하며 이를 실제 배열로 변환하려면 스프레드 연산자를 사용해야 합니다. , 배열 .from()도 좋은 선택입니다

let b = [... new Set(a)] // [2, 3, 1]

11. 기본 매개변수

function test(a, b, c = 'Dashuaibi', d = false){

}

test('front-end', 'Beima')

전달된 매개변수 c와 d가 없습니다. 이때 c의 기본값은 ' Dashuaibi', d의 기본값은 false

12. 필수 매개변수

JS에서 함수가 매개변수를 전달하지 않으면 매개변수는 기본적으로 정의되지 않음으로 설정됩니다. 이로 인해 프로그램 예외가 발생할 수 있으며 예외가 발생해야 합니다

let p = Array.from(p)  或者 let p = [...p]

로그인 후 복사

위 내용은 효과적인 JS 팁의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!