Math.round():四捨五入

Math.round(3.14)      // 3
Math.round(5.49999)   // 5
Math.round(5.5)       // 6
Math.round("5.50001") // 6
Math.round(-5.49999)  // -5
Math.round(-5.5)      // -5
Math.round(-5.50001)  // -6

display:flex;

flex-wrap:nowrap |wrap

flex-direction:靈活項目的方向。 row 水平顯示 | row-reverse 反向水平顯示 | column 單行顯示 | column-revers 反向單行顯示

flex-flow是flex-direction和flex-wrap的縮寫

1

flex-flow: flex-direction flex-wrap;

justify-content:水平控制Flex「水平對齊」的位置:flex-start 開始| flex-end | center | space-between ｜space-around

＃flex-start:起點
＃flex-end：終點
＃center：置中
＃space-between：:是平均分配「元素」位置，但左右兩側會貼齊主軸的起點、終點
＃space-around:是平均分配「元素」位置，但左右兩側的間距會較小 | Space-evenly是「元素」和「左右兩側」的間距皆相同;

align-item:設置對像是行內成員，控制「垂直對齊」的位置:stretch | flex-start | flex-end | center | baseline;

設置對像是行內成員，該屬性可以控制彈性容器中成員在當前行內的對齊方式。當成員設置了align-self 屬性時，父容器的 align-items 值則不再對它生效；行內成員會在其邊界盒正交軸上被居中（如果行正交尺寸小於行內成員尺寸，行內成員將會在正交軸兩方向等量溢出）

align-content:align-content是用來控制Flex的「行」在「水平方向」的對齊位置一定要設flex-wrap:wrap因為它是控制「行」，一定要有多行才能觸發

所有行被集中(擠)在彈性容器（正交軸）中間。它們彼此之間齊平，並且跟彈性盒子正交起始邊界的空白與跟彈性盒子正交結束邊界的空白相等。 （如果溢出空白為負數，所有行將會在正交軸兩方向等量溢出）鏈接。 ）

align-self:針對「單一」

order:order預設值為0,重新定義內元件的排列順序，順序會依照數值的大小排列

#flex

flex 是縮寫，裡面依序包含三個屬性 flex-grow、flex-shrink 和 flex-basis。

1

flex:flex-grow | flex-shrink | flex-basis 

flex-grow:屬性用於設置或檢索彈性盒子的擴展比率，依照設定”比例分配剩餘空間”，預設值爲 0;

1

flex-grow: number;

flex-shrink 元件的收縮性:按比例分配剩餘空間, 元件的伸展性，是一個數值，當空間分配還不足時的當前元件的收縮性，預設值為 0，如果設置為 0 則不會縮放。

flex-basis 預設值爲 auto，表示其預設分配到的空間，與 width 很像，但優先程度較高：。

• number:一個長度單位或者一個百分比，規定靈活項目的初始長度。
• auto:默認值。長度等於靈活項目的長度。如果該項目未指定長度，則長度將根據內容決定。

1

flex-basis: number|auto|initial|inherit;

toString():把陣列轉成字串

const stringObj = new String('foo');
const newObj=stringObj.toString();
console.log(newObj)
//"foo"

toLowerCase():字符串轉換為英文小寫字母后的結果

const sentence = 'The quick brown fox jumps over the lazy dog.';

console.log(sentence.toLowerCase());
//the quick brown fox jumps over the lazy dog.

toUpperCase():字符串轉換為英文大寫字母后的結果

const sentences = 'The is apple.';
console.log(sentences.toUpperCase());
//"THE IS APPLE."

trim():清空左右兩邊空白

const greeting = '   Hello world!   ';
const greetingTrim=greeting.trim();
console.log(greetingTrim);
//Hello world!"

const greetTrimEnd=greeting.trimEnd();
console.log('清除結束的空白',greetTrimEnd)
//"清除結束的空白" "   Hello world!"

greenTrimStart=greeting.trimStart();;

console.log(‘清除開始的空白’,greenTrimStart)
//“清除開始的空白” “Hello world!   “

reverse():反轉一個陣列。

const array1 = ['one', 'two', 'three'];
const reversed = array1.reverse();
console.log(reversed)
//["three","two","one"]

slice():從數組中返回選定(擷取）的元素，作為一個新數組。

參數（開始,結束但不包括）

const fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
const citrusSlice = fruits.slice(1, 3);
//Orange,Lemon

findIndex():方法將依據提供的測試函式，尋找陣列中符合的元素，並返回其 index（索引）。如果沒有符合的對象，將返回 -1 。

const array1 = [5, 12, 8, 130, 44];

const isLargeNumber = (element) => element > 13;

console.log(array1.findIndex(isLargeNumber));
// Expected output: 3

join():該方法通過連接數組

const elements = ['Fire', 'Air', 'Water'];

console.log(elements.join());
//"Fire,Air,Water"

console.log(elements.join(''));
//"FireAirWater"

console.log(elements.join('-'));
// "Fire-Air-Water"

split():分割字符串

const str = 'The quick brown fox jumps over the lazy dog.';
const strSplit=str.split('');
console.log('strSplit',strSplit)
//'strSplit' ["T","h","e"," ","q","u","i","c","k"," ","b","r","o","w","n"," ","f","o","x"," ","j","u","m","p","s"," ","o","v","e","r"," ","t","h","e"," ","l","a","z","y"," ","d","o","g","."]

includes():方法確定數組是否在其條目中包含某個值，返回true或 false

const array1 = [1, 2, 3];

console.log(array1.includes(2));
//  true

const pets = ['cat', 'dog', 'bat'];

console.log(pets.includes('cat'));
//  true

console.log(pets.includes('at'));
//  false