初学者跪着学JavaScript Day14 : 创建Array 四种方式

一日客语:睡觉 客语：睡目 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()