Type conversion

Quick turn Number

var a = '1'
console.log(typeof a)    // string
console.log(typeof Number(a)) // Number a: 1
console.log(typeof +a) // Number a: 1
Copy the code

Quick turn Boolean

In JS,! The reverse operation converts a variable to a Boolean type, null, undefined, and empty string true, and the rest false. But!!!!!

var a = 0
console.log(Boolean(a)) // false
console.log(! a)// true
console.log(!! a)// false // is often used to get a Boolean return value
Copy the code

A common scenario is to determine if variable A is not null, undefined, or an empty string, i.e. when a has content

/ / mad
if(a! =null&&typeof(a)! =undefined&&a! =' ') {// a code is executed only when it has content
}
/ / concise
if(!!!!! a) {// a code is executed only when it has content
}
Copy the code

Mix writing

Convert to Number and then to Boolean

var a = '0'
​
console.log(!! a)// Direct transfer will return true
console.log(!! +a)// Set Number to Boolean
Copy the code

Js and CSS styles

Template needs to define a style dynamically, usually as follows:

<template>
  <div :style="{ color: textColor }">Text</div>
</template>
​
<script>
export default {
  data() {
    return {
      textColor: '#ff5000'
    }
  }
}
</script>
Copy the code

High-end practices:

  • definescssfile
$menuActiveText: #409EFF;
​
:export {
  menuActiveText: $menuActiveText;
}
Copy the code

  • Reference in js:

    • Use import to reference SCSS files
    • Defining computed turns styles objects into responsive objects
    • Use the styles object in template
<template>
  <div :style="{ color: styles.menuActiveText }">Text</div>
</template>

<script>
import styles from '@/styles/variables.scss'
export default {
  computed: {
    styles() {
      return styles
    }
  }
}
</script>
Copy the code

An array of deconstruction

Deconstruct by variable position

let [a, b, c] = [1.2.3]
// a:1 b:2 c:3
Copy the code

The above code shows that you can extract values from the corresponding positions in the array and assign values to variables

let [x] = ["first"."second"."third"]    // x: first
let [, x] = ["first"."second"."third"]    // x: second
let [ , , x] = ["first"."second"."third"]    // x: third
Copy the code

Extended operator

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

Object to deconstruct

Properties in an object are unordered, and the destructed variable must have the same name as the property. If the variable name does not exist in the attribute, deconstruction fails and the value is undefined.

let { bar, foo } = { foo: 'aaa'.bar: 'bbb' };
console.log(bar, foo)    // bbb aaa

let { a, b } = { foo: 'aaa'.bar: 'bbb' };
console.log(a,b)    // undefined undefined
Copy the code

If you must assign a deconstructed attribute to a variable with a different name, you must write it in the following form

let { foo: myFoo } = { foo: 'aaa'.bar: 'bbb' };
// myFoo: aaa
// foo: foo is not defined
Copy the code

Extract an attribute from the first object element of the array. For example, the Err object contains an error array, and each of the errors array objects contains a MSG attribute

err = {
  errors: [{msg: 'this is a message'}}]Copy the code

The method of extracting MSG quickly is as follows:

const [{ msg }] = err.errors
Copy the code

If you don’t deconstruct it, it’s written as:

const msg = err.errors[0].msg
Copy the code

Quickly extract multiple return values from a function

function getUserInfo(uid) {
    // ...
 
    return {
        status: true.data: {
            name: 'little red'
        },
        msg: 'Request successful'
    };
};
 
const { status, data, msg: message } = getUserInfo(123);
Copy the code

practice

1. According toDog APIReturn resultresGet photoidandurl

/ / get the url
let [{ url }] = res
console.log(url)    // https://cdn2.thedogapi.com/images/Z8LiOtceX.jpg
Copy the code
/ / to get id
let [{ breeds: [{id}] }] = res
console.log(id)    / / 3
Copy the code

2. Merge arrays

const left = [1.2.3.4]
const mid = 5
const right = [6.7.8.9]
Copy the code

Merge the above two arrays left and right and the middle number mid into one array

console.log([...left, mid, ...right])    // [1, 2, 3, 4, 5, 6, 7, 8, 9]
Copy the code