Js code shorthand skills!!

The so-called “lazy” does not mean that you are lazy at work, but how to simplify the code, for example, three or four lines of code and one line of code to achieve the same effect, then directly one line of code, why not? Haha, this article summarizes some of the usual development of JS code often encountered application scenarios, if you have a better method can also share ~~~

1. The ternary operator

  • When you want to write if… else… You can use the ternary operator instead
let weight = 120,text
if (weight>100){
    text = 'fat'
} else {
    text = 'thin'
}
Copy the code

Abbreviations:

let weight = 120,text
text = weight>100?'fat':'thin'
Copy the code

2. Short-circuit evaluation

  • The && operator returns false if the operation has false, and returns the value of the last expression if all operands are true
let one = 1, two = 2, three = 3;
console.log(one && two && three); // Result: 3
Copy the code
  • | | operators have true operation returns true, if all the value of the operand is false, will return the value of the last expression
let x = 110, y;
if (0 < x < 100) {
    console.log('between 0 ~ 100');
} else if (x < 200) {
    console.log('between 100 ~ 200');
} else {
    console.log('Greater than or equal to 200'); } <! - short - >let x = 110;
let y = ((x>0 && x<100) && 'between 0 ~ 100') || (x < 200 && 'between 100 ~ 200') | |'Greater than or equal to 200'
console.log(y)
Copy the code
  • A short call

3. Declare variables

let a
let b
let c = 2
Copy the code

Abbreviations:

let a,b,c=2
Copy the code

4. If exists condition abbreviation

  • Values with content or presence (value or object except 0) are generally considered true and values with no content or presence (” “,undefined,null, etc.) are considered false

    • Common truth values are:

if(a === true) {}Copy the code
if(a){}
Copy the code

The two statements are equal only if a is true

  • Common false values

If the judgment value is not true, we can do this:

if(! a){}Copy the code

5. Array simplification techniques

1. Go to heavy

<! -- The first kind -->let pigs = ['fat'.'fat fat'.'flesh'.'fat fat']
let change = Array.from(new Set(pigs))
console.log(change) // [' pangpang ',' Feifei ',' Rou Rou ']<! -- Second kind -->let pigs = ['fat'.'fat fat'.'flesh'.'fat fat']
let change = [...new Set(pigs)]
console.log(change) // [' pangpang ',' Feifei ',' Rou Rou ']
Copy the code

2.Array.from()

  • Creates a new, shallow-copy instance of an array-like or iterable without changing the original array
let pigs = [
    {name: 'fat fat'.weight: 200},
    {name: 'thin'.weight: 100}]let change = Array.from(pigs,({name}) => name)
console.log(change) // [' fat fat ',' thin thin ']
Copy the code

3. The filter () method

  • Matches any item in the array that matches the criteria
let pigs=[
{name:'fat fat'.id: 1.content:'Eating too much will make you fat'},
{name: 'thin'.id:2.content:'Eat less and you'll lose weight'}]console.log(pigs.filter(item= >item.id==1)
// [{id: 1, id: 1,content:' eat too much '}]
Copy the code

4. The map () method

  • Each element in the array returns the result of calling one of the provided functions
let pigs=[
{name:'fat fat'.id: 1.content:'Eating too much will make you fat'},
{name: 'thin'.id:2.content:'Eat less and you'll lose weight'}]let new = pigs.map(item= >item.name=item.name+"66")
console.log(new) // [" fei Fei 66", "Xiao Xiao 66"]
console.log(pigs) 
/ / [{name: 'fat fat, 66, id: 1, the content:' will eat too much fat '}, {name: '66' thin, id: 2, the content: 'will eat less thin'}]
Copy the code

5. Extension operators (…)

  • An easy and quick way to convert an array to an object for some purpose is to use the expansion notation
let pigs = [
    {name: 'fat fat'.weight: 200},
    {name: 'thin'.weight: 100}]console.log({... pigs})/ / {0: {name: "fat fat", weight: 200}, 1: {name: "thin", weight: 100}}
Copy the code
  • Multiple arrays are merged.
let pigs = ['fat fat'.'thin'],fruits = ['strawberry'.'mango.]
let all = [...pigs,...fruits]
console.log(all) 
// [" fei Fei ", "thin thin "," strawberry ", "mango "]
Copy the code

6. Template string (‘ ‘)

  • When you need to concatenate strings, try to use template strings. Template strings can make the concatenation of strings more concise and intuitive
let pig = 'fat fat',name='thin'
console.log('I eat a lot, so'+name+'Will call me'+ pig) 
// "I eat a lot, so being thin makes me fat"
console.log('I eat a lot, so${name}Will call me${pig}`)
// "I eat a lot, so being thin makes me fat"
Copy the code

6. Deconstruct assignments

Ordinary assignment

let arr=[1.2.3]
let a=arr[0]
let b=arr[1]
let c=arr[2]
console.log(a,b,c)
/ / 1, 2, 3
Copy the code

Array assignment:

let[a,b,c]=[1.2.3]
console.log(a,b,c)/ / 1, 2, 3
Copy the code

Get a value from an object:

let {a,c,d}={a:12.c:5.d:6}
console.log(a,c,d) / / 12 and 6
Copy the code

Complex deconstruction

let [json,arr,num,str]=[{a:12.b:4},2.3.6].787.'abcdes']
console.log(json,arr,num,str)
/ / {4} a: 12, b:,,3,6 [2], 787, 'abcdes'
Copy the code