接續昨天學的三個語法，今天還有一些需要把他學會!!

陣列解構

讀取陣列我們可以這樣寫

const fruits = ['蘋果','橘子','芒果'];

const apple = fruits[0]
const orange = fruits[1]
const mango = fruits[2]

有了ES6解構可以將它更簡化，省了很多行數

const fruits = ['蘋果','橘子','芒果'];

const [apple, orange, mango ] = fruits

//遇到空直可以直接跳過
const [apple, , mango ] = fruits

展開運算子

1. 重新排列組合

   和過去的concat是一樣的功能，...是個更簡單去重新組合陣列的方式

   const arr = [1,2,3]
   const arr2 = [8,9,10]
   
   const newArr = [...arr, ...arr2] //[1, 2, 3, 8, 9, 10]
   

2. 淺拷貝

   用...做淺拷貝。因為是拷貝出來的關係，他並不會影響arr的值。

   const arr = [1,2,3]
   const arr2 = [...arr]
   
   arr2.push(4)
   console.log(arr) //[1,2,3]
   console.log(arr2) //[1,2,3,4]
   

字串模板

以前要寫字串需要加很多+，讓整個畫面變得很不乾淨且難以閱讀，有了字串模板後畫面一目了然。

let price = 20;
let fruit = '蘋果';
str ='<ul class="menu"><li>' + fruit + '<span>' + price + '元</span></li></ul>'

//簡化後
str =`
<ul class="menu">
	<li>
		${fruit}<span>${price}元</span>
	</li>
</ul>`

這幾個大重點了解後明天要開始進入React內容啦。