ES6编写代码规范分类详细总结

一、块级作用域

1.1 let 取代 var

ES6新增两个变量声明，let 和 const，let 可以取代var，在块级作用域内建议使用let声明

双大括号中，ES6表示块级作用域。若var声明，在块级作用域外面也可以访问到块内var声明的变量，相当于全局变量，会失去很多语义的同时带来很多问题。若let声明，在块级作用域对形成一个封闭的区域，块外面无法访问块内的变量。

if (true) {  
  let x = 'hello'; 
  console.log(x);
}

1.2 全局变量、线程安全问题

let 和 const 之间规范建议先用const，全局环境应该声明的是常量而不是变量，建议函数都声明为const类型

推荐赋值写法

    const [a, b, c] = [1, 2, 3];
    const sub = function (m, n) {
        return m - n
    }
    sub = 66; //Uncaught TypeError: Assignment to constant variable

const的优势

①语义化好，const声明的是一个常量or不需要修改的量

②符合函数式编程的思想，运算不会改变值只会新建值

③js编译器优先对const变量进行优化处理

二、字符串

所有字符串一律使用单引号 ‘’ ，动态字符串使用反撇号，符合ES6规范，也符合json规范

三、结构赋值

函数的参数如果是传参对象时，建议使用结构赋值

    //传值
    function getPersonalInformation({
        lastName,
        lastName
    }) {}
    //返回值
    function marginInput(input) {
        return {
            left,
            right,
            top,
            bottom
        };
    }

四、解构赋值

解构赋值可以减少临时引用，使用解构赋值存取和多属性对象

//不推荐写法
    function getPersonalInformation(user) {
        const firstName = user.firstName;
        const lastName = user.lastName;

        return '${firstName} ${lastName}';
    }
//推荐写法
    function getPersonalInformation(user) {
        const {
            firstName,
            lastName
        } = obj;
        return '${firstName} ${lastName}';
    }
    //自动获取obj的属性，获取属性值和变量

// 传入参数推荐写法
    function getPersonalInformation({
        firstName,
        lastName
    }) {
        return '${firstName} ${lastName}';
    }

//对数组使用解构，因为解构数组有默认顺序
// 不推荐写法
const first = arr[0];
const second = arr[1];

// 推荐写法
const [first, second] = arr;

五、对象

避免对象属性发生变化，对象一旦声明，如果一定要修改对象的属性值，推荐使用Object.assgin

//如果对象属性是变量，应在初始化时声明变量属性
    const obj = {
        id: 6,
        name: 'gaby',
        sex: 'girl',
        [getKey('enable')]: true,
        // 初始化时 写好变量属性
    };
	const ref = 'values';

//不推荐写法
    const girl = {
        ref: ref,
        value: 1,
        addValue: function (value) {
            return girl.value + value;
        },
    };
//推荐写法
    const girl = {
        ref: ref,
        value: 1,
        addValue(value) {
            return girl.value + value;
        },
    };

六、函数

建议多使用箭头函数

// 不推荐写法
function handleThings(opts) {
    opts = opts || {};
}

//推荐写法
[1, 2, 3].map(x => x * x);
function concatAll(...args) {
    return Array.from(args);
}
function handleThings(opts = {}) {}

七、Map结构

Map表示一种映射关系，简单表示key/value的关系

与Object不同，Object描述的是一个实体or实例化的对象

Map可以遍历，Weakmap不提供遍历的方法

// set get has clear delete  常用操作
let map = new Map(arr);

// 得到所有key
for (let key of map.keys()) {
  console.log(key);
}

// 得到所有value
for (let value of map.values()) {
  console.log(value);
}

// 得到所有 key value
for (let item of map.entries()) {
  console.log(item[0], item[1]);
}

八、数组

字面值创建数组

// 不推荐写法
someStack[someStack.length] = 'abc';

// 推荐写法
someStack.push('abc');

// 不推荐写法
const len = items.length;
const itemsCopy = [];
let i;

for (i = 0; i < len; i++) {
  itemsCopy[i] = items[i];
}

// 推荐写法 使用扩展运算符 ...
const itemsCopy = [...items];