一日客語:睡覺 客語：睡目 soi55mug2 雖木˙
介紹:

1. 有字面值:[ ]
2. [ ]裡面值稱為元素，使用comma逗號區隔
3. index數值是無號的32bit整數
   陣列可以放:Math.pow(2,32)-1 =4294967295個元素
   index最大4294967294
4. 可以動態增加/減少陣列大小
5. 元素可以任何type
6. 允許有缺值
7. 是迭代的物件，能使用for/of
8. 是特殊物件，能用for/in 找array的index值

建立Array方法

1. array literal:最簡單創立方法，[ ]裡面什麼都可以
2. array constructor:若引數是單一數值會是array的長度，非單一數值就是新創建陣列的元素
3. iterable(可迭代) object使用分散式運算子:可以copy其他陣列第一層元素
4. Array.of 和Array.from
   Array.of:引數新創建陣列的元素
   Array.from:可迭代物件/類陣列可以轉為陣列元素

1.array literals

元素可以任何type

let mrArray1 = [];
let myArray2 = [7, 10];
let mrArray3 = [9, true, 'wendy', {}, []];
let mrArray4 = [1, , 3];
console.log(mrArray1);//[]
console.log(myArray2);//[ 7, 10 ]
console.log(mrArray3);//[ 9, true, 'wendy', {}, [] ]
console.log(mrArray4);//[ 1, <1 empty item>, 3 ]

陣列可以放:
Math.pow(2,32)-1 =4294967295個元素
index最大4294967294

let empty = [];
empty.length = Math.pow(2, 32) - 1; //使用index 範圍
console.log(empty); //[ <4294967295 empty items> ]
empty.length = Math.pow(2, 32); // RangeError: Invalid array length

2.array constructor 建構器

new Array()

不使用引數

let a = new Array();
console.log(a); //[]

使用引數

引數放單一數字
這種方式沒有值在Array裡
多個數字會被認為那是陣列的元素

let b = new Array(5);
console.log(b);  //[ <5 empty items> ]
console.log(b[0]); //undefined

引數放單個元素(非數字）/多個元素

let c = new Array('apple', ['1'], 1, {});
console.log(c);//[ 'apple', [ '1' ], 1, {} ]

let d = new Array({});
console.log(d);//[ {} ]

3.iterable(可迭代) object使用分散式運算子

分散式運算子不是真正的運算子

• 是一種淺拷貝方式，不會改變到原陣列但在陣列裡的陣列會改到原陣列

let a = ['apple', 'water', 'banana', 'orange', 'milk'];
let b = [...a];
let c = [...'abcdefghijklmnopqrs'];
b[0] = 'OMG';
console.log(a);//[ 'apple', 'water', 'banana', 'orange', 'milk' ]
console.log(b);//[ 'OMG', 'water', 'banana', 'orange', 'milk' ]
console.log(c);
//[
//  'a', 'b', 'c', 'd', 'e',
//  'f', 'g', 'h', 'i', 'j',
//  'k', 'l', 'm', 'n', 'o',
//  'p', 'q', 'r', 's'
//]

let a = ['apple', 'water', 'banana', 'orange', 'milk', ['phone']];
let b = [...a];


//改b陣列的元素
b[0] = 'OMG'; //第一層
b[5][0] = 'HTC'; //第二層

//看看a陣列是否也跟著改
console.log(a);
//[ 'apple', 'water', 'banana', 'orange', 'milk', [ 'HTC' ] ]

//b[0]不會改到a陣列元素
//b[5][0]會改到a陣列的元素

4.Array.of 和Array.from

在new Array()
ex:new Array(10) 引數是單一數值，會被當作array 的長度，
陣列會有10個位置沒有裝東西

但是我想輸入一個數值這數值是元素不是array 的長度？

const myArray1 = [10];
console.log(myArray1);//[ 10 ]

const myArray2 = [];
myArray[0] = 10;
console.log(myArray2);//[ 10 ]

但這樣太慢了，想要引數是10要如何做呢？
可以使用.Array.of

Array.of()

語法：Array.of(element0[, element1[, ...[, elementN]]])
elementN:新建立陣列的元素。
返回值:Array instance(實體/實例)
mdn:
Array.of() 與 Array 建構式之間的不同在於如何處理整數引數：Array.of(7) 會建立一個擁有單個元素7的陣列

const a = Array.of(10);
console.log(a); //[ 10 ]

const b = Array.of(10, 20);
console.log(b); //[ 10, 20 ]

const x = Array.of(undefined);
console.log(x); // undefined ]

const y = Array.of(null);
console.log(y); //[ null ]

const z = Array.of('wendy', 'apple');
console.log(z); //[ 'wendy', 'apple' ]

Array.from()

mdn:類陣列（array-like）或可迭代（iterable）物件建立一個新的 Array instance(實體/實例)

Array.from(arrayLikeOrIterable[, mapFunction[, thisArg]]);

第一參數 : 可迭代物件/類陣列
第二參數 : 可以使用/不使用function，建立新陣列過程中元素都會代入function，function return 的值回傳入新陣列內

回傳：新的Array

也可以做出淺拷貝方式

const myArray = [3, 6, 9];
const copy = Array.from(myArray);
console.log(copy);//[ 3, 6, 9 ]

console.log(Array.from('apple'));
//[ 'a', 'p', 'p', 'l', 'e' ]
console.log(Array.from([5, 10, 20], (x) => x + x));
//[ 10, 20, 40 ]

類陣列轉成真正的Array

const arrayLike = { 0: 'wendy', 1: 'apple', 2: 'banana', length: 3 };
const myArray = Array.from(arrayLike, (item) => {
    return item;
});

console.log(myArray);//[ 'wendy', 'apple', 'banana' ]

填充數字

const arrayLike = {
    length: 3,
};

const myArray = Array.from(arrayLike, () => {
    return 0;
});

console.log(myArray); //[ 0, 0, 0 ]

const length = 3;
const myArray = Array.from({ length }, (item) => {
    return 0;
});

console.log(myArray); //[ 0, 0, 0 ]

使用for/of

for/of使用在可迭代物件

let a = ['apple', 'water', 'banana', 'orange', 'milk', ['phone']];
let b = [...a];

for (let item of b) {
    console.log(item);
}
結果
apple
water
banana
orange
milk
[ 'phone' ]

使用for/in

in可以任何物件，物件的話會物件的key值
但array會是index

let a = ['apple', 'water', 'banana', 'orange', 'milk', ['phone']];
let b = [...a];

for (let item in b) {
    console.log(item);
    //0
    //1
    //2
    //3
    //4
    //5
}

let a = { red: 'apple', yellow: 'banana' };
console.log(a);
for (let x in a) {
    console.log(x);
    //red
    //yellow
}

來源:
JS大全
5 Handy Applications of JavaScript Array.from()