【JavaScript】几个语法糖

【前言】
本系列为个人前端学习之路的学习笔记，在过往的学习过程中累积了很多笔记，如今想藉着IT邦帮忙这个平台做整理+再复习。
本系列标题一律以【】标示该篇文章主要涉及的内容，例如【JavaScript】、【Vue】等等。
若内容有误，还麻烦各路大神不吝於点出问题，感激不敬。

语法糖（Syntactic sugar）是这语法对语言的功能没有影响，但是更方便程序设计师使用，例如更简洁或是可读性更高
在ES6就有不少语法糖，它们并不会影响运作，逻辑与原本JavaScript语法一样，但可以更简洁
本篇就节录几个我学到的ES6语法糖：

物件内方法缩写

一般我们撰写物件内的方法会是这样：

const obj = {
    fn: function(){
        console.log("helloWorld!");
    }
}

ES6的语法糖让我们可以对其进行缩写，变成这样：

const obj = {
    fn(){
        console.log("helloWorld!");
    }
}

物件内使用变数

原本我们要在物件内使用变数会像这个样子：

const person = {
    name: "小明"
};
const people = {
    person: person
};

当我们在物件people中想要把变数person加进来做为属性person的值时，要写person: person
但ES6的语法糖让我们在属性与变数名称一致时可以对其进行缩写，变成这样：

const person = {
    name: "小明"
};
const people = {
    person
};

用展开连接阵列

过去我们合并阵列会使用新阵列 = 阵列A.concat(阵列B);

const array1 = [1];
const array2 = [2, 3];
const array3 = array1.concat(array2);

但ES6的语法糖让我们可以使用展开的方式：

const array1 = [1];
const array2 = [2, 3];
const array3 = [...array1, ...array2];

展开还可以用在将类阵列变为阵列：

const dom = document.querySelectorAll("li");
const newDom = [...dom]; //阵列

透过document.querySelectorAll()得到的会是节点阵列，属於类阵列，和阵列并不一样，能使用的方法也有限
透过展开就可以将其转为纯阵列

预设值

以前我们在加入预设值可能会是这样：

function sum(a, b){
    if(!b){
        b = 1
    }
    return a + b
}
console.log(sum(1)); //2

透过if判断式检测b是否存在，不存在则给予一个预设值
ES6让我们可以这样写：

function sum(a, b = 1){
    return a + b
}
console.log(sum(1)); //2