web前端培訓" />

　　本篇文章我們將討論如何將新的語法應用在編碼實踐當中，與傳統的 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人才近2萬人。不論你是零基礎還是想提升，都可以找到適合的班型，千鋒教育隨時歡迎你來試聽。