ES6-其他好用的特色

解構

解構陣列

// 原始寫法
const point = [1,2,3];
const x = point[0];
const y = point[1];
const z = point[2];

// ES6作法
const point = [1,2,3]
const [x,y,z] = point;

//只取第一個
const [x] = point;

//只取第二個，用「，」捨去前面的
const[,y] = point

//取第一個跟其他的，用「...」代表
const[x,...others] = point;//others 代表一個陣列[2,3]

//給予預設值，當長度不夠時，會自動補植
const[x,y,z,w = 0] = point;

解構物件

//原始寫法
const point ={ x:1, y:2, z:3 };
const x = point.x;
const y = point.y;
const z = point.z;

//ES6寫法
const { x, y, z} = point;

//只取一個值
const { x } = point;

//只取x跟其他的
const { x, ...others} = point//other代表{y:2, z:3}

//給予預設值，如果原本point裡面沒有值，就會給它預設值
const { x=0, w=0 } = point;//x還是1, w是0

//重新命名
const { x:px=0 } = point;//px是1，可是x會是undefined

解構物件用於函式

// 原始寫法
const point ={ x:1, y:2, z:3 };
const draw = point=>{
    console.log(point);
}

//解構寫法
const draw = ({x,y,z})=>{
    draw(point);//印出1 2 3
}

字串模板

// 原始寫法
const msg = "I am "+ age +" years old";

//字串模板寫法，支援多行
const msg = `
    I am ${age *2} years old.
    I have ${brother} brothers and ${sister} sisters.
`;

async/await

//原始寫法
callSomeApi(function(result){
    console.log(result);
})

//promise
callSomeApi().then(result=>{
    console.log(result)
})

//async/await寫法
//要使用await，外面一定要包一個async function
//async被還是是使用promise，所以await後面呼叫的函式還是要回傳一個promise
const start = async() =>{
    const result = await callSomeApi()
}
start();