实习以来的学习+踩坑总结（包有收获的～都是本人实习中的学习总结（踩坑总结），写代码的时候没做兜底逻辑导致项目测试没问题，

前言

都是本人实习中的学习总结（踩坑总结），写代码的时候没做兜底逻辑导致项目测试没问题，一上线就报case，立马回滚。。。。。。。

说多了都是泪，还是自己实力不够，也正所谓，不积硅步无以至千里，不积小流无以成江海，既然认识到自己的不足，那就更应该及时学习总结起来。

1、可选链

可选链用于简化访问对象属性的过程，表示前面对象所调用的属性或方法是否存在，特别是当某些属性可能为 null 或 undefined 时。它通过使用 ?. 操作符来避免错误。

可选链也可以用来安全地调用方法。如果方法不存在，它不会抛出错误，而是返回 undefined

可选链还可以用于数组索引的访问，确保在索引位置不存在的情况下不会报错。

let user = { profile: { name: 'Alice' } }; 
let userName = user.profile?.name; // 'Alice' user = { profile: null }; 
let userAge = user.profile?.age; // undefined

const greeting = user.greet?.();

const firstItem = array?.[0];

踩坑： 链式调用

可选链可以用在链式调用中，确保每一部分的访问都不会因为前面的部分为 nul

const user = { 
    profile: {}
}; 
const userName = user.profile?.details?.name; 
console.log(userName); // undefined

当后端跟你说你想要的name字段在profile的details中，然后你很自信地写下了user.profile.details.name，测试没问题，项目上线了，结果过段再验收效果发现项目报错了！后来一查后端有新实验上线导致profile直接为空，前端挨着遭殃，没办法，FE就是面向“对象”和PM编程（微笑）

玩笑归玩笑，前端无论什么时候都一定要做兼容处理，即使后端删库跑路了。。。。。。

2、兼容性思想

使用第三方库或者其他方法的时候一定需要考虑兼容问题，下面有俩个例子：

1、findIndex 和 findLastIndex

findIndex 是 ES6 引入的数组方法，用于查找数组中满足测试函数的第一个元素的索引。
findLastIndex 是 ES12 引入的数组方法，用于查找数组中满足测试函数的最后一个元素的索引。

除此之前还需要考虑浏览器兼容性：

所以如果想找最后一个索引，在项目里面需要考虑的就多了，如果真有这个需求，推荐使用findIndex() + reverse()

2、clip 和 clip-path

clip 属性用于定义元素的裁剪区域，但它已经被 clip-path 属性所取代。clip 属性的兼容性问题主要体现在它不再被广泛支持，并且它的用法比较有限。现代浏览器推荐使用 clip-path 进行更灵活的裁剪操作。

clip-path

想详细了解clip-path属性可以看看这篇博客：segmentfault.com/a/119000000…

这点主要是想告诉大家引入方法或者其他库的时候一定要具有兼容和兜底逻辑的这种思想。

3、JSON.parse()

JSON.parse 可用于将 JSON 字符串转换为 JavaScript 对象，它可以将获取的 JSON 数据解析成可操作的对象或数组。

踩坑： 空字符串、undefined使用JSON.parse()会报错！

解决方法： 使用try...catch

const man = '{"name": "Alice", "age": 25}';
let a;
try {
    a = JSON.parse(man) || ''
} catch (error) {
    return;
}

顺带一提： JSON.stringify（碰到修改获取对象啥的一定记得用可选链或者try catch做兜底逻辑！面向对象编程！），用于将 JavaScript 对象或值转换为 JSON 字符串。它常用于将数据准备好以便存储或传输，比如发送到服务器或保存到本地存储，下面是几种对应情况。

再提一句：JSON.stringify有三个参数：

值（value） ：要转换为 JSON 字符串的 JavaScript 值（通常是对象或数组）。
替换器（replacer，可选） ：一个函数或数组，用于筛选或修改转换过程中的值。
空格（space，可选） ：用于美化输出的缩进和空格。

4、URL()

URL()用于创建 URL 对象。这个对象代表了一个统一资源定位符（URL），可以方便处理 URL 的各个部分，如协议、主机、路径和查询参数等。

const url = new URL('https://baidu.com/path?query=123');
// 总路径
console.log(url.href); // 'https://baidu.com/path?query=123'
// 协议头
console.log(url.protocol); // 'https:'
// 域名
console.log(url.host); // 'baidu.com'
// 当前路径
console.log(url.pathname); // '/path'
// 拼接参数
console.log(url.search); // '?query=123'
// 查询参数值
console.log(url.searchParams.get('query')); // '123'

踩坑： 同JSON.parse一样，不能传空字符串，不然会报错！

5、安卓手机控制台调试

电脑控制台大家都会用吧，但是手机上怎么调试呢？look at this：

谷歌浏览器安卓机控制台调试：chrome://inspect/#devices
edge浏览器安卓机控制台调试：edge://inspect/#devices

一定要先登陆chrome或egde账号！不然手机进入其他页面电脑上进去没数据（反正我没登陆的时候怎么都验不出来......）

这里以edge来讲解（为什么不用chrome讲解？我账号登不上了。。。）

手机充电线插上电脑，手机自动弹出一个操作界面：选择仅充电或者管理文件即可

设置找到开发者选项

勾选开发者选项

电脑进入链接勾选Discover USB devices，

打开手机里的浏览器点击一个页面进去，这里以倔金为例，此时你会发现电脑上多了很多你手机浏览器打开的页面，点击下面的inspect进去你就会发现弹出一个控制台调试面板

后面dddd了，我们最熟悉的开发调试面板。

6、chrome 必用的插件

话不多说，上链接：

FeHelper(前端助手)（强推，前端必备！）
草料二维码-快速生码和解码工具（url手机扫码即可访问链接，🉑️用于真机验证，要在同一个网络下）
浸式翻译 - 网页翻译插件 | PDF翻译 | 免费（登陆免费使用页面翻译，还有其他功能......）

前端助手FeHelper：无需多言！

7、git pull

之前刷到一篇文章，同事点名某人不要用marge了，时间线全乱了，然后某人理直气壮地说我没用marge，我用的pull。。。

详细看这：直接使用git pull拉取代码，被同事狠狠地diss了！

git pull 是从远程仓库获取更新并将其合并到当前本地分支的命令。它相当于执行了 git fetch 和 git merge 的组合，默认情况下会执行合并操作。

区别：

git pull --rebase：

功能：从远程仓库获取更新，并将这些更新与本地提交进行重新排列，使用 rebase 替代默认的 merge。它将本地提交“移到”远程提交的顶部，从而保持提交历史的线性。
效果：避免产生合并提交，使历史记录更加简洁。

git pull origin master：

功能：从远程仓库的 master 分支（其他分支同理换名字就行）获取更新，并将这些更新合并到当前本地分支。origin 是远程仓库的默认名称，master 是指定的远程分支。
效果：如果远程 master 有更新，本地分支将会被合并这些更新，可能会产生合并提交（merge commit），在历史记录中会显现合并操作的痕迹。