iT邦幫忙

2022 iThome 鐵人賽

DAY 14
0

上一篇文章中我們簡單提到了ES6的概念,而在更細節上面,ES6到底有哪些新的特色,與原本的ES5版本有哪些不同,使原本的Javascript變得更完整、更方便程式工程師去撰寫,並且ES6是目前的主流,就算沒有接觸過ES5的人,也能夠直接重ES6這個版本去上手,不會有銜接上的問題! 學習最新的技術才能夠跟上瞬息萬變的科技人生,讓我們看看ES6有哪些特色吧!

ES6介紹說明

ES5,全名是ECMAScript 6.0,是國際化標準組織ECMA所推出的Javascript標準,2015.06 發行。
ES6 主要是為了解决 ES5 的不足,ECMAScript 隨著時代演進而更新內容(例如新增語法、功能),而這篇文章要討論的 ES6 就代表 ECMAScript 第六版本的意思。順帶一提,ES6 的官方正式名稱是 ECMAScript 2015 (ES2015),因為在2015年發行,但我們實際上稱作還是叫ES6。

ES6特性

  • let、const變數
  • 指數運算
  • 默認參數值
  • 陣列.find()
  • 陣列.findIndex()

這些是在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、後續的細節在之後的文章中我們會再提到!


上一篇
Day13 箭頭函數
下一篇
Day15 Javascript HTML DOM
系列文
Javascripts惡補小教室30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言