前端防错以及好用小tips指南总结

@前端防錯以及好用小tips指南總結

1.一般情況下我們接收到的都是對象格式，某些情況下，需要接到後端傳過來的奇怪的字符串格式的JSON,需要解析成對象，但是有時候他們傳過來的格式有問題，會報錯

解決方案：可以将方法放在try{JSON.parse(…)}catch(e){}代码块中。
好用的JSON.stringify 方法

    // 1.1接受一个数组参数，指定需要转成字符串的属性，第二个参数指定，只转a属性。JSON.stringify({ a: 1, b: 2 }, ['a'])// '{"a":1}'// 1.2接受函数参数，转化对象的键和值function f12(key, value) {if (typeof value === "number") {value = 2 * value;}return value;}JSON.stringify({ a: 1, b: 2 }, f12)// '{"a":2,"b":4}'// 1.3只拿自己想要的值，如果处理函数返回undefined或没有返回值，這個属性就沒了啊哈哈。function f13(key, value) {if (typeof (value) == "string") {return undefined;}return value;}JSON.stringify({ a: "abc", b: 123 }, f13)// '{"b":123}'// 1.4給數據添加可讀性var d = { a: 1, b: 2 }JSON.stringify(d, null, 2);// "{//   "a": 1,//   "b": 2// }"// 1.5只输出你你想要的keys，加強版var e = { a: 1, b: 2, c: 3, d: 4 }JSON.stringify(e, ["a", "d"], 4);// "{//     "a": 1,//     "d": 4// }"// 1.5還可以這樣玩一下JSON.stringify({ a: 1, b: 2, c: 3 }, null, '|----');// "{// |----"a": 1,// |----"b": 2,// |----"c": 3// }"// 1.6關於JSON.parse你也可以試試看喲

2.switch case 一定要記得寫break

3.对象最後一個屬性结尾多逗号兼容IE會出問題，記得格式化一下代碼

4.輸入框防呆要注意:如果是字符串類型就用myInput && myInput.trim()

    const myInput = '   'if (myInput && myInput.trim()) { console.log('這個輸入框不為空') }

5.禁止給未声明的变量赋值,否則會搞出来很多全局变量

6.多JS文件打包,如果你不喜歡寫分號，有時候會出問題，可以在文件開頭加個分號

7.如果你不喜歡寫分號，有時候會引起函数返回值不正确或者是代碼執行有問題

舉例說明

function e() {return{a: "e"}}console.log(e()) // undefinedlet z = 'z'let m = 'm'[z, m] = [m, z]console.log(z, m) // Uncaught ReferenceError: m is not definedlet z1 = 'z';let m1 = 'm';[z1, m1] = [m1, z1];console.log(z1, m1); // m z

8.Array forEach()中无法return和break，代替方法有some()与every()

    var arr = [1, 2, 3, 4, 5];var num = 3;arr.forEach(function (v) {if (v == num) {break;}console.log(v);});// Uncaught SyntaxError: Illegal break statementvar arr = [1, 2, 3, 4, 5];var num = 3;arr.forEach(function (v) {if (v == num) {return;}console.log(v);});// VM62:7 1// VM62:7 2// VM62:7 4// VM62:7 5// 解決如下,使用数组的另外两个方法some()与every()：var arr = [1, 2, 3, 4, 5];var num = 3;arr.some(function (v) {if (v == num) {return true;}console.log(v);});// VM65:7 1// VM65:7 2// true 跳出循環啦~~~~var arr = [1, 2, 3, 4, 5];var num = 3;arr.every(function (v) {if (v == num) {return false;} else {console.log(v);return true;}});// 1// 2// false 跳出循環啦~~~~

小金理解的小總結
8.1 forEach没有返回值，只针对每个元素调用函數.
8.2 some 当内部return true时跳出整个循环.
8.3 every 当内部return false时跳出整个循环.
8.4 map 有返回值，返回一个新的数组，每个元素为调用函數的结果

9.需要使用到 eval()的时候，使用 Function()来搞一下

10.箭头函数不仅没有this，常用的arguments也没有。如果你能获取到arguments，那它一定是来自父作用域的。

11.防止後端瞎搞，常用的寫法

    var ccc = { a: { t: 123 } }function setC() { ccc['b'] = 111 }ccc && ccc.a && ccc.a.t && setC()

12.關於arguments,你要注意一下，想要把它當成數組用的話，需要轉化一下哦~

    function setArg() {console.log(arguments) // Arguments(4)console.log([].slice.call(arguments)) // Array(4) ----[1,2,3,'4']}setArg(1, 2, 3, '4')

13.判断数组用這個：Array.isArray，別用其他的~

14.使用Object.prototype 和 for in 搭配使用可能引發的坑，要注意下下~~

14.1如果你非要用，那就記得搭配上Object.hasOwnProperty(key)

    var q = { a: 1, s: 2, d: 3 };Object.prototype.w = function () { };for (var key in q) {if (q.hasOwnProperty(key)) {console.log('for in搭配hasOwnProperty方法', '對象的key：', key, '對象的value:', q[key]);}console.log('for in方法', '對象的key：', key, '對象的value:', q[key]);}Object.keys(q).forEach(key => {console.log('forEach方法', '對象的key：', key, '對象的value:', q[key]);})Object.keys(q).some(key => {if (key === 'e') {return true; // some  true时跳出 循环.}console.log('some方法', '對象的key：', key, '對象的value:', q[key]);})Object.keys(q).every(key => {if (key === 'e') {return false; // every  false 跳出 循环} else {console.log('every方法', '對象的key：', key, '對象的value:', q[key]);return true;}})// for in搭配hasOwnProperty方法 對象的key： a 對象的value: 1// for in方法 對象的key： a 對象的value: 1// for in搭配hasOwnProperty方法 對象的key： s 對象的value: 2// for in方法 對象的key： s 對象的value: 2// for in搭配hasOwnProperty方法 對象的key： d 對象的value: 3// for in方法 對象的key： d 對象的value: 3// for in方法 對象的key： w 對象的value: ƒ () { }// forEach方法 對象的key： a 對象的value: 1// forEach方法 對象的key： s 對象的value: 2// forEach方法 對象的key： d 對象的value: 3// some方法 對象的key： a 對象的value: 1// some方法 對象的key： s 對象的value: 2// some方法 對象的key： d 對象的value: 3// every方法 對象的key： a 對象的value: 1// every方法 對象的key： s 對象的value: 2// every方法 對象的key： d 對象的value: 3

15.带有ID的DOM树元素會成为全局变量，SO:尽量避免使用全局变量

<div id="myDiv"></div>
<script>
if (typeof myDiv === 'undefined') {myDiv = '測試一下我是不是字符串' // 其实这里不会执行到的
}
console.log(myDiv)
// <div id="myDiv"></div>--输出DOM对象
myDiv = '改一改變量感受一下'
console.log(myDiv)
// 改一改變量感受一下
</script>

16.關於按给定的参数创建一日期对象以及獲取瀏覽器版本

  const data1 = new Date("2019-01-01")// Tue Jan 01 2019 08:00:00 GMT+0800 (台北标准时间)// ie某些版本會告訴你語法錯誤const data2 = new Date(2019,0,1)// Tue Jan 01 2019 00:00:00 GMT+0800 (台北标准时间), IE在用版本還OKconst data3 = new Date("2019/01/01")// Tue Jan 01 2019 00:00:00 GMT+0800 (台北标准时间), IE在用版本還OKconst userAgent1 = navigator.userAgent.toLowerCase()// "mozilla/5.0 (windows nt 10.0; win64; x64) applewebkit/537.36 (khtml, like gecko) chrome/71.0.3578.98 safari/537.36"function getBroswer(){var Sys = {};var ua = navigator.userAgent.toLowerCase();var s;(s = ua.match(/edge\/([\d.]+)/)) ? Sys.edge = s[1] :(s = ua.match(/rv:([\d.]+)\) like gecko/)) ? Sys.ie = s[1] :(s = ua.match(/msie ([\d.]+)/)) ? Sys.ie = s[1] :(s = ua.match(/firefox\/([\d.]+)/)) ? Sys.firefox = s[1] :(s = ua.match(/chrome\/([\d.]+)/)) ? Sys.chrome = s[1] :(s = ua.match(/opera.([\d.]+)/)) ? Sys.opera = s[1] :(s = ua.match(/version\/([\d.]+).*safari/)) ? Sys.safari = s[1] : 0;if (Sys.edge) return { broswer : "Edge", version : Sys.edge };if (Sys.ie) return { broswer : "IE", version : Sys.ie };if (Sys.firefox) return { broswer : "Firefox", version : Sys.firefox };if (Sys.chrome) return { broswer : "Chrome", version : Sys.chrome };if (Sys.opera) return { broswer : "Opera", version : Sys.opera };if (Sys.safari) return { broswer : "Safari", version : Sys.safari };return { broswer : "", version : "0" };}var abc = getBroswer();console.log("broswer:"+abc.broswer+" version:"+abc.version);// broswer:Chrome version:71.0.3578.98

17. js裡常用的replace方法–string/正则我們容易忽略或者忘記的地方

 var str11 = '小金：需要替換的地方：1.待替換1,2.待替換2,3.待替換3,4.待替換4,5.待替換5,6.待替換6,7.待替換7,'var newStr11 = str11.replace('待替換', '替換過啦')console.log(newStr11)
//  小金：需要替換的地方：1.替換過啦1,2.待替換2,3.待替換3,4.待替換4,5.待替換5,6.待替換6,7.待替換7,// 從以上我們可以看出，只替換了第一個哦~~let myReg = new RegExp('^' + escape('待替換'))
// .replace(/%/g, '\\')console.log(myReg)var newStr12 = str11.replace(new RegExp('待替換', 'g'), '替換過啦')console.log("new RegExp('待替換', 'g')", newStr12) // new RegExp('待替換', 'g') 小金：需要替換的地方：1.替換過啦1,2.替換過啦2,3.替換過啦3,4.替換過啦4,5.替換過啦5,6.替換過啦6,7.替換過啦7,var res1 = str11.split('待替換').join('替換過啦')console.log('split-join', res1) // split-join 小金：需要替換的地方：1.替換過啦1,2.替換過啦2,3.替換過啦3,4.替換過啦4,5.替換過啦5,6.替換過啦6,7.替換過啦7,

18. 简洁的三元表达式

// 举例var loading = myNum === 1 ? true : false;
可以改写为
var loading = myNum === 1;var loading = myNum === 1 ? false : true;
可以改写为
var loading = myNum !== 1;

结语

欢迎大家指出文章需要改正之处~
如果有更好的方法，欢迎大家提出来，共同进步哟~~

前端防错以及好用小tips指南总结相关推荐

前端必备，5大mock省时提效小tips，用了提前下班一小时
一.一些为难前端的业务场景在我的工作经历里,需要等待后端童鞋配合我的情形大概有以下几种: a.我们跟外部有项目合作,需要调用到第三方接口. 一般这种情况下,商务那边谈合同,走流程,等第三方审核,我们 ...
facebook对话链接_如何应用防错原则，看看 Facebook 和 Gmail 是怎么做的
欢迎来到有言有料,让思考更有张力本文共 3873 字,预计阅读 10 分钟作者|Siddharth Gulati 译者|张聿彤本文翻译已获得作者的正式授权(授权截图如下) 在用户界面(UI)设计中 ...
进阶篇：4.3）DFA设计指南：防错设计（防呆设计）
本章目的:每一个装配步骤都有设计防错. 1.前言关于防错设计,作者有想说的话: 1)防错设计是DFA重要的一条.因为太过重要,作者单独开一分章写! 2)只有理解了设计防错的重要,才会去设计防错特征. ...
如何利用MES系统实现防错和预警？（详细整理，值得收藏）
随着信息化技术的发展及管理水平的不断提升,信息化生产管理成为制造企业生产管理的重要手段,如何全面实时的掌握生产环节,掌握生产进度.产品质量数据及生产工人的工艺规范.合理控制产品物料批次.匹配配件型号, ...
【附源码】计算机毕业设计java疫情防控健康调查管理小程序设计与实现
项目运行环境配置: Jdk1.8 + Tomcat7.0 + Mysql + HBuilderX(Webstorm也行)+ Eclispe(IntelliJ IDEA,Eclispe,MyEclis ...
知识分享 | 精益的力量之：防错技术的应用
开篇语各位小伙伴,大家好.今天给您分享一篇有关"防错"的小文章. 防错法是指在错误发生之前加以预防,避免错误发生.汽车行业标准IATF 16949对于防错也进行了定义:为防止不合 ...
门盖总成防错动方法研究
1几种常见的防错动技术对比各整车厂对于门盖包边压合后的防错动方法,日系.韩系以及国内自主车企业经常采用对于包边后的门盖件翻边处进行点焊,来保证其在进入涂装电泳和烘干之前的内外板连接强度,或者不对翻边 ...
从前端程序员的视角看小程序的稳定性保障
2019独角兽企业重金招聘Python工程师标准>>> 当我们谈业务稳定性的时候,通常是指后端工程师从架构的角度来看的,例如限流和降级.流量调度.业务开关.容量压测等,但监控也是整个 ...
本人常用的一些编码小Tips(虽然不多，但很好用)
本人常用的一些编码小Tips 我是可爱的目录本人常用的一些编码小Tips 一.概述二.Windows的一些常用的快捷键 (一).Win + others 类型 (二).Alt + others 类 ...

前端防错以及好用小tips指南总结

1.一般情況下我們接收到的都是對象格式，某些情況下，需要接到後端傳過來的奇怪的字符串格式的JSON,需要解析成對象，但是有時候他們傳過來的格式有問題，會報錯

2.switch case 一定要記得寫break

3.对象最後一個屬性结尾多逗号兼容IE會出問題，記得格式化一下代碼

4.輸入框防呆要注意:如果是字符串類型就用myInput && myInput.trim()

5.禁止給未声明的变量赋值,否則會搞出来很多全局变量

6.多JS文件打包,如果你不喜歡寫分號，有時候會出問題，可以在文件開頭加個分號

7.如果你不喜歡寫分號，有時候會引起函数返回值不正确或者是代碼執行有問題

8.Array forEach()中无法return和break，代替方法有some()与every()

9.需要使用到 eval()的时候，使用 Function()来搞一下

10.箭头函数不仅没有this，常用的arguments也没有。如果你能获取到arguments，那它一定是来自父作用域的。

11.防止後端瞎搞，常用的寫法

12.關於arguments,你要注意一下，想要把它當成數組用的話，需要轉化一下哦~

13.判断数组用這個：Array.isArray，別用其他的~

14.使用Object.prototype 和 for in 搭配使用可能引發的坑，要注意下下~~

15.带有ID的DOM树元素會成为全局变量，SO:尽量避免使用全局变量

16.關於按给定的参数创建一日期对象以及獲取瀏覽器版本

17. js裡常用的replace方法–string/正则我們容易忽略或者忘記的地方

18. 简洁的三元表达式

结语

前端防错以及好用小tips指南总结相关推荐

最新文章

热门文章