ES6 - 基础学习(23): 新编码规范

如何将 ES6的新语法,运用到实际项目开发中,与传统的 JavaScript语法结合在一起,写出合理的、易阅读、易理解、易维护的代码。 1、块级作用域 11、let 取代 var。ES6新增加了两个新的变量声...

如何将 ES6的新语法,运用到实际项目开发中,与传统的 JavaScript语法结合在一起,写出合理的、易阅读、易理解、易维护的代码。

1、块级作用域

11、let 取代 var。ES6新增加了两个新的变量声明关键字 let 和 const,而其中的 let完全可以取代 var,两者语义相同且 let 更适合作为块级作用域关键字

'use strict';
// var
console.log(a);                    // undefined
if (true) {
    var a = 'ES6';
}
console.log(a);                    // 'ES6'
// 这里的 a实际相当于声明了一个模块内的全局变量,只要是当前模块内就都可以访问。就像上面 console.log,虽然显示的是 undefined,但也只是相当于 未初始化而不是未定义(Uncaught ReferenceError: a is not defined)。
// 这违反了 变量先声明后使用的原则
for (var i = 0; i < 10; i++) { console.log(i); } console.log(i); // 10 这里的 i跟上面的 a一样,声明变量的时候被提升了到了模块的最顶部 // let if (true) { console.log(a); // Uncaught ReferenceError: Cannot access 'a' before initialization let a = 'ES6'; } console.log(a); // Uncaught ReferenceError: a is not defined // var关键字带有变量作用域提升作用,而 let关键字则不存在这个问题,变量作用域被限制的死死的。 for (let i = 0; i < 10; i++) { console.log(i); } console.log(i); // Uncaught ReferenceError: i is not defined

12、全局常量。在定义全局常量时应优先使用 const关键字,而不是在 模块的最顶部采用 let 或 var 声明变量充做全局常量。尤其是在全局环境中只应设置常量,而不应声明变量以充常量。

// const 优于 let、var有以下几个原因:
// 一、const可以提醒代码阅读者,该参数是一个常量,不能随意修改,修改该参数存在一定的风险;
// 二、const比较符合函数式编程思想,运算不改变值,只是新建值,而且有利于将来的分布式运算;
// 三、JS编译器会对 const进行优化,有利于提高代码的执行效率,所以可以多用 const。而且 let和 const的本质区别就是编译器内部的处理不同
const a = 1, b = 2, c = 3;

// 所有的函数都应该设置为常量
const TempFunc = function () {
    console.log('所有的函数都应该设置为常量!');
};

2、字符串

静态字符串一律使用单引号或反引号,不建议使用双引号;动态字符串使用反引号。

let staticStr = `StaticString`;        // 可接受,但不建议

let staticStr = 'StaticString';
let dynamicStr = `dynamicStr:${staticStr}`;

3、对象

1、单行定义的对象,最后一个成员不以逗号结尾。多行定义的对象,最后一个成员以逗号结尾。

'use strict';
const a = {aa: 123, bb: '123'};
const b = {
    bb: 234,
    cc: '234',
};

2、对象尽量静态化,一旦定义,就不得随意添加新的属性。如果实在需要添加新属性,可以使用 Object.assign方法追加。如果对象的属性名是动态的,可以在创造对象的时候,使用属性表达式定义。

'use strict';
const a = {aa: 123};
a.aa = 234;
console.log(a);                    // {aa: 234}

// 如果必须要添加属性
Object.assign(a, {bb: '123'});
console.log(a);                    // {aa: 234, bb: "123"}

3、对象的属性和方法,尽量简洁表达,即易于描述又便于书写,同时引用时还便于区分。

'use strict';
let tempStr = 'ES6';
const tempObj = {
    tempStr,
    value: 1,
    addValue(value) {
        return tempObj.value + value;
    },
};
console.log(tempObj.addValue(10086));        // 10087

4、数组

通过 扩展运算符(...) 拷贝数组;通过 Array.from方法,将类似数组的对象转为数组。

// 拷贝数组
let tempArray = [1, 2, 3, '123'];
let copyArray = [...tempArray];

// 将类似数组的对象转为数组
let tempMap = new Map([[1, 2], [3, 4]]);
let transformMap = Array.from(tempMap);
console.log(transformMap);        // (2) [Array(2), Array(2)]

5、函数

6、解构赋值

7、Set、Map结构

8、Class

9、模块

10、ESLint 的使用

  • 发表于 2020-03-24 13:23
  • 阅读 ( 93 )
  • 分类:网络文章

条评论

请先 登录 后评论
不写代码的码农
小编

篇文章

作家榜 »

  1. 小编 文章
返回顶部
部分文章转自于网络,若有侵权请联系我们删除