乐趣区

关于javascript:18个编写-JavaScript-好习惯

jiezi

作者：ivan.c
译者：前端小智
起源：medium

点赞再看 ，微信搜寻【大迁世界】,B 站关注【前端小智】 这个没有大厂背景，但有着一股向上踊跃心态人。本文 GitHub https://github.com/qq44924588… 上曾经收录，文章的已分类，也整顿了很多我的文档，和教程材料。

最近开源了一个 Vue 组件，还不够欠缺，欢送大家来一起欠缺它，也心愿大家能给个 star 反对一下，谢谢各位了。

github 地址：https://github.com/qq44924588…

在我多年的编程生涯中，我会优先思考编写代码的形式，不仅是为了让代码更简洁，还因为它有助于进步编码效率，使编写代码的速度更快。

写 1000 行代码和写 300 行代码是不一样的，这对咱们正在做的程序或脚本有很大的帮忙。编程时必须十分小心，因为在大型项目中，脏代码可能是一个重大的问题。

许多程序员批评 JS 语言没有像 Java 或 c ++ 那样的规范工作形式，但事实是 JavaScript 是目前应用的最好的语言之一，其中一些是 Facebook 和Netflix。像 React 这样的库进步了前端性能，至于后端，nextJs用于进步速度，这些组合让当今的程序员抓狂。

ECMAScript v6（缩写为 ES6 或 ES2015）是 JavaScript 自 2015 年 6 月以来始终遵循的规范。

通过学习以下技巧，咱们可能改善编写代码的形式。花点工夫在管制台上练习，学习好。

开始吧~

1. 常量应用 const 代替var

常量是永远不变的变量，这样申明变量能够确保它们永远不变。

/* 旧办法 */
var i = 1;

/* 正确形式 */
const i = 1;

2. 应用 let 替换变量，而不是var

let语句申明了一个具备块作用域的部分作用域变量

/* 不适当的 */
var myVal = 1;
for (var i; i < 10; i++){myVal = 1 + i;}

/* 正确形式 */
let myVal = 1;
for (let i; i < 10; i++){myVal += i}

3. 申明对象

用快捷方式申明对象

/* 
  旧办法
  The Object() class makes an unnecessary function call
*/

const myObject = new Object();
/* 正确形式 */
const myObject = {};

5. 连贯字符串

/* 旧办法 */
const myStringToAdd = "world";
const myString = "hello" + myStringToAdd;


/* 正确形式 */
const myStringToAdd = "world";
const myString = `hello ${myStringToAdd}`;

6. 应用对象办法简写

/* 不适当 */
const customObject = {
  val: 1,
  addVal: function () {return customObject.val + 1;}
}

/* 正确形式 */
const customObject = {
  val: 1,
  addVal(){return customObject.val++}
}** 加粗文字 **

7. 创建对象的值

/* 旧办法 */
const value = 1;
const myObject = {value: value}
/* 正确形式 */
const value = 1;
const myObject = {value}

8. 给对象赋值

/* 旧办法 */
const object1 = {val: 1, b: 2};
let object2 = {d: 3, z: 4};
object2.val = object1.val;
object2.b = object1.b;

/* 正确形式 */
const object1 = {val: 1, b: 2};
const object2 = {...object1, d: 3, z: 4}

9. 给数组赋值

/* 不适当 */
const myArray = [];
myArray[myArray.length] = "hello world";


/* 正确形式 */
const myArray = [];
myArray.push('Hello world');

10. 连贯数组

/* 不适当 */
const array1 = [1,2,3,4];
const array2 = [5,6,7,8];
const array3 = array1.concat(array2);


/* 正确形式 */
const array1 = [1,2,3,4];
const array2 = [5,6,7,8];
const array3 = [...array1, ...array2]

11. 获取对象的多个属性

/* 不适当 */
function getFullName(client){return `${client.name} ${client.last_name}`;
}

/* 正确形式 */
function getFullName({name, last_name}){return `${name} ${last_name}`;
}

12. 从对象获取值

/* 不适当 */
const object1 = {a: 1 , b: 2};
const a = object1.a;
const b = object1.b;

/* 正确形式 */
const object1 = {a: 1 , b: 2};
const {a, b} = object1;

13. 创立函数

/* 老办法，但很好 */
function myFunc() {}

/* 很好 */
const myFunc = function() {}

/* 最好 */
const myFunct = () => {}

// 重要阐明：在某些状况下，倡议不要将这些函数与箭头一起应用，以防止读取谬误

14. 默认值

/* 不适当 */
const myFunct = (a, b) => {if (!a) a = 1;
  if (!b) b = 1;
  return {a, b};
}

/* 正确形式 */
const myFunct = (a = 1, b = 1) => {return { a, b};
}

15. 应用 reduce 代替 forEach 和for来求和

/* 不适当 */
const values = [1, 2, 3, 4, 5];
let total = 0;
values.forEach((n) => {total += n})

/* 不适当 */
const values = [1, 2, 3, 4, 5];
let total = 0;
for (let i; i < values.length; i++){total += values[i];
}

/* 正确形式 */
const values = [1, 2, 3, 4, 5];
const total = values.reduce((total, num) => total + num);

16. 是否存在数组中

/* 不适当 */
const myArray = [{a: 1}, {a: 2}, {a: 3}];
let exist = false;
myArray.forEach( item => {if (item.a === 2) exist = true
})

/* 正确形式 */
const myArray = [{a: 1}, {a: 2}, {a: 3}];
const exist = myArray.some(item => item.a == 2)

17. 布尔值的快捷方式

/* 不适当 */
const a = 5;
let b;
if (a === 5){b = 3;} else {b = 2;}

/* 正确形式 */
const a = 5;
const b = a === 5 ? 3 : 2;

总结

回顾这篇文章，加以练习并学会如何以一种更洁净的形式工作，进步处理速度。

完~，我是小智，我要去刷碗了，咱们下期再见！

代码部署后可能存在的 BUG 没法实时晓得，预先为了解决这些 BUG，花了大量的工夫进行 log 调试，这边顺便给大家举荐一个好用的 BUG 监控工具 Fundebug。

原文：https://medium.com/javascript…

交换

文章每周继续更新，能够微信搜寻「大迁世界」第一工夫浏览和催更（比博客早一到两篇哟），本文 GitHub https://github.com/qq449245884/xiaozhi 曾经收录，整顿了很多我的文档，欢送 Star 和欠缺，大家面试能够参照考点温习，另外关注公众号，后盾回复 福利，即可看到福利，你懂的。

退出移动版