Some effective JS tips-JS Tutorial-php.cn

Some effective JS tips

零到壹度

Release： 2018-03-20 13:37:42

Original

1787 people have browsed it

This article mainly talks about some effective JS tips with you. Friends in need can refer to it. I hope it can help everyone.

1. Ternary operator

When you want to write an if...else statement in the project, if it is not a multiple judgment, You can consider ternary operations instead

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

Copy after login

2, for simplification (new method provided by ES6)

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

Copy after login

3, arrow function (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))

Copy after login

It seems more convenient, this will not change when the arrow function is used~!

4. Extension operator

Array merging:

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

Copy after login

Array cloning: //Because the array is a reference type, it is often necessary to clone a separate one The operation

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

Copy after login

a can be inserted at any position instead of appending only at the end, which is more convenient than concat!

Used in objects:

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

Copy after login

5. Object attribute abbreviation

When the key value is the same

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

Copy after login

6. The abbreviation of the line string

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`

Copy after login

7. The template string

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

Copy after login

${} can be directly put into the variable, which is very easy to use. Easy~remember the backticks! ! !

8. Array.find

If you want to find the required data in an array, you need to loop through it. Find in ES6 can simplify its operation

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;)

Copy after login

9. Convert pseudo array to real array (Pseudo array has no interator interface)

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

Copy after login

p is a pseudo array and cannot be traversed using methods such as forEach. You can use the more troublesome for loop

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

Copy after login

At this time, p is a truly traversable array

10. Array deduplication, Set

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

new Set() returns a pseudo array. You need to use the spread operator to convert it into a real array. Array.from() is also good. Selection

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

11. Default parameters

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

}

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

If the two parameters c and d are not passed in, then c defaults to 'Dashuaibi' and d defaults to false

12. Mandatory parameters

JS , if the function does not pass parameters, the parameters will default to undefined. This may cause a program exception, and an exception needs to be thrown

function(data) {
        if(data === undefined) {
                throw new Error(&#39;Missing&#39;)   
        } 
        return bar
}
简写:
mandatory = () => {
        throw new Erroe (&#39;Missing&#39;)
}
foo = (bar = mandatory()) => {
        return bar
}

Copy after login

The above is the detailed content of Some effective JS tips. For more information, please follow other related articles on the PHP Chinese website!