字串與字串常用方法 String & String method

String 有特定的 property 像是 length，並無法為字串永久新增自定義的屬性
其實所有 primitive values (String, Boolean, null, undefined, Symbol, Number)都有這種特性

• slice 從原本的字串切出特定長度的字串
• indexOf 尋找特定字串，跟array indexOf 一樣，如果沒有匹配結果則 return-1
• trim 移除空白字元（tab, space, breakline）

其餘參數 Rest operators

要使函式可接受任意數量的參數，則可使用 rest operators
呼叫這種函式時，其餘參數會被打包放在一陣列裡，所以可以使用陣列的方法(像是for..of / foreach..)
另外若傳入的參數為空，則該其餘參數便會顯示為空陣列

function getMax(...numbers){
    console.log(numbers); // 顯示為陣列 [4, 12, 7, 2, 11, 15, 8]
    let result = -Infinity;
    for(let number of numbers){
        if (number > result) result = number;
    }
    return result;
}

console.log(getMax(4, 12, 7, 2, 11, 15, 8)); // 15

另外 Rest operators 也可用於解構陣列(Rest Operator as a Destructuring Tool)
要注意的是，Rest element 只能放在最末端
寫法像這樣
let [variable_x , variable_y , ...rest ] = nameOfArray;
這樣則是錯的，會出現 Rest element must be last element 的錯誤
let [variable_x , ...rest ,variable_y ] = nameOfArray;

物件與陣列的解構

簡短說明物件與陣列的解構，解構就是擷取陣列內的元素或物件的屬性為獨立的變數
= 左邊放『要裝該目標值的變數』，右邊放要被解構的陣列或物件
另外解構產生出來的獨立變數本身是 shallow copy，如果擷取的元素為完整的物件或陣列，那改變被解構的物件或陣列，也會影響到解構出來的部分

陣列解構

let buyList = ["onions" , "carrot" , "cauliflower" , "cola" , "noodles"];

// food_1, food_2 為用來裝陣列內元素的變數名稱
let [ food_1 , food_2 , ...rest ] = buyList;
console.log(food_1); // "onions"
console.log(food_2); // "carrot"
console.log(rest); //  ['cauliflower', 'cola', 'noodles']

物件解構

物件解構的用法常見於 react 中

const userInfo = {firstName: "John" , lastName: "Doe"  , eyeColor:"Brown" , age:45}

// 要用來裝目標屬性值的變數名稱需要和物件內的屬性名稱相同，可以不用按照物件內的屬性順序
const {firstName , lastName  , ...rest } = user;
console.log(firstName); // "John"
console.log(lastName); // "Doe"
console.log(rest); // { eyeColor:"Brown" , age:45 }

另外如果左邊的變數名稱沒有對應到目標物件內的屬性名稱，則會自動 assign undefined 的值

const userInfo = {firstName: "John" , lastName: "Doe"  , eyeColor:"Brown" , age:45}

const {firstName , lastName , bla , ...rest } = user;
console.log(bla); // undefined

解構產生的獨立變數是 shallow copy

let pplInfo = {
    name: "Benson",
    age: 54,
    eyeColor: "Brown",
    height: "5'7",
    pets: ["dog", "parrot", "guppy_fish"],
};
let { name, height,  ...rest } = pplInfo;

pplInfo.pets.push("cat");
console.log(rest.pets); // ['dog', 'parrot', 'guppy_fish', 'cat']

Spread operator

長得跟 Rest operators 一模一樣，都是三個點 ...
但 Spread operator 作用為將 array 跟 object 打散成獨立的元素

spread operator in array

const veggies = ["carrot" , "cabbage" , "eggplant"];

const buyList = ["corn" , "cereal" , ...veggies , "soymilk" ];
console.log(buyList); // ["corn" , "cereal" , "carrot" , "cabbage" , "eggplant" , "soymilk" ]

spread operator in object

let pplInfo = {
     name: "Benson",
     age: 54,
     eyeColor: "Brown",
     height: "5'7",
};

let fullInfo = {
    hobby: "reading, gardening",
    ...pplInfo,
};
console.log(fullInfo); // {hobby: 'reading, gardening', name: 'Benson', age: 34, eyeColor: 'Brown', height: "5'7"}
pplInfo.name = "Rev"; 
console.log(fullInfo.name); // Benson

Rest operators vs Spread operator

比較 rest operator 跟 spread operator 的用途