久久精品国产亚洲高清|精品日韩中文乱码在线|亚洲va中文字幕无码久|伊人久久综合狼伊人久久|亚洲不卡av不卡一区二区|精品久久久久久久蜜臀AV|国产精品19久久久久久不卡|国产男女猛烈视频在线观看麻豆

    1. <style id="76ofp"></style>

      <style id="76ofp"></style>
      <rt id="76ofp"></rt>
      <form id="76ofp"><optgroup id="76ofp"></optgroup></form>
      1. 千鋒教育-做有情懷、有良心、有品質的職業(yè)教育機構

        手機站
        千鋒教育

        千鋒學習站 | 隨時隨地免費學

        千鋒教育

        掃一掃進入千鋒手機站

        領取全套視頻
        千鋒教育

        關注千鋒學習站小程序
        隨時隨地免費學習課程

        當前位置:首頁  >  技術干貨  > JavaScript——編程風格

        JavaScript——編程風格

        來源:千鋒教育
        發(fā)布人:qyf
        時間: 2022-07-27 17:18:48 1658913528

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

        web前端

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

          一.塊級作用域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之間,建議優(yōu)先使用const,尤其是在全局環(huán)境,不應該設置變量,應設置常量。原因是const可以提醒閱讀程序的人,這個變量不能改變,比較符合函數(shù)式編程思想,并且JavaScript 編譯器會對const進行優(yōu)化,所以多使用const,有利于提高程序的運行效率。

          //傳統(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`;

          三.解構賦值

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

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

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

          // 不建議

          const first = arr[0];

          const second = arr[1];

          // 建議

          const [first, second] = arr;

          函數(shù)的參數(shù)如果是對象的成員,優(yō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;

          對象的屬性和方法,盡量采用簡潔表達法

          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.使用擴展運算符(...)拷貝數(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 的操作。因為 Class 的寫法更簡潔,更易于理解。

          // 構造函數(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ī)則和代碼風格的檢查工具,可以用來保證寫出語法正確、風格統(tǒ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

          最后,在項目的根目錄下新建一個.eslintrc文件,配置 ESLint。

          {

          "extends": "eslint-config-airbnb"

          }

          現(xiàn)在就可以檢查,當前項目的代碼是否符合預設的規(guī)則。

          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 個空格,而不是規(guī)定的 2 個空格。

          五.括號的位置 - 語法格式上的編程風格

          1.大括號的位置

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

          最流行的有兩種。

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

          block{

          }

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

          //下面的情況就會產生問題。

          function fn() {

          return

          {

          key: value

          };

          }

          2.圓括號

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

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

          function fn(){}

          fn()

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

          function fn(x,y){

          return x + y;

          }

          fn(1,2)

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

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

          3.分號

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

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

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

          Javascript有兩個表示"相等"的運算符:"相等"(==)和"嚴格相等"(===)。

          因為"相等"運算符會自動轉換變量類型(隱式轉換),這樣寫會造成很多意想不到的情況。

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

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

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

        tags:
        聲明:本站稿件版權均屬千鋒教育所有,未經許可不得擅自轉載。
        10年以上業(yè)內強師集結,手把手帶你蛻變精英
        請您保持通訊暢通,專屬學習老師24小時內將與您1V1溝通
        免費領取
        今日已有369人領取成功
        劉同學 138****2860 剛剛成功領取
        王同學 131****2015 剛剛成功領取
        張同學 133****4652 剛剛成功領取
        李同學 135****8607 剛剛成功領取
        楊同學 132****5667 剛剛成功領取
        岳同學 134****6652 剛剛成功領取
        梁同學 157****2950 剛剛成功領取
        劉同學 189****1015 剛剛成功領取
        張同學 155****4678 剛剛成功領取
        鄒同學 139****2907 剛剛成功領取
        董同學 138****2867 剛剛成功領取
        周同學 136****3602 剛剛成功領取
        相關推薦HOT
        山阴县| 虹口区| 固阳县| 定陶县| 廊坊市| 永吉县| 石狮市| 新宁县| 景宁| 京山县| 遵化市| 武陟县| 福安市| 兴文县| 莱阳市| 金川县| 赞皇县| 修文县| 雷山县| 株洲县| 凤冈县| 四平市| 普兰县| 乌拉特后旗| 北辰区| 乌审旗| 达州市| 雷波县| 微山县| 敦化市| 罗定市| 千阳县| 太康县| 临高县| 措勤县| 会昌县| 名山县| 丹寨县| 当阳市| 沽源县| 义马市|