iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 20
1
自我挑戰組

JavaScript技術手冊閱讀筆記系列 第 20

第20天:還在對字串用for迴圈嗎?改用for...of吧,for...of與for...in的差別

  • 分享至 

  • twitterImage
  •  

之前好像有提過string.length和string.charAt這種JavaScript最一開始存在的API是以碼元數量來計算的。在那個時候一個字對一個碼元是理所當然的,而後來除了英文以外,各國文字、中文罕見字逐漸加進字元集後,碼元數量不夠用,那些一個碼元不能表示的字只好改用兩個碼元來表示。

如下圖:
https://ithelp.ithome.com.tw/upload/images/20201005/20120420IK5AP26qBu.png

因為第三個字元是罕見字會用兩個碼元,所以這三個字會以\u4E2D\u6587\uD860\uDD17四個碼元來表示。

https://ithelp.ithome.com.tw/upload/images/20201005/201204203j8m1wAf3m.png

for...of

而ES6新增了for...of語法,可以遍例字串或陣列,其中for...of會正確的取得字元而不是碼元

for(let c of str){
    console.log(c);
}

https://ithelp.ithome.com.tw/upload/images/20201005/20120420if6L9gTsGV.png

for...of會自動幫我們把裡面的元素依序一個一個的全部取出來
https://ithelp.ithome.com.tw/upload/images/20201005/20120420P1f12Oog9v.png

for...in

for...in可以列舉物件的特性或成員,搭配[]運算子可以取得物件的該成員。當然,若特性被設定為不可列舉,哪就取得不到,for in只能取得的成員或特性要是可列舉的才能拿到。

let obj ={  x :'ABC',
            y : 3,
            z : 'zzz'
            };
for(let name in obj){
    console.log(name , obj[name]);
}

https://ithelp.ithome.com.tw/upload/images/20201005/201204205OwbOLaocO.png

表面上取得的成員是依程式寫入順序取得的,不過ECMAScript並沒有規定for in是否要照寫入順序取出來,如果有一個天才瀏覽器是反著拿也不是不可以,所以取得順序看看就好。


上一篇
第19天:Closure閉包
下一篇
第21天:模板字串
系列文
JavaScript技術手冊閱讀筆記30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言