Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.

Constant aspect ratio (CSS)

It is usually used for placeholder content before data rendering. The height is always 70% of the width. If you want half and half, the padding-top is 50%.

    width:100% ;
    height:0;
    padding-top:70%;
Copy the code

The effect is shown in figure

Complete the specified number of digits

When formatting time, use ES6 padStart and padEnd.

PadStart (targetLength,string) : header completion

PadEnd (targetLength,string) : tail completion

Anything less will add up to 0

    '12'.padStart(4.'11')  / / 1112
    '12'.padEnd(4.'11')  / / 1211

    '12'.padStart(4.'1')  / / 0112
    '12'.padEnd(4.'1')  / / 1210
Copy the code

Turn to number, turn to integer, turn to timestamp

You may often use + to convert a string to a number. It can also convert a timestamp, this time instead of new Date().getTime().

Turn to digital

    / / + operator
    let num = +'10.7'  / / 10.7
    let num2= +'- 10' / / - 10
    
    / / * operator
    let num = '10' * 1    / / 10
    let num2 = '10.7' * 1 / / 10.7
Copy the code

Turn the integer

    // ~~ ~ is reversed by bit
    let num = ~~'10.7' / / 10
    let num2 = ~~'- 10' / / - 10

Copy the code

Turn the timestamp

    +new Date(a)/ / 1634006099827
Copy the code

Empty array

In some cases arr=[] is not used. The reason is that arr=[] creates a new array and assigns references to it to the variables used. Other references are not affected, but still point to the original array, risking memory leaks, while arr.length=0 changes the original array, and other variables access the modified array.

   let arr=[1.2.4]
   let arr1=arr
   
   / / arr = []
   arr=[]
   console.log(arr) / / []
   console.log(arr1) / / 4-trichlorobenzene [1]
   //arr.length=0
   console.log(arr) / / []
   console.log(arr1) / / []
Copy the code

Removes invalid values from arrays

Sometimes, because of some exception, the contents of the array for which the data is collected are not correct, you need to process the values of the array.

/ / using the filter
let arr = [1.2.3.undefined.null.' ',]; arr = arr.filter(item= >item);
console.log(arr)  [1.2.3]
Copy the code

Exponentiation operator

Use ** from ES7

    Math.pow(2.3) / / 8
    2 ** 3  / / 8
Copy the code

Secondary initialization of data in Vue

Sometimes we need to reinitialize the data in data after we have done some more operations.

// Initializes all data in data
Object.assign(this.$data, this.$options.data());

// Initializes the specified data in data, such as form
Object.assign(this.$data, this.$options.data().form);
Copy the code

Refreshing the current page (Vue as an example)

Recently, I met a problem, there is a menu in the JS (asyncRouter. Js) maintained by static route, which needs to be displayed according to the user’s code value. After login, I saved it in the session and accessed it in the static JS, but the static JS was loaded at the beginning, so I couldn’t get the You need to refresh the page after success.

    //asyncRouter.js
    import {getSession} from '@/utils/storage'
    let code=getSession('vuex')&&getSession('vuex').user.code
    const asyncRoutes = [
        {
        path: '/system'.component: Layout,
        showRoot: true.show:code=='xxxx'.redirect: '/system/log'.meta: {
          title: 'System Administration'.icon: 'setting'.roles: ['admin'.'basic']}]Copy the code

There are two recommended solutions, the first one will have obvious flicker, the second one is better,

Vue has built-in routes

    // Add the following code where you need to refresh
    this.$router.go(0)
Copy the code

provide/inject

 // Provide a reload method in the app.vue root component using provide
<template>
    <div id="app">
    	<router-view v-if="isActive"></router-view>
    </div>
</template>
<script>
    export default {
        name: 'App',
        provide () {                                                 
            return {
                reload: this.reload                                              
            }
        },
        data() {
            return{
                isActive: true}},methods: {
            reload () {
                this.isActive = false;       
                this.$nextTick(() = > {
                    this.isActive = true; },},}</script>

Copy the code
  
   // Use inject for components that need to refresh pages
   export default {
    inject: ['reload'],                    
    data () {
        return{}},// called where the refresh is needed
    this.reload()
Copy the code

Short circuit calculation

Very useful operator, play a protective role, often used to prevent page error.

Logical and (&&) : Returns the right if the left is true; If left false, return left.

Logic or (| |) : if the left is true, returns to the left; If false on the left, return the right.

&& and | | logic is converted to Boolean value judgment or not

/ / logic
let a = 1 && 6;
console.log(a); / / output 6
let a = 0 && 6;
console.log(a); //输出0

/ / logical or
let a = 0 || 6; / / output 6
let a = 1 || 6; / / output 1
Copy the code

Some special cases & on the left is null/undefined/NaN, the result is null/undefined/NaN, similarly | | is this a few special values at the same time, both sides return results.

This article continues to be updated…