JavaScript入門筆記(2)

weixin_33912246發表於2017-08-06

字串相關

字串基礎

字串歷來是各種程式語言坑最多的地方(個人認為),不同軟體語言在字串上的操作的差別比軟體語言和硬體描述語言的差距都大(一樣是個人認為)
JavaScript的字串在描述上與Python類似,使用""''標識,多行字串使用``標識,同樣,字串是不可變物件,即一旦確定就不可改變

字串操作

需要強調的是,字串操作均是返回一個新的字串,原字串並不會改變

  • 獲取指定位置字元:使用陣列下標的方式獲得
  • 大小寫轉換:全部變為大寫使用toUpperCase(),全部使用小寫使用toLowerCase()
  • 查詢子串位置:indexOf()返回子串的開頭位置,沒有查詢到返回-1
  • 返回指定子串:substring()傳入子串開頭結尾的位置返回子串
var test_string = "hello JavaScript"
console.log(test_string)
console.log(test_string[6])
// J

test_string[2] = "x"
console.log(test_string)
// hello JavaScript

console.log(test_string.toUpperCase())
// HELLO JAVASCRIPT
console.log(test_string.toLowerCase())
// hello javascript
console.log(test_string.substring(2,7))
// llo J
console.log(test_string.indexOf("Script"))
// 10

“模板字串”

  • 使用+可以將多個變數或字串連線
  • ${}可以在字串中直接顯示變數,使用這種方法的字串需要使用``包裹
var test_string2 = "hi";
var test_string3 = "nice to meet you"
console.log(test_string + test_string2 + test_string3)
// hello JavaScripthinice to meet you
console.log(`${test_string},${test_string2},${test_string3}`)
// hello JavaScript,hi,nice to meet you

列表

列表基礎

JavaScript的列表與Python的列表相似,應該大部分動態語言的列表都是這個樣子:索引自由,切片自由,不繫結資料型別。與Python不同的是JavaScript列表更加“自由”:

  • 可以直接修改列表的length屬性修改列表長度,不足位用undefined補齊

大多數其他程式語言不允許直接改變陣列的大小,越界訪問索引會報錯。然而,JavaScript的Array卻不會有任何錯誤。在編寫程式碼時,不建議直接修改Array的大小,訪問索引時要確保索引不會越界。

  • 賦值超出列表長度修改列表長度,不足位用empty items補齊
var testlist = [1,2,"d"]
console.log(testlist)
// [ 1, 2, 'd' ]
console.log(testlist.length)
// 3
testlist[6] = "c"
console.log(testlist)
// [ 1, 2, 'd', <3 empty items>, 'c' ]
testlist.length = 4
console.log(testlist)
// [ 1, 2, 'd', <1 empty item> ]
testlist.length = 8
console.log(testlist)
// [ 1, 2, 'd', <5 empty items> ]

列表操作

  • 查詢:indexOf()查詢元素的索引,若未查到則返回-1
console.log(testlist) //[ 6, 5, 3, 2, 1 ]
console.log(testlist.indexOf(3)) //2
console.log(testlist.indexOf("a")) //-1
  • 切片:slice()方法,第一個引數是開始索引,第二個引數是結束索引
var testlist = [1,2,3,4,5]
console.log(testlist.slice(1,3)) // [ 2, 3 ]
  • 結尾處修改:pop()方法push(),分別在結尾處刪除和新增元素
testlist.push("a")
console.log(testlist) //[ 1, 2, 3, 4, 5, 'a' ]
console.log(testlist.pop()) //a
console.log(testlist) //[ 1, 2, 3, 4, 5 ]
  • 開頭處修改:shift()unshift(),分別在開頭出刪除和新增元素
testlist.unshift("a")
console.log(testlist) //[ 'a', 1, 2, 3, 4, 5 ]
console.log(testlist.shift()) //a
console.log(testlist) //[ 1, 2, 3, 4, 5 ]
  • 任意修改:splice()是在指定位置(第一個引數)刪除指定個(第二個引數)元素,再從該位置新增元素(剩餘引數)
console.log(testlist) //[ 1, 2, 3, 4, 5 ]
testlist.splice(1,3,"a","b")
console.log(testlist) //[ 1, 'a', 'b', 5 ]
  • 順序修改:sort()reverse()函式,分別為排序和反轉函式
var testlist = [3,2,6,5,1]
testlist.sort()
console.log(testlist) //[ 1, 2, 3, 5, 6 ]
testlist.reverse()
console.log(testlist) //[ 6, 5, 3, 2, 1 ]
  • 連線:()(),分別是連線成列表和字串,這兩個函式並不改變原列表,而是將結果通過返回值返回
console.log(testlist) //[ 6, 5, 3, 2, 1 ]
console.log(testlist.concat(8,9,10)) //[ 6, 5, 3, 2, 1, 8, 9, 10 ]
console.log(testlist) //[ 6, 5, 3, 2, 1 ]
console.log(testlist.join("-")) //6-5-3-2-1
console.log(testlist) //[ 6, 5, 3, 2, 1 ]

物件

物件概述

JavaScript的物件是一種無序的集合資料型別,它由若干鍵值對組成。

由此可以看出,JavaScript中的物件類似於Python中的字典,是鍵-值對的集合,同時也是無序的,也就是說每次遍歷的時候順序可能有所不同
物件的宣告和Python中的字典非常相似,使用{}括起來的一些key:value

var test_ob = {
    name:"javascript",
    data:10,
    "ob-test":true
}

若鍵的名稱為一般的變數名,則可以不使用""包裹,在訪問的時候可同時使用.key["key"]的方式訪問。若使用的鍵名稱使用了變數名以外的命名,則只能使用["key"]的方式訪問

console.log(test_ob) //{ name: 'javascript', data: 10, 'ob-test': true }
console.log(test_ob.name) //javascript
console.log(test_ob["name"]) //javascript
console.log(test_ob["ob-test"]) //true
console.log(test_ob.x) //undefined

同時,若是訪問了不存在的鍵,JavaScript並不會報錯,而是返回undefined

物件鍵-值對動態改變

與一般的動態語言相似,JavaScript物件的鍵值對可以動態增加和刪除

  • 對一個不存在的鍵值複製可增加該鍵值對
  • 使用delete可以刪除一個鍵值對
console.log(test_ob) //{ name: 'javascript', data: 10, 'ob-test': true }
test_ob.a = 12
console.log(test_ob) //{ name: 'javascript', data: 10, 'ob-test': true, a: 12 }
delete test_ob.a
console.log(test_ob) //{ name: 'javascript', data: 10, 'ob-test': true }

物件鍵存在性查詢

要查詢一個鍵存不存在,除了直接訪問以外,還有inhasOwnProperty兩種方法

  • in 可以查詢該鍵是否存在於這個物件中,並不關心是否是繼承得來的
  • hasOwnProperty 查詢該鍵是否屬於這個物件且不是繼承得來的
console.log(test_ob) //{ name: 'javascript', data: 10, 'ob-test': true }
console.log("a" in test_ob) //false
console.log("name" in test_ob) //true
console.log(test_ob.hasOwnProperty("a")) //false
console.log(test_ob.hasOwnProperty("name")) //true

相關文章