iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 7
0
Modern Web

小白的JavaScript讀書日記系列 第 7

Day7:基本資料操作-內建物件(二)

Day6的練習答案:
Try1:
這裡只要掌握好索引值就OK!
//使用slice() 取出 Ben

let str = "My name is Ben";
console.log(str.slice(10));

這裡只要掌握好索引值就OK!

Try2:
//用Math.random印出1~10的亂數(顯示的值不包含小數點)

console.log(Math.floor(Math.random()*10)+1)

使用floor將亂數的值有小數點的無條件捨去,
因為 (Math.random()*10)是取0~10以內的亂數,因此+1,
兩組搭配起來即可取1~10的亂數。

以上!


Date物件 - 日期、時間處理

Date物件在實作中也很常使用,他並不像之前提到的字串,陣列等的寫法,他一定要透過建構子建立,有4種寫法:

// First 建立起物件時,以系統的時間為預設值
let dat1 = new Date();
console.log(dat1);

// Second 指定年月日時間的方式,
//這邊要注意月份1~12的設定是0~11,1月要輸入0的意思。
let dat2 = new Date(2020,0,07,08,30,20,20);
console.log(dat2);

// Third 以毫秒換算日期時間 (從1970/01/01 00:00:00開始)
let dat3 = new Date(1122335511);
console.log(dat3);

// Forth 以字串方式傳入日期時間
let dat4 = new Date('2020/01/01');
console.log(dat4)

時間的處理JavaScript也提供了很多方法,下面附上w3c的網站:
https://www.w3schools.com/js/js_date_methods.asp
這邊值得一提的是,時間的加減法,以及時間差的計算。

//得到現在的日期時間
let dat = new Date();
console.log(dat.toLocaleString()); //2020/09/08

//時間往後算20天 (減法)
dat.setDate(dat.getDate()-20);
console.log(dat.toLocaleString()); //2020/08/19

減法中,8號往後算20天的時候,Date物件會自己校正,往前一個月的日期做計算。

在時間差的計算中,Date物件並沒有提供直接的方法,可以由下列程式計算:

//設定需要計算的日期
let dat1 = new Date(2020,09,08);
let dat2 = new Date(2020,08,08);

//將日期用getTime換算成毫秒,再做計算。
//經過的毫秒/(1000*60*60*24)=天數
let diff = (dat1.getTime()-dat2.getTime())/(1000*60*60*24);
console.log(diff);

Try1:
請計算2019.05.28到 2020.09.08過了多少日期。

Global物件 - 全域物件

Global物件,與先前介紹的物件最大的差異就是不用實體化,也不能用一般的方式呼叫成員。
寫法如下:
變數名稱
函數名稱(參數,...)
下面以eval做介紹,eval是一種用來解析算式或者值

let str = 'console.log("eval 函數")';
eval(str); // eval 函數

以上就是將字串console.log("eval 函數")丟給eval解析,所以得到eval 函數。
這邊會特別提到eval是要提醒,盡量不要使用eval,因為eval會執行任意傳給他的代碼,意思就是容易被第三方攻擊。

let obj = {aaa:1, bbb:2};
let prop = 'aaa';
eval('console.log(obj.'+prop+')') // 1

// eval('console.log(obj.'+prop+')') 
//不使用eval的情況下可以改寫成以下,也是我們先前常寫的樣子,得到的結果是一樣的。
console.log(obj[prop]) // 1

另外如果想要獲取{aaa:1, bbb:2}這樣的資料,通常會以JSON.parse替代。

let obj = JSON.parse('{"aaa":1,"bbb":2}');
console.log(obj.aaa); //a

什麼是JSON?

JSON是以JavaScript物件表示法為基礎的一種資料交換語言,性質上與JS相容性很高常用於Ajax上(之後會介紹)。
寫法和JS有些不同之處
1.屬性名稱必須用雙引號包住
2.陣列/物件內元素結尾不可用逗號
3.禁止0開頭的數值
另外,如果要將JS的陣列/物件轉換成JSON字串,可以用JSOM.stringify方法

let obj = {aaa:1, bbb:2};
console.log(JSON.stringify(obj)); //{"aaa":1,"bbb":2}

今日總結

  • Date物件:時間的計算
  • 全域物件的寫法
  • JSON
  • Try1:請計算2019.05.28到 2020.09.08過了多少日期。

今天就先到這裡了...物件也算告一段落,本身理解上還需要多加強,加油了!
明天開始會介紹函數,see you!


上一篇
Day6:基本資料操作-內建物件(一)
下一篇
Day8:彙整重複執行的程式 - 函式(一)
系列文
小白的JavaScript讀書日記30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

0
fillano
iT邦超人 1 級 ‧ 2020-09-09 02:54:51

補充一下:

eval歷史悠久,而且他有自己的context定義,就跟global還有function一樣,有各自的規則。ES3裡面定義的execution context有三種:global, function, eval。ES5加上一條,不直接呼叫eval時,他的scope變成global。ES6又加上一條,就是他可以視為block,所以在eval內用let, const宣告的變數,不會影響到eval外等等。

直接呼叫跟不直接呼叫eval的差別:

(function(){
    let _aaa = {"default":function(){eval("console.log(this)");}};
    let _bbb = {"default":function(){var v=eval;v("console.log(this)");}};
    _aaa.default();//print {default:...}
    _bbb.default();//print Window {...}
})();

不過一般都不建議使用eval,所以這些知不知道也沒差XD

q20038848 iT邦新手 5 級 ‧ 2020-09-09 09:13:28 檢舉

感謝大大的補充!
又學到了

我要留言

立即登入留言