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：增加容器宽度

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

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

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

css">.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各自有宽度

css">.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 链

javascript">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

javascript">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 任务与错误处理

javascript">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 捕获

javascript">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执行有解释和执行阶段，作用域是解释阶段确定的，执行上下文是执行阶段确定的

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

javascript">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 的参数个数

javascript">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 递归展开嵌套数组

javascript">//'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))