Javascript – ES6 新寫法

解構

JavaScript

<script>

	const person = {
		name: '小明',
		age: 16,
		like: '點心',
		url: 'https://randomuser.me/api/'
	};
	// 取出特定值
	const { name, age, like } = person; //把person 裡的屬性直接拿出來
	console.log(name);
	
	const perpole = ['小明', '杰倫', '小白']; //Array也可以這樣直接取出來
	const [Ming, Jay, White] = people;
	console.log(Ming, Jay, White);
	
	// 重新命名
	const { name: newName } = person; //取出name 然後variable名稱設為 newName
	console.log(newName);
	
	// 預設值
        const { phone = '12345678' } = person; //如果phone這個屬性不存在就會使用預設值
        console.log(phone);
</script>

使用情景 1

JavaScript

<script>
  fetch('https://randomuser.me/api')
    .then(res => {
      return res.json();
    })
    .then(json => {
      console.log(json.result[0]); //原始寫法
      const [result] = json.results; //新的寫法
      console.log(result);
      
      const { phone, email } = result; //直接取出 phone, email等屬性
      console.log(phone, email); 
      
    }

</script>

使用情景 2

JavaScript

<script>

function fn({name, age}){  //直接取得傳入的Object的屬性
  console.log(name ,age);
}

fn(person);

function fn2(){
  return {
    name: '小明',
    age: 16,
    like: '點心',
    url: 'https://randomuser.me/api/'
  }
}

const { url } = fn2();  //直接從函數取出指定屬性
console.log(url);

</script>

物件縮寫形式

JavaScript

<script>
// 函式縮寫
// 舊的寫法
const person = {
  name: '永發',
  callName: function(){
    console.log(this.name);
  }
}

// 新的寫法
const person = {
  name: '永發',
  callName(){
    console.log(this.name);
  }
}

// 屬性縮寫

const name = '小明';
const callName = function(){
  console.log(this.name);
}

// 舊的寫法
const person = {
  name: name
};

// 新的寫法
const person = {
  name,
  callName
};


// 建立新物品 並加入其他屬性
const person2 = {
  ...person,
  method(){
    console.log("這是一個新的方法");
  }
};
console.log(person2 === person); // false
person2.method();


</script>

物件/陣列展開

JavaScript

<script>

const people = ['小明', '杰倫', '永發'];
const person = {
  myName: '小明',
  age: 16,
  like: '點心',
  url: 'https://randomuser.me/api/',
};

console.log(people);
console.log(...people); // 展開Array (小明 杰倫 永發)
console.log({...person}); // 效果雖然像 console.log(person); 但運作原理不相同

const people2 = ['媽媽','爸爸'];

const people3 = [...people, ...people2]; // 將兩組陣列合併

// 沒有用展開
const person2 = person;
person2.myName = '杰倫';
console.log(person.myName); //這裡會顯示 杰倫
console.log(person === person2); // true

// 有用展開
const person2 = {...person}; // 淺層拷貝
person2.myName = '杰倫';
console.log(person.myName); //這裡會顯示 小明
console.log(person === person2); // false


</script>

函式展開

HTML

<body>

<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>

</body>

JavaScript

<script>

const dom = document.querySelector("p");
console.log(dom); //是NodeList, 只能用forEach; 不能使用map

const dom2 = [...document.querySelector("p")];

console.log(dom2); //展開後會變成純陣列

const dom3 = [...dom2];
dom3.map(a => {console.log(a)});


// 應用在函式上
function fn(n1, n2, n3){
  console.log(n1, n2, n3);  //小明 杰倫 永發
}
fn(...people);


function fn2(){
  console.log(arguments);  //arguments 是預設參數, 類陣列
  const arg = [...arguments];
  
  arg.forEach(a => {
    console.log(a);
  });
  
}
fn2(1, 2, 3, 4, 5);


// 應用在函式上
function fn3(a, ...arg){ // 這裡的arg 是一個純陣列, 比起arguments 會更好
  console.log(a, arg);  
  arg.forEach(x => {
    console.log(x);
  });
}

fn3(1,2,3,4,5);  //a = 1, arg = 2 3 4 5


</script>

可選串連 Optional Chaining

避免深層錯誤
可作為深層資料判斷
避免API 資訊不正確導致出錯

JavaScript

<script>

const person = {
  name: '永發',
  age: 16,
  like: '點心',
  url: 'https://randomuser.me/api/';
  friend:{
    Jay:{
      name: '杰倫',
      id: 1
    },
    Ming:{
      name: '小明',
      //id: 2
    }
  }
}

console.log(person.friend.Ming?.id);  //加上? 會出現undefined 否則會出現error 並導致後面的程式碼無法執行

//因此可改成以下
console.log(person?.friend?.Ming?.id);
</script>