Optimize your javaScript code with the new ES feature

Use console more gracefully


const foo = {name: 'zds'.age: 12};
const bar = {name: 'dj'.age: 11};

Copy the code
💩
console.log(foo)
console.log(bar)
Copy the code
👍
  • Using object deconstruction
console.log({foo, bar})

Copy the code
  • Using CSS Styles
console.log('%c my friends'.'color: orange; font-weight: bold')
console.log({foo, bar})

Copy the code

  • Table presentation
console.table([foo, bar)

Copy the code

  • Displays the code execution time
console.time('code start')
while (i < 10000) { i++ }
console.timeEnd('code end')
Copy the code
  • Displays a log of the call
	const deleteMe =() = > {console.trace('I deleted the library')}
	deleteMe()
	deleteMe()

Copy the code

deconstruction

const turtle = {
	name: 'pkq'.legs: 4.shell: true.type: 'land'.meal: 10.diet: 'berries'
}
Copy the code
💩

function feed(animal) {
	return `Feed ${animal.name} ${animal.meal} kiols of ${animal.diet}`
}
Copy the code
👍
  • Deconstructing parameters

function feed({ name, meal, diet }) {
	return `Feed ${name} ${meal} kiols of ${diet}`;
}

/ / or

function feed(animal) {
    const { name, meal, diet } = animal;
	return `Feed ${name} ${meal} kiols of ${diet}`;
}

Copy the code

Template string

const horse = {
    name: 'Tom'.size: 'large'.skills: ['jousting'.'racing'].age: 7
}

Copy the code
💩
let intro = horse.name + 'is a ' + horse.size + ' horse silled in ' + hosre.skills.join('&');

Copy the code
👍
const {name, size, skills} = horse;
vonst intro = `${name} is a ${size}  horse silled in ${hosre.skills.join('&')}`;
Copy the code
function horseAge(str, age) {
   
    const ageStr = age > 5 ? 'old' : 'young';
    return `${str[0]}${ageStr} at ${age} years`;
}

const intro2 = horseAge`This horse is ${horse.age}`;

Copy the code

Extension operator

const pikachu = { name: 'Pikachu'};
const status = {hp: 40.attack: 60. defense: 45};

const pokemon = ['a'.'b'.'c'.'d']


Copy the code
💩
pikachu['hp'] = status.hp;
pikachu['attack'] = status.attack;
pikachu['defense'] = status.defense;

pokemon.push('e');
pokemon.push('f');
pokemon.push('g');


Copy the code
const lv10 = Object.assign(pikachu, status);

const lv11 = Object.assign(pikachu, { hp: 45});


Copy the code
👍
constlv10 = { ... pikachu, ... status};constlv11 = { ... pikachu,hp: 45};

//push
pokemon = [...pokemon, 'e'.'f'.'g'];

//shit
pokemon = [ 'e'.'f'.'g'. pokemon];Copy the code

cycle

const orders = [300.200.30.18.476];

Copy the code
💩
const total = 0;
const withTax = [];
const highValue = [];
for (i = 0; i< orders.length; i++) {
    total += orders[i];
    
    withTax.push(orders[i]*1.1);
    
    if(orders[i] > 100) {
        highValue.push(orders[i])
    }
}
Copy the code
👍
const total = orders.reduce((acc, cur) = > acc + cur);
const withTax = orders.map(v= > v*1.1);
const highValue = orders.filter(v= > v > 100)

Copy the code

Asynchronous to synchronous

const random = () = > {
    return Promise.resolve(Math.random())
}

Copy the code
💩
const sumRandomAsyncNums = () = > {
    let first, second, third;
    
    return random()
        .then(v= >{
            first = v;
            return random();
        })
        .then(v= >{
            second = v;
            return random();
        })
        .then(v= >{
            third = v;
            returnrandom(); })}Copy the code
👍
const sumRandomAsyncNums = async() = > {const first = await random();
    const second = await random();
    const third = await random();
   
    console.log(`result is ${first + second + third}`)}Copy the code

Write CSS more efficiently

Learn to use box models

🤗

When using the browser to debug styles, you can use the element’s box model directly to adjust the width, height, margin, and border size

Double-click the corresponding value, you can modify, and real-time view the effect

Use Flex instead of Position

🙁

.box {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

Copy the code

😊

.box {
    display: flex;
    justify-content: center;
    align-items: center;
}

Copy the code

The Grid layout is Great

<div class="box">
    <i>😝</i>
    <i>😝</i>
    <i>😝</i>
    <i>😝</i>
    <i>😝</i>
    <i>😝</i>
</div>

Copy the code
.box {
    display: grid;
    grid-template-columns: 1fr 500px 1fr;
    grid-template-rows: 100px 200px;
    place-items: center;
}
Copy the code

Clamp functions are really great

www.cnblogs.com/lvonve/p/13…

🙁

It’s really cracking

😊

Try using emojis as a className (as long as you don’t get screwed by your boss)

🤗

Define horizontal/vertical ratio properties

🙁

😊

Use variables to prevent unnecessary “variables” from product managers

🙁


h1 {
    color: red;
}

p {
    color: red;
}

a {
    color: red;
}

Copy the code

😊


:root {
    --text-color: red;
}

h1 {
    color: var(--text-color);
}

p {
    color: var(--text-color);
}

a {
    --text-color: green; <! --override-->color: var(--text-color);
}

Copy the code

:root {
    --r:255;
    --g:0;
    --b:0;
    --a:1;
    --text-color: rgba(var(--r),var(--g), var(--b), var(--a));
}

h1 {
    color: var(--text-color);
}

p {
    color: var(--text-color);
}

a {
    --text-color: green; <! --override-->color: var(--text-color);
}

Copy the code

Use CSS computing properties

🤗

Take deep advantage of the browser’s F12

🤗