JavaScript——编程风格

　　本篇文章我们将讨论如何将新的语法应用在编码实践当中，与传统的 JavaScript 语法结合在一起，写出合理的、易于阅读和维护的代码。

　　所谓"编程风格"，指的是编写代码的规则。不同的程序员，往往有不同的编程风格。而且这里的风格包括语法上的编程风格和格式上的编程风格。

　　一.块级作用域let 取代 var - 语法上的编程风格

　　1.ES6 提出了两个新的声明变量的命令：let和const。

　　其中，let完全可以取代var，因为两者语义相同，而且let没有副作用。

　　if (true) {

　　let x = 'hello';

　　}

　　for (let y = 0; y <= 10; y++) {

　　console.log(y);

　　}

　　if (true) {

　　var x = 'hello';//全局变量x

　　}

　　for (var y = 0; y <= 10; y++) {//全局变量y

　　console.log(y);

　　}

　　上面代码如果用var替代let，实际上就声明了两个全局变量，这显然不是理想的设计方式。变量应该只在其声明的代码块内有效，var命令做不到这一点。

　　2.var命令存在变量提升效用，let命令没有这个问题。

　　if (true) {

　　console.log(x); // ReferenceError引用错误

　　let x = 'hello';

　　}

　　if (true) {

　　console.log(x); // undefined,变量提升

　　var x = 'hello';

　　}

　　3.在let和const之间，建议优先使用const，尤其是在全局环境，不应该设置变量，应设置常量。原因是const可以提醒阅读程序的人，这个变量不能改变，比较符合函数式编程思想，并且JavaScript 编译器会对const进行优化，所以多使用const，有利于提高程序的运行效率。

　　//传统的方式

　　var a = 1,

　　b = 2,

　　c = 3;

　　//新的方式

　　const a = 1;

　　const b = 2;

　　const c = 3;　

　　//更优的方式

　　const [a, b, c] = [1, 2, 3];

　　二、字符串 静态字符串一律使用单引号或反引号，不使用双引号。动态字符串使用反引号。

　　//不建议

　　const a = "foobar";

　　const b = 'foo' + a + 'bar';

　　//建议

　　const a = 'foobar';

　　const b = `foo${a}bar`;

　　三.解构赋值

　　ES6允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构

　　使用数组成员对变量赋值时，优先使用解构赋值。

　　const arr = [1, 2, 3, 4];

　　// 不建议

　　const first = arr[0];

　　const second = arr[1];

　　// 建议

　　const [first, second] = arr;

　　函数的参数如果是对象的成员，优先使用解构赋值。

　　// 不建议

　　function getFullName(user) {

　　const firstName = user.firstName;

　　const lastName = user.lastName;

　　}

　　// 建议

　　function getFullName(obj) {

　　const { firstName, lastName } = obj;

　　}

　　// 建议

　　function getFullName({ firstName, lastName }) {

　　}

　　四.其他操作

　　1.对象的操作

　　对象尽量静态化，一旦定义，就不得随意添加新的属性。如果添加属性不可避免，要使用Object.assign方法。

　　// 不建议

　　const a = {};

　　a.x = 3;

　　// 建议

　　const a = {};

　　Object.assign(a, { x: 3 });

　　// 或者这样

　　const a = { x: null };

　　a.x = 3;

　　对象的属性和方法，尽量采用简洁表达法

　　var ref = 'some value';

　　// 不推荐

　　const atom = {

　　ref: ref,

　　value: 1,

　　addValue: function (value) {

　　return atom.value + value;

　　},

　　};

　　// 推荐

　　const atom = {

　　ref,

　　value: 1,

　　addValue(value) {

　　return atom.value + value;

　　},

　　};

　　2.使用扩展运算符(...)拷贝数组

　　let arr1 = [1, 2, 3];

　　let arr2 = [4, 5, 6];

　　let arr3 = [7, 8, 9];

　　console.log(arr1.concat(arr2, arr3)); //[1, 2, 3, 4, 5, 6, 7, 8, 9]

　　console.log([...arr1, ...arr2, ...arr3]); //[1, 2, 3, 4, 5, 6, 7, 8, 9]

　　3.立即执行函数可以写成箭头函数的形式。

　　(() => {

　　console.log('Welcome to the Internet');

　　})();

　　4.用 Class取代prototype 的操作。因为 Class 的写法更简洁，更易于理解。

　　// 构造函数+原型

　　function Person(name, age, sex) {

　　this.name = name;

　　this.age = age;

　　this.sex = sex;

　　this.showinfo = function() {

　　return this.name;

　　}

　　}

　　Person.prototype.showinfo = function() {

　　return this.name + this.age + this.sex

　　}

　　// class

　　class Person {

　　constructor(name, age, sex) {

　　this.name = name;

　　this.age = age;

　　this.sex = sex;

　　}

　　showinfo() {

　　return this.name

　　}

　　}

　　5.ESLint 的使用

　　ESLint 是一个语法规则和代码风格的检查工具，可以用来保证写出语法正确、风格统一的代码。

　　首先，在项目的根目录安装 ESLint。

　　$ npm install --save-dev eslint

　　然后，安装 Airbnb 语法规则，以及 import、a11y、react 插件。

　　$ npm install --save-dev eslint-config-airbnb

　　$ npm install --save-dev eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react

　　最后，在项目的根目录下新建一个.eslintrc文件，配置 ESLint。

　　{

　　"extends": "eslint-config-airbnb"

　　}

　　现在就可以检查，当前项目的代码是否符合预设的规则。

　　index.js文件的代码如下。

　　var unused = 'I have no purpose!';

　　function greet() {

　　var message = 'Hello, World!';

　　console.log(message);

　　}

　　greet(); 使用 ESLint 检查这个文件，就会报出错误。

　　$ npx eslint index.js

　　index.js

　　1:1 error Unexpected var, use let or const instead no-var

　　1:5 error unused is defined but never used no-unused-vars

　　4:5 error Expected indentation of 2 characters but found 4 indent

　　4:5 error Unexpected var, use let or const instead no-var

　　5:5 error Expected indentation of 2 characters but found 4 indent

　　✖ 5 problems (5 errors, 0 warnings)

　　上面代码说明，原文件有五个错误，其中两个是不应该使用var命令，而要使用let或const;一个是定义了变量，

　　却没有使用;另外两个是行首缩进为 4 个空格，而不是规定的 2 个空格。

　　五.括号的位置 - 语法格式上的编程风格

　　1.大括号的位置

　　绝大多数的编程语言，都用大括号({})表示代码块。对于起首的大括号的位置，有许多不同的写法。

　　最流行的有两种。

　　第一种是起首的大括号另起一行 - 推荐

　　block{

　　}

　　第二种是起首的大括号跟在关键字的后面，但是Javascript会自动添加句末的分号，有可能会导致一些难以察觉的错误。

　　//下面的情况就会产生问题。

　　function fn() {

　　return

　　{

　　key: value

　　};

　　}

　　2.圆括号

　　圆括号在Javascript中有两种作用，一种表示调用函数，另一种表示不同的值的组合。我们可以用空格，区分这两种不同的括号。

　　调用函数的时候，函数名与左括号之间没有空格。

　　function fn(){}

　　fn()

　　函数名与参数序列之间，没有空格。

　　function fn(x,y){

　　return x + y;

　　}

　　fn(1,2)

　　所有其他语法元素与左括号之间，都有一个空格

　　if (a === 0){...}

　　3.分号

　　分号表示语句的结束。大多数情况下，如果你省略了句尾的分号，Javascript会自动添加。

　　但麻烦的是，如果下一行的第一个符号是下面这五个字符之一，Javascript将不对上一行句尾添加分号："("、"["、"/"、"+"和"-"。

　　4.相等和严格相等(恒等)

　　Javascript有两个表示"相等"的运算符："相等"(==)和"严格相等"(===)。

　　因为"相等"运算符会自动转换变量类型(隐式转换)，这样写会造成很多意想不到的情况。

　　所有变量声明都放在函数的头部。

　　所有函数都在使用之前定义。

　　更多关于前端培训的问题，欢迎咨询千锋教育在线名师。千锋教育拥有多年IT培训服务经验，采用全程面授高品质、高体验培养模式，拥有国内一体化教学管理及学员服务，助力更多学员实现高薪梦想。