一些 javaScript、CSS 的优雅使用

​会当凌绝顶，一览纵山小。

一、javaScript

1、数组循环计算（更多数组对象操作）

const arr = [ 300.3, 200, 520, 30.3, 20.6 ];
//一般做法
const low_compare = []; // 比较
const low_tax = [];     // 乘积
var low_total = 0;      // 总和
for (let i = 0; i< arr.length; i++) {
    if(arr[i] > 99) {
        low_compare.push(arr[i])
    }
    low_tax.push(arr[i]*1.1);
    low_total += arr[i];
}
console.log({low_compare, low_tax, low_total});

//优秀做法
const compare = arr.filter(v => v > 99);             // 比较
const even = arr.filter(v => v % 2 == 0);            // 偶数
const tax = arr.map(v => v * 1.1);                   // 乘1.1
const mul = arr.reduce((prev, cur) => prev * cur);   // 乘积
const total = arr.reduce((prev, cur) => prev + cur); // 总和
// reduce 解释延伸
let sum = arr.reduce(function(prev, cur) {
    console.log(prev, cur);
    return prev + cur;
},0); //注意这里设置了初始值（如果数组为空，设置了初始值就不会报错）
console.log({compare, tax, mul, total, sum, even});

2、异步转同步（async + await）

const random = () => {
    return Promise.resolve(Math.ceil(Math.random()*10))
};
const sumRandomAsyncNums = async() => {
    const one = await random();
    const second = await random();
    const third = await random();
    console.log({first , second , third});
    console.log(`结果是：${first + second + third}`);
};
sumRandomAsyncNums();

3、对象的拓展运算符 查看

// 延伸操作符
const arrNum = [ 'A', 'B', 'C' ];
const afterAdd = [...arrNum, '我', '爱', '你'];   // push
const beforeAdd = [ '你', '爱', '谁', ...arrNum]; // shit
const nickName = { name: '逸曦穆泽'};
const status = { sex: '男', age: 28 ,height: 168 };
const introduce = { ...nickName, ...status};
const show = { ...nickName, motto: '一步一步渐行成路'};
console.log({ afterAdd, beforeAdd, introduce, show });

4、模板字符串

// 对象
const obj = {name: '逸曦穆泽', nature: '热爱生活', tag: ['心存逸曦', '一步一步渐行成路'], age: 28};
const { name, nature, tag } = obj;
const intro = `${name}是一个${nature}且有点傻傻小胖子，但他${tag.join('，')}`;
function horseAge(str, age){
    const ageStr = age > 30 ? '中年' : '年轻';
    return `${str[0]}${ageStr}人，${age}了还热衷学习`;
}
const intro2 = horseAge`快乐逗号是一个${obj.age}`;
console.log({ intro, intro2 });

5、参数解构

const object = {name: '快乐逗号', type: '学习', intro: '快乐与忧伤'};
function destruction({ name, type, intro }) {
    return `我${name}热爱${type}，在${intro}中荡漾`;
}
//或者
function destruction2(action) {
    const { name, type, intro } = action;
    return `${name}对${type}产生好奇，最后在${intro}中来回往返`;
}
const str = destruction(object);
const str2 = destruction2(object);
console.log({str,str2});

6、使用console

const xymz = {name: '逸曦穆泽',nature: '温文尔雅',sex: '男',age: 28};
const kldh = {name: '快乐逗号',nature: '温柔善良',sex: 'nv',age: 23};
console.log('%c 我的兄弟姐妹', 'color: darkcyan; font-weight: 600'); //使用css样式
console.table([xymz, kldh]); //表格展示
const goHome =() =>{console.trace('小胖孩赶紧回家写作业')}; //显示调用的日志
goHome();goHome();

二、CSS

1、灵活使用 flex、positio 定位

<style>
    body{margin:0;}
    .pos_middle{position:absolute;left:50%;top:50%;transform:translate(-50%, -50%);color:#ff6600;}
    .flex_middle{display:flex;justify-content:center;align-items:center;height:200px;background:darkcyan;}
</style>

<div class="flex_middle">flex居中</div>
<div class="pos_middle">定位居中</div>

2、Grid 布局

<style>
.item {
    display: grid;
    grid-template-rows: 100px 100px;grid-template-columns: auto auto auto;
    /*grid-template: 100px 100px / auto auto auto;*/
    /*grid-template：该属性是 grid-template-rows、grid-template-columns、grid-template-areas 的简写 */
    place-items:center;
    /*place-items：该属性是 align-items、justify-items 的简写*/
    grid-gap: 10px;padding: 10px;background-color:burlywood;
}
.item span{height:100%;width:100%;background-color:linen;display: flex;justify-content: center;align-items: center;}
.grid_tb{display: grid;grid-template: 'myArea myArea . . .' 'myArea myArea . . .';grid-gap: 10px;background-color: cadetblue;padding: 10px;}
.grid_tb span{text-align:center;padding:20px 0;font-size: 15px;background-color:linen;}
.grid_box{grid-area: myArea;display: flex;justify-content: center;align-items: center;}
</style>
<div class="item">
    <span>天</span>
    <span>地</span>
    <span>人</span>
    <span>早</span>
    <span>中</span>
    <span>晚</span>
</div>
<!-- 网格规定行列 -->
<div class="grid_tb">
    <span class="grid_box">生于忧患 死于安乐</span>
    <span>三里之城</span>
    <span>七里之郭</span>
    <span>尤为之重</span>
    <span>故天将降大任于斯人也</span>
    <span>必先苦其心志</span>
    <span>劳其筋骨</span>
    <span>饿其体肤</span>
    <span>空乏其身</span>
    <span>行拂乱其所为</span>
    <span>所以动心忍性</span>
    <span>曾益其所不能</span>
</div>

3、使用css的计算属性

<style>   
    .mul{width:calc(100% - 200px);font-size:calc(1rem * 1.25);padding:calc(2% + 5px);margin-left:15px;background-color:gold;}
</style>
<div class="mul">计算属性</div>

4、比较函数 min()、max()、clamp() 查看

<style>   
 .func{width: clamp(300px, 80%, 600px);font-size:clamp(13px, 18px, 28px);margin:10px auto;background-color:chartreuse;}
</style>
<div class="func">函数比较</div>

5、使用变量

<style>   
:root {--r:30;--text-color: hsl(var(--r),100%, 50%);}
.var {color: var(--text-color);padding: 10px;}
.var2 {background-color: var(--text-color);padding: 10px;}
</style>
<span class="var">使用变量1</span>
<span class="var2">使用变量2</span>

6、定义横纵比属性

<style>    
    .aspect_ratio{width:300px;aspect-ratio:16/9;margin:auto;background-color:darkseagreen;}
</style>
<div class="aspect_ratio">纵横比</div>

有意义的学习才上道

​