查漏补缺知识沉淀(一)

flex的不知道的属性

从左到右：依次为order,flex-grow,flex-shrink,flex-basics

依次为：排列顺序,放大比例,缩小比例,项目主轴宽度

order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。

flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。

flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。

flex-basics 主轴宽度

flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。

算法基础

时间复杂度和计算方法

计算时间复杂度就是计算代码执行多少次，循环多少次。

例:

o(1)
n+1=2
console.log(n)

o(n)
for(let i = 0;i < n;i++){
    console.log(i)
}

o(n^2)
for(let i =0;i<n;i++){
    for(let j = 0;j < n;j++){
        console.log()
    }
}

o(logN)
let i =1
while(i<n){
    i* = 2
    console.log(n)
}

空间复杂度

空间复杂度计算就是计算声明的变量，或者内存变量是多少个

例:

O(1)
let i =1
console.log(1)

O(n)
let a = []
for(let i=0;i<n;i++){
    a.push[i]
}

O(n^2)

let a = []
for(let i = 0;i<n;i++){
    a.push([])
    for(let j = 0;j<n;j++){
        a[i][j].push(j)
    }
}

栈

后进先出的一种内存结构.比如js中的数组

let stack = []
let item1 = stack.push(1)
let item2 = stack.pop()

栈这种数据结构出现得场景

十进制转二进制在利用短除法时计算二进制,最后取的是余数从后面排到前面,采用的是栈的思想,后进先出。
有效的花括号，例如判断一堆括号是否是有效的闭合的就可以采用栈的形式，{{(())}}–true,[[{{]]}}–false

解决这个问题的思路就是使用栈,首先遍历字符串，然后如果元素碰到{([这种字符就往栈推送元素，否则判断元素和栈顶元素是否同时满足{} (),[]这种组合。满足则将元素推出栈。最后判断是否栈为空，为空则返回true

function isvalid(s){
    let stack = []
    if(stack.length %2 === 1){
        return false
    }
    for(let i = 0;i < s.length;i++){
        let c = s[i]
        if(c === '{' || c === '(' || c==='['){
            stack.push(c)
        }else{
            let p = stack[stactk.length-1]
            if(p === '(' && c ===')' || p === '{' && c === '}' && p === '[' && p === ']' ){
                stack.pop()
            }else{
                return false
            }
        }
    }
    return statck.length === 0
}

函数调用,js解析器就使用了栈

// 首先入栈func1 func2 func3 出栈先调用func3 func2 func1
const func1 = ()=>{
    fun2()
}
const func2 = ()=>{
    func3()
}

func1()

js逻辑判断优化(优化if-else语句)

优化嵌套层级

例:

function supply(fruit,num){
    const redFruit = ['apple','cherry']
    if(fruit){
    if(redFruit.includes(fruit)){
        console.log('红色水果')
        if(num>10){
            console.log('数量大于10的红果')
        }
    }
    }else{
        throw new Error()
    }
    
}

判断非状态,直接return

function supply(fruit,num){
    const redFruit = ['apple','cherry']
    if(!fruit)throw new Error()
    if(!redFruit.includes(fruit)){
        return
    }
    console.log('红色水果')
    if(num>10){
        console.log('数量大于10')
    }
}

多分支多层if-else

使用switch-case

function pick(color) {
  // 根据颜色选择水果
  switch (color) {
    case 'red':
      return ['apple', 'strawberry'];
    case 'yellow':
      return ['banana', 'pineapple'];
    case 'purple':
      return ['grape', 'plum'];
    default:
      return [];
  }
}

巧妙使用object的key属性首先定义枚举,然后参数当成key

const fruitColor = {
  red: ['apple', 'strawberry'],
  yellow: ['banana', 'pineapple'],
  purple: ['grape', 'plum'],
};
function pick(color) {
  return fruitColor[color] || [];
}

使用Map数据结构简化

const fruitColor = new Map()
.set('red', ['apple', 'strawberry'])
.set('yellow', ['banana', 'pineapple'])
.set('purple', ['grape', 'plum']);

function pick(color) {
  return fruitColor.get(color) || [];
}

利用filter简化

const fruits = [
  { name: 'apple', color: 'red' }, 
  { name: 'strawberry', color: 'red' }, 
  { name: 'banana', color: 'yellow' }, 
  { name: 'pineapple', color: 'yellow' }, 
  { name: 'grape', color: 'purple' }, 
  { name: 'plum', color: 'purple' }
];

function pick(color) {
  return fruits.filter(f => f.color === color);
}

多条件判断

或语句

如果if里面判断的或条件太多，就很难维护

if (fruit === 'apple' || fruit === 'strawberry' || fruit === 'cherry' || fruit === 'cranberries' )

这种情况优化使用includes

// 抽离条件成数组
const redFruit = ['apple','strawberry','cherry']
function supply(fruit){
    if(redFruit.includes(fruit)){
        
    }
}

const fruits = [
  { name: 'apple', color: 'red' },
  { name: 'banana', color: 'yellow' },
  { name: 'grape', color: 'purple' }
];

// 条件：是否有红色水果 
const isAnyRed = fruits.filter(f => f.color == 'red');

且语句

判断数组里面所有的水果是否都是红色

const fruits = [
  { name: 'apple', color: 'red' },
  { name: 'banana', color: 'yellow' },
  { name: 'grape', color: 'purple' }
];

function match() {
  // 条件：所有水果都必须是红色 某一个使用some
  const isAllRed = fruits.every(f => f.color === 'red');

  console.log(isAllRed); // false
}