初学者跪着学JavaScript Day15 : 阵列中没被定义的空值(empty item)

一日客语：中文：加油 客语：gaˊ iuˇ 嘎2声Ｕ
Array:是物件只是做了小调整变成阵列
特性:
1.新元素加入，他的length会改变
2.length设小於原阵列长度会截断阵列
3.阵列是从Array.prototype

是否为阵列 Array.isArray()

回传true/false

是阵列回传true
不是阵列回传false

Array.length

• length 为Array物件的属性
• 回传该阵列的元素个数

const a = [0];
a.length = 10;
console.log(a);//[ 0, <9 empty items> ]

length设定
长度大於原本阵列，阵列里产生empty item，但要注意empty item是没有index，使用阵列要尽量避免产生empty item，这元素是不可以迭代的，了解原因要先知道forEach() 和map()

先简单说forEach() 和map()

Array.prototype.map() 和 Array.prototype.forEach()

会将阵列内的元素，作为参数带入callback function，每个元素各执行一次function

forEach()和map()不同地方在於回传值

forEach():undefined
map():回传array，此array会是每一个元素经由callback function运算後所回传的结果之集合

注意:阵列index没有元素时（未被设定的索引：已被删除或从未被赋值）并不会呼叫callback function。
a.map((element) => console.log(element));

(其他篇在详细介绍他们)

设定length大於原本阵列长度

有设index的元素，在forEach/map才会被印出来

let a = [10];
a.length = 10;
a.map((element) => console.log(element));//10

a.forEach((element) => console.log(element));//10

心中会疑惑
取值empty item值，印出结果不是 empty item 而是undefined，why??

let a = [10];
a.length = 10;
console.log(a); //[ 10, <9 empty items> ]

console.log(a[2]); //undefined

根据array的原型链

图片来自:原生的原型

建立array
array[[Prototype]]会是Array.prototype

Array的[[prototype]]会是Object.prototype

a= [1,2,3] -> Array(3) ->Object
可以想像成是

a = {
    0: 1,
    1: 2,
    2: 3,
    length: 3,
};

当使用length增加array长度

let a = [10];
a.length = 3;
console.log(a);
[ 10, <2 empty items> ]

会像是

const a = {
    0: 10,
    length: 3,
}

所以使用阵列取值a[1]会像是物件取元素

console.log(a[1]); //undefined

阵列元素是undefined呢？？？

const b = [undefined, undefined, 10];
console.log(b);
console.log(b[0]);//undefined

想像成

const b = {
    0: undefined,
    1: undefined,
    2: 10,
};

使用map、forEach

const b = [undefined, undefined, 10];

b.map((element) => {
    console.log(element);
   
});
//undefined
//undefined
//10

b.forEach((element) => {
    console.log(element);

});
//undefined
//undefined
//10

所以forEach/map 之所以不会印出undefined可能是因为没有key值，所以迭代不到

原生的原型
Difference between "empty' and "undefined" in Javascript?
mdn
JavaScript大全
忍者开发技巧探秘第二版
谢谢 Array Leeder 同学