iT邦幫忙

2021 iThome 鐵人賽

DAY 15
0
Modern Web

初學者跪著學JavaScript系列 第 15

初學者跪著學JavaScript Day15 : 陣列中沒被定義的空值(empty item)

  • 分享至 

  • xImage
  •  

一日客語:中文:加油 客語:gaˊ iuˇ 嘎2聲U
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 同學


上一篇
初學者跪著學JavaScript Day14 : 創建Array 四種方式
下一篇
初學者跪著學JavaScript Day16 : 陣列Array 迭代的小小秘密
系列文
初學者跪著學JavaScript30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

2 則留言

0
南國安迪
iT邦新手 3 級 ‧ 2021-09-30 15:57:07

根本是被前端耽誤的插畫家,浪費才能啊

wendy iT邦新手 2 級 ‧ 2021-09-30 22:58:47 檢舉

要不要先跟我買畫作

0
Chiahsuan
iT邦新手 4 級 ‧ 2021-09-30 21:40:21

感謝追根究底的Wendy,你找的stackoverflow那篇讚讚

wendy iT邦新手 2 級 ‧ 2021-09-30 22:55:25 檢舉

都是Leeder教的,我也長知識了

我要留言

立即登入留言