flex，promise里catch，作用域和作用域链和闭包，递归展开嵌套数组
目录
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))
原文地址：https://blog.csdn.net/alicca/article/details/142424856
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！