本篇文章我们来讲一下javascript日常开发规范，让大家往后的javascript日常开发写出的js代码更规范，感兴趣的同学可以来看看本篇文章！日常开发规范还是很重要的哦！
前端入坑依赖前前后后写了好几个项目，在用javascript写交互逻辑的时候，或多或少写了一些垃圾代码，如全局变量污染、代码复用性差、简洁性不高等直接给代码后期维护的造成一些困惑。下面是一些js编码方面有待提高的地方，可直接在开发中加以应用，致力于写出更优雅的代码。
说到代码规范，我们或许会想到eslint规则，下面的规范有涉及到eslint规则的进行了相关的说明，也许在你使用eslint的时候出现相关报错提示也可以从中或许一些帮助。
1.变量声明1.1不要用var声明变量，尽量使用const eslint: prefer-const, no-const-assign
避免使用var能够减少全局变量污染问题，使用const确保声明的变量是唯一的，无法在对其进行重新赋值操作。
//bad
var a = 1;
//best
const a = 1;
1.2如果需要声明可变动的引用，那么使用let代替vareslint: no-var jscs: disallowvar
let属于当前{}中的一个块级作用域，而var属于函数作用域
//bad
var count = 1;
if (true) {
var count = 2;
}
console.log(count)
//best
let count = 1;
if (true) {
let count = 2;
}
console.log(count)
1.3将声明的let和const进行分组能够提高代码可读性。
//bad
let a = 1;
const obj = {};
let num = 0;
const page = 10;
//best
let a = 1;
let num = 0;
const obj = {};
const page = 10;
1.4将let和const声明的变量放在合适位置因为let和const被赋予了一种称为【暂时性死区（temporal dead zones, tdz）】的概念，也就决定了他们声明的变量不会进行变量提升。而var声明的变量会被提升到作用域顶部。
2.使用对象2.1使用字面量创建对象eslint: no-new-object
//bad
const obj = new object();
//good
const obj = {};
2.2对象的方法是用简写形式// bad
const atom = {
value: 1,
addvalue: function (value) {
return atom.value + value;
},
};
// good
const atom = {
value: 1,
addvalue(value) {
return atom.value + value;
},
};
2.3对象的属性也使用简写形式eslint: object-shorthand jscs: requireenhancedobjectliterals
const hello = "你好";
//bad
const obj = {
hello:hello
};
//best
const obj = {
hello,
};
2.4不要直接使用object.prototype的方法，如：hasownproperty, propertyisenumerable, isprototypeof 等// bad
console.log(object.hasownproperty(key));
// good
console.log(object.prototype.hasownproperty.call(object, key));
// best
const has = object.prototype.hasownproperty; // cache the lookup once, in module scope.
const has = require('has');
…
console.log(has.call(object, key));
2.5对象的浅拷贝最好使用 ... 而不是object.assign()// very bad
const original = { a: 1, b: 2 };
const copy = object.assign(original, { c: 3 }); // this mutates `original`
delete copy.a; // so does this
// bad
const original = { a: 1, b: 2 };
const copy = object.assign({}, original, { c: 3 }); // copy => { a: 1, b: 2, c: 3 }
// good
const original = { a: 1, b: 2 };
const copy = { ...original, c: 3 }; // copy => { a: 1, b: 2, c: 3 }
const { a, ...noa } = copy; // noa => { b: 2, c: 3 }
使用object.assign()会产生一些意想不到的问题。
3.使用数组3.1使用字面量创建数组eslint: no-array-constructor
// bad
const arr= new array();
// good
const arr= [];
3.2使用扩展运算符 ... 复制数组// bad
const arr= new array();
// good
const arr= [];
// bad
const len = arr.length;
const arrcopy = [];
let i;
for (i = 0; i < len; i++) {
arrcopy[i] = arr[i];
}
// good
const arrcopy = [...arr];
3.3使用array.from把一个类数组转成数组const list = document.getelementsbytagname("li");
const linodes = array.from(list);
4.函数4.1使用函数声明代替函数表达式为什么？因为函数声明的函数会先被识别，进行变量提升（hoisted），而函数表达式只会把函数的引用变量名提升（即变量提升）。
// bad
const fn= function () {
};
// good
function fn() {
}
4.2不要再一个非函数代码块中（if，else，while等）声明函数， 而是把那个函数赋给一个变量。即使前者不会报错，但是浏览器的解析方式是不同的。// bad
if (iflogin) {
function test() {
console.log(' logged');
}
}
// good
let test;
if (iflogin) {
test = () => {
console.log(' logged');
};
}
4.3避免使用arguments，而是用rest语法 ... 替代原因是arguments是一个类数组，没有数组特有的方法，而...能够明确你传入的参数，并且是真正的数组。
// bad
function myconcat() {
const args = array.prototype.slice.call(arguments);
return args.join('');
}
// good
function myconcat(...args) {
return args.join('');
}
5.箭头函数5.1当你必须使用函数表达式（或者需要传递一个匿名函数）时候，可以使用箭头函数代替。原因是使用新的函数会创建一个新的函数作用域，这样就会改变当前this的指向，而箭头函数会创建一个新的this执行环境，能够将当前环境的this继续传递下去；并且写法也更为简洁。
当你的函数较为复杂的时候，这时候使用箭头函数就容易出问题，可以使用函数声明代替。
// bad
[1, 3, 5].map(function (x) {
return x * x;
});
// good
[1, 3, 5].map((x) => {
return x * x;
});
5.2如果一个函数适合用一行写出并且只有一个参数，那就把花括号、圆括号和 return 都省略掉。如果不是，那就不要省略。 // good
[1, 2, 3].map(x => x * x);
// good
[1, 2, 3].reduce((total, n) => {
return total + n;
}, 0);
6.构造器6.1总是使用class，避免直接操作prototype属性这样写更为简洁。
// bad
function queue(contents = []) {
this._queue = [...contents];
}
queue.prototype.pop = function() {
const value = this._queue[0];
this._queue.splice(0, 1);
return value;
}
// good
class queue {
constructor(contents = []) {
this._queue = [...contents];
}
pop() {
const value = this._queue[0];
this._queue.splice(0, 1);
return value;
}
}
7.模块开发7.1利用模块的思想写业务。使用模块编写逻辑业务，可以使你的代码更有整体性和可扩展性。类似的库有seajs、requirejs
7.2少使用通配符import这样更能够确保你只有一个模块被你import，而那些不必要的模块不会被import，减少代码体积。
// bad
import * as webui from './web';
// good
import webui from './web';
8.使用高阶函数如map()和reduce()代替for~of const arr= [1, 2, 3, 4, 5];
// bad
let sum = 0;
for (let num of arr) {
sum += num;
}
sum === 15;
// good
let sum = 0;
arr.foreach((num) => sum += num);
sum === 15;
// best (use the functional force)
const sum = arr.reduce((total, num) => total + num, 0);
sum === 15;
9.比较运算符9.1优先使用===和！==而不是==和！====和！==不会进行强制类型转换，后者则会
9.2在做if条件判断时强制类型转换规则对象都会被转为true
null、undefined、nan被转为false
布尔值转为对应的布尔值
数字中+0 -0 0都被计算为false，否则为true
字符串 如果是“”空字符串，被计算为fasle，否则为true
相关推荐：
web 前端代码规范
javascript代码规范和性能整理
html(5) 代码规范
以上就是日常js开发规范的详细内容。