在过来几年里，JavaScript有很多的更新。如果你想晋升写代码的能力，这些更新将会对你有十分大的帮忙。
对于程序员来说，理解这门语言的最新倒退是十分重要的。它能使你跟上最新趋势，进步代码品质，在工作中超群绝伦，从而进一步晋升你的薪资待遇。
特地地，如果你想学习像React、 Angular或Vue这样的框架，你必须把握这些最新的个性。
最近，JavaScript减少了许多有用的性能，比方Nullish coalescing operator, optional chaining, Promises, async/await, ES6 destructuring,等等。
那么当初，咱们将探讨每个JavaScript开发者都应该晓得的概念。
JavaScript 中的 Let 和 const
在ES6之前，JavaScript应用var关键字来申明变量，var只有全局作用域和函数作用域，所谓全局作用域就是在代码的任何地位都能拜访var申明的变量，而函数作用域在变量申明的以后函数外部拜访变量。此时是没有块级作用域的。
随着let和const这两个关键字的增加，JS减少了块级作用域的概念。
如何在 JavaScript中应用let
当咱们在用let申明变量时，用于申明一次之后就不能再以雷同的名称从新申明它。
// ES5 Codevar value = 10;console.log(value); // 10var value = "hello";console.log(value); // hellovar value = 30;console.log(value); // 30如上所示，咱们屡次应用var关键字从新申明了变量值。
在ES6之前，咱们能够应用var从新申明之前曾经申明过的变量，这就会导致了一个问题：如果咱们在不知情的状况下，在其余中央从新申明了该变量，很有可能会笼罩原先变量的值，造成一些难以调试的问题。
所以，Let解决很好地解决此问题。当你应用let从新申明变量值时，将会报错。
// ES6 Codelet value = 10;console.log(value); // 10let value = "hello"; // Uncaught SyntaxError: Identifier 'value' has already been declared然而，以下代码是非法的:
// ES6 Codelet value = 10;console.log(value); // 10value = "hello";console.log(value); // hello咱们发现下面的代码看起来没什么问题，是因为咱们从新给value变量赋了一个新值，然而并没有从新申明。
咱们来看下上面的代码：
// ES5 Codevar 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 Codelet 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 Codelet 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 Codefor(var i = 0; i < 10; i++){ console.log(i);}console.log('outside:', i); // 10当应用var关键字时，i在 for循环之外也能够拜访到。
// ES6 Codefor(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); // 20const 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函数。
执行上述代码，输入如下:
调用reject函数会抛出一个谬误，然而咱们没有增加用于捕捉谬误的代码。
须要调用catch办法指定的回调函数来捕捉并解决这个谬误。
promise.then(function(result) { console.log(result);}).catch(function(error) { console.log(error);});输入如下:
所以倡议大家在应用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办法。
如上图所示，咱们在第一个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});// ORcreatePromise(10,24) .then(function(output) { console.log(output); // 34});此外，咱们只能向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);});如何在 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 directoryimport { temp1, temp2 } from './functions'; // import from functions.js file from parent of current directoryimport { temp1 } from '../functions';提醒一点，导入的变量名必须与被导入模块对外接口的名称雷同。
因而，导出应应用：
// constants.jsexport const PI = 3.14159;那么在导入的时候，必须应用与导出时雷同的名称：
import { PI } from './constants';// This will throw an errorimport { PiValue } from './constants';如果想为输出的变量重新命名，能够应用as关键字，语法如下:
import { PI as PIValue } from './constants';咱们认为PI重命名为PIValue，因而不能再应用PI变量名。
导出时也可应用上面的重命名语法：
// constants.jsconst PI = 3.14159;export { PI as PIValue };而后在导入是，必须应用PIValue。
import { PIValue } from './constants';命名导出某些内容之前必须先申明它。
export 'hello'; // this will result in errorexport const greeting = 'hello'; // this will workexport { name: 'David' }; // This will result in errorexport const object = { name: 'David' }; // This will work咱们来看上面的validations.js 文件:
// utils/validations.jsconst 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.jsimport { isEmpty, isValidEmail } from "./utils/validations";console.log("isEmpty:", isEmpty("abcd")); // isEmpty: string is not empty and does not contain spacesconsole.log("isValidEmail:", isValidEmail("abc@11gmail.com")); // isValidEmail: email is validconsole.log("isValidEmail:", isValidEmail("ab@c@11gmail.com")); // isValidEmail: email is invalidJavaScript的默认导出
如上所述，单个文件中最多只能有一个默认导出。然而，你能够在一个文件中应用多个命名导出和一个默认导出。
要申明一个默认导出，咱们须要应用以下语法：
//constants.jsconst name = 'David';export default name;在导入时就不须要再应用花括号了。
import name from './constants';如下，咱们有多个命名导出和一个默认导出:
// constants.jsexport 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 hereimport NAME, { PI, AGE } from './constants';应用 export default 导出的内容，在导入的时候，import前面的名称能够是任意的。
// constants.jsconst AGE = 30;export default AGE;import myAge from ‘./constants’;console.log(myAge); // 30另外， export default的变量名称从Age到myAge之所以可行，是因为只能存在一个export default。因而你能够随便命名。还需注意的是，关键字不能在申明变量之前。
// constants.jsexport default const AGE = 30; // This is an error and will not work因而，咱们须要在独自的一行应用关键字。
// constants.jsconst AGE = 30;export default AGE;不过以下模式是容许的:
//constants.jsexport default { name: "Billy", age: 40};并且须要在另一个文件中应用它
import user from './constants';console.log(user.name); // Billyconsole.log(user.age); // 40还有，能够应用以下语法来导入constants.js文件中导出的所有变量:
// test.jsimport * as constants from './constants';上面，咱们将导入所有咱们constants.js存储在constants变量中的命名和export default。因而，constants当初将成为对象。
// constants.jsexport const USERNAME = "David";export default { name: "Billy", age: 40};在另一个文件中，咱们按一下形式应用。
// test.jsimport * as constants from './constants';console.log(constants.USERNAME); // Davidconsole.log(constants.default); // { name: "Billy", age: 40 }console.log(constants.default.age); // 40也能够应用以下形式组合应用命名导出和默认导出:
// constants.jsconst 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, Johnconsole.log(showMessage()); // Welcome back, Guest但当初应用ES6提供的默认参数，咱们能够这样写:
function showMessage(firstName = 'Guest') { return "Welcome back, " + firstName;}console.log(showMessage('John')); // Welcome back, Johnconsole.log(showMessage()); // Welcome back, Guest函数的默认参数能够为任意值。
function display(a = 10, b = 20, c = b) { console.log(a, b, c);}display(); // 10 20 20display(40); // 40 20 20display(1, 70); // 1 70 70display(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 Codefunction 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 NYdisplay('David', 35, undefined); // David 35 NY// ORdisplay('David', 35, undefined); // David 35 NYdisplay('David', 35, null); // David 35 null当咱们传递null作为参数时，它理论是给location参数赋一个空值，与undefined不一样。所以它不会取默认值“NY”。</pre>
Array.prototype.includes
ES7减少了数组的includes办法，用来判断一个数组是否蕴含一个指定的值，如果是返回 true，否则false。
// ES5 Codeconst numbers = ["one", "two", "three", "four"];console.log(numbers.indexOf("one") > -1); // true console.log(numbers.indexOf("five") > -1); // false数组能够应用includes办法:
// ES7 Codeconst numbers = ["one", "two", "three", "four"];console.log(numbers.includes("one")); // trueconsole.log(numbers.includes("five")); // falseincludes办法能够使代码简短且易于了解，它也可用于比拟不同的值。
<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一起应用：
- 应用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>- 应用传统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之类的框架，那么您肯定要把握这些新个性。