本篇文章我們將討論如何將新的語法應(yīng)用在編碼實(shí)踐當(dāng)中，與傳統(tǒng)的 JavaScript 語法結(jié)合在一起，寫出合理的、易于閱讀和維護(hù)的代碼。

　　所謂"編程風(fēng)格"，指的是編寫代碼的規(guī)則。不同的程序員，往往有不同的編程風(fēng)格。而且這里的風(fēng)格包括語法上的編程風(fēng)格和格式上的編程風(fēng)格。

　　一.塊級作用域let 取代 var - 語法上的編程風(fēng)格

　　1.ES6 提出了兩個新的聲明變量的命令：let和const。

　　其中，let完全可以取代var，因?yàn)閮烧哒Z義相同，而且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，實(shí)際上就聲明了兩個全局變量，這顯然不是理想的設(shè)計(jì)方式。變量應(yīng)該只在其聲明的代碼塊內(nèi)有效，var命令做不到這一點(diǎn)。

　　2.var命令存在變量提升效用，let命令沒有這個問題。

　　if (true) {

　　console.log(x); // ReferenceError引用錯誤

　　let x = 'hello';

　　}

　　if (true) {

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

　　var x = 'hello';

　　}

　　3.在let和const之間，建議優(yōu)先使用const，尤其是在全局環(huán)境，不應(yīng)該設(shè)置變量，應(yīng)設(shè)置常量。原因是const可以提醒閱讀程序的人，這個變量不能改變，比較符合函數(shù)式編程思想，并且JavaScript 編譯器會對const進(jìn)行優(yōu)化，所以多使用const，有利于提高程序的運(yùn)行效率。

　　//傳統(tǒng)的方式

　　var a = 1,

　　b = 2,

　　c = 3;

　　//新的方式

　　const a = 1;

　　const b = 2;

　　const c = 3;　

　　//更優(yōu)的方式

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

　　二、字符串 靜態(tài)字符串一律使用單引號或反引號，不使用雙引號。動態(tài)字符串使用反引號。

　　//不建議

　　const a = "foobar";

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

　　//建議

　　const a = 'foobar';

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

　　三.解構(gòu)賦值

　　ES6允許按照一定模式，從數(shù)組和對象中提取值，對變量進(jìn)行賦值，這被稱為解構(gòu)

　　使用數(shù)組成員對變量賦值時，優(yōu)先使用解構(gòu)賦值。

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

　　// 不建議

　　const first = arr[0];

　　const second = arr[1];

　　// 建議

　　const [first, second] = arr;

　　函數(shù)的參數(shù)如果是對象的成員，優(yōu)先使用解構(gòu)賦值。

　　// 不建議

　　function getFullName(user) {

　　const firstName = user.firstName;

　　const lastName = user.lastName;

　　}

　　// 建議

　　function getFullName(obj) {

　　const { firstName, lastName } = obj;

　　}

　　// 建議

　　function getFullName({ firstName, lastName }) {

　　}

　　四.其他操作

　　1.對象的操作

　　對象盡量靜態(tài)化，一旦定義，就不得隨意添加新的屬性。如果添加屬性不可避免，要使用Object.assign方法。

　　// 不建議

　　const a = {};

　　a.x = 3;

　　// 建議

　　const a = {};

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

　　// 或者這樣

　　const a = { x: null };

　　a.x = 3;

　　對象的屬性和方法，盡量采用簡潔表達(dá)法

　　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.使用擴(kuò)展運(yùn)算符(...)拷貝數(shù)組

　　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.立即執(zhí)行函數(shù)可以寫成箭頭函數(shù)的形式。

　　(() => {

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

　　})();

　　4.用 Class取代prototype 的操作。因?yàn)?Class 的寫法更簡潔，更易于理解。

　　// 構(gòu)造函數(shù)+原型

　　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 是一個語法規(guī)則和代碼風(fēng)格的檢查工具，可以用來保證寫出語法正確、風(fēng)格統(tǒng)一的代碼。

　　首先，在項(xiàng)目的根目錄安裝 ESLint。

　　$ npm install --save-dev eslint

　　然后，安裝 Airbnb 語法規(guī)則，以及 import、a11y、react 插件。

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

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

　　最后，在項(xiàng)目的根目錄下新建一個.eslintrc文件，配置 ESLint。

　　{

　　"extends": "eslint-config-airbnb"

　　}

　　現(xiàn)在就可以檢查，當(dāng)前項(xiàng)目的代碼是否符合預(yù)設(shè)的規(guī)則。

　　index.js文件的代碼如下。

　　var unused = 'I have no purpose!';

　　function greet() {

　　var message = 'Hello, World!';

　　console.log(message);

　　}

　　greet(); 使用 ESLint 檢查這個文件，就會報(bào)出錯誤。

　　$ 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)

　　上面代碼說明，原文件有五個錯誤，其中兩個是不應(yīng)該使用var命令，而要使用let或const;一個是定義了變量，

　　卻沒有使用;另外兩個是行首縮進(jìn)為 4 個空格，而不是規(guī)定的 2 個空格。

　　五.括號的位置 - 語法格式上的編程風(fēng)格

　　1.大括號的位置

　　絕大多數(shù)的編程語言，都用大括號({})表示代碼塊。對于起首的大括號的位置，有許多不同的寫法。

　　最流行的有兩種。

　　第一種是起首的大括號另起一行 - 推薦

　　block{

　　}

　　第二種是起首的大括號跟在關(guān)鍵字的后面，但是Javascript會自動添加句末的分號，有可能會導(dǎo)致一些難以察覺的錯誤。

　　//下面的情況就會產(chǎn)生問題。

　　function fn() {

　　return

　　{

　　key: value

　　};

　　}

　　2.圓括號

　　圓括號在Javascript中有兩種作用，一種表示調(diào)用函數(shù)，另一種表示不同的值的組合。我們可以用空格，區(qū)分這兩種不同的括號。

　　調(diào)用函數(shù)的時候，函數(shù)名與左括號之間沒有空格。

　　function fn(){}

　　fn()

　　函數(shù)名與參數(shù)序列之間，沒有空格。

　　function fn(x,y){

　　return x + y;

　　}

　　fn(1,2)

　　所有其他語法元素與左括號之間，都有一個空格

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

　　3.分號

　　分號表示語句的結(jié)束。大多數(shù)情況下，如果你省略了句尾的分號，Javascript會自動添加。

　　但麻煩的是，如果下一行的第一個符號是下面這五個字符之一，Javascript將不對上一行句尾添加分號："("、"["、"/"、"+"和"-"。

　　4.相等和嚴(yán)格相等(恒等)

　　Javascript有兩個表示"相等"的運(yùn)算符："相等"(==)和"嚴(yán)格相等"(===)。

　　因?yàn)?相等"運(yùn)算符會自動轉(zhuǎn)換變量類型(隱式轉(zhuǎn)換)，這樣寫會造成很多意想不到的情況。

　　所有變量聲明都放在函數(shù)的頭部。

　　所有函數(shù)都在使用之前定義。

　　更多關(guān)于前端培訓(xùn)的問題，歡迎咨詢千鋒教育在線名師。千鋒教育擁有多年IT培訓(xùn)服務(wù)經(jīng)驗(yàn)，采用全程面授高品質(zhì)、高體驗(yàn)培養(yǎng)模式，擁有國內(nèi)一體化教學(xué)管理及學(xué)員服務(wù)，助力更多學(xué)員實(shí)現(xiàn)高薪夢想。