flex，promise里catch，作用域和作用域链和闭包，递归展开嵌套数组

目录

1. flex里shrink，grow和basis具体应用

2 promise里的catch

3 作用域和作用域链

4 递归展开嵌套数组

---

1. flex里shrink，grow和basis具体应用

<style>
.container {
display:flex;
width:600px;
}

.div1 {
flex:1 2 500px;
}

.div2 {
flex:2 1 400px;
}
</style>

<div class="container">
  <div class="div1">
  </div>
  <div class="div2">
  </div>
</div>

500px+400px超出 600宽度300px

shrink发挥作用，按照2:1缩小比例

div1缩小 200px，div2缩小100px，最终 都是300px

例子 1：增加容器宽度 

.container {
  display: flex;
  width: 1000px;
}
.div1 {
  flex: 1 2 500px;
}
.div2 {
  flex: 1 1 400px;
}

剩余空间为100px，两者都拓宽50px，宽度分别为550px和450px

例子3:没有 flex-grow 或 flex-shrink 

.container {
  display: flex;
  width: 1000px;
}
.div1 {
  flex: 0 0 500px;
}
.div2 {
  flex: 0 0 400px;
}

这里 flex-grow 和 flex-shrink 都是 0，这意味着不管容器宽度如何，子元素宽度都固定为 500px 和 400px。

例子4:div1 div2各自有宽度

.container {
  display: flex;
  width: 600px;
}
.div1 {width:400px;
  flex: 1 2 500px;

}
.div2 {width:400px;
  flex: 2 1 400px;

}

以400px+400px，发现超出200px

.div1 的缩小比例为 2/3，所以它缩小的部分为 200px * (2/3) = 133.33px。

.div2 的缩小比例为 1/3，所以它缩小的部分为 200px * (1/3) = 66.67px。

.div1 的最终宽度：400px - 133.33px = 266.67px。

.div2 的最终宽度：400px - 66.67px = 333.33px

2 promise里的catch

  2.1 多级嵌套的 Promise 链

function fetchData1() {
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          Math.random() > 0.5 ? resolve('Data 1') : reject('Error 1');
        }, 1000);
      });
    }

    function fetchData2() {
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          Math.random() > 0.5 ? resolve('Data 2') : reject('Error 2');
        }, 1000);
      });
    }

    function fetchData3() {
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          Math.random() > 0.5 ? resolve('Data 3') : reject('Error 3');
        }, 1000);
      });
    }

    fetchData1()
      .then((data1) => {
        console.log(data1);
        return fetchData2();
      })
      .then((data2) => {
        console.log(data2);
        return fetchData3();
      })
      .then((data3) => {
        console.log(data3);
      })
      .catch((error) => {
        // console.error('Caught an error:', error);
        throw Error('apple')
      }).catch((err)=>{'pine',err})

在promise链中 如果promise出现错误被reject 错误会沿着链向下传播 直到遇到第一个catch为止,链条后续的then处理被跳过 直接进入catch

所以可能的输出是：

Data 1
 Data 2
 pine Error: apple

哪里出现 pine Error: apple 后续的就会终止

2.2多次重试机制的 Promise

function fetchDataWithRetry(retries = 3) {
      return new Promise((resolve, reject) => {
        function attempt() {
          setTimeout(() => {
            Math.random() > 0.5 ? resolve('Success') : retries-- > 0 ? attempt() : reject('Failed after retries');
          }, 1000);
        }
        attempt();
      });
    }

    fetchDataWithRetry()
      .then((result) => {
        console.log(result);
      })
      .catch((error) => {
        console.error('Error:', error);
      });

2.3 多个并发的 Promise 任务与错误处理

function fetchData(id) {
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          Math.random() > 0.5 ? resolve(`Data ${id}`) : reject(`Error from ${id}`);
        }, 1000);
      });
    }

    Promise.allSettled([fetchData(1), fetchData(2), fetchData(3)])
      .then((results) => {
        results.forEach((result) => {
          if (result.status === 'fulfilled') {
            console.log('Fulfilled:', result.value);
          } else {
            console.error('Rejected:', result.reason);
          }
        });
      });

2.4 结合 async/await 与 try/catch 捕获

function fetchData1() {
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          Math.random() > 0.3 ? resolve(`Data 1`) : reject(`Error from 1`);
        }, 1000);
      });
    }

    function fetchData2() {
        return new Promise((resolve, reject) => {
          setTimeout(() => {
            Math.random() > 0.4 ? resolve(`Data 2`) : reject(`Error from 2`);
          }, 1000);
        });
      }

      function fetchData3() {
          return new Promise((resolve, reject) => {
            setTimeout(() => {
              Math.random() > 0.6 ? resolve(`Data 3`) : reject(`Error from 3`);
            }, 1000);
          });
        }

   async function fetchData() {
      try {
        const data1 = await fetchData1();
        console.log(data1);
      } catch (error) {
        console.error('Caught an error during fetch:', error);
      }
      try{
        const data2 = await fetchData2();
        console.log(data2);
      } catch (error) {
        console.error('Caught an error during fetch:', error);
      }
        try{
          const data3 = await fetchData3();
          console.log(data3);
        } catch (error) {
          console.error('Caught an error during fetch:', error);
        }

       
      } 
    
  fetchData()

一个函数里可以有多个try-catch模块

3 作用域和作用域链

作用域： 函数和变量可见范围

作用域链：当前作用域找不到变量 到上一层找 直到全局也找不到  层层关系

shadowing：局部和外部同名 局部会遮蔽外部

局部变量可以访问外部和全局（任何地方都能访问对象）

利用闭包保存状态

执行上下文：全局，函数

执行栈：先全局执行上下文压入栈里，每次函数调用就新的执行上下文压入栈里，然后执行栈顶 弹出执行上下文

生命周期： 创建：确定this，词法和变量环境；执行：变量赋值 代码执行；回收：弹出执行上下文

js执行有解释和执行阶段，作用域是解释阶段确定的，执行上下文是执行阶段确定的

闭包形成是函数定义 作用域链和执行上下文共同作用 

function outer() {
      const value = 'outer value'; // 外部变量

      function inner() {
        const value = 'inner value'; // 内部变量，遮蔽外部变量
        console.log(value); // 输出 'inner value'
      }
    console.log(value); // 输出 'outer value'
      return inner;
      
    }

    let x = outer();
    x()

inner函数形成闭包 即使outer已执行完毕还是能访问value，然后保留对value的引用

fn.length 是一个属性，返回函数 fn 的参数个数

function curry(fn) {
  return function curried(...args) {
    if (args.length >= fn.length) {
      return fn(...args);
    }
    return function(...args2) {
      return curried(...args, ...args2);
    };
  };
}

function multiply(a, b) {
  return a * b;
}

const curriedMultiply = curry(multiply);
console.log(curriedMultiply(2)(3)); 

4 递归展开嵌套数组

//'abc'->value:'abc'
  //'[abc[def]]'->{value:'abc',children:{value:'def',children:null}}
  function digui(str,index){
    let node={value:'',children:null}
    while(index.value<str.length){
      let char=str[index.value++]
      if(char==='['){
        node.children=digui(str,index);
      }
      else if(char===']')break;
      else node.value+=char
    }
    return node

  }

  function yuan(str){
    let index={value:0}
    if(str[index.value]==='['){
      index.value++
      return digui(str,index)
    }
    else return digui(str, index)
  }
  let str1='abc'
  let str2='[abc[def]]'
  console.log(yuan(str1))
  console.log(yuan(str2))