標籤彙整:ES6

const

const 的特性

  1. 不可以被修改(再指定)
  2. 如果有block,在block裡面可以被改,但是回到外面會變回初始值

cant’t be updated & defined

const width=100;

width=200;
console.log(width);//100
//不可被修改

block scope

let points=50;
const winner=false;


if(points>40) {
 const winner=true;
 console.log(winner);//true
 //只有在block內部,才能夠被更改
}

console.log(winner);//false
//在外部則不會被更改,呈現初始值

By Value or By Reference

當資料類型為By Value時〔Number, String, Boolean〕
以const宣告的變數是不能被再指定的(即等於不能被改)

//錯誤示例
const name='Ian';
name='Chen'; //←ERROR!!

但若資料類型是By Reference時〔Object, Array〕,
以const宣告後可以用push, object.item=xxx等方式修改其值。
但一樣不能進行再指定的動作

//正確示例
const fruits=['apple', 'banana', 'orange'];
console.log(fruits); //['apple', 'banana', 'orange']

fruits.push('grape');
console.log(fruits); //['apple', 'banana', 'orange', 'grape']
//錯誤示例
const colors=['red', 'blue', 'green'];
colors=['pink', 'black', 'white'] //←ERROR!!

let

block

block是指大括弧 {} 裡面。
像是if述句,for述句,function裡面都是block

  • global scope→任何地方都能被改
  • block socpe→在if述句,for述句,function裡面可以被改(大括號包起來的地方),在外面還是回到初始值
  • function scope→只有在function裡面才可以被改

let 的特性

  1. 可以被修改
  2. 如果有block,在block裡面可以被改,但是回到外面會變回初始值

updated & defined

let width=100;

width=200;
console.log(width);//200
//可被修改

block scope

let points=50;
let winner=false;


if(points>40) {
 let winner=true;
 console.log(winner);//true
 //只有在block內部,才能夠被更改
}

console.log(winner);//false
//在外部則不會被更改,呈現初始值

箭頭函數

目的

簡化function的形式,只保留參數與函式

//ES5
function(參數){
  函式
}

//ES6
(參數) => {函式}

範例

var names=["Ian", "Moko", "Afro"];

//ES5
//names的毎筆資料會丟進function的參數
//變成全名
//陣列.map(),修改原陣列,變成新的陣列
var fullNames=names.map(
 function(name){
 return `${name} CHEN`;
 }
);
console.log(fullNames);//["Ian CHEN", "Moko CHEN", "Afro CHEN"]

//ES6
//(參數) => {函式}
var fullNames2=names.map(
 (name) => 
 {return `${name} CHEN`;});
console.log(fullNames2);//["Ian CHEN", "Moko CHEN", "Afro CHEN"]


//只有一個參數的話可以不用()
//也可以省略return,順便拿掉{}
var fullNames3=names.map(name => `${name} CHEN`);
console.log(fullNames3);//["Ian CHEN", "Moko CHEN", "Afro CHEN"]

進階:指定參數初始値

const numbers=[5,2,7,10,50];

//ES5
var total=0;
for(i=0;i<numbers.length;i++){
 total += numbers[i];
}

console.log(total) //74

//ES6
//reduce,陣列累加用法
const total2=numbers.reduce((total, number) => {
 return total += number;
},0)//←這邊的0等同於宣告total初始値=0,total從0開始累加

console.log(total2) //74

進階:多個述句(statement)

加分號結束後直接寫

button.btns click
button.btns click
button.btns click
#btnstatus
const btns=document.querySelectorAll(".btns");
btns.forEach((btn, n) => {
  btn.addEventListener("click", function(){
  btnstatus.textContent=`you clicked btn ${n+1}`;
 });
  btn.addEventListener("mousemove", function(){
  btnstatus.textContent=`you touched btn ${n+1}`;
 })
})

Display

模板字符串

説明

  • ES6新規範,允許在字串内置入變數﹐參數等
  • 變數﹐參數的地方用${}包起來
  • 整個字串要用反引號`包起來(不使用雙引號”包)

範例

.text
var a=3;
var b=2;

//整個字串要用反引號`包起來(不使用雙引號"包)
//變數﹐參數的地方用${}包起來
document.querySelector(".text").textContent=`計算變數a+b=${a+b}`;

Display