以下是从头撸JavaScript官方文档整理，自己有点陌生或觉得对新人有用的内容，不定期更新。
检测属性值
const has = Object.prototype.hasOwnProperty
console.log(has.call(object, key))合并对象
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}拷贝数组
const itemsCopy = [...items]类数组对象转化成数组
const arrLike = { 0: 'foo', 1: 'bar', 2: 'baz', length: 3 }
const arr = Array.from(arrLike);关于Array.from，请看我另一篇文章：《强大的Array.from()函数，简介与调试》
解构
function getFullName({ firstName, lastName }) {
return `${firstName} ${lastName}`
}
const arr = [1, 2, 3, 4]
const [first, second] = arr
function processInput(input) {
// todo...
return { left, right, top, bottom }
}
const { left, top } = processInput(input)字符串字面量
const name = 'Capt. Janeway'就是告诉你优先使用单引号，不涉及计算就别闲着蛋疼用斜箭头
函数声明
const short = function longUniqueMoreDescriptiveLexicalFoo() {
}之前有提过函数的提升，这样做就是避免提升，提高代码可读性。关于函数提升：《JavaScript终极BOSS》
非功能模块不要声明函数
let test;
if (currentUser) {
test = () => {
console.log('Yup.');
}
}非功能模块：if，for，while等。
如果非要用，请使用箭头函数。
arguments
function concatenateAll(...args) {
return args.join('');
}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
}
}class返回this的链式调用
class Jedi {
jump() {
this.jumping = true
return this
}
setHeight(height) {
this.height = height
return this
}
}
const luke = new Jedi()
luke.jump()
.setHeight(20)尽量使用专门的函数
const numbers = [1, 2, 3, 4, 5]
const sum = numbers.reduce((total, num) => total + num, 0)
sum === 15
const increasedByOne = numbers.map(num => num + 1)变量逐个声明
const goSportsTeam = true
const items = getItems()
let dragonball
let i
let length不要使用逗号一口气声明的原因是逐行声明方便调试。
自增自减
num += 1
num -= 1减少++或--的使用，除非必要，如for。
case单句需要大括号
switch (foo) {
case 1: {
let x = 1
break
}
case 2: {
const y = 2
break
}
case 3: {
function f() {
// ...
}
break
}
case 4:
bar()
break
default: {
class C {}
}
}if的大括号
if (test) return false
if (test) {
return false
}两者都可以，个人喜欢第一种，可单行的句子才行。
if语句衔接
// bad
if (test) {
thing1()
thing2()
}
else {
thing3()
}
// good
if (test) {
thing1()
thing2()
} else {
thing3()
}没必要换行。
单行注释的位置
// bad
const active = true; // is current tab
// good
// is current tab
const active = true;咳咳，上面我的注释都可以理解成反面教材了。
缩进2个空格
function baz() {
∙∙let name;
}好了好了，同学们不要抬杠了，听官方的吧。
function括号与大括号
// bad
function test(){
console.log('test');
}
// good
function test() {
console.log('test');
}这是我不用ESLint原因，太坑，老是把我函数名与括号之间加上空格。
对象键值两边的空格
// bad
const foo = {clark: 'kent'};
// good
const foo = { clark: 'kent' };常见的类型转换
const totalScore = String(this.reviewScore)
const val = Number(inputValue)
const hasAge = !!age检测无效数字先行转换
// bad
isNaN('1.2'); // false
isNaN('1.2.3'); // true
// good
Number.isNaN('1.2.3'); // false
Number.isNaN(Number('1.2.3')); // true不知道这些有没有你不知道的呢？
喜欢的话请关注一波，定期更新技术文章，满满的都是干货。
随时随地看视频
