前端常见的一些编码规范 (持续更新中.......)

1.使用 Array.from 快速生成数组

一般我们生成一个有规律的数组会使用循环插入的方法，比如使用时间选择插件时，我们可能需要将小时数存放在数组中：

let hours = [];

for (let i = 0; i < 24; i++) {
    hours.push(i + '时');
}

如果使用 Array.from 我们可以简写为：

let hours = Array.from({ length: 24 }, (value, index) => index + '时');

2. 路由跳转尽量使用 name 而不是 path

我们前期配置的路由路径后期难免会进行修改，如果我们页面跳转的地方全是使用的 path，那么我们需要修改所有涉及该 path 的页面，这样不利于项目的维护。而相对于 path，name 使用起来就方便多了，因为其具有唯一性，即使我们修改了 path，还可以使用原来的 name 值进行跳转。

this.$router.push({ 
    name: 'page1'
});

// 而不是
this.$router.push({ 
    path: 'page1'
});

3.不要使用 for in 循环来遍历数组

大家应该都知道 for in 循环是用于遍历对象的，但它可以用来遍历数组吗？答案是可以的，因为数组在某种意义上也是对象，但是如果用其遍历数组会存在一些隐患：其会遍历数组原型链上的属性

let arr = [1, 2];

for (let key in arr) {
    console.log(arr[key]); // 会正常打印 1, 2
}

// 但是如果在 Array 原型链上添加一个方法
Array.prototype.test = function() {};

for (let key in arr) {
    console.log(arr[key]); // 此时会打印 1, 2, ƒ () {}
}

4.统一管理缓存变量

/* types.js */

export const USER_NAME = 'userName';
export const TOKEN = 'token';
在需要存取的时候，直接引用：

import { USER_NAME, TOKEN } from '../types.js'

sessionStorage[USER_NAME] = '张三';
localStorage[TOKEN] = 'xxx';

5.为什么要用 $set 方法

this.puzzles: = Array.from({ length: 15 }, (value, index) => index + 1)
// 设置数组值
setPuzzle(index, num) {
    let curNum = this.puzzles[index]
    
    this.puzzles[index + num] = curNum
    this.puzzles[index] = ''
    
    // this.$set(this.puzzles, index + num, curNum)
    // this.$set(this.puzzles, index, '')
}

如果不用 $set 方法我们可以直接通过操作数组索引的形式对数组进行赋值,但是你会发现这样做数据是改变了，但是页面并没有因此重新渲染，这是为什么呢？其实 Vue 官方已经给出了明确的答案：

由于 JavaScript 的限制，Vue 不能检测以下变动的数组：

当你利用索引直接设置一个项时，例如：vm.items[indexOfItem] = newValue
当你修改数组的长度时，例如：vm.items.length = newLength
其实还有一种比较取巧的方式便是强制重新渲染 Vue 实例来解决这一问题：Vue 提供的 $forceUpdate 方法迫使 Vue 实例重新渲染，这样改变的数据就会被更新的页面中去。但是最好不要这样操作，因为这会导致 Vue 重新遍历此对象所有的属性，一定程度上会影响页面的性能。

this.puzzles: = Array.from({ length: 15 }, (value, index) => index + 1)
// 设置数组值
setPuzzle(index, num) {
    let curNum = this.puzzles[index]
    
    this.puzzles[index + num] = curNum
    this.puzzles[index] = ''

    this.$forceUpdate() // 迫使 Vue 实例重新渲染
    this.puzzles.splice(1, 0)// 这样也可强制刷新页面

    // this.$set(this.puzzles, index + num, curNum)
    // this.$set(this.puzzles, index, '')
}
```