iT邦幫忙

2021 iThome 鐵人賽

DAY 5
0
Modern Web

追求JS小姊姊30天系列 第 5

追求JS小姊姊系列 Day5 -- 工具人登場

前情提要

突然出現在我身後的三人組是!鄭列,方函式,阿物件

而三人中,站在最前方的就是鄭列。

三人:要知道,我們跟那些姊姊可不一樣,她們只會在那亂叫轉型OO,我們還有自己的血繼限界(??)跟招式的。


工具人A:鄭列

鄭列:我,很擅長收納,且很喜歡根據數字排序的收納方式收納,只要是JS希望我收的,什麼類型的垃圾我都收。
:... (不愧是工具人)

  1. 陣列索取資料的方式:
    上述根據數字的收納方式,就是索取元素會依據其對應的索引值,由於JS的陣列是zero-indexed:元素的索引值從0開始

//我收納的東西
x = ["JS的水","JS不要的垃圾","JS的指甲"]; 

//對應的索引值
[0] = "JS的水"
[1] = "JS不要的垃圾"
[2] = "JS的指甲"
  1. 能存放的資料類型:
    前面有簡單提過基本型別跟複合型別,難道都能放?來看看
let x = ["JS的水",9487,function(){return "cool"},{name:"Js",age:56,}]
console.log(x[0])
console.log(x[1])
console.log(x[2])
console.log(x[3])
  1. 如何為陣列刪減內容
    陣列加減新值,位置有
    頭:(+:unshift,-:shift)
    尾:(+:push,-:pop)
x = ["JS的水","JS不要的垃圾","JS的指甲"]; 


//1.新增內容
//把新的內容加在頭,並回傳新的陣列長度
x.unshift("JS要放在頭的東西")
console.log(x,"unshift");

//把新的內容加在尾,並回傳新的陣列長度
x.push("JS要放在尾的東西")
console.log(x,"push");

//2.減去內容
//頭
x.shift()
console.log(x,"shift");

//尾
x.pop();
console.log(x,"pop");

工具人B:阿物件:

阿物件:我,很擅長收納,喜歡根據名稱的收納方式,只要是JS希望我收的,什麼類型的垃圾我都收。

  1. 索取資料的方式:
    上述根據名稱的名稱收納方式,是指物件的properties(特性),每個properties的構造為:一個key(鍵)搭配一個value (值),不同的properties(逗號)區隔,那如果要進行特性的存取,怎麼做?
    1. 點運算子:.key
    2. []運算子:["key"]
let  x = {
name:"JS",
age:888,
interested:function(){console.log("cool")},
toolMenList: ["array","function","object"],
}
//簡單建立一個方法&屬性
x.friend = String;
console.log(x.friend)

  1. 能存放的資料類型:
let x = {
name:"JS",
age:888,
interested:function(){console.log("cool")},
toolMenList =["array","function","object"],
}
  1. 如何為物件刪減properties:
    增加properties(特性)

    1. 點運算子(.)
    2. []運算子([""])

    減少properties(特性)
    delet + properties 名稱

let  x = {
name:"JS",
age:888,
interested:function(){console.log("cool")},
toolMenList: ["array","function","object"],
}
//簡單建立一個方法&屬性:
//1.點運算子
x.friend = String;
console.log(x.friend)

//2.[]運算子
x["cool"] = "cool!";
console.log(x.cool);


//delet
delet x.cool
//接下來就不會看到cool這個特性了

我:ㄟ不是,所以鄭列啊物件的差異是啥,看來都一樣喜歡收集JS的垃圾 東西阿

鄭列:...我的能耐,可不只這些呢。

-- to be continued --


那今天就到這邊摟!今天分享喜歡的歌是:
李宗盛 Jonathan Lee【寂寞難耐 Suffering of loneliness】Official Music Video
https://www.youtube.com/watch?v=M3k9PhyNEto

每天的休息,是為了後面的追求,明天見。

參考資料:
  1. 008
  2. JavaScript技術手冊
  3. https://ithelp.ithome.com.tw/articles/10267448
  4. https://medium.com/enjoy-life-enjoy-coding/javascript-%E9%97%9C%E6%96%BC-object-%E4%B8%80%E5%8F%A3%E6%B0%A3%E5%85%A8%E8%AA%AA%E5%AE%8C-4bb924bcc79f

上一篇
追求JS小姊姊系列 Day4 -- 我知道很怪,但你不好奇字串姐變身會怎樣嗎(下)
下一篇
追求JS小姊姊系列 Day6 -- 鄭列展現的工具力(上)
系列文
追求JS小姊姊30天30

1 則留言

1
Hooo
iT邦新手 5 級 ‧ 2021-09-20 17:56:31

我最期待的工具三人組出現了!

/images/emoticon/emoticon30.gif

我要留言

立即登入留言