题目描述：
利用Promise实现交替打印红绿黄，红灯持续2s，绿灯持续3s，黄灯持续1s，不断循环。

代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

async function handleTrafficLights() {
    while (true) {
        await lightsChange('red', 2000);
        await lightsChange('green', 3000);
        await lightsChange('yellow', 1000);
    }
}
 
function lightsChange(color, delay) {
    return new Promise((resolve) => {
        console.log(color);
        setTimeout(() => {
            resolve();
        }, delay);
    });
}
 
handleTrafficLights();

图示：

数组求和

1
2

const arr = [1, 2, 3, 4, 5, 6, 7, 8]
const sum = arr.reduce((a, b) => a + b)

删除重复数据

1
2
3
4
5

const array = [1, 2, 3, 'a', 'b', 'c', 1, 2, 3, 'a', 'b', 'c'];
const res = array.reduce((arr, curr) => {
    if (!arr.includes(curr)) arr.push(curr)
    return arr
}, [])

数据项拼接

1
2
3
4
5

const arr = [1, 2, 3, 4, 5]
const res = arr.reduce((html, curr) => {
    html += `<li>${curr}</li>`
    return html
}, '')

函数式编程实际上比较复杂，所以本文也只是泛泛而谈，简单聊聊函数式编程特点以及函数式编程思维在js日常开发中的体现
函数式编程特点：

函数是“一等公民”

这点在js中体现得很明显了，函数是“一等公民”意味着意味着函数与其他数据类型一样，处于平等地位，可以赋值给其他变量，也可以作为参数，传入另一个函数，或者作为别的函数的返回值。

最近在菜鸟教程看了 grid 布局的相关文档，只能说 grid 布局真是非常强大的一种 css 布局方式，我与它相见恨晚
菜鸟教程链接：https://www.runoob.com/css3/css-grid.html

很多时候后端通过接口传过来的数据是一个由对象组成的数组，而对象里的属性名和我们前端需要的可能会有出入，所以不能直接拿来用
这个时候就需要对数据进行一下处理，批量将属性名进行转换

例如，后端传来的数据是这样的：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

[
    {
        date_value: '20220211',
        name_value: 'jake',
        text_value: 'hello'
    },
    {
        date_value: '20220212',
        name_value: 'tom',
        text_value: 'hello, i am tom'
    },
    {
        date_value: '20220213',
        name_value: 'lucy',
        text_value: 'hello, i am lucy'
    }
]

如果前端需要的字段分别是date, name, text，就需要进行转换，把date_value, name_value, text_value分别转换为date, name, text
实现转换的代码如下：

1
2
3
4
5
6
7
8
9

//假设res是前端请求过来的数据
const formattedRes = res.map((item) => {
    const { date_value: date, name_value: name, text_value: text } = item
    return {
        date,
        name,
        text
    }
})

也可以这样写：

1
2
3
4
5
6
7

const formattedRes = res.map(({ date_value: date, name_value: name, text_value: text }) => {
    return {
        date,
        name,
        text
    }
})

BOM概述

BOM（浏览器对象模型）提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是window
window对象是浏览器的顶级对象，它具有双重角色：
1.它是js访问浏览器窗口的一个接口
2.它是一个全局对象。定义在全局作用域中的变量、函数都会成为window的属性和方法

window对象常见事件

1.window.onload 窗口加载事件（文档内容完全加载会触发该事件）
2.DOMContentLoaded 当dom元素加载完成后触发
3.onresize 调整窗口大小加载事件

location对象

window的location属性用于获取或设置窗口的url
常用属性：
1.location.href 整个url
2.location.search url参数

navigator对象

navigator对象包含有关浏览器的信息，常用的属性是userAgent，它是浏览器用于HTTP请求的用户代理头的值

history对象

history对象使得我们可以与浏览器历史记录进行交互，该对象包括用户访问过的url
常用方法：
1.forward() 前进
2.back() 后退
3.go(n) 前进/后退n个页面

Vue代码风格指南：
https://github.com/Xutangxin/demos/blob/main/Vue%E4%BB%A3%E7%A0%81%E9%A3%8E%E6%A0%BC%E6%8C%87%E5%8D%97.pdf

Vue官方文档推荐的代码风格：
https://cn.vuejs.org/v2/style-guide/

这是一个数据结构和算法的动态可视化平台：
https://visualgo.net/zh
里面介绍了各种常见算法和数据结构的概念，还提供了可视化展示

这个仓库汇总了十大经典排序算法，还提供了各个算法的js代码展示
https://github.com/biaochenxuying/blog/issues/42

各种排序算法的时间复杂度：

目录
切换目录：
cd / 切换到根目录
cd /bin 切换到根目录下的bin目录
cd ../ 切换到上一级目录 或者使用命令：cd ..
cd ~ 切换到home目录
cd - 切换到上次访问的目录
cd xx 切换到本目录下的名为xx的文件目录，如果目录不存在报错
cd /xxx/xx/x 可以输入完整的路径，直接切换到目标目录，输入过程中可以使用tab键快速补全

mkdir 新增目录
ls 查看目录
rm doc 删除当前目录的doc文件
mv oldName newName 修改目录名

文件
touch 新增文件
rm doc 删除当前目录下的doc文件

查看文件：
cat a.txt 查看文件最后一屏内容
less a.txt PgUp向上翻页，PgDn向下翻页，”q”退出查看
more a.txt 显示百分比，回车查看下一行，空格查看下一页，”q”退出查看
tail -100 a.txt 查看文件的后100行，”Ctrl+C”退出查看