現代JavaScript：ES6+ 中的 Imports，Exports，Let，Const 和 Promise

時間  2020-12-25
標籤 javascript css html vue java webpack 程序員 web vue-cli 數據庫 欄目 JavaScript 简体版
原文   原文鏈接

在過去幾年裏，JavaScript有不少的更新。若是你想提高寫代碼的能力，這些更新將會對你有很是大的幫助。javascript

對於程序員來講，瞭解這門語言的最新發展是很是重要的。它能使你跟上最新趨勢，提升代碼質量，在工做中出類拔萃，從而進一步提高你的薪資待遇。css

特別地，若是你想學習像React、 Angular或Vue這樣的框架，你必須掌握這些最新的特性。html

最近，JavaScript增長了許多有用的功能，好比Nullish coalescing operator, optional chaining, Promises, async/await, ES6 destructuring,等等。vue

那麼如今，咱們將探討每一個JavaScript開發者都應該知道的概念。java

JavaScript 中的 Let 和 const

在ES6以前，JavaScript使用var關鍵字來聲明變量，var只有全局做用域和函數做用域，所謂全局做用域就是在代碼的任何位置都能訪問var聲明的變量，而函數做用域在變量聲明的當前函數內部訪問變量。此時是沒有塊級做用域的。webpack

隨着let和const這兩個關鍵字的添加，JS增長了塊級做用域的概念。程序員

如何在 JavaScript中使用let

當咱們在用let聲明變量時，用於聲明一次以後就不能再以相同的名稱從新聲明它。web

// ES5 Code

var value =  10;

console.log(value);  // 10

var value =  "hello";

console.log(value);  // hello

var value =  30;

console.log(value);  // 30

如上所示，咱們屢次使用var關鍵字從新聲明瞭變量值。vue-cli

在ES6以前，咱們可使用var從新聲明以前已經聲明過的變量，這就會致使了一個問題：若是咱們在不知情的狀況下，在其餘地方從新聲明瞭該變量，頗有可能會覆蓋原先變量的值，形成一些難以調試的問題。數據庫

因此，Let解決很好地解決此問題。當你使用let從新聲明變量值時，將會報錯。

// ES6 Code
let value = 10;
console.log(value); // 10

let value = "hello"; // Uncaught SyntaxError: Identifier 'value' has already been declared

可是，如下代碼是合法的:

// ES6 Code
let value = 10;
console.log(value); // 10

value = "hello";
console.log(value); // hello

咱們發現上面的代碼看起來沒什麼問題，是由於咱們從新給value變量賦了一個新值，可是並無從新聲明。

咱們來看下下面的代碼：

// ES5 Code
var isValid = true;
if(isValid) {
  var number = 10;
  console.log('inside:', number); // inside: 10
}
console.log('outside:', number); // outside: 10

如上所示，在使用var聲明變量時，能夠在if塊以外訪問該變量。

而使用let聲明的number變量只能在if塊內訪問，若是在if塊外訪問將會報錯。

咱們來看下接下來的代碼

// ES6 Code
let isValid = true;
if(isValid) {
  let number = 10;
  console.log('inside:', number); // inside: 10
}
console.log('outside:', number); // Uncaught ReferenceError: number is not defined

如上述代碼所示，使用let分別在if塊內、if塊外聲明瞭number變量。在if塊外，number沒法被訪問，所以會出現引用錯誤。

可是，若是變量number在if塊外已經聲明，將會出現下面的結果。

// ES6 Code
let isValid = true;
let number = 20;

if(isValid) {
  let number = 10;
  console.log('inside:', number); // inside: 10
}

console.log('outside:', number); // outside: 20

如今在單獨的範圍內有兩個number變量。在if塊外，number的值爲20。

// ES5 Code
for(var i = 0; i < 10; i++){
 console.log(i);
}
console.log('outside:', i); // 10

當使用var關鍵字時，i在 for循環以外也能夠訪問到。

// ES6 Code
for(let i = 0; i < 10; i++){
 console.log(i);
}

console.log('outside:', i); // Uncaught ReferenceError: i is not defined

而使用let關鍵字時，在for循環外部是不可訪問的。

所以，正如上述示例代碼所示，let聲明的變量只能在塊內部可用，而在塊外部不可訪問。

咱們可使用一對大括號建立一個塊，以下:

let i = 10;
{
 let i = 20;
 console.log('inside:', i); // inside: 20
 i = 30;
 console.log('i again:', i); // i again: 30
}

console.log('outside:', i); // outside: 10

前面有提到，let在同一個塊中不能從新聲明變量，不過能夠在另外一個塊中從新聲明。如上代碼所示，咱們在塊內從新聲明瞭i，並賦值20，該變量僅可在該塊中使用。

在塊外，當咱們打印變量時，咱們獲得的是10而不是以前分配的值，這是由於塊外，內部變變量i是不存在的。

若是在塊外未聲明變量，那麼將會報錯:

{
 let i = 20;
 console.log('inside:', i); // inside: 20
 i = 30;
 console.log('i again:', i); // i again: 30
}

console.log('outside:', i); // Uncaught ReferenceError: i is not defined

如何在 JavaScript使用const

const關鍵字在塊級做用域中的工做方式與let關鍵字徹底相同。所以，咱們來看下他們的區別。

const聲明的變量爲常量，其值是不能改變的。而let聲明的變量，能夠爲其賦一個新值，以下所示:

let number = 10;
number = 20;
console.log(number); // 20

可是如下狀況，咱們不能這樣使用const。

const number = 10;
number = 20; // Uncaught TypeError: Assignment to constant variable.

咱們甚至不能使用const像下面同樣從新聲明。

const number = 20;
console.log(number); // 20

const number = 10; // Uncaught SyntaxError: Identifier 'number' has already been declared

如今，看下面的代碼:

const arr = [1, 2, 3, 4];
arr.push(5);
console.log(arr); // [1, 2, 3, 4, 5]

咱們說過const聲明的常量，它的值永遠不會改變——可是咱們改變了上面的常量數組並無報錯。這是爲何呢?

注意:數組是引用類型，而不是JavaScript的基本類型

實際存儲在arr中的不是數組，而是數組存儲的內存位置的引用(地址)。執行arr.push(5)，並無改變arr指向的引用，而是改變了存儲在那個引用上的值。

對象也是如此:

const obj = {
 name: 'David',
 age: 30
};

obj.age = 40;

console.log(obj); // { name: 'David', age: 40 }

這裏，咱們也沒有改變obj指向的引用，而是改變了存儲在引用的值。

所以，上述的代碼將會起做用，但下面的代碼是無效的。

const obj = { name: 'David', age: 30 };
const obj1 = { name: 'Mike', age: 40 };
obj = obj1; // Uncaught TypeError: Assignment to constant variable.

這樣寫會拋出異常，由於咱們試圖更改const變量指向的引用。

所以，在使用const時要記住一點：使用const聲明常量時，不能從新聲明，也不能從新賦值。若是聲明的常量是引用類型，咱們能夠更改存儲在引用的值。

同理，下面的代碼也是無效的。

const arr = [1, 2, 3, 4];
arr = [10, 20, 30]; // Uncaught TypeError: Assignment to constant variable.

總結：

  • 關鍵字let和const在JavaScript中添加塊級做用域。
  • 當咱們將一個變量聲明爲let時，咱們不能在同一做用域(函數或塊級做用域)中從新定義或從新聲明另外一個具備相同名稱的let變量，可是咱們能夠從新賦值。
  • 當咱們將一個變量聲明爲const時，咱們不能在同一做用域(函數或塊級做用域)中從新定義或從新聲明具備相同名稱的另外一個const變量。可是，若是變量是引用類型(如數組或對象)，咱們能夠更改存儲在該變量中的值。

好了，咱們繼續下一個話題: promises。

JavaScript中的promises

對於不少新開發者來講，promises是JavaScript中較難理解的部分。ES6中原生提供了Promise對象，那麼Promise到底是什麼呢？

Promise 對象表明了將來將要發生的事件，用來傳遞異步操做的消息。

如何創造一個 promise

使用promise構造函數建立一個promise，以下所示:

const promise = new Promise(function(resolve, reject) {
 
});

Promise的構造函數接收一個函數做爲參數，而且在內部接收兩個參數：resolve，reject。 resolve和reject參數其實是咱們能夠調用的函數，具體取決於異步操做的結果。

Promise 有三種狀態:

  • pending: 初始狀態，不是成功或失敗狀態。
  • fulfilled:表示操做成功完成。
  • rejected: 表示操做失敗。

當咱們建立Promise時，它處於等待的狀態。當咱們調用resolve函數時，它將進入已完成狀態。若是調用reject，他將進入被拒絕狀態。

在下面的代碼中，咱們執行了一個異步操做，也就是setTimeout，2秒後，調用resolve方法。

const promise = new Promise(function(resolve, reject) {
 setTimeout(function() {
  const sum = 4 + 5;
  resolve(sum);
 }, 2000);
});

咱們須要使用如下方法註冊一個回調.then得到1promise執行成功的結果，以下所示:

const promise = new Promise(function(resolve, reject) {
 setTimeout(function() {
  const sum = 4 + 5;
  resolve(sum);
 }, 2000);
});

promise.then(function(result) {
 console.log(result); // 9
});

then接收一個參數，是函數，而且會拿到咱們在promise中調用resolve時傳的的參數。

若是操做不成功，則調用reject函數:

const promise = new Promise(function(resolve, reject) {
 setTimeout(function() {
  const sum = 4 + 5 + 'a';
  if(isNaN(sum)) {
    reject('Error while calculating sum.');
  } else {
    resolve(sum);
  }
 }, 2000);
});

promise.then(function(result) {
 console.log(result);
});

若是sum不是一個數字，那麼咱們調用帶有錯誤信息的reject函數，不然咱們調用resolve函數。

執行上述代碼，輸出以下:

image.png

調用reject函數會拋出一個錯誤，可是咱們沒有添加用於捕獲錯誤的代碼。

須要調用catch方法指定的回調函數來捕獲並處理這個錯誤。

promise.then(function(result) {
 console.log(result);
}).catch(function(error) {
 console.log(error);
});

輸出以下:

image.png

因此建議你們在使用promise時加上catch方法，以此來避免程序因錯誤而中止運行。

鏈式操做

咱們能夠向單個promise添加多個then方法，以下所示:

promise.then(function(result) {
 console.log('first .then handler');
 return result;
}).then(function(result) {
 console.log('second .then handler');
 console.log(result);
}).catch(function(error) {
 console.log(error);
});

當添加多個then方法時，前一個then方法的返回值將自動傳遞給下一個then方法。

image.png

如上圖所示，咱們在第一個then方法中輸出字符串，並將接收的參數result（sum）返回給下一個result。

在下一個then方法中，輸出字符串，並輸出上一個then方法傳遞給它的result。

如何在 JavaScript中延遲promise的執行

不少時候，咱們不但願當即建立promise，而是但願在某個操做完成後再建立。

咱們能夠將promise封裝在一個函數中，而後從函數中返回promise，以下所示：

function createPromise() {
 return new Promise(function(resolve, reject) {
  setTimeout(function() {
   const sum = 4 + 5;
   if(isNaN(sum)) {
     reject('Error while calculating sum.');
   } else {
    resolve(sum);
   }
  }, 2000);
 });
}

這樣，咱們就能夠經過函數將參數傳遞給promise，達到動態的目的。

function createPromise(a, b) {
 return new Promise(function(resolve, reject) {
  setTimeout(function() {
   const sum = a + b;
   if(isNaN(sum)) {
     reject('Error while calculating sum.');
   } else {
    resolve(sum);
   }
  }, 2000);
 });
}

createPromise(1,8)
 .then(function(output) {
  console.log(output); // 9
});

// OR

createPromise(10,24)
 .then(function(output) {
  console.log(output); // 34
});

image.png

此外，咱們只能向resolve或reject函數傳遞一個值。若是你想傳遞多個值到resolve函數，能夠將它做爲一個對象傳遞，以下:

const promise = new Promise(function(resolve, reject) {
 setTimeout(function() {
  const sum = 4 + 5;
  resolve({
   a: 4,
   b: 5,
   sum
  });
 }, 2000);
});

promise.then(function(result) {
 console.log(result);
}).catch(function(error) {
 console.log(error);
});

image.png

如何在 JavaScript中使用箭頭函數

上述示例代碼中，咱們使用常規的ES5語法建立了promise。可是，一般使用箭頭函數代替ES5語法，以下:

const promise = new Promise((resolve, reject) => {
 setTimeout(() => {
  const sum = 4 + 5 + 'a';
  if(isNaN(sum)) {
    reject('Error while calculating sum.');
  } else {
    resolve(sum);
  }
 }, 2000);
});

promise.then((result) => {
 console.log(result);
});

你能夠根據本身須要使用ES5或ES6語法。

ES6 Import 和Export 語法

在ES6以前，咱們在一個HTML文件中可使用多個script標籤來引用不一樣的JavaScript文件，以下所示:

<script type="text/javascript" src="home.js"></script>
<script type="text/javascript" src="profile.js"></script>
<script type="text/javascript" src="user.js"></script>

可是若是咱們在不一樣的JavaScript文件中有一個同名的變量，將會出現命名衝突，你實際獲得的可能並非你指望的值。

ES6增長了模塊的概念來解決這個問題。

在ES6中，咱們編寫的每個JavaScript文件都被稱爲模塊。咱們在每一個文件中聲明的變量和函數不能用於其餘文件，除非咱們將它們從該文件中導出並、在另外一個文件中獲得引用。

所以，在文件中定義的函數和變量是每一個文件私有的，在導出它們以前，不能在文件外部訪問它們。

export有兩種類型:

  • 命名導出:在一個文件中能夠有多個命名導出
  • 默認導出:單個文件中只能有一個默認導出

JavaScript中的命名導出

以下所示，將單個變量命名導出:

export const temp = "This is some dummy text";

若是想導出多個變量，可使用大括號指定要輸出的一組變量。

const temp1 = "This is some dummy text1";
const temp2 = "This is some dummy text2";
export { temp1, temp2 };

須要注意的是，導出語法不是對象語法。所以，在ES6中，不能使用鍵值對的形式導出。</pre>

// This is invalid syntax of export in ES6
           export { key1: value1, key2: value2 }

import命令接受一對大括號，裏面指定要從其餘模塊導入的變量名。

import { temp1, temp2 } from './filename';

注意，不須要在文件名中添加.js擴展名，由於默認狀況下會考慮該拓展名。

// import from functions.js file from current directory

import  { temp1, temp2 }  from  './functions';

 // import from functions.js file from parent of current directory

import  { temp1 }  from  '../functions';

提示一點，導入的變量名必須與被導入模塊對外接口的名稱相同。

所以，導出應使用：

// constants.js

export  const  PI  =  3.14159;

那麼在導入的時候，必須使用與導出時相同的名稱：

import  {  PI  }  from  './constants';

// This will throw an error

import  { PiValue }  from  './constants';

若是想爲輸入的變量從新命名，可使用as關鍵字，語法以下:

import  {  PI  as PIValue }  from  './constants';

咱們覺得PI重命名爲PIValue，所以不能再使用PI變量名。

導出時也可以使用下面的重命名語法：

// constants.js

const  PI  =  3.14159;

export  {  PI  as PIValue };

而後在導入是，必須使用PIValue。

import  { PIValue }  from  './constants';

命名導出某些內容以前必須先聲明它。

export  'hello';  // this will result in error

export  const greeting =  'hello';  // this will work

export  { name:  'David'  };  // This will result in error

export  const object =  { name:  'David'  };  // This will work

咱們來看下面的validations.js 文件:

// utils/validations.js

const  isValidEmail  =  function(email)  {

  if  (/^[^@ ]+@[^@ ]+\.[^@ \.]{2,}$/.test(email))  {

  return  "email is valid";

  }  else  {

  return  "email is invalid";

  }

};

const  isValidPhone  =  function(phone)  {

  if  (/^[\\(]\d{3}[\\)]\s\d{3}-\d{4}$/.test(phone))  {

  return  "phone number is valid";

  }  else  {

  return  "phone number is invalid";

  }

};

function  isEmpty(value)  {

  if  (/^\s*$/.test(value))  {

  return  "string is empty or contains only spaces";

  }  else  {

  return  "string is not empty and does not contain spaces";

  }

}

export  { isValidEmail, isValidPhone, isEmpty };

在index.js中，咱們可使用以下函數:

// index.js

import  { isEmpty, isValidEmail }  from  "./utils/validations";

console.log("isEmpty:",  isEmpty("abcd"));  // isEmpty: string is not empty and does not contain spaces

console.log("isValidEmail:",  isValidEmail("abc@11gmail.com"));  // isValidEmail: email is valid

console.log("isValidEmail:",  isValidEmail("ab@c@11gmail.com"));  // isValidEmail: email is invalid

JavaScript的默認導出

如上所述，單個文件中最多隻能有一個默認導出。可是，你能夠在一個文件中使用多個命名導出和一個默認導出。

要聲明一個默認導出，咱們須要使用如下語法：

//constants.js

const name =  'David';

export  default name;

在導入時就不須要再使用花括號了。

import name from  './constants';

以下，咱們有多個命名導出和一個默認導出:

// constants.js

export  const  PI  =  3.14159;

export  const  AGE  =  30;

const  NAME  =  "David";

export  default  NAME;

此時咱們使用import導入時，只須要在大括號以前指定默認導出的變量名。

// NAME is default export and PI and AGE are named exports here

import  NAME,  {  PI,  AGE  }  from  './constants';

使用 export default 導出的內容，在導入的時候，import後面的名稱能夠是任意的。

// constants.js

const  AGE  =  30;

export  default  AGE;

import myAge from ‘./constants’;

console.log(myAge);  // 30

另外， export default的變量名稱從Age到myAge之因此可行，是由於只能存在一個export default。所以你能夠隨意命名。還需注意的是，關鍵字不能在聲明變量以前。

// constants.js

export  default  const  AGE  =  30;  // This is an error and will not work

所以，咱們須要在單獨的一行使用關鍵字。

// constants.js

const  AGE  =  30;

export  default  AGE;

不過如下形式是容許的:

//constants.js

export  default  {

 name:  "Billy",

 age:  40

};

而且須要在另外一個文件中使用它

import user from  './constants';

console.log(user.name);  // Billy

console.log(user.age);  // 40

還有，可使用如下語法來導入constants.js文件中導出的全部變量:

// test.js

import  *  as constants from  './constants';

下面，咱們將導入全部咱們constants.js存儲在constants變量中的命名和export default。所以，constants如今將成爲對象。

// constants.js

export  const  USERNAME  =  "David";

export  default  {

 name:  "Billy",

 age:  40

};

在另外一個文件中，咱們按一下方式使用。

// test.js

import  *  as constants from  './constants';

console.log(constants.USERNAME);  // David

console.log(constants.default);  // { name: "Billy", age: 40 }

console.log(constants.default.age);  // 40

也可使用如下方式組合使用命名導出和默認導出:

// constants.js

const  PI  =  3.14159;  const  AGE  =  30;

const  USERNAME  =  "David";

const  USER  =  {

 name:  "Billy",

 age:  40

};

export  {  PI,  AGE,  USERNAME,  USER  as  default  };

import  USER,  {  PI,  AGE,  USERNAME  }  from  "./constants";

總而言之:

ES6中，一個模塊就是一個獨立的文件，該文件內部的全部變量，外部都沒法獲取。若是想從外部讀取模塊內的某個變量，必須使用export關鍵字導出該變量，使用import關鍵字導入該變量。

JavaScript中的默認參數

ES6增長了一個很是有用的特性，即在定義函數時提供默認參數。

假設咱們有一個應用程序，一旦用戶登陸系統，咱們將向他們顯示一條歡迎消息，以下所示:

function  showMessage(firstName)  {

  return  "Welcome back, "  + firstName;

}

console.log(showMessage('John'));  // Welcome back, John

可是，若是數據庫中沒有用戶名，那該怎麼辦呢?因此，咱們首先須要檢查是否提供了firstName，而後再顯示相應的信息。

在ES6以前，咱們必須寫這樣的代碼:

function  showMessage(firstName)  {

  if(firstName)  {

  return  "Welcome back, "  + firstName;

  }  else  {

  return  "Welcome back, Guest";

  }

}

console.log(showMessage('John'));  // Welcome back, John

console.log(showMessage());  // Welcome back, Guest

但如今使用ES6提供的默認參數，咱們能夠這樣寫:

function  showMessage(firstName =  'Guest')  {

  return  "Welcome back, "  + firstName;

}

console.log(showMessage('John'));  // Welcome back, John

console.log(showMessage());  // Welcome back, Guest

函數的默認參數能夠爲任意值。

function  display(a =  10, b =  20, c = b)  {

 console.log(a, b, c);

}

display();  // 10 20 20

display(40);  // 40 20 20

display(1,  70);  // 1 70 70

display(1,  30,  70);  // 1 30 70

在上面的代碼中，咱們沒有提供函數的全部參數，實際代碼等同於:

display();  // 等同於display(undefined, undefined, undefined)

display(40);  等同於display(40, undefined, undefined)

display(1,  70);  等同於display(1, 70, undefined)

所以，若是傳遞的參數是undefined，則對應的參數將使用默認值。

咱們還能夠將對象或計算值指定爲默認值，以下：

const defaultUser =  {

 name:  'Jane',

 location:  'NY',

 job:  'Software Developer'

};

const  display  =  (user = defaultUser, age =  60  /  2  )  =>  {

 console.log(user, age);

};

display();

/* output

{

 name: 'Jane',

 location: 'NY',

 job: 'Software Developer'

} 30

*/

ES5代碼以下:

// ES5 Code

function  getUsers(page, results, gender, nationality)  {

  var params =  "";

  if(page ===  0  || page)  {

 params +=  `page=${page}&`;

  }

  if(results)  {

 params +=  `results=${results}&`;

  }

  if(gender)  {

 params +=  `gender=${gender}&`;

  }

  if(nationality)  {

 params +=  `nationality=${nationality}`;

  }

  fetch('https://randomuser.me/api/?'  + params)

  .then(function(response)  {

  return response.json();

  })

  .then(function(result)  {

 console.log(result);

  })

  .catch(function(error)  {

 console.log('error', error);

  });

}

getUsers(0,  10,  'male',  'us');

在這段代碼中，咱們經過在getUsers函數中傳遞各類可選參數來進行API調用。在進行API調用以前，咱們添加了各類if條件來檢查是否添加了參數，並基於此構造查詢字符串，以下所示：

https://randomuser.me/api/? page=0&results=10&gender=male&nationality=us

使用ES6的默認參數則沒必要添這麼多if條件，以下所示:

function  getUsers(page =  0, results =  10, gender =  'male',nationality =  'us')  {

 fetch(`https://randomuser.me/api/?page=${page}&results=${results}&gender=${gender}&nationality=${nationality}`)

 .then(function(response)  {

  return response.json();

 })

 .then(function(result)  {

 console.log(result);

 })

 .catch(function(error)  {

 console.log('error', error);

  });

}

getUsers();

這樣一來，代碼獲得了大量的簡化，即使咱們不爲getUsers函數提供任何參數時，它也能採用默認值。固然，咱們也能夠傳遞本身的參數：

getUsers(1,  20,  'female',  'gb');

它將覆蓋函數的默認參數。

null不等於未定義

注意: 定義默認參數時，null和undefined是不一樣的。

咱們來看下面的代碼:

function  display(name =  'David', age =  35, location =  'NY'){

 console.log(name, age, location);

}

display('David',  35);  // David 35 NY

display('David',  35,  undefined);  // David 35 NY

// OR

display('David',  35,  undefined);  // David 35 NY

display('David',  35,  null);  // David 35 null

當咱們傳遞null做爲參數時，它實際是給location參數賦一個空值，與undefined不同。因此它不會取默認值「NY」。</pre>

Array.prototype.includes

ES7增長了數組的includes方法，用來判斷一個數組是否包含一個指定的值，若是是返回 true，不然false。

// ES5 Code
const numbers = ["one", "two", "three", "four"];
console.log(numbers.indexOf("one") > -1); // true 
console.log(numbers.indexOf("five") > -1); // false

數組可使用includes方法:

// ES7 Code

const numbers =  ["one",  "two",  "three",  "four"];

console.log(numbers.includes("one"));  // true

console.log(numbers.includes("five"));  // false

includes方法可使代碼簡短且易於理解，它也可用於比較不一樣的值。

<pre style="line-height:18.0pt;
vertical-align:baseline">const day =  "monday";</pre>

if(day ===  "monday"  || day ===  "tuesday"  || day ===  "wednesday")  {

  // do something

}

// 以上代碼使用include方法能夠簡化以下:

const day =  "monday";

if(["monday",  "tuesday",  "wednesday"].includes(day))  {

  // do something

}

所以，在檢查數組中的值時，使用includes方法將會很是的方便。

支持 ES6+ 的第三方組件

除了語法更新，開發者還需掌握一些第三方組件，以便更好的完成項目交付。

例如，使用 SpreadJS表格組件，能夠向 JavaScript 應用程序添加高級電子表格功能，包括支持 450 多種計算公式、在線導入導出 Excel 文檔、數據透視表和可視化分析，以建立財務、分析、預算/預測、數據收集、科學和許多其餘相似的應用程序。

如何在 Vue中使用SpreadJS

SpreadJS能夠經過如下兩種方式與Vue一塊兒使用：

  1. 使用Node包管理器：

打開命令提示符窗口並鍵入如下命令，使用vue init webpack建立一個簡單的Vue項目：

$ npm install --global vue-cli

# create a new project using the "webpack" template
$ vue init webpack my-project

# install dependencies and go!
$ cd my-project
$ npm run dev

在項目中導入SpreadJS Vue模塊:

$ npm install @grapecity/spread-sheets-vue

在Vue應用程序中使用SpreadJS:

<template>

<div>

 <gc-spread-sheets

 :hostClass='hostClass'

 >

 <gc-worksheet

 :dataSource="dataTable"

 :autoGenerateColumns = 'autoGenerateColumns'

 >

 <gc-column

 :width="width"

 :dataField="'price'"

 :visible = 'visible'

 :formatter = 'formatter'

 :resizable = 'resizable'

 ></gc-column>

 </gc-worksheet>

 </gc-spread-sheets>

 </div>

</template>

<script>

import '@grapecity/spread-sheets/styles/gc.spread.sheets.excel2016colorful.css'

import '@grapecity/spread-sheets-vue'

export default {

data(){

  return {

 hostClass:'spread-host',

 autoGenerateColumns:true,

 width:300,

 visible:true,

 resizable:true,

 formatter:"$ #.00"

 }

},

computed:{

 dataTable(){

 let dataTable = [];

  for (let i = 0; i < 42; i++) {

 dataTable.push({price: i + 0.56})

 }

  return dataTable

 }

}

}

</script>

<style scoped>

.spread-host {

width: 500px;

height: 600px;

}

</style>
  1. 使用傳統HTML

建立HTML頁面，將SpreadJS和Vue-SpreadJS添加到HTML模板：添加引用 gc.spread.sheets.all....min.js, gc.SpreadJS....css 和 gc.spread.sheets.vue...*.js 文件到 HTML 模板 (i.e. 你的 index.html 文件)便可。

點擊此處，瞭解更多 SpreadJS 在Vue的技術資源。

如何在 React等框架使用SpreadJS

與 Vue 相似，SpreadJS也能夠經過使用Node包管理器和傳統HTML 兩種方式與React一塊兒使用，點擊此處，瞭解使用方式。

結語

從ES6開始，JavaScript中發生許多變動。對於JavaScript，Angular，React或Vue開發人員都應該知道它們。

瞭解這些變動可使你成爲更棒的開發者，甚至能夠幫助您得到更高的薪水。並且，若是你只是在學習React之類的庫以及Angular和Vue之類的框架，那麼您必定要掌握這些新特性。

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程