JavaScript中的數組和字符串

知識內容：

1.JavaScript中的數組

2.JavaScript中的字符串

 

 

 

1、JavaScript中的數組

1.JavaScript中的數組是什麼

數組指的是數據的有序列表，每種語言基本上都有數組這個概念，可是JavaScript的數組跟別的語言的數組很不一樣：

• 數組長度能夠動態改變
• 同一個數組中能夠存儲不一樣的數據類型
• 數據的有序集合
• 每一個數組都有一個length屬性，表示的是數組中元素的個數

JavaScript數組從本質上講是一個Array對象

 

 

2.如何建立數組

1 var s1 = ["123", "666", "333"]           // 字面量
2 var s2 = new Array("123", "666", "333")  // 構造函數
3 console.log(s1)
4 console.log(s2)

 

 

3.訪問、修改數組元素

1 //建立一個長度爲 5 的數據
2 var arr = [10, 20, 30, 40, 50];
3 console.log(arr[0]);  //獲取下標爲 0 的元素，  即：10
4 console.log(arr[2]);  //獲取下標爲 2 的元素，  即：30
5 
6 arr[1] = 100;  //把下標爲 1 的元素賦值爲100
7 console.log(arr)

 

 

4.遍歷數組

有3種方法能夠遍歷數組:

• for循環
• for… in
• for each ( ES5 新增)

 如下3種循環方法只要熟練掌握一種就能夠了

 1 // 普通for循環遍歷數組
 2 var arr = [3, 9, 12, 13, 66];       
 3 for(var i = 0; i < arr.length; i++){    //數組長度多長，就遍歷多少次。  循環變量做爲數組的下標
 4     console.log(arr[i]);
 5 }
 6 
 7 // for ... in 遍歷數組
 8 // 每循環一輪，都會把數組的下標賦值給變量index，而後index就拿到了每一個元素的下標。 
 9 //注意:這裏index是元素的下標,不是與元素
10 //對數組來講，index從從0開始順序獲取下標
11 for (var index in arr) {
12   console.log(index);  //循環輸出： 0 1 2 3 4 5
13 }
14 for(var i in arr){
15   console.log(arr[i]);
16 }
17 
18 // for each 遍歷數組
19 //調用數組的forEach方法，傳入一個匿名函數
20 //匿名函數接受兩個參數：   參數1--迭代遍歷的那個元素  參數2：迭代遍歷的那個元素的下標
21 //能夠在匿名函數內部書須要的代碼
22 arr.forEach( function(element, index) {
23   console.log(element);
24 });

 

 

5.數組其餘經常使用方法

 1 obj.length          數組的大小
 2  
 3 obj.push(ele)       尾部追加元素
 4 obj.pop()           尾部獲取一個元素
 5 obj.unshift(ele)    頭部插入元素
 6 obj.shift()         頭部移除元素
 7 obj.splice(start, deleteCount, value, ...)  插入、刪除或替換數組的元素
 8                     obj.splice(n,0,val) 指定位置插入元素
 9                     obj.splice(n,1,val) 指定位置替換元素
10                     obj.splice(n,1)     指定位置刪除元素
11 obj.slice( )        切片
12 obj.reverse( )      反轉
13 obj.join(sep)       將數組元素鏈接起來以構建一個字符串
14 obj.concat(val,..)  鏈接數組
15 obj.sort( )         對數組元素進行排序

(1)獲取數組長度

1 var arr = [10, 20, 30, 40, 50];
2 alert(arr.length);  //彈出：5

 

(2)像數組中添加元素

向數組中添加元素有如下兩種方法(通常都是用第一種)：

• obj.push(ele) 尾部追加元素
• obj.unshift(ele) 頭部插入元素

 1 var s = [1, 2, 3]
 2 // 從尾部添加
 3 s.push("新元素")
 4 console.log(s)
 5 s.push("666")
 6 console.log(s)
 7 
 8 // 從頭部添加
 9 s.unshift("333")
10 console.log(s)

 

(3)從數組中刪除元素

向數組中刪除元素有兩種方法：

• obj.pop() 尾部移除元素
• obj.shift() 頭部移除元素

1 var s = [1, 2, 3, 4, 5, 6]
2 v = s.pop();
3 console.log(v);  // 6
4 console.log(s);  // [1, 2, 3, 4, 5]
5 
6 
7 s.shift();
8 console.log(s);  // [2, 3, 4, 5]

 

(4)數組的轉換方法

toString()轉換方法：返回由數組中每一個值的字符串形式拼接而成的一個以逗號分隔的字符串

join() 方法：toString() 方法只能使用逗號鏈接，而 join() 方法可使用指定的鏈接符鏈接

1 var s = [1, 2, 3, 4, 5, 6]
2 console.log(s.toString())
3 console.log(s)
4 console.log(s.join("+"))
5 console.log(s)

 

(5)數組元素倒置 -> reverse方法

1 var s = [1, 2, 3, 4, 5, 6];
2 
3 console.log(s.reverse());
4 console.log(s);

 

(6)查找指定元素在數組中的索引

1 indexOf(item): 從前面開始向後查找 item 第一次出現的位置
2 lastIndexOf(item): 從尾部開始向前查找 item 第一次出現的位置
3 若是找不到元素，則返回 -1
4 
5 indexOf(item, fromBack): 從第二個參數的位置開向後始查找 item 第一次出現的位置
6 lastIndexOf(item, fromForward): 從第二個參數的位置開始向前查找 item 第一次出現的位置

1 var arr = ["66", 3, 21, "wyb"]
2 console.log(arr.indexOf("wyb"))  // 3
3 console.log(arr.lastIndexOf("wyb"))  // 3

 

(7)其餘方法

其餘方法不詳細介紹，用的少，要用的時候再去查吧

1 obj.splice(start, deleteCount, value, ...)  插入、刪除或替換數組的元素
2 obj.splice(n,0,val) 指定位置插入元素
3 obj.splice(n,1,val) 指定位置替換元素
4 obj.splice(n,1)     指定位置刪除元素
5 obj.slice( )        切片
6 obj.reverse( )      反轉
7 obj.join(sep)       將數組元素鏈接起來以構建一個字符串
8 obj.concat(val,..)  鏈接數組
9 obj.sort( )         對數組元素進行排序

 

 

 

2、JavaScript中的字符串

1.JavaScript字符串介紹

(1)JavaScript中字符串類型相似python中字符串類型：

• 字符串是由字符組成的數組，字符串是不可變的：能夠訪問字符串任意位置的文本，但並未提供修改已知字符串內容的方法
• 另外用雙引號表示的字符串和單引號表示的字符串徹底相同
• 字符串有能夠直接使用的方法

 

(2)定義字符串：

1 var s = "hello world"
2 var name = 'wyb'

 

(3)多行字符串：

1 var line = `
2 多行
3 字符串
4 `
5 
6 // 輸出到終端（要在瀏覽器打開檢查器的終端才能看到）
7 console.log(line)

 

(4)轉義符

在代碼中表示字符串的時候, 不少東西不方便表示, 所以咱們使用轉義符的方式來表示，轉義符是字符串中的特殊符號，由反斜槓（backslash）開始，接另外一個字符結束
經常使用的轉義符有：

• \n // 表示一個換行符
• \t // 表示一個 TAB（製表符）
• \\ // 表示一個反斜槓 \
• \' // 表示一個單引號
• \" // 表示一個雙引號

還有一些別的轉義符，但極少使用，對於這種東西，沒必要記憶，知道有這麼回事就行了

 

(5)字符串替換(格式化)

1 var msg = "wyb"
2 var someThing = `${msg}666`  // 替換字符串(格式化)
3 
4 console.log(someThing)

 

 

2.JavaScript中字符串經常使用方法

 1 obj.length                           長度
 2  
 3 obj.trim()                           移除空白
 4 obj.trimLeft()
 5 obj.trimRight)
 6 obj.charAt(n)                        返回字符串中的第n個字符
 7 obj.concat(value, ...)               拼接
 8 obj.indexOf(substring,start)         子序列位置
 9 obj.lastIndexOf(substring,start)     子序列位置
10 obj.substring(from, to)              根據索引獲取子序列
11 obj.slice(start, end)                切片
12 obj.toLowerCase()                    大寫
13 obj.toUpperCase()                    小寫
14 obj.split(delimiter, limit)          分割
15 obj.search(regexp)                   從頭開始匹配，返回匹配成功的第一個位置(g無效)
16 obj.match(regexp)                    全局搜索，若是正則中有g表示找到所有，不然只找到第一個。
17 obj.replace(regexp, replacement)     替換，正則中有g則替換全部，不然只替換第一個匹配項，
18                                      $數字：匹配的第n個組內容；
19                                      $&：當前匹配的內容；
20                                      $`：位於匹配子串左側的文本；
21                                      $'：位於匹配子串右側的文本
22                                      $$：直接量$符號
23 obj.substr(start, length)  截取字符串
24 obj.substring(start, length)  截取字符串

 

補充 - 字符串經常使用知識點：

 1 var log = function (){
 2     console.log.apply(this, arguments);
 3 };
 4 
 5 // ——字符串經常使用操做——
 6 // 字符串能夠判斷相等、判斷是否包含、相加、取子字符串
 7 // 例子：
 8 // 判斷相等或者包含
 9 log('good' == 'good')
10 log('good' == 'bad')
11 log('good' != 'bad')
12 log('impossible'.includes('possible'))
13 log('believe'.includes('lie'))
14 
15 // +拼接獲得一個新字符串
16 log('very' + 'good')
17 log('very ' + 'good')
18 
19 // 獲得一個你想要的字符串有多種方式
20 // 可是如今有現代的方式, ES6的 模板字符串
21 // 用法以下:
22 var name = 'wyb'
23 var a = `${name}, 你好`
24 log(a)
25 // 簡單說來, 就是 ${} 會被變量替換行成新字符串
26 
27 // 另外JavaScript的字符串中沒有像python那樣的格式化 要想使用python中那樣的格式化要本身寫一個 寫法以下:
28 // JavaScript字符串格式化
29     String.prototype.format = function (args) {
30         var result = this;
31         if (arguments.length > 0) {
32             if (arguments.length == 1 && typeof (args) == "object") {
33                 for (var key in args) {
34                     if (args[key] != undefined) {
35                         var reg = new RegExp("({" + key + "})", "g");
36                         result = result.replace(reg, args[key]);
37                     }
38                 }
39             }
40             else {
41                 for (var i = 0; i < arguments.length; i++) {
42                     if (arguments[i] != undefined) {
43                         var reg = new RegExp("({)" + i + "(})", "g");
44                         result = result.replace(reg, arguments[i]);
45                     }
46                 }
47             }
48         }
49         return result;
50     };
51 
52 // 寫了上面的字符串格式化函數以後就能夠像下面同樣直接使用相似python的字符串格式化了
53 var s = "this a test string for {0}".format("format")
54 var msg = "{0} {1} {2} msg".format("this", "is", "a test")
55 log(s, msg)
56 
57 // 字符串至關於一個 array，能夠用數字下標訪問
58 // s 的長度爲 7，可是下標是從 0 開始的，因此最大下標是6
59 var s = 'iamgood'
60 log(s[0])
61 log(s[1])
62 log(s[2])
63 // ...
64 log(s[6])
65 
66 // 固然也就能夠和 array 同樣用循環遍歷了
67 for(var i=0; i<s.length; i++){
68     log(s[i]);
69 }
70 for (var v in s){
71     log(s[v]);
72 }
73 
74 // 字符串能夠切片, 固然, array 也能夠這樣切片
75 // 語法以下
76 // s.slice(開始下標, 結束下標)
77 var s = 'iamgood'
78 s.slice(0, 3)  // 'iam'
79 s.slice(1, 3)  // 'am'
80 
81 // 省略下標參數意思是取到底
82 s.slice(2)   // 'mgood'

 

 

3.將其餘類型轉化成字符串

• toString()
• String()

 1 var number = 10;
 2 var value = true;
 3 var n = null;
 4 var r;
 5 
 6 alert(String(number));    　// "10"
 7 alert(String(value));    　 // "true"
 8 alert(String(n));          // "null"
 9 alert(String(r));        　// "undefined"
10 
11 
12 # toString(): 能夠傳遞一個參數控制輸出數值的基數，另外null和undefined沒有這個方法
13 var num = 10;
14 alert(num.toString());     // "10"
15 alert(num.toString(2));    // "1010"
16 alert(num.toString(8));    // "12"
17 alert(num.toString(10));   // "10"
18 alert(num.toString(16));   // "a"

 

 

4.拓展：定時器

定時器：setInterval('執行的代碼'，間隔時間)

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8     <script>
 9         function f1(){
10             console.log(1);
11         }
12 
13         // 建立一個定時器
14         //setInterval("alert(123);", 5000);     // 每隔5秒彈框
15         setInterval("f1();", 2000);             // 每隔2秒log出1
16     </script>
17 </body>
18 </html>

 

還有一些別的轉義符，但極少使用，對於這種東西，沒必要記憶，知道有這麼回事就行了。