上一篇文章中我們簡單提到了ES6的概念,而在更細節上面,ES6到底有哪些新的特色,與原本的ES5版本有哪些不同,使原本的Javascript變得更完整、更方便程式工程師去撰寫,並且ES6是目前的主流,就算沒有接觸過ES5的人,也能夠直接重ES6這個版本去上手,不會有銜接上的問題! 學習最新的技術才能夠跟上瞬息萬變的科技人生,讓我們看看ES6有哪些特色吧!
ES5,全名是ECMAScript 6.0,是國際化標準組織ECMA所推出的Javascript標準,2015.06 發行。
ES6 主要是為了解决 ES5 的不足,ECMAScript 隨著時代演進而更新內容(例如新增語法、功能),而這篇文章要討論的 ES6 就代表 ECMAScript 第六版本的意思。順帶一提,ES6 的官方正式名稱是 ECMAScript 2015 (ES2015),因為在2015年發行,但我們實際上稱作還是叫ES6。
這些是在ES6版本中新的特性,那我們就一個一個介紹八。
let、const
前面的文章中我們也提到過這兩個宣告變數,我們還是再複習一下吧!
let 範例
var x = 10;
// x = 10 //全域
{
let x = 2;
//x = 2 局部作用域
}
// x = 10 //全域
const範例
var x = 10;
// x = 10 //全域
{
const x = 2;
x=10; //這行錯誤
// x = 2 //局部作用域,並且無法更改值
}
// x = 10 全域
指數運算
新增了方法讓我們可以在指數運算時更簡寫易懂。
範例:
var x = 4;
var z = x ** 2; // 结果是 16
var y = 3;
var u = y ** 3; // 结果是 27
這些結果會與Math.pow(x,y)方法相同。
範例:
var x = 4;
var z = Math.pow(x,2); // 结果是 16
var y = 3;
var u = Math.pow(y,3); // 结果是 27
默認參數值
在函數中我們可以使用默認參數值,來應付沒有帶參數的情況。
function action(x, y = 10) {
return x + y;
}
action(5); // 回傳15,即使後面沒有帶參數y,會自動把10給帶入(默認參數值)。
陣列.find()
新增了陣列方法find()查詢通過函數方法的第一個陣列元素值。
範例:
var numbers = [10, 2, 3, 27, 25];
var x = numbers.find(action);
function action(value, index, array) {
//三個帶入參數分別為項目值、項目索引、陣列本身
return value > 18; //結果會是27
}
陣列.findIndex()
新增了陣列方法findIndex()查詢通過函數方法的第一個陣列元素索引。
範例:
var numbers = [10, 2, 3, 27, 25];
var first = numbers.findIndex(action);
function action(value, index, array) {
return value > 18; //結果為3
}
這篇文章就介紹到這邊拉!其實在後續ES6以後還推出了許多種新的特性,而之後的命名就為年分ES2016、ES2017、ES2018、後續的細節在之後的文章中我們會再提到!