web前端培訓(xùn)" />

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

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

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

　　1.ES6 提出了兩個(gè)新的聲明變量的命令：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í)際上就聲明了兩個(gè)全局變量，這顯然不是理想的設(shè)計(jì)方式。變量應(yīng)該只在其聲明的代碼塊內(nèi)有效，var命令做不到這一點(diǎn)。

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

　　if (true) {

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

　　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可以提醒閱讀程序的人，這個(gè)變量不能改變，比較符合函數(shù)式編程思想，并且JavaScript 編譯器會(huì)對(duì)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)字符串一律使用單引號(hào)或反引號(hào)，不使用雙引號(hào)。動(dòng)態(tài)字符串使用反引號(hào)。

　　//不建議

　　const a = "foobar";

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

　　//建議

　　const a = 'foobar';

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

　　三.解構(gòu)賦值

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

　　使用數(shù)組成員對(duì)變量賦值時(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ù)如果是對(duì)象的成員，優(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.對(duì)象的操作

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

　　// 不建議

　　const a = {};

　　a.x = 3;

　　// 建議

　　const a = {};

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

　　// 或者這樣

　　const a = { x: null };

　　a.x = 3;

　　對(duì)象的屬性和方法，盡量采用簡(jiǎn)潔表達(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 的寫法更簡(jiǎn)潔，更易于理解。

　　// 構(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 是一個(gè)語法規(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)目的根目錄下新建一個(gè).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 檢查這個(gè)文件，就會(huì)報(bào)出錯(cuò)誤。

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

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

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

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

　　1.大括號(hào)的位置

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

　　最流行的有兩種。

　　第一種是起首的大括號(hào)另起一行 - 推薦

　　block{

　　}

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

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

　　function fn() {

　　return

　　{

　　key: value

　　};

　　}

　　2.圓括號(hào)

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

　　種不同的括號(hào)。

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

　　function fn(){}

　　fn()

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

　　function fn(x,y){

　　return x + y;

　　}

　　fn(1,2)

　　所有其他語法元素與左括號(hào)之間，都有一個(gè)空格

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

　　3.分號(hào)

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

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

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

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

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

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

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

　　更多關(guān)于“前端培訓(xùn)”的問題，歡迎咨詢千鋒教育在線名師。千鋒教育多年辦學(xué)，課程大綱緊跟企業(yè)需求，更科學(xué)更嚴(yán)謹(jǐn)，每年培養(yǎng)泛IT人才近2萬人。不論你是零基礎(chǔ)還是想提升，都可以找到適合的班型，千鋒教育隨時(shí)歡迎你來試聽。